matt/stratos
1
0
Fork 0
mirror of https://github.com/matt-fidd/stratos.git synced 2026-01-01 18:39:32 +00:00
Code Issues Projects Releases Wiki Activity

Added dashboard page

Browse Source
This commit is contained in:
matt
2022-02-04 23:44:05 +00:00
parent 15fd143477
commit e07e323bd8
7 changed files with 217 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.js
View File

@@ -80,6 +80,11 @@ async function main() {
}
}));
app.get('*', (req, res, next) => {
req.app.locals.layout = 'main';
next();
});
app.get('/admin/*', (req, res, next) => {
req.app.locals.layout = 'admin';
next();

18
routes/admin.js Normal file
View File

@@ -0,0 +1,18 @@
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
return res.redirect('/admin/dashboard');
});
router.get('/dashboard', (req, res) => {
return res.render('dashboard', {
title: 'Stratos - Dashboard'
});
});
module.exports = {
root: '/admin',
router: router
};

9
src/stylesheets/components/_adminNav.scss
View File

@@ -1,5 +1,5 @@
.adminNav {
display: flex;
display: none;
flex-direction: column;
justify-content: space-between;
align-items: center;
@@ -11,8 +11,6 @@
padding: 3rem 0;
padding-top: 5rem;
display: none;
a {
color: white;
}
@@ -20,6 +18,7 @@
&__profile {
display: flex;
flex-direction: column;
padding-bottom: 4rem;
img {
border-radius: 100%;
@@ -36,6 +35,10 @@
align-self: flex-end;
text-decoration: underline;
}
@include respond-to('large') {
padding-bottom: 0;
}
}
&__items {

3
src/stylesheets/components/_mainNav.scss
View File

@@ -5,8 +5,7 @@
padding: 0.5em 1em;
&__buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
display: flex;
align-items: center;
justify-items: end;
gap: 1em;

1
src/stylesheets/main.scss
View File

@@ -19,3 +19,4 @@
@import 'components/adminNavItem';
@import 'pages/index';
@import 'pages/dashboard';

77
src/stylesheets/pages/_dashboard.scss Normal file
View File

@@ -0,0 +1,77 @@
.adminContent {
min-height: 91vh;
background-color: #E5E5E5;
padding: .5rem 2rem 0 2rem;
.dashboard__item {
padding: .7rem;
background-color: white;
border-radius: 15px;
}
.dashboard__row {
margin: 1rem 0;
&:last-child {
margin-bottom: 0;
padding-bottom: 1rem;
}
h2 {
color: $text-colour;
font-weight: normal;
margin-left: .5rem;
}
}
.dashboard__table {
background-color: #E5E5E5;
padding: 1rem;
border-radius: 15px;
table {
width: 100%;
}
tr {
@include on-event() {
background-color: white;
cursor: pointer;
}
}
td {
padding: .5rem;
&:last-child {
width: 100%;
}
}
}
.dashboard__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
.dashboard__stat {
text-align: center;
padding: 1rem;
h2 {
color: $primary-colour;
margin: .75rem 0;
font-weight: bold;
}
}
@include respond-to('medium') {
grid-template-columns: repeat(4, 1fr);
}
}
@include respond-to('large') {
margin-left: 20vw;
}
}

109
views/dashboard.hbs Normal file
View File

@@ -0,0 +1,109 @@
<section class='dashboard'>
<div class='dashboard__row dashboard__stats'>
<div class='dashboard__stat dashboard__item'>
<h2>5</h2>
<span>Classes</span>
</div>
<div class='dashboard__stat dashboard__item'>
<h2>11</h2>
<span>Completed Tests</span>
</div>
<div class='dashboard__stat dashboard__item'>
<h2>1</h2>
<span>Upcoming Test</span>
</div>
<div class='dashboard__stat dashboard__item'>
<h2>90%</h2>
<span>Pass Rate</span>
</div>
</div>
<div class='dashboard__row'>
<div class='dashboard__item'>
<h2>Recent Tests</h2>
<div class='dashboard__table'>
<table>
<tr data-id='1'>
<td>
08/01/2022
</td>
<td>
Lagged homework 8
</td>
</tr>
<tr data-id='2'>
<td>
08/01/2022
</td>
<td>
Lagged homework 8
</td>
</tr>
<tr data-id='3'>
<td>
08/01/2022
</td>
<td>
Lagged homework 8
</td>
</tr>
</table>
</div>
</div>
</div>
<div class='dashboard__row'>
<div class='dashboard__item'>
<h2>Upcoming Tests</h2>
<div class='dashboard__table'>
<table>
<tr data-id='1'>
<td>
08/01/2022
</td>
<td>
Lagged homework 8
</td>
</tr>
<tr data-id='2'>
<td>
08/01/2022
</td>
<td>
Lagged homework 8
</td>
</tr>
<tr data-id='3'>
<td>
08/01/2022
</td>
<td>
Lagged homework 8
</td>
</tr>
</table>
</div>
</div>
</div>
</section>
<script>
const toggle = document.querySelector('.adminNav-toggle');
const nav = document.querySelector('.adminNav');
toggle.addEventListener('click', () => {
nav.style.display =
(nav.style.display === 'flex')
? 'none'
: 'flex';
toggle.classList.toggle('fa-bars');
toggle.classList.toggle('fa-close');
});
const tests = document.querySelectorAll('.dashboard__table tr');
tests.forEach(test => {
test.addEventListener('click', () => {
window.location.href =
`/tests/${test.getAttribute('data-id')}`;
});
});
</script>