Skip to content

Commit

Permalink
Merge pull request #75 from edwin-chalmers/feat/adminchanges
Browse files Browse the repository at this point in the history
Admin view upgrades and CSS fixes
  • Loading branch information
edwin-chalmers authored Feb 25, 2024
2 parents e861dac + 07f9fb9 commit 01bb2c6
Show file tree
Hide file tree
Showing 8 changed files with 749 additions and 217 deletions.
184 changes: 97 additions & 87 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@
<div class="viewMenu hidden">
<ul>
<li class="lightDark">Toggle dark/light mode</li>
<li class="condMode">Toggle condensed/full view</li>
<li class="adminView">Admin View</li>
<li class="condMode">Toggle Admin Mode</li>
</ul>
</div>
</div>
Expand All @@ -38,101 +37,112 @@
<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>
<section class="sizeableContainer">
<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>
<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 Data</h3>
</section>
<h3>Activity Data</h3>
<canvas id="stepChart"></canvas>
</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>
<p>Average Hydration Data (oz)</p>
<canvas id="hydChart"></canvas>
<p>Weekly Hydration Data (oz)</p>
<canvas id="wklyHydChart"></canvas>
<div id="hydrationInputContainer">
<input type="date" id="hydrationDate" placeholder="YYYY/MM/DD" required>
<input type="number" id="hydrationAmount" placeholder="Ounces" required>
<button id="submitHydrationData">Submit Hydration Data</button>
</div>
</div>
</section>
<section class="sleep-main info-card draggable" 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>
<canvas id="sleepChart"></canvas>
<canvas id="wklySleepChart"></canvas>
<canvas id="avgSleepChart"></canvas>
</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>
<!-- Update HTML in Account Details section to be dynamic with UpdateAccount refactor -->
<span><p>User:</p><h3 id="name">name</h3></span>
<canvas id="stepChart"></canvas>
</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>
<p>Average Hydration Data (oz)</p>
<canvas id="hydChart"></canvas>
<p>Weekly Hydration Data (oz)</p>
<canvas id="wklyHydChart"></canvas>
<div id="hydrationInputContainer">
<input type="date" id="hydrationDate" placeholder="YYYY/MM/DD" required>
<input type="number" id="hydrationAmount" placeholder="Ounces" required>
<button id="submitHydrationData">Submit Hydration Data</button>
</div>
</div>
</section>
<section class="sleep-main info-card draggable" 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>
<canvas id="sleepChart"></canvas>
<canvas id="wklySleepChart"></canvas>
<canvas id="avgSleepChart"></canvas>
</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>

<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></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">
<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="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></Strs></option>
</section>
<section class="chartUpdate options"></section>
</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 class="chartContainer">
<canvas id="adminChart" responsive="true"></canvas>
</div>
<div class="chartContainer">
<canvas id="adminSleepChart" responsive="true"></canvas>
</div>
<div class="chartContainer">
<canvas id="adminHydrationChart" responsive="true"></canvas>
</div>
<div class="chartContainer">
<canvas id="adminActivityChart" responsive="true"></canvas>
</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>
Expand Down
10 changes: 7 additions & 3 deletions src/chartSetup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
146 changes: 146 additions & 0 deletions src/css/index.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 01bb2c6

Please sign in to comment.