diff --git a/web/src/App.css b/web/src/App.css
index 74b5e05..8a953ce 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -14,7 +14,7 @@
}
.App-header {
- background-color: #282c34;
+ background-color: #190036;
min-height: 100vh;
display: flex;
flex-direction: column;
diff --git a/web/src/App.js b/web/src/App.js
index 647eb1c..105a0a5 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -8,6 +8,8 @@ import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import axios from 'axios';
import { makeStyles } from '@material-ui/core/styles';
+import { SimpleAccordion } from './components/accordion';
+
function App() {
// const [data, setData] = useState([{"id": 1, "employee_id": 6298, "month": "January", "exercise_time": 224, "social_interaction_time": 60, "work_time": 2220, "sleep_time": 2100}, {"id": 2, "employee_id": 6299, "month": "January", "exercise_time": 224, "social_interaction_time": 60, "work_time": 2220, "sleep_time": 2100}]);
@@ -24,10 +26,9 @@ function App() {
const classes = useStyles();
-
const [data, setData] = useState([])
const [dataLoad, setDataLoad] = useState(false)
- const url = 'http://localhost:5000/'
+ const url = 'http://localhost:5000/alldata'
useEffect(async () => {
const result = await axios({
url: url,
@@ -44,24 +45,27 @@ function App() {
setDataLoad(true);
},[dataLoad]);
-
+
return (
-
+
+
+ Employee Metric Data
+
-
+
- Progress Chart
+ Employee Data - January
-
+
);
}
diff --git a/web/src/components/accordion.jsx b/web/src/components/accordion.jsx
new file mode 100644
index 0000000..b8d2455
--- /dev/null
+++ b/web/src/components/accordion.jsx
@@ -0,0 +1,767 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineItem from '@material-ui/lab/TimelineItem';
+import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+import TimelineContent from '@material-ui/lab/TimelineContent';
+import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+import TimelineDot from '@material-ui/lab/TimelineDot';
+
+import FastfoodIcon from '@material-ui/icons/Fastfood';
+import FitnessCenter from '@material-ui/icons/FitnessCenter';
+import LaptopMacIcon from '@material-ui/icons/LaptopMac';
+import HotelIcon from '@material-ui/icons/Hotel';
+import RepeatIcon from '@material-ui/icons/Repeat';
+import FreeBreakfastIcon from '@material-ui/icons/FreeBreakfast';
+import MenuBookIcon from '@material-ui/icons/MenuBook';
+
+import Paper from '@material-ui/core/Paper';
+
+
+
+const useStyles = makeStyles((theme) => ({
+ paper: {
+ padding: '6px 16px',
+
+ },
+ secondaryTail: {
+ backgroundColor: theme.palette.secondary.main,
+ },
+}));
+
+export function SimpleAccordion() {
+ const classes = useStyles();
+
+ return (
+
+
+ Example Timelines:
+
+
+ }
+ aria-controls="panel1a-content"
+ id="panel1a-header"
+ >
+ Early Riser
+
+
+
+
+
+
+
+ 6:30 am
+
+
+
+
+
+
+
+
+
+
+
+ Wake up
+
+ Get out of bed
+
+
+
+
+
+
+
+
+ 6:30 am
+
+
+
+
+
+
+
+
+
+
+
+ Exercise
+
+ Start the day with a sweat
+
+
+
+
+
+
+
+ 8:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Breakfast
+
+ Most important meal of the day
+
+
+
+
+
+
+
+ 9:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Work
+
+ Because it's awesome!
+
+
+
+
+
+
+
+ 12:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Lunch
+
+ Remember take time to eat!
+
+
+
+
+
+
+
+ 1:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Work
+
+ Because it's what we pay you for!
+
+
+
+
+
+
+
+ 6:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Dinner
+
+ Cook a balanced meal!
+
+
+
+
+
+
+
+ 7:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Relax
+
+ Have some you time
+
+
+
+
+
+
+
+
+
+ 10:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Sleep
+
+ Because you need rest
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Repeat
+
+ Because this is the life you love!
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ Night Owl
+
+
+
+
+
+
+
+ 8:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Wake up
+
+ Get out of bed
+
+
+
+
+
+
+
+
+
+
+ 8:30 am
+
+
+
+
+
+
+
+
+
+
+
+ Breakfast
+
+ Most important meal of the day
+
+
+
+
+
+
+
+ 9:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Work
+
+ Because it's awesome!
+
+
+
+
+
+
+
+ 12:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Lunch
+
+ Remember take time to eat!
+
+
+
+
+
+
+
+ 1:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Work
+
+ Because it's what we pay you for!
+
+
+
+
+
+
+
+ 6:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Dinner
+
+ Cook a balanced meal!
+
+
+
+
+
+
+
+ 7:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Exercise
+
+ Burn off that Dinner!
+
+
+
+
+
+
+
+ 8:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Relax
+
+ Have some you time
+
+
+
+
+
+
+
+
+
+ 12:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Sleep
+
+ Because you need rest
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Repeat
+
+ Because this is the life you love!
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel3a-content"
+ id="panel3a-header"
+ >
+ Lunchtime Runner
+
+
+
+
+
+
+
+ 8:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Wake up
+
+ Get out of bed
+
+
+
+
+
+
+
+
+
+
+ 8:30 am
+
+
+
+
+
+
+
+
+
+
+
+ Breakfast
+
+ Most important meal of the day
+
+
+
+
+
+
+
+ 9:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Work
+
+ Because it's awesome!
+
+
+
+
+
+
+
+ 12:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Lunch
+
+ Remember take time to eat!
+
+
+
+
+
+
+
+ 12:30 pm
+
+
+
+
+
+
+
+
+
+
+
+ Exercise
+
+ Run round the block!
+
+
+
+
+
+
+
+ 1:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Work
+
+ Because it's what we pay you for!
+
+
+
+
+
+
+
+ 6:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Dinner
+
+ Cook a balanced meal!
+
+
+
+
+
+
+
+ 7:30 pm
+
+
+
+
+
+
+
+
+
+
+
+ Exercise
+
+ Burn off Dinner!
+
+
+
+
+
+
+
+ 8:00 pm
+
+
+
+
+
+
+
+
+
+
+
+ Relax
+
+ Have some you time
+
+
+
+
+
+
+
+
+
+ 12:00 am
+
+
+
+
+
+
+
+
+
+
+
+ Sleep
+
+ Because you need rest
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Repeat
+
+ Because this is the life you love!
+
+
+
+
+
+
+
+
+
+
+ Low Movers:
+
+
+ }
+ aria-controls="panel1a-content"
+ id="panel1a-header"
+ >
+ January
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ February
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ /March
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ April
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ May
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ June
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ July
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ August
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ September
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ October
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ November
+
+
+
+
+
+
+
+
+ }
+ aria-controls="panel2a-content"
+ id="panel2a-header"
+ >
+ December
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Employee ID
- Exercise time
- Sleep
- Social
- work_time
-
+
+ Name
+ Exercise time
+ Sleep
+ Social
+ Working time
+ Month
+
+
{loadColumns(props)}
+
+
+
+
);
-}
\ No newline at end of file
+}