From c81e4232329f5aee6ddcd94674a63682720646b2 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 15 Nov 2020 07:18:23 +0300
Subject: feat: add status icons to jobs

---
 src/components/EventCard/EventCard.tsx | 36 ++++++++++++++++++++++++++++++++--
 src/types.ts                           |  2 ++
 2 files changed, 36 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index 2658fd6..08b67bb 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -7,6 +7,12 @@ import {
   CardActions,
   Button
 } from '@material-ui/core';
+import {
+  FiberManualRecord as RunningIcon,
+  Close as FailedIcon,
+  Done as CompleteIcon,
+  Timer as NotStartedIcon
+} from '@material-ui/icons';
 import { Event } from '../../types';
 import requests from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
@@ -20,13 +26,29 @@ const useStyles = makeStyles(theme => ({
   actions: {
     display: 'flex',
     justifyContent: 'space-between'
-  }
+  },
+  title: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    '& svg': {
+      marginLeft: theme.spacing(1)
+    }
+  },
+  running: {
+    color: theme.palette.warning.main
+  },
+  complete: {
+    color: theme.palette.success.main
+  },
 }));
 
+
 const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
   const classes = useStyles();
   const { user } = useAuth();
   const {
+    status,
     data: {
       name,
       date,
@@ -53,9 +75,19 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
       .then(() => mutate());
   };
 
+  const title = (
+    <div className={classes.title}>
+      {name}
+      {status === 'running' && <RunningIcon className={classes.running}/>}
+      {status === 'complete' && <CompleteIcon className={classes.complete} />}
+      {status === 'failed' && <FailedIcon color="error" />}
+      {!status && <NotStartedIcon color="disabled" />}
+    </div>
+  );
+
   return (
     <Card variant="outlined">
-      <CardHeader title={name || `Event #${event._id.slice(-4)}`} subheader={date}  />
+      <CardHeader title={title} subheader={date} />
       <CardContent>
         {conferenceId && <div> ConferenceID: {conferenceId} </div>}
         {attendanceId && <div> AttendanceID: {attendanceId} </div>}
diff --git a/src/types.ts b/src/types.ts
index d385d2a..7243934 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,6 +9,8 @@ export interface User extends Base {
 }
 
 export interface Event extends Base {
+  status?: 'running' | 'complete' | 'failed';
+  failReason?: string;
   data: {
     name: string;
     participants: string[];
-- 
cgit v1.2.3