mgoetz/soundboard
1
0
Fork 0
forked from server/soundboard
Code Issues Pull Requests Releases Wiki Activity

Rework edit form w/ checkboxes, filter and DB tags

Browse Source
This commit is contained in:
Martin Müller 2017-11-03 16:17:10 +01:00
parent ce7f55771c
commit 80e0ba439b
4 changed files with 64 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
soundboard.py
View File

@ -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)

29
static/main.css
View File

@ -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;

40
static/main.js
View File

@ -30,23 +30,8 @@ ready(function() {
var searchfield = document.querySelector("#search");
if (searchfield !== null) {
searchfield.addEventListener("keyup", function() {
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";
}
});
});
}
filter(searchfield, ".sound", "inline-block");
filter(searchfield, ".tag", "block");
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");

34
templates/edit.html
View File

@ -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">
<div class="table-cell">
<label for="tags">Tags</label>
</div>
<div class="table-cell">
<input type="input" name="tags" id="tags" />
</div>
</div>
<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>
<input type="text" id="search" placeholder="Search Tag" />
<ul class="tags">
{% for tag in tags %}
<li class="tag"><span>{{ tag.name }}</span><input type="checkbox" /></li>
{% endfor %}
</ul>
<input type="button" value="Cancel" />
<input type="submit" value="Save" />
</form>
</div>
{% endblock %}