initial commit

frontend/src/System/SystemCard.js

@@ -3,114 +3,143 @@ 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;
-    var location = "";
-    var clientCount = "";
-    var callAvg = "";
-    let description = system.description;
-
-
-
-    const handleContactClick = (event) => {
-      event.stopPropagation();
-      onContactClick(system);
+  if (system.status && system.status.length > 0) {
+    statusMessage = system.status
+    if (statusMessage.length > 25) {
+      statusMessage = statusMessage.substring(0, 25) + "...";
     }
+  }
 
-    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) {
-      status = (
-        <Grid >
+  const handleContactClick = (event) => {
+    event.stopPropagation();
+    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;
-          break;
-        case "city":
-          location = system.city + ", " + system.state;
-          break;
-        case "county":
-          location = system.county + ", " + system.state;
-          break;
-        case "international":
-          location = system.country;
-          break;
-        default:
-          location = system.city + ", " + system.state;
-      }
+    )
+  }
+
+  if (system) {
+    switch (system.systemType) {
+      case "state":
+        location = system.state;
+        break;
+      case "city":
+        location = system.city + ", " + system.state;
+        break;
+      case "county":
+        location = system.county + ", " + system.state;
+        break;
+      case "international":
+        location = system.country;
+        break;
+      default:
+        location = system.city + ", " + system.state;
     }
-    return (
-      <Card link onClick={onCardClick} raised={true} centered={true} >
-        <Card.Content>
-          <Card.Header >{system.name}</Card.Header>
-          <Card.Meta>{location} </Card.Meta>
-          <Card.Description>
-            <Grid >
+  }
+  return (
+    <Card link onClick={onCardClick} raised={true} centered={true} >
+      <Card.Content>
+        <Card.Header >{system.name}</Card.Header>
+        <Card.Meta>{location} </Card.Meta>
+        <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.Row>
+              </Grid.Column>
+            </Grid.Row>
+            <Grid.Row>
+              <Grid.Column>
+                {description}
+              </Grid.Column>
+            </Grid.Row>
+            {statusMessage.length &&
               <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>
-        </Card.Content>
-        <Card.Content extra>
-          {status}
-        </Card.Content>
-      </Card>
-    );
+            }
+          </Grid>
+        </Card.Description>
+      </Card.Content>
+      <Card.Content extra>
+        {status}
+      </Card.Content>
+    </Card>
+  );
 }
 
 export default SystemCard;