1 files changed, 69 insertions, 0 deletions
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
new file mode 100644
index 0000000..123a2f1
--- /dev/null
+++ b/public/javascripts/main.js
@@ -0,0 +1,69 @@
+const fuzzy = require('fuzzy')
+const getUsers = require('./getUsers')
+const getURLOfUser = require('./getURLOfUser')
+const searchNode = document.querySelector('#search')
+const inputNode = searchNode.querySelector('input[type="text"]')
+const autocompleteNode = document.querySelector('.autocomplete')
+const scheduleIframe = document.querySelector('#schedule')
+
+let selectedResult = -1
+let results
+let matches
+
+getUsers().then(function (users) {
+  // console.log(users)
+
+  searchNode.addEventListener('keydown', function (e) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault()
+
+      if (document.querySelector('.selected')) document.querySelector('.selected').classList.remove('selected')
+
+      const change = e.key === 'ArrowDown' ? 1 : -1
+      selectedResult += change
+      if (selectedResult < -1) selectedResult = matches.length - 1
+      else if (selectedResult > matches.length - 1) selectedResult = -1
+
+      if (selectedResult !== -1) autocompleteNode.children[selectedResult].classList.add('selected')
+    }
+  })
+
+  searchNode.addEventListener('keyup', function (e) {
+    // console.log(e)
+    if (!(e.key === 'Enter' || e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      autocompleteNode.innerHTML = ''
+      if (inputNode.value.trim() === '') return
+
+      selectedResult = -1
+      results = fuzzy.filter(inputNode.value, users, {
+        pre: '<strong>',
+        post: '</strong>',
+        extract: el => el.value
+      }).slice(0, 7)
+      matches = results.map(function (el) { return el.string })
+
+      matches.forEach(function (match) {
+        const resultNode = document.createElement('li')
+        resultNode.innerHTML = match
+        autocompleteNode.appendChild(resultNode)
+      })
+    }
+  })
+
+  searchNode.addEventListener('submit', function (e) {
+    e.preventDefault()
+    const indexInResult = selectedResult === -1 ? 0 : selectedResult
+    const selectedUser = users[results[indexInResult].index]
+
+    inputNode.value = selectedUser.value
+    autocompleteNode.innerHTML = ''
+
+    inputNode.blur()
+
+    scheduleIframe.src = getURLOfUser(0, selectedUser.type, selectedUser.index + 1)
+  })
+})
+
+inputNode.addEventListener('click', function () {
+  inputNode.select()
+})