Rework edit form w/ checkboxes, filter and DB tags

soundboard.py

@@ -94,4 +94,6 @@ def edit(sound):
 		# TODO: Store changes
 		return redirect("/edit")
 
-	return render_template("edit.html")
+	tags = queryDB("SELECT name FROM tag ORDER BY name COLLATE NOCASE")
+
+	return render_template("edit.html", sound=sound, tags=tags)

static/main.css

@@ -43,6 +43,35 @@ input {
 	margin: 5px;
 }
 
+.editform input[type="text"] {
+	display: block;
+}
+
+.editform input[type="checkbox"] {
+	display: block;
+	float: left;
+	height: 15px;
+	margin: 5px;
+	width: 15px;
+}
+
+.editform .tags li {
+	clear: left;
+	display: block;
+	line-height: 20px;
+	vertical-align: middle;
+}
+
+.editform .tags li span {
+	display: inline-block;
+	line-height: 20px;
+	vertical-align: middle;
+}
+
+.tags {
+	padding-left: 0;
+}
+
 .tags li {
 	display: inline-block;
 	list-style-type: none;

static/main.js

@@ -30,23 +30,8 @@ ready(function() {
 
 	var searchfield = document.querySelector("#search");
 
-	if (searchfield !== null) {
+	filter(searchfield, ".sound", "inline-block");
-		searchfield.addEventListener("keyup", function() {
+	filter(searchfield, ".tag", "block");
-			var buttons = document.querySelectorAll(".sound");
-
-			buttons.forEach(function(item) {
-				item.style.display = "inline-block";
-			});
-
-			buttons.forEach(function(item) {
-				var name = item.firstChild.innerHTML;
-
-				if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
-					item.style.display = "none";
-				}
-			});
-		});
-	}
 
 	var reset = document.querySelector("#sounds .reset");
 
@@ -78,6 +63,27 @@ ready(function() {
 	}
 });
 
+function filter(searchfield, itemSelector, unHideStyle) {
+	if (searchfield !== null) {
+		searchfield.addEventListener("keyup", function() {
+			var items = document.querySelectorAll(itemSelector);
+
+			items.forEach(function(item) {
+				item.style.display = unHideStyle;
+			});
+
+			items.forEach(function(item) {
+				var name = item.firstChild.innerHTML;
+				console.log(name);
+
+				if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
+					item.style.display = "none";
+				}
+			});
+		});
+	}
+}
+
 function hideSections() {
 	var sections = document.querySelectorAll("section");
 

templates/edit.html

@@ -3,32 +3,16 @@
 {% endblock %}
 {% block content %}
 			<div class="editform">
-				<h1>Filename</h1>
+				<h1>Edit {{ sound }}</h1>
 				<form action="{{ request.path }}" method="POST">
-					<div class="table-row">
+					<input type="text" id="search" placeholder="Search Tag" />
-						<div class="table-cell">
+					<ul class="tags">
-							<label for="tags">Tags</label>
+						{% for tag in tags %}
-						</div>
+							<li class="tag"><span>{{ tag.name }}</span><input type="checkbox" /></li>
-						<div class="table-cell">
+						{% endfor %}
-							<input type="input" name="tags" id="tags" />
+					</ul>
-						</div>
+					<input type="button" value="Cancel" />
-					</div>
+					<input type="submit" value="Save" />
-					<div class="table-row">
-						<div class="table-cell"></div>
-						<div class="table-cell">
-							<ul class="tags">
-								<li>Test<span class="reset">⨯</span></li>
-							</ul>
-						</div>
-					</div>
-					<div class="table-row">
-						<div class="table-cell">
-						</div>
-						<div class="table-cell">
-							<input type="button" value="Cancel" />
-							<input type="submit" value="Submit" />
-						</div>
-					</div>
 				</form>
 			</div>
 {% endblock %}