From 35e29366520692e28d0710ebb47455bdd333902b Mon Sep 17 00:00:00 2001
From: tconey23 <145934889+tconey23@users.noreply.github.com>
Date: Sun, 25 Feb 2024 15:01:59 -0700
Subject: [PATCH] Add refactored Admin functions Co-authored-by: Theo M.
 <Virulencies@users.noreply.github.com> Co-authored-by: Edwin Chalmers
 <edwin-chalmers@users.noreply.github.com>

---
 README.md          |  2 +-
 dist/index.html    | 28 ++++++++++-----
 src/chartSetup.js  | 28 +++++++--------
 src/css/styles.css | 15 +++++---
 src/domUpdates.js  | 50 +++++++++++++-------------
 src/functions.js   |  6 ++--
 src/scripts.js     | 89 ++++++++++++----------------------------------
 src/sleep.js       | 24 +++++++++++++
 8 files changed, 119 insertions(+), 123 deletions(-)

diff --git a/README.md b/README.md
index b54aa8761..153f7a7e5 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Fitlit
 
-[Try it here!](http://example.com/)
+[Try it here!](https://edwin-chalmers.github.io/fitlit/)
 
 ## About
 FitLit is a dynamic and interactive dashboard project designed to emulate the functionality of activity tracking apps like Fitbit or Strava. The core objective of this project is to provide users with a comprehensive view of their personal activity data, including steps taken, water consumption, sleep patterns, and more, over various time frames. This project is executed with a focus on several key goals:
diff --git a/dist/index.html b/dist/index.html
index c61f3c578..bab22c98b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -44,8 +44,10 @@ <h1 class="welcome-message" id="welcomeMessage">welcome back (person.name)</h1>
               <p class="icon">&#128099;</p>
               <h3>Activity Data</h3>
             </section>
-            <h3>Activity Data</h3>
-            <canvas id="stepChart"></canvas>
+            <h3>Activity (steps)</h3>
+            <div class="chartContainer">
+            <canvas id="stepChart" responsive="true">
+          </div>
           </div>
         </section>
         <section class="water-main info-card  draggable" draggable="true" id="waterCard">
@@ -54,10 +56,14 @@ <h3>Activity Data</h3>
               <p class="icon">&#128167;</p>
               <h3>Hydration Data</h3>
             </section>
-            <p>Average Hydration Data (oz)</p>
-              <canvas id="hydChart"></canvas>
+            <h3>Average Hydration Data (oz)</h3>
+            <div class="chartContainer">
+              <canvas id="hydChart" responsive="true"></canvas>
+            </div>
             <p>Weekly Hydration Data (oz)</p>
-              <canvas id="wklyHydChart"></canvas>
+            <div class="chartContainer">
+              <canvas id="wklyHydChart" responsive="true"></canvas>
+            </div> 
             <div id="hydrationInputContainer">
               <input type="date" id="hydrationDate" placeholder="YYYY/MM/DD" required>
               <input type="number" id="hydrationAmount" placeholder="Ounces" required>
@@ -77,9 +83,15 @@ <h3>Sleep Data</h3>
                 <option>2023/07/01</option>
               </select>
             </section>
-            <canvas id="sleepChart"></canvas>
-            <canvas id="wklySleepChart"></canvas>
-            <canvas id="avgSleepChart"></canvas>
+              <div class="chartContainer">
+                <canvas id="sleepChart" responsive="true"></canvas>
+              </div>
+              <div class="chartContainer">
+                <canvas id="wklySleepChart" responsive="true"></canvas>
+              </div>
+              <div class="chartContainer">
+                <canvas id="avgSleepChart" responsive="true"></canvas>
+              </div>
           </div>
         </section>
         <section class="account-main info-card" id="accountCard">
diff --git a/src/chartSetup.js b/src/chartSetup.js
index efc914bd6..0a70fbc57 100644
--- a/src/chartSetup.js
+++ b/src/chartSetup.js
@@ -32,16 +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 = 100; 
-wklyHydCtx.canvas.height = 100;
-hydCtx.canvas.height = 100;
-sleepCtx.canvas.height = 60;
-avgSleepCtx.canvas.height = 150;
-wklySleepCtx.canvas.height = 80;
-adminCtx.canvas.height = 200;
-adminSleepCtx.canvas.height = 100;
-adminHydrationCtx.canvas.height = 100;
-adminActivityCtx.canvas.height = 100;
+// stepCtx.canvas.height = 100; 
+// wklyHydCtx.canvas.height = 100;
+// hydCtx.canvas.height = 100;
+// sleepCtx.canvas.height = 60;
+// avgSleepCtx.canvas.height = 150;
+// wklySleepCtx.canvas.height = 80;
+// adminCtx.canvas.height = 150;
+// adminSleepCtx.canvas.height = 150;
+// adminHydrationCtx.canvas.height = 150;
+// adminActivityCtx.canvas.height = 150;
 
 const stepChartData = {
   labels: ['Your step goal', 'Average step goal'],
@@ -82,7 +82,7 @@ const wklyHydChartData = {
 };
 
 const hydChartData = {
-  labels: ['Average Daily Hydration (oz)', 'Hydration For Specific Day (oz)'],
+  labels: ['Average Daily Hyd', 'Hydration For Spec Day'],
   datasets: [{
     label: '',
     data: [],
@@ -101,7 +101,7 @@ const hydChartData = {
 };
 
 const wklySleepChartData = {
-  labels: ['Weekly Hours Slept Per Day', 'Weekly Sleep Quality Per Day'],
+  labels: ['Wkly Hrs Slept / Day', 'Sleep Qual / Day'],
   datasets: [
     {
       label: 'Day1',
@@ -198,7 +198,7 @@ const wklySleepChartData = {
 };
 //////
 const avgSleepChartData = {
-  labels: ['Average Hours Slept Per Day', 'Average Sleep Quality Per Day'],
+  labels: ['Avg Hrs Slept / Day', 'Avg Sleep Qual / Day'],
   datasets: [{
     label: '',
     data: [],
@@ -217,7 +217,7 @@ const avgSleepChartData = {
 };
 
 const sleepChartData = {
-  labels: ['Hours Slept Per Recent Day', 'Sleep Quality Per Recent Day'],
+  labels: ['Hrs Slept / Rec Day', 'Sleep Qual / Rec Day'],
   datasets: [{
     label: '',
     data: [],
diff --git a/src/css/styles.css b/src/css/styles.css
index 6e02c2154..3f93dea24 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -280,7 +280,12 @@ canvas {
         flex-wrap: wrap;
         flex-direction: row;
         align-items: center;
-        scroll-margin-top: 220px
+        scroll-margin-top: 220px;
+        
+        .chartContainer {
+          width: 95%;
+        }
+
       }
 
       .iconSection {
@@ -386,8 +391,8 @@ canvas {
 
         .fa > p {
           position: absolute;
-          top: 120px;
-          left: 143px;
+          top: 240px;
+          left: 140px;
         }
         .chartOptions,
         .options {
@@ -433,8 +438,8 @@ canvas {
 
         .fa > p {
           position: absolute;
-          top: 380px;
-          left: 370px;
+          top: 240px;
+          left: 700px;
         }
 
         input {
diff --git a/src/domUpdates.js b/src/domUpdates.js
index b1212cc17..4ddfb8a23 100644
--- a/src/domUpdates.js
+++ b/src/domUpdates.js
@@ -4,15 +4,13 @@ import {
   getAverageDailyFluidOunces,
   getSpecificDay,
   getWeeklyFluidOunces,
-  getAverageSleepHours,
   getWeeklySleep,
-  getAverageSleepQuality,
-  getMostRecentSleepHours,
-  getMostRecentSleepQuality,
+  getAverageSleepData,
+  getMostRecentSleepData,
   getTotalAverageSleepData,
   getTotalAverageNumOunces,
   getTotalAverageActivityData,
-  adminChartUpdate
+  adminChartUpdate,
 } from './scripts'
 import { Chart, registerables } from 'chart.js/auto';
 import { stepChart, wklyHydChart, hydChart, avgSleepChart, sleepChart, wklySleepChart, setCharts, adminChart } from './chartSetup'
@@ -37,22 +35,21 @@ function displayWelcomeMessage(user) {
 }
 //////////
 
-        // refactor updateAccountFriends() + updateAccountStep() + updateAccountStride()
-
-        // + updateAccountName() + updateAccountEmail() + updateAccountAddress()
-        function updateAccountData(user) {
-          Object.keys(user).forEach(dataType => {
-            if (dataType === 'dailyStepGoal') {
-              document.querySelector(`#${dataType}`).textContent = `${user[dataType]} steps`;
-            } else if (dataType === 'strideLength') {
-              document.querySelector(`#${dataType}`).textContent = `${user[dataType]} ft.`;
-            } else if (dataType === 'id') { 
-              //don't do anything
-            } else { 
-              document.querySelector(`#${dataType}`).textContent = `${user[dataType]}`;
-            }
-          })
-        }
+// refactor updateAccountFriends() + updateAccountStep() + updateAccountStride()
+// + updateAccountName() + updateAccountEmail() + updateAccountAddress()
+function updateAccountData(user) {
+  Object.keys(user).forEach(dataType => {
+    if (dataType === 'dailyStepGoal') {
+      document.querySelector(`#${dataType}`).textContent = `${user[dataType]} steps`;
+    } else if (dataType === 'strideLength') {
+      document.querySelector(`#${dataType}`).textContent = `${user[dataType]} ft.`;
+    } else if (dataType === 'id') { 
+      //don't do anything
+    } else { 
+      document.querySelector(`#${dataType}`).textContent = `${user[dataType]}`;
+    }
+  })
+}
 
 function displayAverageDailyOunces(averageOunces) {
   return averageOunces.toFixed(2)
@@ -88,13 +85,14 @@ function hydrationChartUpdate(randomUser, allUsers) {
 }
 
 function sleepChartUpdate(randomUser, allUsers) {
-  const averageHoursSleptPerDay = getAverageSleepHours(randomUser)
-  const averageSleepQuality = getAverageSleepQuality(randomUser)
-  const hoursSleptRecentDay = getMostRecentSleepHours(randomUser)
-  const sleepQualityRecentDay = getMostRecentSleepQuality(randomUser)
+  const averageHoursSleptPerDay = getAverageSleepData(randomUser, 'hoursSlept')
+  const averageSleepQuality = getAverageSleepData(randomUser, 'sleepQuality')
+  const hoursSleptRecentDay = getMostRecentSleepData(randomUser, 'hoursSlept')
+  const sleepQualityRecentDay = getMostRecentSleepData(randomUser, 'sleepQuality')
 
   const selectedDate = document.querySelector('.dateSelector').value
   const sleepWeekAndDay = getWeeklySleep(randomUser, selectedDate)
+  console.log(selectedDate)
   const weeklySleepHoursPerDay = sleepWeekAndDay.weeklySleepHours
   const weeklySleepQualityPerDay = sleepWeekAndDay.weeklySleepQuality
 
@@ -115,6 +113,8 @@ function sleepChartUpdate(randomUser, allUsers) {
 }
 
 
+
+
 export {
   updateDom,
   displayWelcomeMessage,
diff --git a/src/functions.js b/src/functions.js
index 60fbe5d1a..c959271e0 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -106,10 +106,10 @@ export {
     getSpecificDay,
     getWeeklyFluidOunces,
     getUserSleepData,
-    getAverageSleepHours,
-    getAverageSleepQuality,
+    getAverageSleepData,
     getMostRecentSleepHours,
     getMostRecentSleepQuality,
     getWeeklySleepHours,
-    getWeeklySleepQuality
+    getWeeklySleepQuality,
+    getWeeklySleepData
 };
\ No newline at end of file
diff --git a/src/scripts.js b/src/scripts.js
index c57012b87..b911666fa 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -46,7 +46,7 @@ function fetchData() {
 
       updateDom(appState.randomUser, appState.account.user);
       generateUserList(justUsers)
-
+      console.log(sleepData)
     })
     .catch(error => console.error("Error loading data:", error));
 }
@@ -98,17 +98,6 @@ function getUserSleepData(randomUser) {
   return appState.sleep.sleepData.filter(user => user.userID === randomUser.id)
 }
 
-function getAverageSleepHours(randomUser) {
-  let sameUserSleepData = getUserSleepData(randomUser)
-  let averageSleepHours = 0
-  let totalSleepHours = 0
-  sameUserSleepData.forEach(obj => {
-    totalSleepHours += obj.hoursSlept
-  })
-  averageSleepHours = totalSleepHours / sameUserSleepData.length
-  return averageSleepHours.toFixed(2)
-}
-
 //Admin Chart Functions
 function adminChartUpdate() {
   let chartLabels = [];
@@ -200,50 +189,25 @@ function adminActivityChartUpdate(userId) {
   adminActivityChart.update();
 }
 
-// 
-function getAverageSleepQuality(randomUser) {
+// refactored getAverageSleepQuality() + getAverageSleepHours()
+function getAverageSleepData(randomUser, sleepDataType) {
   let sameUserSleepData = getUserSleepData(randomUser)
-  let averageSleepQuality = 0
-  let totalSleepQuality = 0
+  let averageSleep = 0
+  let totalSleep = 0
   sameUserSleepData.forEach(obj => {
-    totalSleepQuality += obj.sleepQuality
+    totalSleep += obj[sleepDataType]
   })
-  averageSleepQuality = totalSleepQuality / sameUserSleepData.length
-  return averageSleepQuality.toFixed(2)
+  averageSleep = totalSleep/ sameUserSleepData.length
+  return averageSleep.toFixed(2)
 }
 
-        // refactored getAverageSleepQuality() + getAverageSleepHours()
-        function getAverageSleepData(randomUser, sleepDataType) {
-          let sameUserSleepData = getUserSleepData(randomUser)
-          let averageSleep = 0
-          let totalSleep = 0
-          sameUserSleepData.forEach(obj => {
-            totalSleep += obj[sleepDataType]
-          })
-          averageSleep = totalSleep/ sameUserSleepData.length
-          return averageSleep.toFixed(2)
-        }
-
-function getMostRecentSleepHours(randomUser) {
+// refactored getMostRecentSleepHours() + getMostRecentSleepQuality()
+function getMostRecentSleepData(randomUser, sleepDataType) {
   let sameUserSleepData = getUserSleepData(randomUser)
   let latestSleepDataIndex = sameUserSleepData.length - 1
-  return sameUserSleepData[latestSleepDataIndex].hoursSlept
+  return sameUserSleepData[latestSleepDataIndex][sleepDataType]
 }
 
-function getMostRecentSleepQuality(randomUser) {
-  let sameUserSleepData = getUserSleepData(randomUser)
-  let latestSleepDataIndex = sameUserSleepData.length - 1
-  return sameUserSleepData[latestSleepDataIndex].sleepQuality
-}
-
-        // refactored getMostRecentSleepHours() + getMostRecentSleepQuality()
-        function getMostRecentSleepData(randomUser, sleepDataType) {
-
-          let sameUserSleepData = getUserSleepData(randomUser)
-          let latestSleepDataIndex = sameUserSleepData.length - 1
-          return sameUserSleepData[latestSleepDataIndex][sleepDataType]
-        }
-
 function getWeeklySleep(randomUser, selectedDay) {
   let selectedWeek = []
   let sameUserSleepData = getUserSleepData(randomUser)
@@ -253,24 +217,17 @@ function getWeeklySleep(randomUser, selectedDay) {
     }
   }
   return {
-    weeklySleepHours: getWeeklySleepHours(selectedWeek),
-    weeklySleepQuality: getWeeklySleepQuality(selectedWeek)
+    weeklySleepHours: getWeeklySleepData(selectedWeek, 'hoursSlept'),
+    weeklySleepQuality: getWeeklySleepData(selectedWeek, 'sleepQuality')
   }
 }
 
-function getWeeklySleepHours(selectedWeek) {
-  return selectedWeek[0].map(day => day.hoursSlept)
-}
+// refactored getWeeklySleepHours() + getWeeklySleepQuality()
 
-function getWeeklySleepQuality(selectedWeek) {
-  return selectedWeek[0].map(day => day.sleepQuality)
+function getWeeklySleepData(selectedWeek, sleepDataType) {
+  return selectedWeek[0].map(day => day[sleepDataType])
 }
 
-        // refactored getWeeklySleepHours() + getWeeklySleepQuality()
-        function getWeeklySleepData(selectedWeek, sleepDataType) {
-          return selectedWeek[0].map(day => day[sleepDataType])
-        }
-
 function getTotalAverageSleepData(sleepData, propertyName) {
   const total = appState.sleep.sleepData.reduce((sum, record) => sum + record[propertyName], 0);
   const average = total / appState.sleep.sleepData.length;
@@ -342,13 +299,9 @@ export {
   getAverageDailyFluidOunces,
   getSpecificDay,
   getWeeklyFluidOunces,
-  getAverageSleepHours,
-  getAverageSleepQuality,
-  getMostRecentSleepHours,
-  getMostRecentSleepQuality,
+  getAverageSleepData,
+  getMostRecentSleepData,
   getWeeklySleep,
-  getWeeklySleepHours,
-  getWeeklySleepQuality,
   getTotalAverageSleepData,
   getTotalAverageNumOunces,
   getTotalAverageActivityData,
@@ -426,6 +379,7 @@ filterInput.addEventListener('blur', () => {
 toolTips()
 }
 
+
 function filterUsers(e) {
   fuzzySearch.innerHTML = ''
   fuzzySearch.classList.remove('hidden')
@@ -440,10 +394,11 @@ function filterUsers(e) {
 function toolTips() {
   document.querySelectorAll('.fa').forEach((elem) => {
     elem.addEventListener('mouseover', (e) => {
-      e.target.children[0].classList.remove('hidden')
+      console.log(e.target)
+      e.target.classList.remove('hidden')
     })
     elem.addEventListener('mouseout', (e) => {
-      e.target.children[0].classList.add('hidden')
+      e.target.classList.add('hidden')
     })
   })
 }
diff --git a/src/sleep.js b/src/sleep.js
index 8379963f9..c5016461a 100644
--- a/src/sleep.js
+++ b/src/sleep.js
@@ -26,6 +26,17 @@ averageSleepQuality = totalSleepQuality / sameUserSleepData.length
 return averageSleepQuality.toFixed(2)
 }
 
+function getAverageSleepData(randomUser, sleepDataType) {
+    let sameUserSleepData = getUserSleepData(randomUser)
+    let averageSleep = 0
+    let totalSleep = 0
+    sameUserSleepData.forEach(obj => {
+      totalSleep += obj[sleepDataType]
+    })
+    averageSleep = totalSleep/ sameUserSleepData.length
+    return averageSleep.toFixed(2)
+  }
+
 function getMostRecentSleepHours(randomUser) {
 let sameUserSleepData = getUserSleepData(randomUser)
 let latestSleepDataIndex = sameUserSleepData.length - 1
@@ -38,6 +49,14 @@ let latestSleepDataIndex = sameUserSleepData.length - 1
 return sameUserSleepData[latestSleepDataIndex].sleepQuality
 }
 
+// refactored getMostRecentSleepHours() + getMostRecentSleepQuality()
+function getMostRecentSleepData(randomUser, sleepDataType) {
+
+    let sameUserSleepData = getUserSleepData(randomUser)
+    let latestSleepDataIndex = sameUserSleepData.length - 1
+    return sameUserSleepData[latestSleepDataIndex][sleepDataType]
+}
+
 function getWeeklySleepHours(selectedWeek) {
 return selectedWeek[0].map(day => day.hoursSlept)
 }
@@ -46,6 +65,11 @@ function getWeeklySleepQuality(selectedWeek) {
 return selectedWeek[0].map(day => day.sleepQuality)
 }
 
+// refactored getWeeklySleepHours() + getWeeklySleepQuality()
+function getWeeklySleepData(selectedWeek, sleepDataType) {
+    return selectedWeek[0].map(day => day[sleepDataType])
+}
+
 export {
     getUserSleepData,
     getAverageSleepHours,