From 2ed9d444872cd6612c6c0ad8207dc7f1798c5768 Mon Sep 17 00:00:00 2001
From: Theo McCray <tlmccraycray@gmail.com>
Date: Sat, 24 Feb 2024 17:15:38 -0700
Subject: [PATCH] Add CSS styling, fix bugs, add more adminview

Co-authored-by Edwin Chalmers : <edwinchalmers@gmail.com>
Co-authored-by Tom Coney : <tom.ce.coney@gmail.com>
Co-authored-by Theotis McCray : <tlmccraycray@gmail.com>
---
 dist/index.html    |  14 +-
 src/chartSetup.js  |  64 ++++++-
 src/css/styles.css | 431 ++++++++++++++++++++++++++-------------------
 src/domUpdates.js  |  18 +-
 src/scripts.js     |  17 +-
 5 files changed, 336 insertions(+), 208 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 69adfa05c..6532515ba 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -103,16 +103,12 @@ <h3>Account Details</h3>
     </section>
     <section class="adminControls">
       <section class="titleBlock">
-        <h1>ADMIN CONTROLS</h1>
+        <h1>ADMIN CONTROLS</h1> 
       </section>
       <div class="container">
       <section class="contentContainer">
-        <h1>Select chart options below</h1>
-        <i style="font-size:24px" title="drag and drop" class="fa">&#xf059;</i>
+        <h2>Select chart options below <i style="font-size:24px" title="drag and drop" class="fa">&#xf059;<p class="hidden">Drag options from the left container to the right container <br> Double click options to remove them</p></i></h2>
         <section class="chartOptions options">
-          <option class="draggable chartOpt" draggable="true" id="chartOptSleep" value="sleep">sleep</option>
-          <option class="draggable chartOpt" draggable="true" id="chartOptHydration" value="hyd">hydration</option>
-          <option class="draggable chartOpt" draggable="true" id="chartOptActivity"  value="step">activity</option>
           <option class="draggable chartOpt" draggable="true" id="chartOptAllSleepHours" value="allSleepHours">Avg Sleep (Hr)</option>
           <option class="draggable chartOpt" draggable="true" id="chartOptAllSleepQuality" value="allSleepQuality">Avg Sleep (Qlt)</option>
           <option class="draggable chartOpt" draggable="true" id="chartOptAllNumOunces" value="allNumOunces">Avg Hyd (oz)</option>
@@ -123,18 +119,20 @@ <h1>Select chart options below</h1>
         <section class="chartUpdate options"></section>
       </section>
       <section class="contentContainer">
-        <label>Select User</label>
+        <label>Select User <i style="font-size:24px" title="drag and drop" class="fa">&#xf059;<p class="hidden">Add any number of users from the list below <br> Double click users to remove them</p></i></label>
         <div class="userSelectContainer">
           <div id="myDropdown" class="dropdown-content userSelect hidden"></div>
           <div id="fuzzySearch" class="dropdown-content userSelect hidden fuzzySearch"></div>
           <input type="text" placeholder="Search.." class="filter-field" id="filterField">
-
         </div>
         <section class="userList options">
         </section>
       </section>
       <section class="contentContainer">
         <canvas id="adminChart"></canvas>
+        <canvas id="sleepChartAdmin"></canvas>
+        <canvas id="hydrationChartAdmin"></canvas>
+        <canvas id="activityChartAdmin"></canvas> 
       </section>
     </div>
     </section>
diff --git a/src/chartSetup.js b/src/chartSetup.js
index 3e2c5b19e..ef19b8a06 100644
--- a/src/chartSetup.js
+++ b/src/chartSetup.js
@@ -28,13 +28,16 @@ const avgSleepCtx = document.getElementById('avgSleepChart').getContext('2d');
 const wklySleepCtx = document.getElementById('wklySleepChart').getContext('2d');
 const sleepCtx = document.getElementById('sleepChart').getContext('2d');
 const adminCtx = document.getElementById('adminChart').getContext('2d');
+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; 
-// wklyHydCtx.canvas.height = 100;
-// hydCtx.canvas.height = 100;
-// sleepCtx.canvas.height = 60;
-// avgSleepCtx.canvas.height = 60;
-// wklySleepCtx.canvas.height = 100;
+stepCtx.canvas.height = 200; 
+wklyHydCtx.canvas.height = 100;
+hydCtx.canvas.height = 100;
+sleepCtx.canvas.height = 60;
+avgSleepCtx.canvas.height = 60;
+wklySleepCtx.canvas.height = 100;
 
 const stepChartData = {
   labels: ['Your step goal', 'Average step goal'],
@@ -336,6 +339,52 @@ const wklySleepChart = new Chart(wklySleepCtx, {
   }
 })
 
+const adminSleepChart = new Chart(adminSleepCtx, {
+  type: 'bar', 
+  data: {
+      labels: ['Average Sleep Hours', 'Average Sleep Quality'], 
+      datasets: [{
+          label: 'Sleep Data',
+          data: [],
+          backgroundColor: ['#1a1a1a'],
+          borderColor: ['#1a1a1a'],
+          borderWidth: 1,
+      }]
+  },
+  options: vertOptions
+});
+
+
+const adminHydrationChart = new Chart(adminHydrationCtx, {
+  type: 'bar', 
+  data: {
+      labels: ['Average Ounces Drank'], 
+      datasets: [{
+          label: 'Hydration Data',
+          data: [],
+          backgroundColor: ['#1a1a1a'],
+          borderColor: ['#1a1a1a'],
+          borderWidth: 1,
+      }]
+  },
+  options: vertOptions
+});
+
+const adminActivityChart = new Chart(adminActivityCtx, {
+  type: 'bar', 
+  data: {
+      labels: ['Active Average', 'Flights of Steps Average'], 
+      datasets: [{
+          label: 'Sleep Data',
+          data: [],
+          backgroundColor: ['#1a1a1a'],
+          borderColor: ['#1a1a1a'],
+          borderWidth: 1,
+      }]
+  },
+  options: vertOptions
+});
+
 export {
     stepChart,
     wklyHydChart,
@@ -344,5 +393,8 @@ export {
     avgSleepChart,
     wklySleepChart,
     adminChart,
+    adminSleepChart,
+    adminHydrationChart,
+    adminActivityChart,
     setCharts
 }
\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
index a17851ef5..819742442 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -34,8 +34,32 @@ main {
     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;
+      }
+    }
   }
-  .info-card {
+  /* .section-text {
     border-radius: 5%;
     width: 75%;
     height: 75%;
@@ -48,15 +72,8 @@ main {
     align-items: center;
     padding: 10px;
     background: transparent;
-    .section-text {
-      width: 75%;
-      height: 100vh;
-      padding: 6%;
-      margin: 10px;
-      display: flex;
-      justify-content: center;
-    }
-  }
+  } */
+
 }
 
 input {
@@ -216,95 +233,150 @@ canvas {
   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: 75%;
+      height: 100%;
+      padding: 0px;
+      margin: 5px;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-content: flex-start;
+      font-size: 10px;
+
+      .section-text {
+        width: 75%;
+        height: 30vh;
+        padding: 0%;
+        margin: 0px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 5%;
+        box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
+        background: transparent;
+        padding: 0px;
+      }
+
+      .iconSection {
+        height: 28px;
+        z-index: 10;
+        font-size: 10px;
+        margin-bottom: 5px;
+        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;
+
+        .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: 60%;
     height: 500px;
-    margin-top: 90px;
-    margin-right: 150px;
     border-radius: 25px;
     flex-direction: column;
     align-items: center;
     position: absolute;
-    left: 450px;
-    top: -40px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
     background: white;
     z-index: 10;
-    box-shadow: rgba(0, 0, 0, 0.5607843137) 8px 7px 18px 11px;
+    box-shadow: rgba(120, 37, 37, 0.561) 8px 7px 18px 11px;
     overflow: hidden;
     border: black solid thin;
-    .titleBlock{
+
+    .titleBlock {
       width: 100%;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
     }
-    .container{
+
+    .container {
       width: 100%;
       height: 88%;
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: flex-start;
-    .contentContainer:nth-child(1) {
-      width: 33%;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-content: stretch;
-      justify-content: space-around;
-      padding-top: 70px;
-      .chartOptions, .options{
-        border: black solid thin;
-        box-shadow: black 0 0;
-        border-radius: 10px;
-        height: 200px;
-        width: 173px;
-        padding-top: 10px;
-        font-size: 10px;
+
+      .contentContainer:nth-child(1) {
+        width: 33%;
         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;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-content: stretch;
+        justify-content: space-around;
+        .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;
         }
-    }
-   }
-    .contentContainer:nth-child(2) {
-      width: 33%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: flex-start;
-      padding-top: 11px;
-      .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: 530px;
+
         option {
           color: #FFFFFF !important;
           font-size: 12px;
@@ -312,17 +384,66 @@ canvas {
           border-radius: 6px;
           border: 2px solid #B5B5B5;
           background: linear-gradient(to top, #050A0D, #949494);
-          width: 100%;
-          text-align: center;
+          width: 90px;
+
           &:hover {
             color: #000000 !important;
             background: #CFCFCF;
             background: linear-gradient(to top, #CFCFCF, #828282);
             cursor: pointer;
+          }
+        }
+      }
+
+      .contentContainer:nth-child(2) {
+        width: 33%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        padding-top: 11px;
+
+        p {
+          position: absolute;
+          top: 30px;
+          left: 430px;
+        }
+
+        .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: 530px;
+
+          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;
@@ -335,17 +456,19 @@ canvas {
         justify-content: flex-start;
         flex-wrap: wrap;
         align-content: stretch;
-        .delete{
+
+        .delete {
           font-size: smaller;
           align-self: center;
           margin: 0px;
           border-radius: 6px;
           border: 2px solid #B5B5B5;
-          background: linear-gradient(to top, #050A0D,#949494);
+          background: linear-gradient(to top, #050A0D, #949494);
           color: white;
           padding: 4px;
           width: 100%;
-          &:hover{
+
+          &:hover {
             color: #000000 !important;
             background: #CFCFCF;
             background: linear-gradient(to top, #CFCFCF, #828282);
@@ -354,113 +477,57 @@ canvas {
         }
       }
     }
-      .contentContainer:nth-child(3) {
-        width: 33%;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: flex-start;
-        padding-top: 70px;
-      }
+
+    .contentContainer:nth-child(3) {
+      width: 33%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: flex-start;
+      padding-top: 70px;
+    }
   }
+
   .contentContainer {
     height: 360px;
-  }
-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;
- }
- .sizeableContainer {
-  width: 25%;
-  margin-top: 90px;
- }
-    article{
-      padding: 0px;
-      position: fixed;
-      top: 15px;
-      left: 13px;
-      h1{
-        display: none;
-      }
-      img{
-        width: 70px;
-        position: absolute;
-        left: 0;
-      }
+    h2 {
+      font-size: medium;
     }
-      .info-card{
-        border-radius: 5%;
-        width: 75%;
-        height: 250px;
-        display: flex;
-        box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
-        max-width: 75%;
-        align-items: center;
-        background: transparent;
-        flex-direction: column;
-        justify-content: flex-start;
-        margin: 10px;
-        padding: 0px;
-        .section-text{
-          width: 75%;
-          height: 100%;
-          padding: 0px;
-          margin: 5px;
-          display: flex;
-          justify-content: center;
-          flex-wrap: wrap;
-          flex-direction: row;
-          align-content: flex-start;
-          font-size: 10px;
-        }
-      .iconSection{
-        height: 28px;
-        z-index: 10;
-        font-size: 10px;
-        margin-bottom: 5px;
-        justify-content: center;
-        &:hover{
-          cursor: grab;
-        }
-      }
-      canvas {
-      }
-      p{
-        font-size: 10px;
-      }
-    }
-    .account-main {
-      position: absolute;
-      left: 70px;
-      top: 0px;
-      width: 560px;
-      height: 250px;
-      box-shadow: none;
-    .iconSection{
-      display:none;
-    }
-    }
-}
+  }
 
-.collapsed {
-  display: none !important;
+  /* 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 {
+    display: none !important;
+  }
 
+.fa > p{
+  font-size: 10px;
+  background: antiquewhite;
+  padding: 8px;
+  border: black solid thin;
+  box-shadow: #0000007d 8px 7px 14px 4px;
+}
diff --git a/src/domUpdates.js b/src/domUpdates.js
index 8249822bd..6ae66d238 100644
--- a/src/domUpdates.js
+++ b/src/domUpdates.js
@@ -114,18 +114,15 @@ function sleepChartUpdate(randomUser, allUsers) {
   wklySleepChart.update();
 }
 
-//try to set up adminchart
-/*function adminChartUpdate() {
-  const totalAverageSleep = getTotalAverageSleepData()
-  const totalAverageHydration = getTotalAverageNumOunces()
-  const totalAverageActivity = getTotalAverageActivityData()
+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);
 
-  adminChart.data.datasets[0].data = [] //needs to be set
-  adminChart.options.scales.x.ticks.max = Math.max() + 10; //same here. outside of numsteps, it seems like minutesactive goes to the highest number
-
-  adminChart.update();
+  adminSleepChart.data.datasets[0].data = [average(sleepHours), average(sleepQuality)];
+  adminSleepChart.update();
+}
 
-} */
 
 
 export {
@@ -134,5 +131,6 @@ export {
   updateAccountData,
   displaySpecificDayOunces,
   sleepChartUpdate,
+  adminSleepChartUpdate,
 };
 
diff --git a/src/scripts.js b/src/scripts.js
index 61434432b..f93322232 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -187,7 +187,6 @@ function adminChartUpdate() {
   adminChart.update()
 
 }
-adminChartUpdate()
 
 /* example
 sleepChart.data.datasets[0].data = [hoursSleptRecentDay, sleepQualityRecentDay];
@@ -388,7 +387,7 @@ function handleDrop(event) {
       chartUpdateSection.appendChild(draggableElement);
       draggableElement.classList.add('remove')
       removeEvent()
-      //adminChartUpdate(draggableElement.id); //call to update the admin chart - we need to flesh out logic for this
+      adminChartUpdate(draggableElement.id); //call to update the admin chart - we need to flesh out logic for this
     } else {
 
       addChartOpt(draggableElement)
@@ -421,6 +420,7 @@ fuzzySearch.addEventListener('mousedown', (e) => {
 filterInput.addEventListener('blur', () => {
   fuzzySearch.classList.add('hidden')
 })
+toolTips()
 }
 
 function filterUsers(e) {
@@ -434,6 +434,17 @@ function filterUsers(e) {
   })
 }
 
+function toolTips() {
+  document.querySelectorAll('.fa').forEach((elem) => {
+    elem.addEventListener('mouseover', (e) => {
+      e.target.children[0].classList.remove('hidden')
+    })
+    elem.addEventListener('mouseout', (e) => {
+      e.target.children[0].classList.add('hidden')
+    })
+  })
+}
+
 
 // Add event listeners to the sort container and chart options
 sortContainer.addEventListener('dragover', handleDragOver);
@@ -473,6 +484,7 @@ function removeEvent() {
   options.forEach((option) => {
     option.addEventListener("dblclick", removeAndAppend);
   });
+
 }
 
 function removeAndAppend(e) {
@@ -482,6 +494,7 @@ function removeAndAppend(e) {
   chartOptions.innerHTML += elementHTML;
   target.remove();
   setDraggableElements();
+  adminChartUpdate()
 }