Feat/adminchanges

README.md

@@ -1,78 +1,87 @@
-# FitLit Starter Kit
+# Fitlit
 
-The details of this project are outline in [this project spec](http://frontend.turing.io/projects/fitlit.html).
+[Try it here!](https://edwin-chalmers.github.io/fitlit/)
 
-## Setup
+## 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:
 
-1. Within your group, decide on **one** person to have the project repository (repo) on their GitHub account. Then, that person should *fork* this repo - on the top right corner of this page, click the **Fork** button.
-1. Both memebers of the group should clone down the _forked_ repo. Since you don't want to name your project "activity-tracker-starter", you can use an optional argument when you run git clone (you replace the [...] with the terminal command arguments): `git clone [remote-address] [what you want to name the repo]`
-1. Once you have cloned the repo, change into the directory and install the project dependencies. Run `npm install` to install project dependencies.
-1. Run `npm start` in the terminal to see the HTML page (you should see some boilerplate HTML displayed on the page).  `Control + C` is the command to stop running the local server.  Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems. This command is not specific to Webpack; make note of it for future use.   
-1. Make sure both members of your team are collaborators on the forked repo.  
-1. Do not run `npm audit fix --force`.  This will update to the latest version of packages.  We need to be using `[email protected]` which is not the latest version.  If you start to run into Webpack errors, first check that all group members are using the correct version.  
+  - Data Manipulation: Utilize object and array prototype methods to effectively manipulate user activity data.
+  - User Interface: Develop a user-friendly interface that clearly displays information, making it accessible and easy to understand.
+  - Testing: Implement a thorough testing suite using Test-Driven Development (TDD) to ensure code reliability and functionality.
+  - Network Requests: Make network requests to fetch data, providing a real-world application scenario and dynamic user experience.
+  - Collaboration: Work collaboratively within a team to ensure all members contribute meaningfully, with a professional approach to project management and communication.
 
-## Testing
+## Install
 
-Mocha and chai are already set up, with a boilerplate test for you..
-
-
-## Data Model
-
-**Users**
+1. Check Node.js Installation: 
+    * Ensure you have Node.js installed on your computer. If not, download and install it from the official Node.js website.
 
+2. Clone the Repository: 
+    * Clone the FitLit repository to your local machine by running the following command in your terminal:
 ```
-[
-  {
-    "id": [number],
-    "name": [string],
-    "address": [string],
-    "email": [string],
-    "strideLength": [number - feet],
-    "dailyStepGoal": [number - steps],
-    "friends": [array - one-way connection to other user(s)]
-  },
-  ...more user data
-]
+git clone <repository-URL>
 ```
+3. Navigate to Project Directory:
 
-**Activity**
-
+    * Change into the cloned project directory with:
 ```
-[
-  {
-    "userID": [number],
-    "date": [string YYYY/MM/DD],
-    "numSteps": [number - steps],
-    "minutesActive": [number - minutes],
-    "flightsOfStairs": [number - flights]
-  },
-  ...more activity data
-]
+cd FitLit
 ```
+4. Install Dependencies:
 
-**Hydration**
-
+    * Install all necessary dependencies by running:
 ```
-[
-  {
-    "userID": [number],
-    "date": [string YYYY/MM/DD],
-    "numOunces": [number - ounces]
-  },
-  ...more hydration data
-]
+npm install
 ```
+5. Start the Application:
 
-**Sleep**
-
+    * Launch the application by running:
 ```
-[
-  {
-    "userID": [number],
-    "date": [string YYYY/MM/DD],
-    "hoursSlept": [number - hours],
-    "sleepQuality": [number - unitless]
-  },
-  ...more sleep data
-]
+npm start
 ```
+6. Explore FitLit:
+    * You should now see the FitLit dashboard loaded in your browser, ready for you to explore the features and functionality.
+
+
+## Tech
+  - Jacascript ES6+
+  - HTML
+  - CSS
+  - Webpack
+  - Mocha and Chai
+  - Fetch API
+  - Git and GitHub
+  - chart.js
+
+## Reflections
+
+  ### Wins
+One of our most significant achievements in the FitLit project was the successful implementation of charts that dynamically populate with user information. By utilizing Chart.js, we were able to create visually appealing graphs and charts that update in real-time as new data is fetched from the server. This dynamic visualization of activity data, such as steps taken, water consumption, and sleep patterns, not only provides users with a clear and engaging overview of their health metrics but also encourages deeper engagement with their data. The ability to see their progress represented graphically allows users to easily identify trends, set goals, and monitor their achievements over time. This win significantly contributes to the overall user experience, making the FitLit dashboard not just a tool for tracking health metrics but also a motivational platform for users to improve their daily habits and overall well-being.
+
+  ### Challenges
+Implementing network requests within the FitLit project presented a unique set of challenges that required careful consideration and strategic problem-solving. Managing the timing and dependencies between different data fetches was critical, as the dashboard's functionality heavily relied on the successful loading and synchronization of user activity data. This complexity was compounded by the need to gracefully handle potential errors or delays in network responses, ensuring the user experience remained unaffected by underlying data fetching processes. Moreover, integrating these network requests with the existing application logic and user interface updates demanded a deep understanding of promises and **Promice.all**.
+
+  ### How the new feature was handled
+In developing a new feature for the FitLit project, our team conducted a brainstorming session to identify potential enhancements. We decided to add a drag and drop section for average user statistics, along with a 'select user' function that includes fuzzy search for finding specific user stats. These features were developed to provide straightforward mechanisms for users to interact with and access data, aiming to improve functionality and user experience without excessive complexity. The implementation process focused on ensuring these additions were integrated smoothly, enhancing the app's utility.
+
+  ### What was done to address accessibility
+In the development of the FitLit project, we prioritized accessibility to ensure an inclusive user experience, implementing keyboard navigation, testing with colorblind extensions for visual clarity, and achieving near-perfect scores in "Lighthouse" and "WAVE" accessibility audits. Our efforts extended to the use of semantic HTML and ARIA tags to enhance readability for screen readers and navigability for users with assistive technologies. These measures underscore our commitment to making FitLit universally accessible, enabling all users to engage with their health data effectively and comfortably, thereby fostering an environment of inclusivity and empowerment.
+
+  ### How usability testing was implemented
+Usability testing for the FitLit project was implemented through a structured, user-centric approach to ensure an intuitive and engaging user experience. We started the process with a diverse group of participants, ranging from tech-savvy individuals to those with minimal digital interaction, to cover a wide spectrum of user types. Data collected from these sessions was analyzed to identify common usability issues, user needs, and areas for improvement. Insights gained from this testing were implemented into the design and development processes, enhancing the overall usability of the FitLit project.
+
+  ### Up Next
+In future iterations, we aim to implement a dynamic chart system that enhances user interactivity and data exploration capabilities. This advanced system will empower users to tailor their data visualization experience by allowing them to select the chart type that best represents the information they wish to analyze. Users will have the flexibility to compare any set of data, enabling them to uncover unique insights and patterns by juxtaposing different data metrics side by side. Additionally, the system will feature a customizable time frame selection, granting users the ability to specify the period over which their data is sampled. This level of customization and control ensures that users can derive meaningful conclusions from their data, tailored precisely to their analytical needs and temporal interests, thereby maximizing the utility and accessibility of data visualization.
+
+## Screenshots
+<img width="1407" alt="image" src="https://github.com/edwin-chalmers/fitlit/assets/149631946/c8ae73c4-4ab5-4201-94e1-c5ca2a88c256">
+<img width="1407" alt="image" src="https://github.com/edwin-chalmers/fitlit/assets/149631946/e9f605f3-a010-4e2f-954b-379746f5fd73">
+
+## Project Board
+[See it here!](https://github.com/users/edwin-chalmers/projects/1)
+
+
+## Contributors
+- Edwin Chalmers : [email protected] : [github.com/edwin-chalmers](https://github.com/edwin-chalmers)
+- Tom Coney : [email protected] : [github.com/tconey23](https://github.com/tconey23)
+- Theotis McCray : [email protected] : [github.com/Virulencies](https://github.com/Virulencies)

dist/bundle.js

@@ -1,6 +1,6 @@
 /******/ (() => { // webpackBootstrap
   var __webpack_exports__ = {};
-  alert('hello')
+  // alert('hello')
   /******/
 })()
   ;

dist/index.html

@@ -1,14 +1,164 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Fitlit</title>
   </head>
   <body>
-    <h1>Activity Tracker</h1>
-    <img src="./images/turing-logo.png" alt="turing logo" height="100px" width="100px">
+    <nav class="topNav navBar" id="nav-bar"> 
+      <a class="homeButton underline" href="#top">Home</a>
+      <a class="stepsButton" href="#stepCard">Steps</a>
+      <a class="waterButton" href="#waterCard">Water</a>
+      <a class="sleepButton" href="#sleepCard">Sleep</a>
+      <a class="accountButton" href="#accountCard">Account</a>
+      <div>
+        <input type="button" value="View Options" class="viewButton">
+        <div class="viewMenu hidden">
+          <ul>
+            <li class="condMode">Toggle Admin Mode</li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <nav class="sideNav navBar" id="side-nav"> 
+      <a class="homeButton" href="#top">Home</a>
+      <a class="stepsButton" href="#stepCard">Steps</a>
+      <a class="waterButton" href="#waterCard">Water</a>
+      <a class="sleepButton" href="#sleepCard">Sleep</a>
+      <a class="accountButton" href="#accountCard">Account</a>
+    </nav>
+    <main class="mainContainer main" id="top">
+      <article>
+        <img class="full" src="./images/fitlit-logo.png" id="logo" alt="FitLit Logo">
+        <h1 class="welcome-message" id="welcomeMessage">welcome back (person.name)</h1>
+      </article>
+      <section class="sortContainer">
+        <section class="steps-main info-card draggable" draggable="true" id="stepCard">
+          <div class="section-text">
+            <section class="iconSection" id="stepCardHeader">
+              <p class="icon">&#128099;</p>
+              <h3>Activity Data</h3>
+            </section>
+            <h3>Activity (steps)</h3>
+            <div class="chartContainer">
+            <canvas id="stepChart" class="chart-z-positon chart" maintainAspectRatio="true" responsive="true">
+          </div>
+          </div>
+        </section>
+        <section class="water-main info-card  draggable" draggable="true" id="waterCard">
+          <div class="section-text">
+            <section class="iconSection" id="waterCardHeader">
+              <p class="icon">&#128167;</p>
+              <h3>Hydration Data</h3>
+            </section>
+            <h3>Average Hydration Data (oz)</h3>
+            <div class="chartContainer">
+              <canvas id="hydChart" class="chart-z-positon chart" responsive="true"></canvas>
+            </div>
+            <p>Weekly Hydration Data (oz)</p>
+            <div class="chartContainer">
+              <canvas id="wklyHydChart" class="chart-z-positon chart" responsive="true"></canvas>
+            </div> 
+            <div id="hydrationInputContainer">
+              <input type="date" id="hydrationDate" placeholder="YYYY/MM/DD" required>
+              <input type="number" id="hydrationAmount" placeholder="Ounces of H2O Drank" required>
+              <button id="submitHydrationData">Submit Hydration Data</button>
+            </div>  
+          </div>
+        </section>
+        <section class="sleep-main info-card  draggable chart" draggable="true" id="sleepCard">
+          <div class="section-text">
+            <section class="iconSection" id="sleepCardHeader">
+              <p class="icon">&#128719;</p>
+              <h3>Sleep Data</h3>
+            </section>
+            <section class="dateSection">
+              <label for="date-selector">Select date</label>
+              <select class="dateSelector" id="date-selector">
+                <option>2023/07/01</option>
+              </select>
+            </section>
+              <div class="chartContainer">
+                <canvas id="sleepChart" class="chart-z-positon chart" responsive="true"></canvas>
+              </div>
+              <div class="chartContainer">
+                <canvas id="wklySleepChart" class="chart-z-positon chart" responsive="true"></canvas>
+              </div>
+              <div class="chartContainer">
+                <canvas id="avgSleepChart" class="chart-z-positon chart" responsive="true"></canvas>
+              </div>
+          </div>
+        </section>
+        <section class="account-main info-card" id="accountCard">
+          <div class="section-text">
+            <section class="iconSection"  id="accoundCardHeader">
+              <p class="icon">&#128100;</p>
+              <h3>Account Details</h3>
+            </section>
+            <span><p>User:</p><h3 id="name">name</h3></span>
+            <span><p>Address:</p><h3 id="address">address</h3></span>
+            <span><p>Email:</p><h3 id="email">email</h3></span>
+            <span><p>Stride Length:</p><h3 id="strideLength">stride length</h3></span>
+            <span><p>Daily Step Goal:</p><h3 id="dailyStepGoal">daily step goal</h3></span>
+            <span><p>Friends:</p><h3 id="friends">friends</h3></span>
+          </div>
+        </section>
 
+
+      </section>
+      <!-- <section class="sizeableContainer">
+      </section> -->
+    <section class="adminControls">
+      <section class="titleBlock">
+        <h1>ADMIN CONTROLS</h1> 
+      </section>
+      <div class="container">
+        <section class="contentContainer">
+          <label>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></label>
+          <!-- <div> -->
+            <section class="chartOptions options">
+              <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>
+              <option class="draggable chartOpt" draggable="true" id="chartOptAllMinsActive" value="allMinsActive">Avg min active</option>
+              <option class="draggable chartOpt" draggable="true" id="chartOptAllFlightsOfStepsTraveled" value="allFlightsOfStepsTraveled">Avg Flt / Strs</option>
+            </section>
+              <section class="chartUpdate options"></section>
+          <!-- </div> -->
+            </section>
+            <section class="contentContainer">
+              <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">
+        <div class="chartContainer">
+          <canvas id="adminChart" class="chart"></canvas>
+        </div>
+        <div class="chartContainer">
+          <canvas id="adminSleepChart" class="userChart chart"></canvas>
+        </div>
+        <div class="chartContainer">
+          <canvas id="adminHydrationChart" class="userChart chart"></canvas>
+        </div>
+        <div class="chartContainer">
+         <canvas id="adminActivityChart" class="userChart chart"></canvas> 
+        </div>
+      </section>
+    </div>
+    </section>
+    </main>
 <!-- Do not include the scripts.js file here - it is done automatically by the webpack server -->
     <script src="bundle.js"></script>
   </body>
-</html>
+</html>
+

package.json

@@ -16,11 +16,14 @@
     "file-loader": "^6.2.0",
     "mocha": "^8.4.0",
     "mochapack": "^2.1.2",
-    "sass": "^1.34.0",
+    "sass": "^1.71.1",
     "sass-loader": "^12.0.0",
     "style-loader": "^2.0.0",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "chart.js": "^4.4.1"
   }
 }