From 571e3dea5e85c4ba54065acd8e6feb5fe1f9ec03 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Tue, 6 Sep 2016 15:10:44 +0200 Subject: added week selection --- public/javascripts/bundle.js | 85 ++++++++++++++++++++++++++------------ public/javascripts/getURLOfUser.js | 33 +-------------- public/javascripts/getWeek.js | 33 +++++++++++++++ public/javascripts/main.js | 35 +++++++++++++--- public/stylesheets/style.css | 40 +++++++++++++++++- views/index.jade | 5 +++ 6 files changed, 166 insertions(+), 65 deletions(-) create mode 100644 public/javascripts/getWeek.js diff --git a/public/javascripts/bundle.js b/public/javascripts/bundle.js index 0a40d81..3fa0cc1 100644 --- a/public/javascripts/bundle.js +++ b/public/javascripts/bundle.js @@ -72581,7 +72581,31 @@ WError.prototype.cause = function we_cause(c) arguments[4][165][0].apply(exports,arguments) },{"dup":165}],305:[function(require,module,exports){ const leftPad = require('left-pad') +const getWeek = require('./getWeek') +function getURLOfUsers (weekOffset, type, id) { + return `http://${window.location.host}/meetingpointProxy/Roosters-AL%2Fdoc%2Fdagroosters%2F` + + `${getWeek() + weekOffset}%2F${type}%2F${type}${leftPad(id, 5, '0')}.htm` +} + +module.exports = getURLOfUsers + +module.exports.CLASS = 'c' +module.exports.TEACHERS = 't' +module.exports.ROOMS = 'r' +module.exports.STUDENTS = 's' + +},{"./getWeek":307,"left-pad":238}],306:[function(require,module,exports){ +const Promise = require('bluebird') +// const cheerio = require('cheerio') +const request = Promise.promisify(require('request')) + +module.exports = function () { + return request(`http://${window.location.host}/getUserIndex`) + .then(data => JSON.parse(data.body)) +} + +},{"bluebird":179,"request":255}],307:[function(require,module,exports){ // copied from http://www.meetingpointmco.nl/Roosters-AL/doc/dagroosters/untisscripts.js, // were using the same code as they do to be sure that we always get the same // week number. @@ -72614,41 +72638,34 @@ function getWeek () { return 1 + Math.ceil((firstThursday - target) / 604800000) // 604800000 = 7 * 24 * 3600 * 1000 } -function getURLOfUsers (weekOffset, type, id) { - return `http://${window.location.host}/meetingpointProxy/Roosters-AL%2Fdoc%2Fdagroosters%2F` + - `${getWeek() + weekOffset}%2F${type}%2F${type}${leftPad(id, 5, '0')}.htm` -} +module.exports = getWeek -module.exports = getURLOfUsers - -module.exports.CLASS = 'c' -module.exports.TEACHERS = 't' -module.exports.ROOMS = 'r' -module.exports.STUDENTS = 's' - -},{"left-pad":238}],306:[function(require,module,exports){ -const Promise = require('bluebird') -// const cheerio = require('cheerio') -const request = Promise.promisify(require('request')) - -module.exports = function () { - return request(`http://${window.location.host}/getUserIndex`) - .then(data => JSON.parse(data.body)) -} - -},{"bluebird":179,"request":255}],307:[function(require,module,exports){ +},{}],308:[function(require,module,exports){ const fuzzy = require('fuzzy') const getUsers = require('./getUsers') const getURLOfUser = require('./getURLOfUser') +const removeDiacritics = require('diacritics').remove +const getWeek = require('./getWeek') + const searchNode = document.querySelector('#search') const inputNode = searchNode.querySelector('input[type="text"]') const autocompleteNode = document.querySelector('.autocomplete') const scheduleIframe = document.querySelector('#schedule') -const removeDiacritics = require('diacritics').remove +const prevButton = document.querySelectorAll('input[type="button"]')[0] +const nextButton = document.querySelectorAll('input[type="button"]')[1] +const currentWeekNode = document.querySelector('.current') let selectedResult = -1 let results let matches +let offset = 0 + +function updateWeekText () { + if (offset === 0) currentWeekNode.innerHTML = `Week ${getWeek() + offset}` + else currentWeekNode.innerHTML = `Week ${getWeek() + offset}` +} + +updateWeekText() getUsers().then(function (users) { // console.log(users) @@ -72691,7 +72708,8 @@ getUsers().then(function (users) { searchNode.addEventListener('submit', submitForm) function submitForm (e) { - e.preventDefault() + if (results == null) return + if (e) e.preventDefault() const indexInResult = selectedResult === -1 ? 0 : selectedResult const selectedUser = users[results[indexInResult].index] @@ -72700,15 +72718,27 @@ getUsers().then(function (users) { inputNode.blur() - scheduleIframe.src = getURLOfUser(0, selectedUser.type, selectedUser.index + 1) + scheduleIframe.src = getURLOfUser(offset, selectedUser.type, selectedUser.index + 1) } autocompleteNode.addEventListener('click', function (e) { if (e.target.tagName === 'LI' && e.target.parentElement === autocompleteNode) { selectedResult = Array.prototype.indexOf.call(e.target.parentElement.childNodes, e.target) - submitForm({preventDefault: function () {}}) // HACK: this is horrible. + submitForm() } }) + + prevButton.addEventListener('click', function () { + offset-- + updateWeekText() + submitForm() + }) + + nextButton.addEventListener('click', function () { + offset++ + updateWeekText() + submitForm() + }) }) inputNode.addEventListener('click', function () { @@ -72717,6 +72747,7 @@ inputNode.addEventListener('click', function () { inputNode.addEventListener('blur', function () { inputNode.selectionStart = inputNode.selectionEnd = -1 + autocompleteNode.innerHTML = '' }) -},{"./getURLOfUser":305,"./getUsers":306,"diacritics":184,"fuzzy":192}]},{},[307]); +},{"./getURLOfUser":305,"./getUsers":306,"./getWeek":307,"diacritics":184,"fuzzy":192}]},{},[308]); diff --git a/public/javascripts/getURLOfUser.js b/public/javascripts/getURLOfUser.js index 294d7c4..a546ace 100644 --- a/public/javascripts/getURLOfUser.js +++ b/public/javascripts/getURLOfUser.js @@ -1,36 +1,5 @@ const leftPad = require('left-pad') - -// copied from http://www.meetingpointmco.nl/Roosters-AL/doc/dagroosters/untisscripts.js, -// were using the same code as they do to be sure that we always get the same -// week number. -function getWeek () { - // Create a copy of this date object - var target = new Date() - - // ISO week date weeks start on monday - // so correct the day number - var dayNr = (target.getDay() + 6) % 7 - - // ISO 8601 states that week 1 is the week - // with the first thursday of that year. - // Set the target date to the thursday in the target week - target.setDate(target.getDate() - dayNr + 3) - - // Store the millisecond value of the target date - var firstThursday = target.valueOf() - - // Set the target to the first thursday of the year - // First set the target to january first - target.setMonth(0, 1) - // Not a thursday? Correct the date to the next thursday - if (target.getDay() !== 4) { - target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7) - } - - // The weeknumber is the number of weeks between the - // first thursday of the year and the thursday in the target week - return 1 + Math.ceil((firstThursday - target) / 604800000) // 604800000 = 7 * 24 * 3600 * 1000 -} +const getWeek = require('./getWeek') function getURLOfUsers (weekOffset, type, id) { return `http://${window.location.host}/meetingpointProxy/Roosters-AL%2Fdoc%2Fdagroosters%2F` + diff --git a/public/javascripts/getWeek.js b/public/javascripts/getWeek.js new file mode 100644 index 0000000..5c82a27 --- /dev/null +++ b/public/javascripts/getWeek.js @@ -0,0 +1,33 @@ +// copied from http://www.meetingpointmco.nl/Roosters-AL/doc/dagroosters/untisscripts.js, +// were using the same code as they do to be sure that we always get the same +// week number. +function getWeek () { + // Create a copy of this date object + var target = new Date() + + // ISO week date weeks start on monday + // so correct the day number + var dayNr = (target.getDay() + 6) % 7 + + // ISO 8601 states that week 1 is the week + // with the first thursday of that year. + // Set the target date to the thursday in the target week + target.setDate(target.getDate() - dayNr + 3) + + // Store the millisecond value of the target date + var firstThursday = target.valueOf() + + // Set the target to the first thursday of the year + // First set the target to january first + target.setMonth(0, 1) + // Not a thursday? Correct the date to the next thursday + if (target.getDay() !== 4) { + target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7) + } + + // The weeknumber is the number of weeks between the + // first thursday of the year and the thursday in the target week + return 1 + Math.ceil((firstThursday - target) / 604800000) // 604800000 = 7 * 24 * 3600 * 1000 +} + +module.exports = getWeek diff --git a/public/javascripts/main.js b/public/javascripts/main.js index 327f13a..49fc738 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -1,18 +1,29 @@ const fuzzy = require('fuzzy') const getUsers = require('./getUsers') const getURLOfUser = require('./getURLOfUser') +const removeDiacritics = require('diacritics').remove +const getWeek = require('./getWeek') + const searchNode = document.querySelector('#search') const inputNode = searchNode.querySelector('input[type="text"]') const autocompleteNode = document.querySelector('.autocomplete') const scheduleIframe = document.querySelector('#schedule') -const removeDiacritics = require('diacritics').remove +const prevButton = document.querySelectorAll('input[type="button"]')[0] +const nextButton = document.querySelectorAll('input[type="button"]')[1] +const currentWeekNode = document.querySelector('.current') let selectedResult = -1 let results let matches +let offset = 0 + +function updateWeekText () { + if (offset === 0) currentWeekNode.innerHTML = `Week ${getWeek() + offset}` + else currentWeekNode.innerHTML = `Week ${getWeek() + offset}` +} getUsers().then(function (users) { - // console.log(users) + updateWeekText() searchNode.addEventListener('keydown', function (e) { if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { @@ -52,7 +63,8 @@ getUsers().then(function (users) { searchNode.addEventListener('submit', submitForm) function submitForm (e) { - e.preventDefault() + if (results == null) return + if (e) e.preventDefault() const indexInResult = selectedResult === -1 ? 0 : selectedResult const selectedUser = users[results[indexInResult].index] @@ -61,15 +73,27 @@ getUsers().then(function (users) { inputNode.blur() - scheduleIframe.src = getURLOfUser(0, selectedUser.type, selectedUser.index + 1) + scheduleIframe.src = getURLOfUser(offset, selectedUser.type, selectedUser.index + 1) } autocompleteNode.addEventListener('click', function (e) { if (e.target.tagName === 'LI' && e.target.parentElement === autocompleteNode) { selectedResult = Array.prototype.indexOf.call(e.target.parentElement.childNodes, e.target) - submitForm({preventDefault: function () {}}) // HACK: this is horrible. + submitForm() } }) + + prevButton.addEventListener('click', function () { + offset-- + updateWeekText() + submitForm() + }) + + nextButton.addEventListener('click', function () { + offset++ + updateWeekText() + submitForm() + }) }) inputNode.addEventListener('click', function () { @@ -78,4 +102,5 @@ inputNode.addEventListener('click', function () { inputNode.addEventListener('blur', function () { inputNode.selectionStart = inputNode.selectionEnd = -1 + autocompleteNode.innerHTML = '' }) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index e1b19cb..2cc0176 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -18,11 +18,14 @@ html, body { } #search { + z-index: 2; background-color: #F44336; margin: 0 auto; width: 100%; position: absolute; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/ + /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/ + box-shadow: 0 0.5px 1.5px rgba(0,0,0,0.06), 0 0.5px 1px rgba(0,0,0,0.12); } #search .input-wrapper { @@ -91,3 +94,38 @@ li:hover { list-style: none; padding: 10px; } + +#week-selector { + z-index: 1; + background-color: #F44336; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + color: white; +} + +#week-selector .week-wrapper { + max-width: 600px; + padding: 10px !important; + margin: 0 auto; + display: flex; + padding: 10px 0; +} + +#week-selector .current { + flex-grow: 1; + text-align: center; + padding: 5px; +} + +#week-selector input[type='button'] { + background: #D32F2F; + color: white; + border: 0px; + padding: 5px 10px; + border-radius: 2px; +} + +input:hover, +input:focus { + outline: none; + background-color: #b71c1c !important; +} diff --git a/views/index.jade b/views/index.jade index 126abcb..d4fd5af 100644 --- a/views/index.jade +++ b/views/index.jade @@ -7,4 +7,9 @@ block content .autocomplete-wrapper ul.autocomplete #search-space-filler + #week-selector + .week-wrapper + input(type='button', value='Vorige') + span.current Loading... + input(type='button', value='Volgende') iframe#schedule -- cgit v1.1