From 889adc748ec9a723bca605dcba45d974ec362999 Mon Sep 17 00:00:00 2001
From: rtz12 <koenig@fagott.pw>
Date: Sun, 14 Feb 2016 19:29:11 +0100
Subject: Grils koennen nun sortiert und geloescht werden.

TODO: backend

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 }}
-- 
cgit v0.10.1