Merge pull request #161 from openmhz/donate

Donate

account/server/controllers/systems.js

@@ -18,6 +18,7 @@ exports.getUserSystems = async function (_id) {
       name,
       shortName,
       description,
+      status,
       systemType,
       city,
       state,
@@ -31,6 +32,7 @@ exports.getUserSystems = async function (_id) {
       name,
       shortName,
       description,
+      status,
       systemType,
       city,
       state,

account/server/models/system.js

@@ -10,6 +10,7 @@ var systemSchema = mongoose.Schema({
   city: String,
   state: String,
   description: String,
+  status: String,
   showScreenName: Boolean,
   planType: {type: Number, default: 0},
   userId:  mongoose.Schema.Types.ObjectId,

admin/server/controllers/systems.js

@@ -61,7 +61,7 @@ exports.listUserSystems = async function (req,res,next) {
   for (let index = 0; index < users.length; index++) {
     let user = users[index].toObject();
     const userId = new mongoose.Types.ObjectId(user._id);
-    const systems = await System.find({ userId: userId }, "name shortName description systemType city state county country lastActive");
+    const systems = await System.find({ userId: userId }, "name shortName description status systemType city state county country lastActive");
 
     user["systems"] = systems;
     list.push(user);
@@ -89,6 +89,7 @@ exports.listAllSystems = async function (req, res, next) {
       name,
       shortName,
       description,
+      status,
       systemType,
       city,
       state,
@@ -105,6 +106,7 @@ exports.listAllSystems = async function (req, res, next) {
       name,
       shortName,
       description,
+      status,
       systemType,
       city,
       state,
@@ -153,6 +155,7 @@ exports.listSystems = async function (req, res, next) {
       name,
       shortName,
       description,
+      status,
       systemType,
       city,
       state,
@@ -167,6 +170,7 @@ exports.listSystems = async function (req, res, next) {
       name,
       shortName,
       description,
+      status,
       systemType,
       city,
       state,
@@ -359,6 +363,7 @@ exports.updateSystem = async function (req, res, next) {
   res.locals.system.county = res.locals.county;
   res.locals.system.country = res.locals.country;
   res.locals.system.description = res.locals.description;
+  res.locals.system.status = res.locals.status;
   res.locals.system.systemType = res.locals.systemType;
   res.locals.system.showScreenName = res.locals.showScreenName;
   res.locals.system.allowContact = res.locals.allowContact;
@@ -377,6 +382,7 @@ exports.updateSystem = async function (req, res, next) {
     name,
     shortName,
     description,
+    status,
     systemType,
     city,
     state,
@@ -391,6 +397,7 @@ exports.updateSystem = async function (req, res, next) {
     name,
     shortName,
     description,
+    status,
     systemType,
     city,
     state,
@@ -428,7 +435,7 @@ exports.validateSystem = async function (req, res, next) {
     res.locals.name = req.body.name.replace(/[^\w\s\.\,\-\_]/gi, '');
 
     if (!req.body.description || (req.body.description.length < 2)) {
-      console.error("ERROR: Validate System - req.body.description");
+      console.error("ERROR: Validate System - req.body.description: " + req.body.description);
       res.status(500)
       res.json({
         success: false,
@@ -436,7 +443,9 @@ exports.validateSystem = async function (req, res, next) {
       });
       return;
     }
-    res.locals.description = req.body.description.replace(/[^\w\s\.\,\-\_]/gi, '');
+    res.locals.description = req.body.description.replace(/[^\w\s\.\,\-\_\(\)\'\"\!\?\*\&\^\%\$\#\@\r\n\t\`\~\[\]\/\\]/gi, '');
+
+    res.locals.status = req.body.status.replace(/[^\w\s\.\,\-\_\(\)\'\"\!\?\*\&\^\%\$\#\@\r\n\t\`\~\[\]\/\\]/gi, '');
 
     if (!req.body.shortName || (req.body.shortName.length < 2)) {
       console.error("ERROR: Validate System - req.body.shortName");
@@ -546,6 +555,7 @@ exports.createSystem = async function (req, res, next) {
     name,
     shortName,
     description,
+    status,
     systemType,
     city,
     state,
@@ -558,6 +568,7 @@ exports.createSystem = async function (req, res, next) {
     name,
     shortName,
     description,
+    status,
     systemType,
     city,
     state,
@@ -584,6 +595,7 @@ exports.createSystem = async function (req, res, next) {
     name,
     shortName,
     description,
+    status,
     systemType,
     city,
     state,
@@ -598,6 +610,7 @@ exports.createSystem = async function (req, res, next) {
     name,
     shortName,
     description,
+    status,
     systemType,
     city,
     state,

admin/server/models/system.js

@@ -11,6 +11,7 @@ var systemSchema = mongoose.Schema({
   city: String,
   state: String,
   description: String,
+  status: String,
   showScreenName: Boolean,
   allowContact: {
 		type: Boolean,

admin/src/System/System.js

@@ -236,7 +236,6 @@ const System = () => {
       setGroupOrder(newOrder);
     }
   }, [groupsData])
-
   useEffect(() => {
     if (isSystemsSuccess && systemsData.stats[shortName]) {
       processStatistics(systemsData.stats[shortName])
@@ -328,7 +327,12 @@ const System = () => {
                 <Header size="small">Description</Header>
                 {system.description}
               </Segment>
-
+              {system.status.length>0 &&
+              <Segment>
+                <Header size="small">Status Message</Header>
+                {system.status}
+              </Segment>
+              }
               <Segment clearing={true}>
                 <Button
                   color="red"

admin/src/System/SystemForm.js

@@ -18,6 +18,8 @@ const SystemForm = (props) => {
   const [name, setName] = useState("");
   const [shortName, setShortName] = useState("");
   const [description, setDescription] = useState("");
+  const [status, setStatus] = useState("");
+  const [showStatus, setShowStatus] = useState(false);
   const [systemType, setSystemType] = useState("state");
   const [systemState, setSystemState] = useState("");
   const [city, setCity] = useState("");
@@ -29,6 +31,7 @@ const SystemForm = (props) => {
   const [nameError, setNameError] = useState(false);
   const [shortNameError, setShortNameError] = useState(false);
   const [descriptionError, setDescriptionError] = useState(false);
+  const [statusError, setStatusError] = useState(false);
   const [systemStateError, setSystemStateError] = useState(false);
   const [cityError, setCityError] = useState(false);
   const [countyError, setCountyError] = useState(false);
@@ -40,6 +43,8 @@ const SystemForm = (props) => {
       setName(props.system.name);
       setShortName(props.system.shortName);
       setDescription(props.system.description);
+      setStatus(props.system.status);
+      setShowStatus(props.system.status.length > 0);
       setSystemType(props.system.systemType);
       setCity(props.system.city);
       setSystemState(props.system.state)
@@ -82,6 +87,14 @@ const SystemForm = (props) => {
       setDescriptionError(false);
     }
 
+    if (showStatus && status.length < 4) {
+      setStatusError(true);
+      messages.push("If showing a aStatus message it must be at least 4 characters");
+      error = true;
+    } else {
+      setStatusError(false);
+    }
+
     if (
       systemType === "state" ||
       systemType === "city" ||
@@ -130,12 +143,17 @@ const SystemForm = (props) => {
     return error;
   }
 
+  const handleShowStatusCheckboxChange = () => {
+    if (showStatus) {
+      setStatus("");
+    }
+    setShowStatus((current) => !current);
+  }
 
   const handleAllowContactCheckboxChange = () => {
     setAllowContact((current) => !current);
   }
 
-
   const handleScreenNameCheckboxChange = () => {
     setShowScreenName((current) => !current);
   }
@@ -152,6 +170,7 @@ const SystemForm = (props) => {
         name,
         shortName,
         description,
+        status,
         systemType,
         city,
         state: systemState,
@@ -303,7 +322,24 @@ const SystemForm = (props) => {
           rows={2}
           placeholder="Description of system..."
         />
-
+        <Divider horizontal> System Status </Divider>
+        <Form.Field>
+          <Checkbox
+            onChange={handleShowStatusCheckboxChange}
+            checked={showStatus}
+            label="Show Status Message" />
+        </Form.Field>
+        <Form.TextArea
+          label="Status Message"
+          name="status"
+          onChange={e => setStatus(e.target.value)}
+          error={statusError}
+          value={status}
+          disabled={!showStatus}
+          rows={1}
+          placeholder="System status..."
+        />
+        Only needed if things are not working. Provide notification on maintenance or is you know if some channels are not available.
         <Divider horizontal><Icon name="marker" />Location</Divider>
         <Form.Group inline>
           <label>System Type</label>

backend/controllers/systems.js

@@ -127,6 +127,7 @@ exports.get_systems = async function (req, res) {
         lastActive: results[result].lastActive,
         callAvg: results[result].callAvg,
         description: results[result].description,
+        status: results[result].status,
         allowContact: results[result].allowContact,
         clientCount: clientCount
       }

backend/models/system.js

@@ -11,6 +11,7 @@ var systemSchema = mongoose.Schema({
   city: String,
   state: String,
   description: String,
+  status: String,
   showScreenName: Boolean,
   allowContact: {
 		type: Boolean,

frontend/src/Call/CallPlayer.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useParams } from 'react-router-dom';
 import MediaPlayer from "./components/MediaPlayer";
-import SupportModal from "./components/SupportModal";
+import SupportModal from "../Common/SupportModal";
 import CallInfo from "./components/CallInfo";
 import ListCalls from "./components/ListCalls";
 import { useSelector, useDispatch } from 'react-redux'
@@ -14,13 +14,18 @@ import {
   Sticky,
   Menu,
   Icon,
-  Sidebar
+  Sidebar,
+  Message,
+  MessageHeader,
+  Button,
+  ButtonContent
 } from "semantic-ui-react";
 import "./CallPlayer.css";
 import queryString from '../query-string';
 import io from 'socket.io-client';
 import { useCallLink } from "./components/CallLinks";
 import "./CallPlayer.css";
+import { set } from "date-fns";
 
 
 const socket = io(process.env.REACT_APP_BACKEND_SERVER);
@@ -30,6 +35,7 @@ const socket = io(process.env.REACT_APP_BACKEND_SERVER);
 function CallPlayer(props) {
 
   const { shortName } = useParams();
+  const system = props.system;
   const selectCallId = props.selectCallId;
   const callsData = props.callsData;
   const handleNewer = props.handleNewer;
@@ -45,6 +51,7 @@ function CallPlayer(props) {
 
   const backgroundAutoplay = useSelector((state) => state.callPlayer.backgroundAutoplay);
   const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
+  const [statusVisible, setStatusVisible] = useState(false);
   const [autoPlay, setAutoPlay] = useState(true);
   const [currentCall, setCurrentCall] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -160,15 +167,31 @@ useEffect(() => {
     }
   }, [selectCallId])
 
+  useEffect(() => {
+    if (system.status && system.status.length > 0) {
+        setStatusVisible(true);
+    }
+  }, [system])
+
+  const handleStatusDismiss = () => {
+    setStatusVisible(false);
+  }
 
   return (
     <div ref={positionRef}>
       <Container className="main" >
+        {statusVisible &&
+      <Sticky offset={60} context={positionRef}>
+            <Message floating onDismiss={handleStatusDismiss} warning> <MessageHeader>System Status</MessageHeader>{system.status}</Message>
+            </Sticky>
+        }
         <Sidebar.Pushable>
           <Sidebar.Pusher
             style={{ minHeight: '100vh' }}
           >
+
             <div ref={loadNewerRef} />
+            
             <ListCalls callsData={callsData} activeCallId={currentCallId} talkgroups={talkgroupsData ? talkgroupsData.talkgroups : false} playCall={playCall} />
             <div ref={loadOlderRef} style={{ height: 50 }} />
           </Sidebar.Pusher>
@@ -184,7 +207,12 @@ useEffect(() => {
         <Menu.Item active={autoPlay} onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
         <MediaPlayer call={currentCall} playSilence={silenceCount} onEnded={callEnded} onPlayPause={handlePlayPause} />
         <Menu.Menu position="right" className="desktop-only">
-          <Menu.Item><SupportModal /></Menu.Item>
+          <Menu.Item><SupportModal trigger={<Button color='grey' animated='fade'>
+    <ButtonContent visible color="red">
+      <Icon name='heart' /> Donate
+    </ButtonContent>
+    <ButtonContent hidden>Thank You</ButtonContent>
+  </Button>} /></Menu.Item>
           <Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>
           <Menu.Item><a href={callLink}><Icon name="at" />Link</a></Menu.Item>
         </Menu.Menu>

frontend/src/Call/Calls.js

@@ -14,7 +14,9 @@ import {
   Label,
   Menu,
   Icon,
-  Sidebar
+  Sidebar,
+  Message,
+  Sticky
 } from "semantic-ui-react";
 import "./CallPlayer.css";
 import queryString from '../query-string';
@@ -447,9 +449,10 @@ function Calls(props) {
           </Menu.Item>
         </Menu.Menu>
       </Menu>
+
       {activityVisible
         ? <Activity navigate={handleActivityNavigate} />
-        : <CallPlayer callsData={callsData} selectCallId={selectCallId} initialCallId={initialCallId} handleNewer={handleNewer} handleOlder={handleOlder} />
+        : <CallPlayer system={system} callsData={callsData} selectCallId={selectCallId} initialCallId={initialCallId} handleNewer={handleNewer} handleOlder={handleOlder} />
       }
     </div>
   );

frontend/src/Common/SupportModal.js

@@ -2,9 +2,11 @@ import {useState} from 'react';
 import {
   Modal,
   Button,
+  ButtonContent,
+  ButtonGroup,
+  Divider,
   Icon
 } from "semantic-ui-react";
-import "./FilterModal.css";
 
 
 function SupportModal(props) {
@@ -14,16 +16,18 @@ function SupportModal(props) {
   const handleClose = () => props.onClose();
 
   return (
-    <Modal open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)} trigger={<div><Icon name="coffee" />Support OpenMHz</div>} size='tiny' >
+    <Modal open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)} trigger={props.trigger} size='tiny' >
       <Modal.Header>Support OpenMHz</Modal.Header>
       <Modal.Content image>
         <Icon size='massive' name="coffee" />
         <Modal.Description>
           <p>If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.</p>
-          <p>No worries if not, I am not having problems keeping it going.</p>
+
-          <a href="https://github.com/sponsors/robotastic"><Button>
+          <Divider horizontal>Donate</Divider>
-            Support
+          <a href="https://github.com/sponsors/robotastic"><Button ><Icon name="github"/>GitHub Sponsors</Button></a>
-          </Button></a>
+          
+          <a href="https://patreon.com/OpenMHz"><Button ><Icon name="patreon"/>Patreon </Button></a>
+
         </Modal.Description>
 
       </Modal.Content>

frontend/src/Event/EventPlayer.js

@@ -1,21 +1,21 @@
-import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
-import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+import {  useNavigate } from 'react-router-dom';
-import { skipToken } from '@reduxjs/toolkit/query'
 import MediaPlayer from "../Call/components/MediaPlayer";
 
-import SupportModal from "../Call/components/SupportModal";
+import SupportModal from "../Common/SupportModal";
 import EventCallInfo from "./EventCallInfo";
 import ListEventCalls from "./ListEventCalls";
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch } from 'react-redux'
 
 import {
   Container,
-  Label,
   Rail,
   Sticky,
   Menu,
   Icon,
-  Sidebar
+  Sidebar,
+  Button,
+  ButtonContent
 } from "semantic-ui-react";
 
 
@@ -118,7 +118,12 @@ function EventPlayer(props) {
         <Menu.Item active={autoPlay} onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
         <MediaPlayer call={currentCall} onEnded={callEnded} onPlayPause={handlePlayPause} />
         <Menu.Menu position="right" className="desktop-only">
-          <Menu.Item><SupportModal /></Menu.Item>
+          <Menu.Item><SupportModal trigger={<Button color='grey' animated='fade'>
+    <ButtonContent visible color="red">
+      <Icon name='heart' /> Donate
+    </ButtonContent>
+    <ButtonContent hidden>Thank You</ButtonContent>
+  </Button>} /></Menu.Item>
           <Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>
           <Menu.Item><a href={callLink}><Icon name="at" />Link</a></Menu.Item>
         </Menu.Menu>

frontend/src/Main/Main.js

@@ -1,10 +1,13 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from 'react-router-dom'
 import SystemCard from "../System/SystemCard";
+import SupportModal from "../Common/SupportModal";
 import "./Main.css";
 import { createMedia } from "@artsy/fresnel";
 import {
   Button,
+  ButtonGroup,
+  ButtonContent,
   Container,
   Divider,
   Grid,
@@ -40,7 +43,7 @@ const { Media } = AppMedia;
  * such things.
  */
 const HomepageHeading = ({ mobile }) => (
-  <Container text style={{paddingBottom: '0px'}} >
+  <Container text style={{ paddingBottom: '0px' }} >
     <Header
       as='h1'
       content='Share the Air'
@@ -83,52 +86,53 @@ General flow:
 - componentDidMount(): it will call fetchSystem() this will perform an HTTP request if Systems does not exist, and then add System to Props
 */
 
-const DesktopContainer = (props) => {  
+const DesktopContainer = (props) => {
   const [fixed, setFixed] = useState(false);
-  const hideFixedMenu = () => setFixed(false) 
+  const hideFixedMenu = () => setFixed(false)
   const showFixedMenu = () => setFixed(true)
-  
-    const { children } = props
 
-    return (
+  const { children } = props
-      <Media greaterThanOrEqual="tablet">
+
-        <div className="relative">
+  return (
+    <Media greaterThanOrEqual="tablet">
+      <div className="relative">
         <div className="static-gradient blue absolute z-0" >
           <div className="static-gradient-bg absolute z-5"></div>
         </div>
-          <Segment
+        <Segment
-            textAlign='center'
+          textAlign='center'
-            style={{  padding: '1em 0em',
+          style={{
+            padding: '1em 0em',
             borderBottom: '0px',
             boxShadow: 'none',
             height: '400px'
-            }}
+          }}
-            vertical
+          vertical
+        >
+
+          <Menu
+            fixed={fixed ? 'top' : null}
+            inverted={true}
+            pointing={false}
+            secondary={true}
+            size='huge'
+            style={{ marginRight: '0px' }}
           >
+            <Container>
+              <Menu.Item ><Header as='h3' inverted>{process.env.REACT_APP_SITE_NAME}</Header></Menu.Item>
+              <Link to="/systems"><Menu.Item link >Listen</Menu.Item></Link>
+              <Link to="/events"><Menu.Item link >Events</Menu.Item></Link>
+              <Link to="/about"><Menu.Item link >About</Menu.Item></Link>
+            </Container>
+          </Menu>
+          <HomepageHeading />
+        </Segment>
+      </div>
 
-            <Menu
+      {children}
-              fixed={fixed ? 'top' : null}
+    </Media>
-              inverted={true}
+  )
-              pointing={false}
+}
-              secondary={true}
-              size='huge'
-              style={{  marginRight: '0px'}}
-            >
-              <Container>
-                <Menu.Item ><Header as='h3' inverted>{process.env.REACT_APP_SITE_NAME}</Header></Menu.Item>
-                <Link to="/systems"><Menu.Item link >Listen</Menu.Item></Link>
-                <Link to="/events"><Menu.Item link >Events</Menu.Item></Link>
-                <Link to="/about"><Menu.Item link >About</Menu.Item></Link>
-              </Container>
-            </Menu>
-            <HomepageHeading />
-          </Segment>
-          </div>
-
-        {children}
-      </Media>
-    )
-  }
 
 /*
 DesktopContainer.propTypes = {
@@ -146,55 +150,57 @@ const MobileContainer = (props) => {
   const handleToggle = () => setSidebarOpened(!sidebarOpened)
 
 
-    const { children } = props
+  const { children } = props
 
-    return (
+  return (
-      <Media lessThan="tablet">
+    <Media lessThan="tablet">
-        <Sidebar.Pushable>
+      <Sidebar.Pushable>
-          <Sidebar as={Menu} animation='uncover' inverted vertical visible={sidebarOpened} id="menu-bar">
+        <Sidebar as={Menu} animation='uncover' inverted vertical visible={sidebarOpened} id="menu-bar">
-            <Menu.Item  active>
+          <Menu.Item active>
-              Home
+            Home
-            </Menu.Item>
+          </Menu.Item>
-            <Menu.Item ><Link to="/systems">Systems</Link></Menu.Item>
+          <Menu.Item ><Link to="/systems">Systems</Link></Menu.Item>
-            <Menu.Item ><Link to="/about">About</Link></Menu.Item>
+          <Menu.Item ><Link to="/about">About</Link></Menu.Item>
-          </Sidebar>
+        </Sidebar>
 
-          <Sidebar.Pusher
+        <Sidebar.Pusher
-            dimmed={sidebarOpened}
+          dimmed={sidebarOpened}
-            onClick={handlePusherClick}
+          onClick={handlePusherClick}
-            style={{ minHeight: '100vh' }}
+          style={{ minHeight: '100vh' }}
-          >
+        >
           <div className='relative'>
-          <div className="static-gradient blue absolute z-0">
+            <div className="static-gradient blue absolute z-0">
-            <div className="static-gradient-bg absolute"></div>
+              <div className="static-gradient-bg absolute"></div>
-          </div>
+            </div>
             <Segment
               textAlign='center'
-              style={{ minHeight: 350, padding: '1em 0em',
+              style={{
-              borderBottom: '0px',
+                minHeight: 350, padding: '1em 0em',
-              boxShadow: 'none',
+                borderBottom: '0px',
-              height: '300px'}}
+                boxShadow: 'none',
+                height: '300px'
+              }}
               vertical
             >
 
-            <Container>
+              <Container>
 
-            <Menu inverted secondary size='large'>
+                <Menu inverted secondary size='large'>
-              <Menu.Item onClick={handleToggle}>
+                  <Menu.Item onClick={handleToggle}>
-                <Icon name='sidebar' />
+                    <Icon name='sidebar' />
-              </Menu.Item>
+                  </Menu.Item>
-              <Menu.Item header>{process.env.REACT_APP_SITE_NAME}</Menu.Item>
+                  <Menu.Item header>{process.env.REACT_APP_SITE_NAME}</Menu.Item>
-            </Menu>
+                </Menu>
-          </Container>
+              </Container>
               <HomepageHeading mobile />
             </Segment>
           </div>
-            {children}
+          {children}
-          </Sidebar.Pusher>
+        </Sidebar.Pusher>
-        </Sidebar.Pushable>
+      </Sidebar.Pushable>
-      </Media>
+    </Media>
-    )
+  )
-  }
+}
 /*
 MobileContainer.propTypes = {
   children: PropTypes.node,
@@ -213,16 +219,16 @@ const Main = (props) => {
   const [visible, setVisible] = useState(true);
   const [currentSystem, setCurrentSystem] = useState(0);
   const navigate = useNavigate();
-  const {data:systems, isSuccess} = useGetSystemsQuery();   //= selectAllSystems();
+  const { data: systems, isSuccess } = useGetSystemsQuery();   //= selectAllSystems();
 
   function useInterval(callback, delay) {
     const savedCallback = useRef();
-  
+
     // Remember the latest callback.
     useEffect(() => {
       savedCallback.current = callback;
     }, [callback]);
-  
+
     // Set up the interval.
     useEffect(() => {
       function tick() {
@@ -235,133 +241,159 @@ const Main = (props) => {
     }, [delay]);
   }
 
-    const advanceSystem = () => {
+  const advanceSystem = () => {
-      if (isSuccess) {
+    if (isSuccess) {
-        let nextSystem = currentSystem + 1;
+      let nextSystem = currentSystem + 1;
-        if (nextSystem > systems.systems.length) {
+      if (nextSystem > systems.systems.length) {
-          nextSystem = 0;
+        nextSystem = 0;
-        }
-        setCurrentSystem(nextSystem);
-        setVisible(!visible);
       }
-        //this.setState({ visible: !this.state.visible, currentSystem });
+      setCurrentSystem(nextSystem);
+      setVisible(!visible);
     }
-  
+    //this.setState({ visible: !this.state.visible, currentSystem });
-      useInterval( ()=>{ advanceSystem()}, 3000)
+  }
+
+  useInterval(() => { advanceSystem() }, 3000)
 
 
 
-//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
+  //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
-//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
+  //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
 
   let system = false;
   if (isSuccess) {
-   system = systems.systems[currentSystem];
+    system = systems.systems[currentSystem];
   }
   return (
-  <>
+    <>
-  <style>{mediaStyles}</style>
+      <style>{mediaStyles}</style>
-  <ResponsiveContainer>
+      <ResponsiveContainer>
-    <div style={{  top: '-120px', position: 'relative' }}>
+        <div style={{ top: '-120px', position: 'relative' }}>
-    <Segment style={{ padding: ' 0em', height: '350px', backgroudColor: '#FFF'}} vertical>
+          <Segment style={{ padding: ' 0em', height: '350px', backgroudColor: '#FFF' }} vertical basic>
-    <Grid columns='equal' stackable textAlign='center'  style={{ height: '350px', marginRight: '0px' }}>
+            <Grid columns='equal' stackable textAlign='center' style={{ height: '350px', marginRight: '0px' }}>
-      <Grid.Row textAlign='center'>
+              <Grid.Row textAlign='center'>
-        <Grid.Column  style={{ paddingBottom: '4em', paddingTop: '2em', maxWidth: 450  }}>
+                <Grid.Column style={{ paddingBottom: '4em', paddingTop: '2em', maxWidth: 450 }}>
-        { system && (<Transition visible={visible} animation='pulse' duration={500}>
+                  {system && (<Transition visible={visible} animation='pulse' duration={500}>
 
-        <SystemCard keepShort={true} system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)}/>
+                    <SystemCard keepShort={true} system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
 
-      </Transition>)}
+                  </Transition>)}
-        </Grid.Column>
+                </Grid.Column>
-        <Grid.Column style={{ paddingBottom: '0em', paddingTop: '6em', maxWidth: 450  }}>
+                <Grid.Column style={{ paddingBottom: '0em', paddingTop: '6em', maxWidth: 450 }}>
-        <Link to="/systems">
+                  <Link to="/systems">
-        <Button primary size='huge' id="listen" animated onClick={(e) => navigate("/system/" + system.shortName)}>
+                    <Button primary size='huge' id="listen" animated onClick={(e) => navigate("/system/" + system.shortName)}>
-          <Button.Content visible><Icon name='headphones' />
+                      <Button.Content visible><Icon name='headphones' />
-          <Icon name='right arrow' /></Button.Content>
+                        <Icon name='right arrow' /></Button.Content>
-          <Button.Content hidden>Listen</Button.Content>
+                      <Button.Content hidden>Listen</Button.Content>
-        </Button>
+                    </Button>
-        </Link>
+                  </Link>
-        </Grid.Column>
+                </Grid.Column>
-      </Grid.Row>
+              </Grid.Row>
-    </Grid>
+            </Grid>
-    </Segment>
+          </Segment>
-
+          <Segment style={{ padding: '0em' }} vertical>
-    <Segment style={{ padding: '0em' }} vertical>
+            <Grid columns='equal' stackable textAlign='center' style={{ height: '150px', marginRight: '0px' }}>
-      <Grid celled='internally' columns='equal' stackable>
+              <Grid.Row textAlign='center'>
-        <Grid.Row textAlign='center'>
+                <Grid.Column style={{ paddingBottom: '4em', paddingTop: '2em', maxWidth: 450 }}>
-          <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
+                  <ButtonGroup size='large'>
-            <Header  as='h3' style={{ fontSize: '2em' }}>
+                    <SupportModal trigger={
-              <Icon color='orange' name='list' />All The Calls
+                    <Button color='red' animated='fade'>
-            </Header>
+                      <ButtonContent visible>
-            <p style={{ fontSize: '1.33em' }}>Every call, on every talkgroup is recorded</p>
+                        <Icon name='heart' /> Donate
-          </Grid.Column>
+                      </ButtonContent>
-          <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
+                      <ButtonContent hidden>Thank You</ButtonContent>
-            <Header as='h3' style={{ fontSize: '2em' }}>
+                    </Button>
-              <Icon color='orange' name='checked calendar' />
+                    } />
-              Go back in time
+                    <Button href="https://podcasts.apple.com/us/podcast/openmhz/id1675187518">
-            </Header>
+                    <Icon name='podcast' /> Events Podcast
-            <p style={{ fontSize: '1.33em' }}>
+                    </Button>
-              Missed a call? Not a problem, everything is archived!
+                    <Button href="https://apps.apple.com/us/app/openmhz/id6466666994">
-            </p>
+                    <Icon name='app store ios' /> iOS App
-          </Grid.Column>
+                    </Button>
-        </Grid.Row>
+                  </ButtonGroup>
-      </Grid>
+                </Grid.Column>
-    </Segment>
+              </Grid.Row>
-    <Segment style={{ padding: '8em 0em' }} vertical>
+            </Grid>
-      <Container text>
+          </Segment>
-        <Header as='h3' style={{ fontSize: '2em' }}>
-          Don't just scan, hear it all!
-        </Header>
-        <p style={{ fontSize: '1.33em' }}>
-        Most large cities use trunked radio systems to get the most use out of their assigned radio spectrum. With trunked systems, the transmission are constantly hopping to different frequencies. Using a cheap Software Defined Radio (SDR), it is possible capture all of the transmission on a system.
-        Instead of scanning to a single frequency, SDR capturea wide swathes of spectrum, covering all of the frequencies a system could use.
-        </p>
-        <Divider
-          as='h4'
-          className='header'
-          horizontal
-          style={{ margin: '3em 0em', textTransform: 'uppercase' }}
-        >
-          Get Involved
-        </Divider>
-        <Header as='h3' style={{ fontSize: '2em' }}>
-          Want to record your local radio system?
-        </Header>
-        <p style={{ fontSize: '1.33em' }}>
-        Join us! Record a local radio system and share it with the world. If you have a spare computer, it is easy to get started. With a $25 SDR or two, you can capture an entire system.
-        It does take a little bit of work to get things setup, but we are here to help and answer questions.
-        </p>
-        <a href="https://github.com/robotastic/trunk-recorder/blob/master/README.md">
-        <Button size='large'>
-          Learn More
-        </Button>
-        </a>
-      </Container>
-    </Segment>
-      </div>
-    <Segment inverted vertical style={{ padding: '5em 0em' }} id="footer">
-      <Container>
-        <Grid divided inverted stackable>
-          <Grid.Row>
-            <Grid.Column width={6}>
-
-            </Grid.Column>
-            <Grid.Column width={4}>
-            <Header as='h4' inverted>
-              The End <Icon name='rocket' />
-            </Header>
-            </Grid.Column>
-            <Grid.Column width={6}>
 
 
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Container>
-    </Segment>
 
-  </ResponsiveContainer>
+          <Segment style={{ padding: '0em' }} vertical>
-  </>);
+            <Grid celled='internally' columns='equal' stackable>
+              <Grid.Row textAlign='center'>
+                <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
+                  <Header as='h3' style={{ fontSize: '2em' }}>
+                    <Icon color='orange' name='list' />All The Calls
+                  </Header>
+                  <p style={{ fontSize: '1.33em' }}>Every call, on every talkgroup is recorded</p>
+                </Grid.Column>
+                <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
+                  <Header as='h3' style={{ fontSize: '2em' }}>
+                    <Icon color='orange' name='checked calendar' />
+                    Go back in time
+                  </Header>
+                  <p style={{ fontSize: '1.33em' }}>
+                    Missed a call? Not a problem, everything is archived!
+                  </p>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Segment>
+          <Segment style={{ padding: '8em 0em' }} vertical>
+            <Container text>
+              <Header as='h3' style={{ fontSize: '2em' }}>
+                Don't just scan, hear it all!
+              </Header>
+              <p style={{ fontSize: '1.33em' }}>
+                Most large cities use trunked radio systems to get the most use out of their assigned radio spectrum. With trunked systems, the transmission are constantly hopping to different frequencies. Using a cheap Software Defined Radio (SDR), it is possible capture all of the transmission on a system.
+                Instead of scanning to a single frequency, SDR capturea wide swathes of spectrum, covering all of the frequencies a system could use.
+              </p>
+              <Divider
+                as='h4'
+                className='header'
+                horizontal
+                style={{ margin: '3em 0em', textTransform: 'uppercase' }}
+              >
+                Get Involved
+              </Divider>
+              <Header as='h3' style={{ fontSize: '2em' }}>
+                Want to record your local radio system?
+              </Header>
+              <p style={{ fontSize: '1.33em' }}>
+                Join us! Record a local radio system and share it with the world. If you have a spare computer, it is easy to get started. With a $25 SDR or two, you can capture an entire system.
+                It does take a little bit of work to get things setup, but we are here to help and answer questions.
+              </p>
+              <a href="https://github.com/robotastic/trunk-recorder/blob/master/README.md">
+                <Button size='large'>
+                  Learn More
+                </Button>
+              </a>
+            </Container>
+          </Segment>
+        </div>
+        <Segment inverted vertical style={{ padding: '5em 0em' }} id="footer">
+          <Container>
+            <Grid divided inverted stackable>
+              <Grid.Row>
+                <Grid.Column width={6}>
+
+                </Grid.Column>
+                <Grid.Column width={4}>
+                  <Header as='h4' inverted>
+                    The End <Icon name='rocket' />
+                  </Header>
+                </Grid.Column>
+                <Grid.Column width={6}>
+
+
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Container>
+        </Segment>
+
+      </ResponsiveContainer>
+    </>);
 }
 
 

frontend/src/System/SystemCard.js

@@ -3,114 +3,141 @@ import {
   Card,
   Icon,
   Label,
-  Grid
+  Grid,
+  Segment,
+  Popup,
+  Button
 } from "semantic-ui-react";
 
 
-function SystemCard (props) {
+function SystemCard(props) {
+
+  const { system, keepShort, onClick, onContactClick } = props;
+  var location = "";
+  var clientCount = "";
+  var callAvg = "";
+  let description = system.description;
+  let statusMessage = ""; 
   
-    const {system, keepShort, onClick, onContactClick} = props;
+  if (system.status && system.status.length > 0) {
-    var location = "";
+    statusMessage = system.status
-    var clientCount = "";
+    if (statusMessage.length > 25) {
-    var callAvg = "";
+      statusMessage = statusMessage.substring(0, 25) + "...";
-    let description = system.description;
-
-
-
-    const handleContactClick = (event) => {
-      event.stopPropagation();
-      onContactClick(system);
     }
+  }
 
-    const onCardClick = (event) => {
-      onClick();
-    }
 
-    if (keepShort && (description.length > 100)) {
-      description = description.substring(0, 96) + "...";
-    }
-    if (system.callAvg) {
-      callAvg = Math.round(system.callAvg * 10) / 10 + "/min"
-    }
-    if (system.clientCount === 1) {
-      clientCount = "1 listener";
-    } else if (system.clientCount > 1) {
-      clientCount = system.clientCount + " listeners"
-    }
 
-    let status = (<></>)
 
-    if (system.active) {
+  const handleContactClick = (event) => {
-      status = (
+    event.stopPropagation();
-        <Grid >
+    onContactClick(system);
+  }
+
+  const onCardClick = (event) => {
+    onClick();
+  }
+
+  if (keepShort && (description.length > 100)) {
+    description = description.substring(0, 96) + "...";
+  }
+
+
+ 
+
+  if (keepShort) {
+    statusMessage = "";
+  }
+
+  if (system.callAvg) {
+    callAvg = Math.round(system.callAvg * 10) / 10 + "/min"
+  }
+  if (system.clientCount === 1) {
+    clientCount = "1 listener";
+  } else if (system.clientCount > 1) {
+    clientCount = system.clientCount + " listeners"
+  }
+
+  let status = (<></>)
+
+  if (system.active) {
+    status = (
+      <Grid >
         <Grid.Row>
           <Grid.Column width="8">
             {clientCount && <div><Icon name='headphones' />{clientCount}</div>}
           </Grid.Column>
           <Grid.Column width="8" textAlign='right'>
             {callAvg && <div><Icon name='file audio outline' />{callAvg}</div>}
-            </Grid.Column>
-        </Grid.Row>
-          </Grid>
-      )
-    } else {
-      const lastActive = new Date(system.lastActive);
-      status = (
-        <Grid >
-        <Grid.Row>
-          <Grid.Column>
-            <Icon name="calendar times outline"/> Last Active {lastActive.toLocaleDateString()}
           </Grid.Column>
         </Grid.Row>
-          </Grid>
+      </Grid>
-          
+    )
-      )
+  } else {
-    }
+    const lastActive = new Date(system.lastActive);
+    status = (
+      <Grid >
+        <Grid.Row>
+          <Grid.Column>
+            <Icon name="calendar times outline" /> Last Active {lastActive.toLocaleDateString()}
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
 
-    if (system) {
+    )
-      switch (system.systemType) {
+  }
-        case "state":
+
-          location = system.state;
+  if (system) {
-          break;
+    switch (system.systemType) {
-        case "city":
+      case "state":
-          location = system.city + ", " + system.state;
+        location = system.state;
-          break;
+        break;
-        case "county":
+      case "city":
-          location = system.county + ", " + system.state;
+        location = system.city + ", " + system.state;
-          break;
+        break;
-        case "international":
+      case "county":
-          location = system.country;
+        location = system.county + ", " + system.state;
-          break;
+        break;
-        default:
+      case "international":
-          location = system.city + ", " + system.state;
+        location = system.country;
-      }
+        break;
+      default:
+        location = system.city + ", " + system.state;
     }
-    return (
+  }
-      <Card link onClick={onCardClick} raised={true} centered={true} >
+  return (
-        <Card.Content>
+    <Card link onClick={onCardClick} raised={true} centered={true} >
-          <Card.Header >{system.name}</Card.Header>
+      <Card.Content>
-          <Card.Meta>{location} </Card.Meta>
+        <Card.Header >{system.name}</Card.Header>
-          <Card.Description>
+        <Card.Meta>{location} </Card.Meta>
-            <Grid >
+        <Card.Description>
+          <Grid >
             <Grid.Row>
-                <Grid.Column >
+              <Grid.Column >
                 {system.screenName && <Label size="mini"><Icon name='user' /> {system.screenName}</Label>}
                 {system.allowContact && <Label size="mini" onClick={handleContactClick}><Icon name='mail' />Message</Label>}
-                </Grid.Column>
+              </Grid.Column>
-              </Grid.Row>
+            </Grid.Row>
+            <Grid.Row>
+              <Grid.Column>
+                {description}
+              </Grid.Column>
+            </Grid.Row>
+            {statusMessage &&
               <Grid.Row>
                 <Grid.Column>
-                  {description}
+                <Popup content={system.status} trigger={<Button icon labelPosition='left' size='mini'><Icon name="info"/>{statusMessage}</Button>} />
                 </Grid.Column>
               </Grid.Row>
-            </Grid>
+            }
-          </Card.Description>
+          </Grid>
-        </Card.Content>
+        </Card.Description>
-        <Card.Content extra>
+      </Card.Content>
-          {status}
+      <Card.Content extra>
-        </Card.Content>
+        {status}
-      </Card>
+      </Card.Content>
-    );
+    </Card>
+  );
 }
 
 export default SystemCard;

nginx-proxy/test/vhosts/site.template

@@ -4,6 +4,7 @@ server {
 
   server_name ${DOMAIN_NAME} www.${DOMAIN_NAME};
 
+
 	location /.well-known/acme-challenge/ {
         root /var/www/certbot;
     }