Merge pull request #74 from edwin-chalmers/feat/adjust_css_and_add_mo…

…re_adminview Add CSS styling, fix bugs, add more adminview
edwin-chalmers · Feb 25, 2024 · e861dac · e861dac
2 parents 06c4e8a + 2ed9d44
commit e861dac
Show file tree

Hide file tree

Showing 5 changed files with 336 additions and 208 deletions.
diff --git 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
@@ -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
 }