Grils koennen nun sortiert und geloescht werden.

TODO: backend

3 files changed, 68 insertions, 7 deletions

diff --git a/assets_src/js/lib/dom.js b/assets_src/js/lib/dom.js
index 33845af..bfbeea7 100644
--- a/assets_src/js/lib/dom.js
+++ b/assets_src/js/lib/dom.js
@@ -5,10 +5,42 @@ export function ready(fn) {
 }
 
 export function closest(el, fn) {
+        if (!el) {
+                return null;
+        }
         while (el) {
                 if (fn(el)) {
                         return el;
                 }
                 el = el.parentNode
         }
+        return null;
+}
+
+export function next(el, fn) {
+        if (!el) {
+                return null;
+        }
+        el = el.nextSibling;
+        while (el) {
+                if (fn(el)) {
+                        return el;
+                }
+                el = el.nextSibling;
+        }
+        return null;
+}
+
+export function previous(el, fn) {
+        if (!el) {
+                return null;
+        }
+        el = el.previousSibling;
+        while (el) {
+                if (fn(el)) {
+                        return el;
+                }
+                el = el.previousSibling;
+        }
+        return null;
 }
diff --git a/assets_src/js/list.js b/assets_src/js/list.js
index 413f517..8246950 100644
--- a/assets_src/js/list.js
+++ b/assets_src/js/list.js
@@ -19,11 +19,40 @@ async function resultClicked(grilId) {
         document.getElementById('gril-list').innerHTML += response;
 }
 
+function listButtonHandler(e) {
+        let liFilter = x => x.tagName && x.tagName.toLowerCase() === 'li';
+        let item = dom.closest(e.target, liFilter);
+        let pItem = dom.previous(item, liFilter),
+            nItem = dom.next(dom.next(item, liFilter), liFilter);
+        switch (e.target.classList[0]) {
+        case 'gril-sort-up':
+                //TODO: backend
+                item.parentNode.insertBefore(item, pItem);
+                break;
+        case 'gril-sort-down':
+                //TODO: backend
+                if (nItem) {
+                        item.parentNode.insertBefore(item, nItem);
+                } else {
+                        item.parentNode.appendChild(item);
+                }
+                break;
+        case 'gril-delete':
+                //TODO: backend
+                item.parentNode.removeChild(item);
+                break;
+        }
+}
+
 function main() {
         let is = new search.InstantSearch(
                 document.getElementById('gril-add-search'),
                 document.getElementById('search-results'));
         is.resultClicked = resultClicked;
+        document.getElementById('gril-list').addEventListener(
+                'click',
+                listButtonHandler,
+                true);
 }
 
 dom.ready(main);
diff --git a/views/includes/list_gril.html b/views/includes/list_gril.html
index f719dae..57694aa 100644
--- a/views/includes/list_gril.html
+++ b/views/includes/list_gril.html
@@ -15,19 +15,19 @@
                                 <div class="hide-on-med-and-up">
                                         <div class="row list-controls valign-wrapper">
                                                 <div class="col s6 left-align">
-                                                        <i class="material-icons grey-text" onClick="">keyboard_arrow_up</i>
-                                                        <i class="material-icons grey-text" onClick="">keyboard_arrow_down</i>
+                                                        <i class="gril-sort-up material-icons grey-text">keyboard_arrow_up</i>
+                                                        <i class="gril-sort-down material-icons grey-text">keyboard_arrow_down</i>
                                                         </div>
                                                         <div class="col s4 left-align">
-                                                        <i class="hide-on-med-and-up material-icons delete-icon grey-text" onClick="">delete</i>
+                                                        <i class="gril-delete hide-on-med-and-up material-icons delete-icon grey-text">delete</i>
                                                         </div>
                                                 </div>
                                         </div>
                                         <div class="hide-on-small-only">
                                                 <div class="valign-wrapper">
-                                                <i class="medium material-icons grey-text" onClick="">keyboard_arrow_up</i>
-                                                <i class="medium material-icons grey-text" onClick="">keyboard_arrow_down</i>
-                                                <i class="material-icons grey-text" onClick="">delete</i>
+                                                <i class="gril-sort-up medium material-icons grey-text">keyboard_arrow_up</i>
+                                                <i class="gril-sort-down medium material-icons grey-text">keyboard_arrow_down</i>
+                                                <i class="gril-delete material-icons grey-text">delete</i>
                                         </div>
                                 </div>
                         </div>
@@ -35,4 +35,4 @@
                 </div>
         </div>
 </li>
-{{ end }}
\ No newline at end of file
+{{ end }}