From 571e3dea5e85c4ba54065acd8e6feb5fe1f9ec03 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
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 = `<strong>Week ${getWeek() + offset}</strong>`
+}
+
+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 = `<strong>Week ${getWeek() + offset}</strong>`
+}
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