From 0c9ad5a3f1bd376e42e3e06b5f33d19b94d76211 Mon Sep 17 00:00:00 2001 From: aisalus Date: Tue, 30 Mar 2021 18:11:40 +0100 Subject: [PATCH 1/4] table commit - app css, app js and table jsx changed --- web/src/App.css | 2 +- web/src/App.js | 5 +-- web/src/components/table.jsx | 82 +++++++++++++++++++++++++----------- 3 files changed, 60 insertions(+), 29 deletions(-) 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..8004d0b 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -24,10 +24,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,7 +43,7 @@ function App() { setDataLoad(true); },[dataLoad]); - + return (
diff --git a/web/src/components/table.jsx b/web/src/components/table.jsx index 1100004..6d82293 100644 --- a/web/src/components/table.jsx +++ b/web/src/components/table.jsx @@ -1,37 +1,61 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; +import TablePagination from '@material-ui/core/TablePagination'; +import TableContainer from '@material-ui/core/TableContainer'; +const StyledTableCell = withStyles((theme) => ({ + head: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white, + }, + body: { + fontSize: 14, + }, +}))(TableCell); + +const StyledTableRow = withStyles((theme) => ({ + root: { + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + }, +}))(TableRow); + const useStyles = makeStyles({ - root: { width: '80%'}, - table: { - minWidth: 650, - height: '50px' + root: { + width: '100%', + }, + container: { + maxHeight: 440, + margin: '8px', }, }); export function BasicTable(props) { const classes = useStyles(); - const columns = (props) => { const data = props.data return ( data.map((row) => ( - - - {row.employee_id} - - {row.exercise_time} - {row.sleep_time} - {row.social_interaction_time} - {row.work_time} - ))) + + + {row.employee_name} + + {row.exercise_time} + {row.sleep_time} + {row.social_interaction_time} + {row.work_time} + {row.month} + ))) + } const loading = () => { @@ -47,22 +71,30 @@ export function BasicTable(props) { else { return loading() } } - return ( - - + + +
- - Employee ID - Exercise time - Sleep - Social - work_time - + + Name + Exercise time + Sleep + Social + Working time + Month + + {loadColumns(props)} +
+ + + ); } \ No newline at end of file From a3e9048c845e9546b594401f1808df9e3000e9d0 Mon Sep 17 00:00:00 2001 From: aisalus Date: Tue, 30 Mar 2021 18:26:52 +0100 Subject: [PATCH 2/4] title updates --- web/src/App.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web/src/App.js b/web/src/App.js index 8004d0b..d781dc5 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -51,11 +51,14 @@ function App() { + + Employee Metric Data + - Progress Chart + Employee Data - January From ae05767fa22a491cd8381202cf75c1706dc3ccad Mon Sep 17 00:00:00 2001 From: aisalus Date: Tue, 30 Mar 2021 19:33:38 +0100 Subject: [PATCH 3/4] final commit --- web/src/components/accordion.jsx | 767 ++++++++++++++++++++++++++++ web/src/components/charts.jsx | 121 ++++- web/src/components/excerciselow.jsx | 438 ++++++++++++++++ 3 files changed, 1302 insertions(+), 24 deletions(-) create mode 100644 web/src/components/accordion.jsx create mode 100644 web/src/components/excerciselow.jsx 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! + + + + + + + +
+ ); +} \ No newline at end of file diff --git a/web/src/components/charts.jsx b/web/src/components/charts.jsx index 685544c..e2cb7d6 100644 --- a/web/src/components/charts.jsx +++ b/web/src/components/charts.jsx @@ -1,55 +1,126 @@ import React, { PureComponent } from 'react'; import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import Typography from '@material-ui/core/Typography'; + const data = [ { - name: 'Page A', - sleep: 4000, - exercise: 2400, + name: 'Ryan', + Sleep: 12434, + Exercise: 3180, + Social: 895, + Work: 12088, amt: 2400, }, { - name: 'Page B', - sleep: 3000, - exercise: 1398, + name: 'Nick', + Sleep: 14723, + Exercise: 1366, + Social: 1406, + Work: 12584, amt: 2210, }, { - name: 'Page C', - sleep: 2000, - exercise: 9800, + name: 'Carlos', + Sleep: 13865, + Exercise: 3592, + Social: 1020, + Work: 11745, amt: 2290, }, { - name: 'Page D', - sleep: 2780, - exercise: 3908, + name: 'Kevin', + Sleep: 8533, + Exercise: 1452, + Social: 895, + Work: 12831, amt: 2000, }, { - name: 'Page E', - sleep: 1890, - exercise: 4800, + name: 'John', + Sleep: 12310, + Exercise: 4426, + Social: 1404, + Work: 12409, amt: 2181, }, { - name: 'Page F', - sleep: 2390, - exercise: 3800, + name: 'Holly', + Sleep: 9023, + Exercise: 2171, + Social: 911, + Work: 12895, amt: 2500, }, { - name: 'Page G', - sleep: 3490, - exercise: 4300, + name: 'Fiona', + Sleep: 15331, + Exercise: 1739, + Social: 1745, + Work: 13483, + amt: 2100, + }, + { + name: 'Jamal', + Sleep: 8056, + Exercise: 3955, + Social: 1658, + Work: 11995, amt: 2100, }, + { + name: 'Nadia', + Sleep: 9333, + Exercise: 3807, + Social: 1037, + Work: 12060, + amt: 2100, + }, + { + name: 'Wendy', + Sleep: 10642, + Exercise: 673, + Social: 224, + Work: 11081, + amt: 2100, + }, + { + name: 'Shaquon', + Sleep: 15774, + Exercise: 2175, + Social: 1492, + Work: 11598, + amt: 2100, + }, + { + name: 'Kristal', + Sleep: 9357, + Exercise: 3382, + Social: 1247, + Work: 11608, + amt: 2100, + }, + { + name: 'Barry', + Sleep: 14504, + Exercise: 2874, + Social: 1163, + Work: 12484, + amt: 2100, + }, + { + name: 'Shaniqua', + Sleep: 12499, + Exercise: 922, + Social: 1206, + Work: 12739, + + }, ]; export const Example = () => { return ( { - - + + + + ); } diff --git a/web/src/components/excerciselow.jsx b/web/src/components/excerciselow.jsx new file mode 100644 index 0000000..f0ef172 --- /dev/null +++ b/web/src/components/excerciselow.jsx @@ -0,0 +1,438 @@ +import React, { useState, useEffect } 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 { ExerciseTable } from './table' +import axios from 'axios'; + + +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + }, + heading: { + fontSize: theme.typography.pxToRem(15), + fontWeight: theme.typography.fontWeightRegular, + }, +})); + +export function ExerciseAccordion() { + const classes = useStyles(); + const [data, setData] = useState([{"id": 1, "employee_id": 6298, "employee_name":"Ryan", "month": "January", "exercise_time": 224, "social_interaction_time": 60, "work_time": 2220, "sleep_time": 2100}, {"id": 2, "employee_id": 6299,"employee_name":"Nick", "month": "January", "exercise_time": 224, "social_interaction_time": 60, "work_time": 2220, "sleep_time": 2100}]); + + + +// const [dataJan, setDataJan] = useState([]) +// const [dataLoadJan, setDataLoadJan] = useState(false) +// const urlJan = 'http://localhost:5000/exerciselowjan' +// useEffect(async () => { +// const resultJan = await axios({ +// url: urlJan, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDataJan(resultJan.data) +// console.log(dataJan) +// setDataLoadJan(true); +// },[dataLoadJan]); + +// const [datafeb, setDatafeb] = useState([]) +// const [dataLoadfeb, setDataLoadfeb] = useState(false) +// const urlfeb = 'http://localhost:5000/exerciselowfeb' +// useEffect(async () => { +// const resultfeb = await axios({ +// url: urlfeb, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatafeb(resultfeb.data) +// console.log(datafeb) +// setDataLoadfeb(true); +// },[dataLoadfeb]); + +// const [datamar, setDatamar] = useState([]) +// const [dataLoadmar, setDataLoadmar] = useState(false) +// const urlmar = 'http://localhost:5000/exerciselowmar' +// useEffect(async () => { +// const resultmar = await axios({ +// url: urlmar, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatamar(resultmar.data) +// console.log(datamar) +// setDataLoadmar(true); +// },[dataLoadmar]); + +// const [dataapr, setDataapr] = useState([]) +// const [dataLoadapr, setDataLoadapr] = useState(false) +// const urlapr = 'http://localhost:5000/exerciselowapr' +// useEffect(async () => { +// const resultapr = await axios({ +// url: urlapr, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDataapr(resultapr.data) +// console.log(dataapr) +// setDataLoadapr(true); +// },[dataLoadapr]); + +// const [datamay, setDatamay] = useState([]) +// const [dataLoadmay, setDataLoadmay] = useState(false) +// const urlmay = 'http://localhost:5000/exerciselowmay' +// useEffect(async () => { +// const resultmay = await axios({ +// url: urlmay, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatamay(resultmay.data) +// console.log(datamay) +// setDataLoadmay(true); +// },[dataLoadmay]); + +// const [datajun, setDatajun] = useState([]) +// const [dataLoadjun, setDataLoadjun] = useState(false) +// const urljun = 'http://localhost:5000/exerciselowjun' +// useEffect(async () => { +// const resultjun = await axios({ +// url: urljun, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatajun(resultjun.data) +// console.log(datajun) +// setDataLoadjun(true); +// },[dataLoadjun]); + +// const [datajul, setDatajul] = useState([]) +// const [dataLoadjul, setDataLoadjul] = useState(false) +// const urljul = 'http://localhost:5000/exerciselowjul' +// useEffect(async () => { +// const resultjul = await axios({ +// url: urljul, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatajul(resultjul.data) +// console.log(datajul) +// setDataLoadjul(true); +// },[dataLoadjul]); + +// const [dataaug, setDataaug] = useState([]) +// const [dataLoadaug, setDataLoadaug] = useState(false) +// const urlaug = 'http://localhost:5000/exerciselowaug' +// useEffect(async () => { +// const resultaug = await axios({ +// url: urlaug, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDataaug(resultaug.data) +// console.log(dataaug) +// setDataLoadaug(true); +// },[dataLoadaug]); + +// const [datasep, setDatasep] = useState([]) +// const [dataLoadsep, setDataLoadsep] = useState(false) +// const urlsep = 'http://localhost:5000/exerciselowsep' +// useEffect(async () => { +// const resultsep = await axios({ +// url: urlsep, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatasep(resultsep.data) +// console.log(datasep) +// setDataLoadsep(true); +// },[dataLoadsep]); + + +// const [dataoct, setDataoct] = useState([]) +// const [dataLoadoct, setDataLoadoct] = useState(false) +// const urloct = 'http://localhost:5000/exerciselowoct' +// useEffect(async () => { +// const resultoct = await axios({ +// url: urloct, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDataoct(resultoct.data) +// console.log(dataoct) +// setDataLoadoct(true); +// },[dataLoadoct]); + +// const [datanov, setDatanov] = useState([]) +// const [dataLoadnov, setDataLoadnov] = useState(false) +// const urlnov = 'http://localhost:5000/exerciselownov' +// useEffect(async () => { +// const resultnov = await axios({ +// url: urlnov, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatanov(resultnov.data) +// console.log(datanov) +// setDataLoadnov(true); +// },[dataLoadnov]); + + +// const [datadec, setDatadec] = useState([]) +// const [dataLoaddec, setDataLoaddec] = useState(false) +// const urldec = 'http://localhost:5000/exerciselowdec' +// useEffect(async () => { +// const resultdec = await axios({ +// url: urldec, +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// 'Access-Control-Allow-Origin': '*' +// }, +// responseType: 'json', +// }) + +// setDatadec(resultdec.data) +// console.log(datadec) +// setDataLoaddec(true); +// },[dataLoaddec]); + + + + return ( +
+ + + 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 + + + + + + + + + +
+ ); +} \ No newline at end of file From 57a0f097ff1cdec3c8b413abeecfa7647ec537e8 Mon Sep 17 00:00:00 2001 From: aisalus Date: Tue, 30 Mar 2021 19:48:44 +0100 Subject: [PATCH 4/4] next --- web/src/App.js | 8 +++++--- web/src/components/charts.jsx | 2 +- web/src/components/table.jsx | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/web/src/App.js b/web/src/App.js index d781dc5..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}]); @@ -50,20 +52,20 @@ function App() { - + Employee Metric Data - + Employee Data - January - +
); } diff --git a/web/src/components/charts.jsx b/web/src/components/charts.jsx index e2cb7d6..a512686 100644 --- a/web/src/components/charts.jsx +++ b/web/src/components/charts.jsx @@ -120,7 +120,7 @@ const data = [ export const Example = () => { return ( ({ const useStyles = makeStyles({ root: { - width: '100%', + width: '90%', }, container: { maxHeight: 440, @@ -97,4 +97,4 @@ export function BasicTable(props) { /> ); -} \ No newline at end of file +}