JavaScript Kram auf Hippe ES6 Kacke umgebaut

4 files changed, 145 insertions, 48 deletions

diff --git a/assets_src/js/lib/ajax.js b/assets_src/js/lib/ajax.js
new file mode 100644
index 0000000..048f516
--- /dev/null
+++ b/assets_src/js/lib/ajax.js
@@ -0,0 +1,60 @@
+export class AjaxError extends Error {
+        constructor(status, statusText) {
+                let message = `${status}: ${statusText}`
+                super(message);
+                this.name = this.constructor.name;
+                this.message = message;
+                this.status = status;
+                this.statusText = statusText;
+                Error.captureStackTrace(this, this.constructor.name)
+        }
+}
+
+function applyOptions(xhr, options) {
+        options.headers = options.headers || [];
+        for (let header in options.headers) {
+                xhr.setRequestHeader(header, options.headers[header]);
+        }
+}
+
+function createHandler(xhr, success, fail) {
+        return () => {
+                if (xhr.readyState !== XMLHttpRequest.DONE) {
+                        return;
+                }
+                if (xhr.status === 200) {
+                        success(xhr.response);
+                } else {
+                        fail(xhr.status, xhr.statusText);
+                }
+        };
+}
+
+function request(method, url, body, options) {
+        options = options || {};
+        return new Promise((resolve, reject) => {
+                let xhr = new XMLHttpRequest();
+                xhr.onreadystatechange = createHandler(
+                        xhr,
+                        (res) => {
+                                resolve(res);
+                        },
+                        (status, statusText) => {
+                                reject(new AjaxError(status, statusText));
+                        });
+                xhr.open(method, url, true);
+                applyOptions(xhr, options);
+                xhr.onerror = function() {
+                        reject(new AjaxError(-1, 'Network error'));
+                };
+                xhr.send(body);
+        });
+}
+
+export async function get(url, options) {
+        return request('GET', url, null, options);
+}
+
+export async function post(url, body, options) {
+        return request('POST', url, body, options);
+}
diff --git a/assets_src/js/lib/dom.js b/assets_src/js/lib/dom.js
new file mode 100644
index 0000000..33845af
--- /dev/null
+++ b/assets_src/js/lib/dom.js
@@ -0,0 +1,14 @@
+export function ready(fn) {
+        document.addEventListener('DOMContentLoaded', (e) => {
+                fn();
+        }, false);
+}
+
+export function closest(el, fn) {
+        while (el) {
+                if (fn(el)) {
+                        return el;
+                }
+                el = el.parentNode
+        }
+}
diff --git a/assets_src/js/lib/search.js b/assets_src/js/lib/search.js
index 0cb33df..85559ef 100644
--- a/assets_src/js/lib/search.js
+++ b/assets_src/js/lib/search.js
@@ -1,40 +1,51 @@
-var strokeTimeout = null;
+import * as dom from './dom';
+import * as ajax from './ajax';
 
-function instantSearch() {
-        if (strokeTimeout) {
-                clearTimeout(strokeTimeout);
-        }
-        strokeTimeout = setTimeout(doSearch, 150);
-}
-
-function doSearch() {
-        value = document.getElementById("search").value;
-
-        if (value === "") {
-                strokeTimeout = null;
-                document.getElementById("search-results").innerHTML = "";
-                return;
-        }
-        var xhr = new XMLHttpRequest();
-        xhr.onreadystatechange = function() {
-        if (xhr.readyState == XMLHttpRequest.DONE) {
-                        if (xhr.status === 404 || xhr.status === 400 || typeof xhr.response === 'undefined' || xhr.response === '404 not found') {
-                                document.getElementById("search-results").innerHTML = '';
-                                return
+export class InstantSearch {
+        constructor(element, resultsElem) {
+                this.resultClicked = () => {};
+                this.element = element;
+                this.resultsElem = resultsElem;
+                this.strokeTimeout = null;
+                element.addEventListener('keydown', e => {
+                        if (this.strokeTimeout) {
+                                clearTimeout(this.strokeTimeout);
                         }
-                        if (value === "") {
-                                document.getElementById("search-results").innerHTML = "";
-                                return;
+                        this.strokeTimeout = setTimeout(() => this.doSearch(), 150);
+                }, false);
+                resultsElem.addEventListener('click', e => {
+                        let li = dom.closest(e.target, el => el.tagName.match(/li/i));
+                        if (!li) {
+                                return true;
                         }
+                        this.resultsElem.innerHTML = '';
+                        this.resultClicked(li.getAttribute('data-id'));
+                }, true);
+        }
 
-                        document.getElementById("search-results").innerHTML = xhr.response.replace(new RegExp('{ (.*?)(' + value + ')(.*?) }', 'gi'), "$1<b>$2</b>$3").replace(new RegExp('{ (.*?) }', 'gi'), '$1');
+        async doSearch() {
+                let value = this.element.value;
+                if (value.length < 2) {
+                        this.strokeTimeout = null;
+                        this.resultsElem.innerHTML = "";
+                        return;
+                }
+                let response = null;
+                try {
+                        response = await ajax.get(`/search/gril_instant/${value}`);
+                } catch (e) {
+                        this.resultsElem.innerHTML = '';
+                        return;
                 }
+                this.resultsElem.innerHTML = response
+                        .replace(
+                                new RegExp('{ (.*?)(' +
+                                           value +
+                                           ')(.*?) }', 'gi'),
+                                "$1<b>$2</b>$3")
+                        .replace(
+                                new RegExp('{ (.*?) }', 'gi'),
+                                '$1');
+                this.strokeTimeout = null;
         }
-        xhr.open('GET', '/search/gril_instant/' + value, true);
-        xhr.send(null);
-        strokeTimeout = null;
 }
-
-function clickSearchResult(resId) {
-
-}
\ No newline at end of file
diff --git a/assets_src/js/list.js b/assets_src/js/list.js
index 25ff80d..413f517 100644
--- a/assets_src/js/list.js
+++ b/assets_src/js/list.js
@@ -1,17 +1,29 @@
-function clickSearchResult(resId) {
-        var xhr = new XMLHttpRequest();
-        xhr.onreadystatechange = function() {
-        if (xhr.readyState == XMLHttpRequest.DONE) {
-                        if (xhr.status !== 200) {
-                                alert(xhr.status + ": " + xhr.response);
-                                return;
-                        }
+import 'babel-polyfill';
+import * as search from './lib/search';
+import * as dom from './lib/dom';
+import * as ajax from './lib/ajax';
 
-                        data = xhr.responseText;
-                        document.getElementById("gril-list").innerHTML += data;
-                }
+async function resultClicked(grilId) {
+        let response = null;
+        try {
+                response = await ajax.post(
+                        window.location,
+                        'id=' + grilId,
+                        { headers: {
+                                'Content-type': 'application/x-www-form-urlencoded'
+                        } });
+        } catch (e) {
+                alert(e.message);
+                return;
         }
-        xhr.open('POST', window.location, true);
-        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-        xhr.send('id=' + resId);
-}
\ No newline at end of file
+        document.getElementById('gril-list').innerHTML += response;
+}
+
+function main() {
+        let is = new search.InstantSearch(
+                document.getElementById('gril-add-search'),
+                document.getElementById('search-results'));
+        is.resultClicked = resultClicked;
+}
+
+dom.ready(main);