+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Select chart options below
Drag options from the left container to the right container
Double click options to remove them
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/src/chartSetup.js b/src/chartSetup.js
index ef19b8a06..efc914bd6 100644
--- a/src/chartSetup.js
+++ b/src/chartSetup.js
@@ -32,12 +32,16 @@ const adminSleepCtx = document.getElementById('adminSleepChart').getContext('2d'
const adminHydrationCtx = document.getElementById('adminHydrationChart').getContext('2d');
const adminActivityCtx = document.getElementById('adminActivityChart').getContext('2d');
-stepCtx.canvas.height = 200;
+stepCtx.canvas.height = 100;
wklyHydCtx.canvas.height = 100;
hydCtx.canvas.height = 100;
sleepCtx.canvas.height = 60;
-avgSleepCtx.canvas.height = 60;
-wklySleepCtx.canvas.height = 100;
+avgSleepCtx.canvas.height = 150;
+wklySleepCtx.canvas.height = 80;
+adminCtx.canvas.height = 200;
+adminSleepCtx.canvas.height = 100;
+adminHydrationCtx.canvas.height = 100;
+adminActivityCtx.canvas.height = 100;
const stepChartData = {
labels: ['Your step goal', 'Average step goal'],
diff --git a/src/css/index.scss b/src/css/index.scss
new file mode 100644
index 000000000..262a5fe80
--- /dev/null
+++ b/src/css/index.scss
@@ -0,0 +1,146 @@
+
+* {
+ font-family: "Libre Baskerville";
+ font-style: normal;
+ }
+ body, html {
+ scroll-behavior: smooth;
+ background: $main-background;
+ background-size: 100% 100%;
+ }
+
+ main{
+ @include main
+ }
+
+ .condensed{
+ @include condensed
+ }
+
+ input {
+ background-color: white;
+ border-radius: 7px;
+ box-shadow: 4px 7px 20px 2px rgba(33, 30, 30, 0.7607843137);
+ color: black;
+ }
+
+ h3 {
+ font-weight: normal;
+ margin-right: 36px;
+ }
+
+ p {
+ font-weight: bold;
+ margin-right: 10px;
+ font-size: larger;
+ }
+
+ .topNav {
+ overflow: hidden;
+ background:rgba(0, 0, 0, 0);
+ color: #1a1a1a;
+ position: fixed;
+ top: 10px;
+ width: 100%;
+ height: 2em;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ z-index: 30;
+ }
+
+ .sideNav {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ top: 7em;
+ width: 20%;
+ align-items: flex-end;
+ }
+
+ nav a {
+ color: black;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 22px;
+ font-variant: unicase;
+ font-weight: bolder;
+ margin: 10px;
+ mix-blend-mode: color-burn;
+ }
+
+ nav a:hover {
+ text-shadow: 0px 0px 11px rgb(0, 0, 0);
+ }
+
+ .underline {
+ text-decoration: underline;
+ }
+
+ .shadow {
+ box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
+ }
+
+ span {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .full {
+ mix-blend-mode: color-burn;
+ }
+
+ .welcome-message{
+ margin-top: 20rem;
+ }
+
+ canvas {
+ z-index: 2;
+ width: 500px;
+ }
+
+ .viewMenu {
+ position: fixed;
+ background: rgba(0, 0, 0, 0.3019607843);
+ width: 217px;
+ height: 68px;
+ z-index: 30;
+ ul{
+ list-style-type: none;
+ margin-left: -37px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ :hover{
+ background-color: red;
+ color: white;
+ }
+ li{
+ margin-top: 1px;
+ margin-bottom: 1px;
+ width: 100%;
+ font-size: smaller;
+ }
+ }
+ }
+
+ .dateSelector{
+ z-index: 2;
+ width: 10rem;
+ text-align: center;
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+
+ .dateSection {
+ z-index: 2;
+ text-align: center;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: wrap;
+ }
diff --git a/src/css/styles.css b/src/css/styles.css
index 819742442..6e02c2154 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -10,12 +10,10 @@ body, html {
}
main {
- .sortContainer{
- display: none;
- }
display: flex;
flex-direction: column;
align-items: center;
+
article {
display: flex;
flex-wrap: nowrap;
@@ -28,7 +26,11 @@ main {
position: fixed;
}
}
- .sizeableContainer {
+ .adminControls{
+ display: none;
+ }
+
+ .sortContainer {
width: 90%;
display: flex;
flex-direction: column;
@@ -230,50 +232,62 @@ canvas {
.condensed {
display: flex;
- flex-direction: row;
- justify-content: flex-end;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ flex-wrap: wrap;
align-items: flex-start;
- .sizeableContainer {
- width: 25%;
- margin-top: 90px;
- display: flex;
- flex-direction: column;
+ .sortContainer{
+
+ width: 45%;
+ height: 75%;
+ margin-right: 20px;
+ box-shadow: inset rgba(0, 0, 0, 0.5411764706) -1px -2px 20px 14px;
+ border-radius: 25px;
+ flex-direction: row;
align-items: center;
+ display: flex;
justify-content: flex-start;
+ overflow: overlay;
+ flex-wrap: wrap;
.info-card {
- width: 75%;
- height: 100%;
+ width: 50%;
+ height: 181px;
padding: 0px;
- margin: 5px;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
font-size: 10px;
+ margin-bottom: 110px;
+ align-items: center;
.section-text {
width: 75%;
- height: 30vh;
- padding: 0%;
+ height: 100%;
+ padding-top: 20px;
+ padding-bottom: 60px;
margin: 0px;
display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
+ justify-content: space-around;
border-radius: 5%;
box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
background: transparent;
- padding: 0px;
+ overflow: overlay;
+ align-content: flex-start;
+ flex-wrap: wrap;
+ flex-direction: row;
+ align-items: center;
+ scroll-margin-top: 220px
}
.iconSection {
height: 28px;
z-index: 10;
font-size: 10px;
- margin-bottom: 5px;
+ margin-bottom: 35px;
justify-content: center;
&:hover {
@@ -293,6 +307,11 @@ canvas {
width: 560px;
height: 250px;
box-shadow: none !important;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ justify-content: center;
.section-text{
box-shadow: none !important;
@@ -306,9 +325,8 @@ canvas {
article {
padding: 0px;
- position: fixed;
- top: 15px;
- left: 13px;
+ width: 100%;
+ height: 200px;
h1 {
display: none;
@@ -324,20 +342,18 @@ canvas {
.adminControls {
display: flex;
- width: 60%;
- height: 500px;
+ width: 45%;
+ height: 75%;
border-radius: 25px;
flex-direction: column;
align-items: center;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- background: white;
- z-index: 10;
+ background: rgba(255, 255, 255, 0);
box-shadow: rgba(120, 37, 37, 0.561) 8px 7px 18px 11px;
overflow: hidden;
border: black solid thin;
+ overflow: overlay;
+ margin-left: 20px;
+ z-index: 10;
.titleBlock {
width: 100%;
@@ -349,32 +365,44 @@ canvas {
.container {
width: 100%;
- height: 88%;
display: flex;
flex-direction: row;
- justify-content: center;
- align-items: flex-start;
+ align-items: center;
+ justify-content: space-around;
+ flex-wrap: wrap;
.contentContainer:nth-child(1) {
- width: 33%;
+ width: 50%;
display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-content: stretch;
- justify-content: space-around;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ /* padding-top: 11px; */
+
+ label{
+ /* margin-bottom: 20px;
+ margin-top: 19px; */
+ }
+
+ .fa > p {
+ position: absolute;
+ top: 120px;
+ left: 143px;
+ }
.chartOptions,
.options {
border: black solid thin;
box-shadow: black 0 0;
border-radius: 10px;
- height: 200px;
- width: 173px;
- padding-top: 10px;
+ min-height: 65px;
+ width: 215px;
+ padding: 10px 10px;
font-size: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
+ margin-top: 10px;
}
option {
@@ -396,17 +424,22 @@ canvas {
}
.contentContainer:nth-child(2) {
- width: 33%;
+ width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
- padding-top: 11px;
+ /* padding-top: 11px; */
- p {
+ .fa > p {
position: absolute;
- top: 30px;
- left: 430px;
+ top: 380px;
+ left: 370px;
+ }
+
+ input {
+ margin-top: 10px;
+ box-shadow: none;
}
.dropdown-content {
@@ -422,7 +455,7 @@ canvas {
flex-wrap: nowrap;
align-items: center;
margin-top: 24px;
- left: 530px;
+ left: 200px;
option {
color: #FFFFFF !important;
@@ -445,7 +478,7 @@ canvas {
}
.userList {
- width: 200px;
+ width: 215px;
border: black solid thin;
height: 210px;
margin-top: 18px;
@@ -479,12 +512,16 @@ canvas {
}
.contentContainer:nth-child(3) {
- width: 33%;
+ width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
- padding-top: 70px;
+ flex-wrap: wrap;
+ .chartContainer{
+ width: 45%;
+ height: 50%;
+ }
}
}
@@ -493,31 +530,11 @@ canvas {
h2 {
font-size: medium;
+ width: 100%;
+ text-align: center;
+ margin-top: 0;
}
}
-
- /* element.style {
- position: absolute;
- left: 60px;
- top: 80px;
- border: black solid thin;
- box-shadow: black 0 0;
- border-radius: 25px;
- height: 200px;
- padding-top: 10px;
- } */
-
- .sortContainer {
- display: flex;
- width: 35%;
- height: 100vh;
- margin-top: 90px;
- margin-right: 150px;
- box-shadow: inset rgba(0, 0, 0, 0.5411764706) -1px -2px 20px 14px;
- border-radius: 25px;
- flex-direction: column;
- align-items: center;
- }
}
.collapsed {
diff --git a/src/css/variables.scss b/src/css/variables.scss
new file mode 100644
index 000000000..6eb6f2eb5
--- /dev/null
+++ b/src/css/variables.scss
@@ -0,0 +1,362 @@
+$main-background: url('../images/white-texture.png') repeat-x;
+
+$font: "Libre Baskerville";
+$font-style: normal;
+
+@mixin main {
+ .sortContainer{
+ display: none;
+ }
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ article {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ flex-direction: column;
+ padding-top: 10em;
+ height: 100vh;
+ img {
+ z-index: 0;
+ position: fixed;
+ }
+ }
+ .sizeableContainer {
+ width: 90%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+
+ .info-card {
+ width: 75%;
+ height: 100vh;
+ padding: 6%;
+ margin: 10px;
+ display: flex;
+ justify-content: center;
+
+ .section-text {
+ border-radius: 5%;
+ width: 75%;
+ height: 75%;
+ display: flex;
+ box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
+ overflow: hidden;
+ max-width: 75%;
+ padding: 10px;
+ background: transparent;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+ }
+ }
+ }
+}
+
+@mixin condensed {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: flex-start;
+
+ .sizeableContainer {
+ width: 25%;
+ margin-top: 90px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+
+ .info-card {
+ width: 100%;
+ height: 181px;
+ padding: 0px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ flex-direction: row;
+ align-content: flex-start;
+ font-size: 10px;
+ margin-bottom: 110px;
+ align-items: center;
+
+ .section-text {
+ width: 75%;
+ height: 100%;
+ padding-top: 20px;
+ padding-bottom: 60px;
+ margin: 0px;
+ display: flex;
+ justify-content: space-around;
+ border-radius: 5%;
+ box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
+ background: transparent;
+ overflow: overlay;
+ align-content: flex-start;
+ flex-wrap: wrap;
+ flex-direction: row;
+ align-items: center;
+ scroll-margin-top: 220px
+ }
+
+ .iconSection {
+ height: 28px;
+ z-index: 10;
+ font-size: 10px;
+ margin-bottom: 35px;
+ justify-content: center;
+
+ &:hover {
+ cursor: grab;
+ }
+ }
+
+ p {
+ font-size: 10px;
+ }
+ }
+
+ .account-main {
+ position: absolute;
+ left: 70px;
+ top: 0px;
+ width: 560px;
+ height: 250px;
+ box-shadow: none !important;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: center;
+ justify-content: center;
+
+ .section-text{
+ box-shadow: none !important;
+ }
+
+ .iconSection {
+ display: none;
+ }
+ }
+ }
+
+ article {
+ padding: 0px;
+ position: fixed;
+ top: 15px;
+ left: 13px;
+
+ h1 {
+ display: none;
+ }
+
+ img {
+ width: 70px;
+ position: absolute;
+ left: 0;
+ }
+
+ }
+
+ .adminControls {
+ display: flex;
+ width: 29%;
+ height: 870px;
+ border-radius: 25px;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ left: 17%;
+ top: 58%;
+ transform: translate(-50%, -50%);
+ background: rgba(255, 255, 255, 0);
+ z-index: 10;
+ box-shadow: rgba(120, 37, 37, 0.561) 8px 7px 18px 11px;
+ overflow: hidden;
+ border: black solid thin;
+ overflow: overlay;
+
+ .titleBlock {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .container {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ flex-wrap: wrap;
+
+ .contentContainer:nth-child(1) {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ .fa > p {
+ position: absolute;
+ top: 120px;
+ left: 143px;
+ }
+ .chartOptions,
+ .options {
+ border: black solid thin;
+ box-shadow: black 0 0;
+ border-radius: 10px;
+ height: 200px;
+ width: 173px;
+ padding-top: 10px;
+ font-size: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ option {
+ color: #FFFFFF !important;
+ font-size: 12px;
+ padding: 4px 40px;
+ border-radius: 6px;
+ border: 2px solid #B5B5B5;
+ background: linear-gradient(to top, #050A0D, #949494);
+ width: 90px;
+
+ &:hover {
+ color: #000000 !important;
+ background: #CFCFCF;
+ background: linear-gradient(to top, #CFCFCF, #828282);
+ cursor: pointer;
+ }
+ }
+ }
+
+ .contentContainer:nth-child(2) {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding-top: 11px;
+
+ .fa > p {
+ position: absolute;
+ top: 380px;
+ left: 370px;
+ }
+
+ .dropdown-content {
+ position: absolute;
+ background-color: #f6f6f6;
+ min-width: 230px;
+ overflow: scroll;
+ border: 1px solid #ddd;
+ z-index: 10;
+ max-height: 360px;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: center;
+ margin-top: 24px;
+ left: 200px;
+
+ option {
+ color: #FFFFFF !important;
+ font-size: 12px;
+ padding: 4px 40px;
+ border-radius: 6px;
+ border: 2px solid #B5B5B5;
+ background: linear-gradient(to top, #050A0D, #949494);
+ width: 100%;
+ text-align: center;
+
+ &:hover {
+ color: #000000 !important;
+ background: #CFCFCF;
+ background: linear-gradient(to top, #CFCFCF, #828282);
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .userList {
+ width: 200px;
+ border: black solid thin;
+ height: 210px;
+ margin-top: 18px;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ overflow: overlay;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ align-content: stretch;
+
+ .delete {
+ font-size: smaller;
+ align-self: center;
+ margin: 0px;
+ border-radius: 6px;
+ border: 2px solid #B5B5B5;
+ background: linear-gradient(to top, #050A0D, #949494);
+ color: white;
+ padding: 4px;
+ width: 100%;
+
+ &:hover {
+ color: #000000 !important;
+ background: #CFCFCF;
+ background: linear-gradient(to top, #CFCFCF, #828282);
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .contentContainer:nth-child(3) {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: flex-start;
+ padding-top: 70px;
+ }
+ }
+
+ .contentContainer {
+ height: 360px;
+
+ h2 {
+ font-size: medium;
+ width: 100%;
+ text-align: center;
+ }
+ }
+ .sortContainer {
+ display: flex;
+ width: 35%;
+ height: 100vh;
+ margin-top: 90px;
+ margin-right: 150px;
+ box-shadow: inset rgba(0, 0, 0, 0.5411764706) -1px -2px 20px 14px;
+ border-radius: 25px;
+ flex-direction: column;
+ align-items: center;
+ }
+}
+
+@mixin hide {
+ display: none;
+}
+
+@mixin draggables {
+
+}
\ No newline at end of file
diff --git a/src/domUpdates.js b/src/domUpdates.js
index 6ae66d238..b1212cc17 100644
--- a/src/domUpdates.js
+++ b/src/domUpdates.js
@@ -114,16 +114,6 @@ function sleepChartUpdate(randomUser, allUsers) {
wklySleepChart.update();
}
-function adminSleepChartUpdate(userId) {
- const userData = appState.sleep.sleepData.filter(data => data.userID === userId);
- const sleepHours = userData.map(data => data.hoursSlept);
- const sleepQuality = userData.map(data => data.sleepQuality);
-
- adminSleepChart.data.datasets[0].data = [average(sleepHours), average(sleepQuality)];
- adminSleepChart.update();
-}
-
-
export {
updateDom,
@@ -131,6 +121,6 @@ export {
updateAccountData,
displaySpecificDayOunces,
sleepChartUpdate,
- adminSleepChartUpdate,
+ //adminSleepChartUpdate,
};
diff --git a/src/scripts.js b/src/scripts.js
index f93322232..c57012b87 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -1,9 +1,10 @@
import './css/styles.css';
+// import './css/index.scss';
import './images/fitlit-logo.png';
import './images/white-texture.png';
import { updateDom, sleepChartUpdate, updateAccountData, } from './domUpdates';
import { fetchUserData, fetchHydrationData, fetchSleepData, fetchActivityData, postHydrationData } from './apiCalls';
-import { adminChart,stepChart,sleepChart,hydChart } from './chartSetup';
+import { adminChart,stepChart,sleepChart,hydChart,adminSleepChart,adminHydrationChart,adminActivityChart } from './chartSetup';
let appState = {
@@ -108,33 +109,8 @@ function getAverageSleepHours(randomUser) {
return averageSleepHours.toFixed(2)
}
+//Admin Chart Functions
function adminChartUpdate() {
- /*const totalAverageSleepQuality = getTotalAverageSleepData(appState.sleepData, 'sleepQuality')
- const totalAverageSleepHours = getTotalAverageSleepData(appState.sleepData, 'hoursSlept')
- const totalAverageHydration = getTotalAverageNumOunces()
- const totalAverageActiveMins = getTotalAverageActivityData(appState.activityData, 'minutesActive')
- const totalAverageFlightsOfStairs = getTotalAverageActivityData(appState.activityData, 'flightsOfStairs')
-
- const charts = {
- step: stepChart.data.datasets[0].data,
- sleep: sleepChart.data.datasets[0].data
- }
- const adminChartData = Object.values(chartUpdate.children).reduce((acc, child) => {
- acc.push(charts[child.value])
- console.log(charts[child.value])
- return acc
- },[])
- console.log(adminChart.data.datasets)
- adminChart.data.datasets[0].data = adminChartData
-//adminChart.data.labels = charts.step.labels
-//adminChart.data.datasets[0].data = charts.step.datasets[0].data = [totalAverageSleepHours]
-
-
- console.log('TEST', adminChart.data.datasets[0].data)
- adminChart.update()
-
- */
-
let chartLabels = [];
let chartData = [];
@@ -188,13 +164,43 @@ function adminChartUpdate() {
}
-/* example
-sleepChart.data.datasets[0].data = [hoursSleptRecentDay, sleepQualityRecentDay];
-sleepChart.options.scales.x.ticks.max = Math.max(hoursSleptRecentDay, sleepQualityRecentDay) + 10;
-*/
+function adminSleepChartUpdate(userId) {
+
+ const userSleepData = appState.sleep.sleepData.filter(data => data.userID === userId);
+ //console.log('USER SLEEP:', userSleepData)
+ const totalSleepHours = userSleepData.reduce((acc, curr) => acc + curr.hoursSlept, 0);
+ const averageSleepHours = totalSleepHours / userSleepData.length;
+
+ const totalSleepQuality = userSleepData.reduce((acc, curr) => acc + curr.sleepQuality, 0);
+ const averageSleepQuality = totalSleepQuality / userSleepData.length;
+
+ adminSleepChart.data.labels = ['Average Sleep Hours', 'Average Sleep Quality'];
+ adminSleepChart.data.datasets[0].data = [averageSleepHours, averageSleepQuality];
+ adminSleepChart.update();
+}
+
+function adminHydrationChartUpdate(userId) {
+ const userHydrationData = appState.hydration.hydrationData.filter(record => record.userID === userId);
+ const totalOunces = userHydrationData.reduce((acc, record) => acc + record.numOunces, 0);
+ const averageOunces = (totalOunces / userHydrationData.length).toFixed(2);
+
+ adminHydrationChart.data.datasets[0].data = [averageOunces];
+ adminHydrationChart.update();
+}
+
+function adminActivityChartUpdate(userId) {
+ const userActivityData = appState.activity.activityData.filter(record => record.userID === userId);
+ const totalMinutesActive = userActivityData.reduce((acc, record) => acc + record.minutesActive, 0);
+ const averageMinutesActive = (totalMinutesActive / userActivityData.length).toFixed(2);
+ const totalFlightsOfStairs = userActivityData.reduce((acc, record) => acc + record.flightsOfStairs, 0);
+ const averageFlightsOfStairs = (totalFlightsOfStairs / userActivityData.length).toFixed(2);
+ adminActivityChart.data.datasets[0].data = [averageMinutesActive, averageFlightsOfStairs];
+ adminActivityChart.update();
+}
+//
function getAverageSleepQuality(randomUser) {
let sameUserSleepData = getUserSleepData(randomUser)
let averageSleepQuality = 0
@@ -319,10 +325,14 @@ document.getElementById('submitHydrationData').addEventListener('click', () => {
return;
}
- postHydrationData(randomUser.id, date, numOunces)
+ postHydrationData(appState.randomUser, date, numOunces)
});
-
+document.querySelector('.userList').addEventListener('change', () => {
+ adminSleepChartUpdate(userId)
+ adminHydrationChartUpdate(userId)
+ adminActivityChartUpdate(userId)
+})
/////////
export {
@@ -349,17 +359,10 @@ const userSelect = document.querySelector('.userSelect')
const userList = document.querySelector('.userList')
const viewMenu = document.querySelector('.viewMenu')
const adminPanel = document.querySelector('.adminControls')
-const adminView = document.querySelector('.adminView')
const chartOptions = document.querySelector('.chartOptions'); //add these to target the sections
const chartUpdateSection = document.querySelector('.chartUpdate')
const fuzzySearch = document.querySelector('#fuzzySearch')
-
-adminView.addEventListener('click', () => {
- adminPanel.classList.toggle('collapsed')
- viewMenu.classList.toggle('hidden')
-})
-
const sortContainer = document.querySelector('.sortContainer');
const chartUpdate = document.querySelector('.chartUpdate');
diff --git a/webpack.config.js b/webpack.config.js
index 1f1eb1d03..6e09be097 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,7 +15,7 @@ module.exports = {
"module": {
"rules": [
{
- test: /\.css$/i,
+ test: /\.scss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
