Fix Commit history

TFR/server/static/js/main.js

@@ -0,0 +1,54 @@
+function addFlashMessage(message, type='success') {
+    let flask = document.createElement('p');
+    flask.onclick = () => flask.remove();
+    flask.classList.add(type);
+    flask.innerHTML = message;
+
+    let close = document.createElement('span');
+    close.innerHTML = '<i class="ph-bold ph-x"></i>';
+
+    flask.appendChild(close);
+    document.querySelector('.flash').appendChild(flask);
+}
+
+function ajax(url, form, callback, method='POST') {
+    console.log(form)
+    fetch(url, {
+        method: method,
+        body: form,
+    })
+        .then(response => response.json())
+        .then(data => callback(data))
+        .catch(error => addFlashMessage(error.error, 'error'));
+}
+
+function deleteToken(id) {
+    let form = new FormData();
+    form.append('token_id', id);
+
+    ajax('/api/tokens', form, (data) => {
+        if (data.success) {
+            addFlashMessage(data.success, 'success');
+            document.querySelector(`#token-${id}`).remove();
+        } else {
+            addFlashMessage(data.error, 'error');
+        }
+    }, 'DELETE');
+}
+
+function addToken() {
+    ajax('/api/tokens', null, (data) => {
+        if (data.success) {
+            window.location.reload();
+        } else {
+            addFlashMessage(data.error, 'error');
+        }
+    });
+}
+
+function viewToken(id) {
+    let token = document.querySelector(`#token-${id}`);
+    let hidden = token.children[2];
+
+    hidden.classList.toggle('hidden');
+}

TFR/server/static/js/search.js

@@ -0,0 +1,88 @@
+function showHint() {
+    let search = document.querySelector('.search > input');
+    let searchPos = search.getBoundingClientRect();
+    let hint = document.querySelector('.search-hint');
+
+    hint.style.width = search.offsetWidth + 'px';
+    hint.style.left = searchPos.left + 'px';
+    hint.style.top = searchPos.bottom + 'px';
+
+    hint.style.display = 'flex';
+}
+
+
+function hideHint() {
+    let hint = document.querySelector('.search-hint');
+    hint.style.display = 'none';
+}
+
+
+function updateHint() {
+    let search = document.querySelector('.search > input');
+    let searchPos = search.getBoundingClientRect();
+    let hint = document.querySelector('.search-hint');
+
+    hint.style.width = search.offsetWidth + 'px';
+    hint.style.left = searchPos.left + 'px';
+    hint.style.top = searchPos.bottom + 'px';
+}
+
+
+function getSearch() {
+    let search = document.querySelector('.search > input').value;
+    let hint = document.querySelector('.search-hint');
+
+    if (search.length === 0) {
+        hint.innerHTML = '<p>Start typing to see results...</p>';
+        return;
+    }
+
+    fetch('/api/users?search=' + search.toString(), {
+        method: 'GET',
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.length === 0) {
+            hint.innerHTML = '<p>No results found...</p>';
+            return;
+        }
+
+        hint.innerHTML = '';
+
+        data.forEach(user => {
+            let el = document.createElement('button');
+            el.innerHTML = user;
+            el.onmousedown = function (event) {
+                event.preventDefault();
+                search = document.querySelector('.search > input');
+                search.value = user.toString();
+            }
+            hint.appendChild(el);
+        });
+    })
+    .catch(() => {
+        hint.innerHTML = '<p>Something went wrong...</p>';
+    });
+}
+
+
+window.onload = () => {
+    let typingTimer;
+    let search = document.querySelector('.search > input');
+
+    if (search === null) {
+        return;
+    }
+
+    window.addEventListener('resize', updateHint);
+
+    search.addEventListener('focus', showHint);
+    search.addEventListener('blur', hideHint);
+    search.addEventListener('keydown', () => {
+        clearTimeout(typingTimer);
+    });
+    search.addEventListener('keyup', () => {
+        clearTimeout(typingTimer);
+        typingTimer = setTimeout(getSearch, 250);
+    });
+}