Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor #14

Merged
merged 23 commits into from Jan 10, 2020
Merged

Refactor #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
026ec44
move user data to nav dropdown
bennettscience Jan 8, 2020
6932a63
nuke sidebar
bennettscience Jan 8, 2020
8a91b6d
main container layout applied
bennettscience Jan 8, 2020
d8d93b8
continue traditional layout
bennettscience Jan 8, 2020
eebba5d
submit button placement finished
bennettscience Jan 9, 2020
762d4c5
finished navbar styles
bennettscience Jan 9, 2020
564cce5
realign filter icon with button text
bennettscience Jan 9, 2020
247458e
soften green on registration code validation, round corners
bennettscience Jan 9, 2020
713f95b
remove unused card template in favor of template literals
bennettscience Jan 9, 2020
eb8c086
clean up user course templates
bennettscience Jan 9, 2020
5f2995c
turn that cancel button red
bennettscience Jan 9, 2020
9bfa9f7
use `form` element on the submit button to submit the form outside th…
bennettscience Jan 9, 2020
64ff42d
small refactor
bennettscience Jan 9, 2020
6e25192
Major changes:
bennettscience Jan 9, 2020
b2020e6
login refactor
bennettscience Jan 10, 2020
82447eb
login views updated, namespace refactor
bennettscience Jan 10, 2020
d183429
refactor building change flow
bennettscience Jan 10, 2020
573a0c3
store local image instead of online reference
bennettscience Jan 10, 2020
fd76d70
refactor using materialize grid
bennettscience Jan 10, 2020
7fc9889
refactor course details layout
bennettscience Jan 10, 2020
6ac14f7
Refactors
bennettscience Jan 10, 2020
f8465cd
removed some jQuery
bennettscience Jan 10, 2020
12effe0
some whitespace changes
bennettscience Jan 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 29 additions & 27 deletions dashboard.html
View file
Open in desktop
Expand Up @@ -24,33 +24,35 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TRD2J67"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="wrap" class="admin">
<div id="admin-sidebar" class="card">
<div class="input-field">
<select id="run-button-type">
<option value="trainer">Trainer</option>
<option value="admin">Administrator</option>
</select>
<label>Select Role</label>
</div>
<div class="input-field">
<select name="" id="range-select">
<option value="past">Past</option>
<option value="future">Upcoming</option>
</select>
<label>Date Range</label>
</div>
<div class="input-field">
<input type="text" value="" placeholder="MM/DD/YYYY" class="active datepicker" id="date-select"/>
<label>Specific date</label>
</div>
<button id="run-button" class="btn btn-primary">Find Courses</button>
<div class="back"><i class="material-icons blue-text inline-icon">arrow_left</i><a href="/">Back</a></div>
</div> <!-- /#admin-sidebar -->
<main class="admin">
<div id="course-update"></div>
<div id="placeholder"></div>
</main>
<div id="admin-wrap" class="admin container">
<div class="row">
<div id="admin-sidebar" class="card col s3">
<div class="input-field">
<select id="run-button-type">
<option value="trainer">Trainer</option>
<option value="admin">Administrator</option>
</select>
<label>Select Role</label>
</div>
<div class="input-field">
<select name="" id="range-select">
<option value="past">Past</option>
<option value="future">Upcoming</option>
</select>
<label>Date Range</label>
</div>
<div class="input-field">
<input type="text" value="" placeholder="MM/DD/YYYY" class="active datepicker" id="date-select"/>
<label>Specific date</label>
</div>
<button id="run-button" class="btn btn-primary">Find Courses</button>
<div class="back"><i class="material-icons blue-text inline-icon">arrow_left</i><a href="/">Back</a></div>
</div> <!-- /#admin-sidebar -->
<main class="admin col s8 push right">
<div id="course-update"></div>
<div id="placeholder"></div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Expand Down
Binary file added img/ecsLogoLogin.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
316 changes: 157 additions & 159 deletions index.html
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 30 additions & 21 deletions scripts/dashboard.js
View file
Open in desktop
@@ -1,4 +1,4 @@
function Dashboard() {
function Admin() {
this.teachers = document.querySelector('teachers');
this.runButton = document.getElementById('run-button');
this.course = document.querySelectorAll('.wkshp-title');
Expand All @@ -21,21 +21,21 @@ function Dashboard() {

// The user should still be logged in, but if they aren't,
// they can log in here.
Dashboard.prototype.initFirebase = function() {
Admin.prototype.initFirebase = function() {
this.auth = firebase.auth();
this.database = firebase.database();

this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};

Dashboard.prototype.onAuthStateChanged = function(user) {
Admin.prototype.onAuthStateChanged = function(user) {
if(!user) {
this.signIn().bind(this);
}
};

// List all participants for a course if you're a trainer
Dashboard.prototype.findTrainerCourses = function(filter, filterDate) {
Admin.prototype.findTrainerCourses = function(filter, filterDate) {
let courseDb = this.database.ref('courses/');
const parent = document.getElementById('placeholder');
let dateInput = document.getElementById('date-select').value;
Expand Down Expand Up @@ -180,10 +180,19 @@ Dashboard.prototype.findTrainerCourses = function(filter, filterDate) {
// See more at https://gist.github.com/wiledal/3c5b63887cc8a010a330b89aacff2f2e
container.innerHTML =
`
<span class="wkshp-title" onclick="Dashboard.prototype.updateSession('${id}')" data-id="${id}"><h5><i class="material-icons">edit</i>${title} [${status}] - (${userArray.length})</h5></span>
<span class="wkshp-date"><h6>${ smallFormat(start) }</h6></span>
<a data-name="Send email" class="email" href="${emailString}" title="Send email"><i class="small material-icons">email</i></a>
<i data-name="Download registrations" onclick="download_csv('users-${id}')" class="download small material-icons">cloud_download</i>
<span class="wkshp-title" data-id="${id}"><h5>${title} [${status}] - (${userArray.length})</h5></span>
<span class="wkshp-date"><h6>${ smallFormat(start) }</h6></span>
<ul class="admin-actions">
<li>
<a class="edit" data-id="${id}" href="#" onclick="Admin.prototype.updateSession('${id}');"><i class="material-icons">edit</i></a>
</li>
<li>
<a data-name="Send email" class="email" href="${emailString}" title="Send email"><i class="small material-icons">email</i></a>
</li>
<li>
<i data-name="Download registrations" onclick="download_csv('users-${id}')" class="download small material-icons">cloud_download</i>
</li>
</ul>
<div class="teachers">
<div class="list">
${ userArray.map((item) =>
Expand All @@ -199,7 +208,7 @@ Dashboard.prototype.findTrainerCourses = function(filter, filterDate) {
});
};

Dashboard.prototype.findAdminCourses = function(filter) {
Admin.prototype.findAdminCourses = function(filter) {
const parent = document.getElementById('placeholder');
let userDb = this.database.ref('users/');
let courseDb = this.database.ref('courses/');
Expand Down Expand Up @@ -280,25 +289,25 @@ Dashboard.prototype.findAdminCourses = function(filter) {
if(teachers.length > 0) {

container.innerHTML =`
<span class="wkshp-title"><h5>${ course.title } - (${teachers.length})</h5></span>
<span class="wkshp-date"><h6>${ smallFormat(course.start) }</h6></span>
<span class="email"></span>
<div class="teachers">
<div class="list">
${teachers.map((item) =>
<span class="wkshp-title"><h5>${ course.title } - (${teachers.length})</h5></span>
<span class="wkshp-date"><h6>${ smallFormat(course.start) }</h6></span>
<span class="email"></span>
<div class="teachers">
<div class="list">
${teachers.map((item) =>
`<li><a href="mailto:${item.email}">${item.name}</a></li>`
).join('')}
</div>
</div>
`;
</div>
</div>
`;
parent.appendChild(container);
}
}
});
});
};

Dashboard.prototype.getCurrentUserLocation = function(user) {
Admin.prototype.getCurrentUserLocation = function(user) {
var currentUid = this.auth.uid;
this.database.ref('users/' + currentUid).on('value').then(function(snap) {
var building = snap.val().building;
Expand All @@ -307,7 +316,7 @@ Dashboard.prototype.getCurrentUserLocation = function(user) {
};

// Update the select course on click
Dashboard.prototype.updateSession = function(id) {
Admin.prototype.updateSession = function(id) {
let course;
currentUser = firebase.auth().currentUser.email;
// start a form
Expand Down Expand Up @@ -587,5 +596,5 @@ function exportCSVFile(headers, items, fileTitle) {
}

window.onload = function() {
window.dashboard = new Dashboard();
window.dashboard = new Admin();
};
78 changes: 27 additions & 51 deletions scripts/filters.js
View file
Open in desktop
@@ -1,16 +1,24 @@
/**
* Load sideNav script from materialize.js
*/
document.addEventListener('DOMContentLoaded', function() {
loadSchools();

// Load dropdown menu settings
const dropOptions = {
constrainWidth: false,
coverTrigger: false,
};
var dropdowns = document.querySelectorAll('.dropdown-trigger');
M.Dropdown.init(dropdowns, dropOptions);

$(document).ready(function() {
$('.sidenav').sidenav({
draggable: true,
edge: 'left',
preventScrolling: true,
isFixed: true,
});
// Load form selects
const selectOpts = {};
var selects = document.querySelectorAll('select');
M.FormSelect.init(selects, selectOpts);

loadSubmitBadge();
});

var el = $('#user-building-select');
function loadSchools() {
var el = document.querySelector('#user-building-select');
var schools = [
'Beardsley',
'Beck',
Expand Down Expand Up @@ -47,14 +55,11 @@ $(document).ready(function() {
var opt = document.createElement('option');
opt.text = sorted[i];
opt.value = sorted[i];
opt = '<option value="' + sorted[i] + '">' + sorted[i] + '</option>';
// opt = `<option value="${sorted[i]}">${sorted[i]}</option>`;
el.append(opt);
}
}

$('#user-building-select').formSelect();

$('.collapsible').collapsible();
});

$(document).keydown(function(e) {
if (e.keyCode == 27) {
Expand All @@ -66,20 +71,6 @@ $(document).keydown(function(e) {
}
});

/**
* getBg - Get a random header background
*
* @returns {String} relative path to an image
*/
function getBg() {
let base = 'img/';
let ext = '.png';

let rand = Math.ceil(Math.random() * 7);

return base + rand + ext;
}

/**
* Filter by title
*
Expand Down Expand Up @@ -109,7 +100,6 @@ $('.input-field input').on('keyup', function() {
});

this.onblur = function() {
console.log(this.value);
window.dataLayer.push({ event: 'search', searchTerm: this.value });
};
});
Expand Down Expand Up @@ -166,28 +156,16 @@ $('#search-clear').on('click', function() {
.find('input')
.val('');
$('#search-form')
.toggleClass('hidden')
.blur();
$('.class-container').show();
});

$('#search-button').on('click', function() {
$(this)
.next()
.toggleClass('hidden');
.next();
$('#search').focus();
});

$('#slide-out-button').on('click', function() {
console.log('clicked');
$('#slide-out').sidenav('open');
});

// $('#course-toggle').on('change', function() {
// console.log('clicked toggle');
// $('div.class-container').toggleClass('hidden');
// });

// Format dates for sessions displayed in main container
function format(date) {
var d = new Date(date);
Expand Down Expand Up @@ -233,7 +211,7 @@ $('body').on('keyup', '.code :input', function() {

// Validate the code
if (codes[key].code === $(this).val()) {
$(this).css('background-color', 'rgba(0,255,0,0.4)');
$(this).css('background-color', '#32C192');
} else {
$(this).css('background-color', 'white');
}
Expand Down Expand Up @@ -283,17 +261,16 @@ $('#date').on('click', function() {
let courseForm = document.querySelector('#course-form');
let submitBadge = document.querySelector('#submit-badge');

submitBadge.style.display = 'none';

courseForm.addEventListener('click', updateSubmitBadge);

function updateSubmitBadge(e) {

// Watch for clicks on the input box only.
if(e.target.classList.contains('filled-in')) {

var els = courseForm.querySelectorAll('input[type=\'checkbox\']:checked');

(els.length > 0) ? submitBadge.style.display = 'inline' : submitBadge.style.display = 'none';
// (els.length > 0) ? submitBadge.style.display = 'inline' : submitBadge.style.display = 'none';

submitBadge.innerText = els.length;

Expand All @@ -304,9 +281,8 @@ function updateSubmitBadge(e) {
function loadSubmitBadge() {
var els = courseForm.querySelectorAll('input[type=\'checkbox\']:checked');

(els.length > 0) ? submitBadge.style.display = 'inline' : null;

submitBadge.innerText = els.length;
(els.length > 0) ? submitBadge.innerText = els.length : submitBadge.innerText = 0;

}

async function copyToClipboard(e) {
Expand Down