added week selection

6 files changed, 166 insertions, 65 deletions

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