songbook/templates/song-picker.html
2018-01-27 11:58:40 -06:00

75 lines
2.2 KiB
HTML

{{ if not .TemplateData.Songs }}
<div>No songs are available</div>
{{ else }}
<form class="pure-form" action="/admin/build" method="POST">
<fieldset>
<input id="chosen_songs" name="chosen_songs" value="" type="hidden">
<button class="pure-button pure-button-primary" type="submit">Build File</button>
</fieldset>
</form>
<div>
<label for="filter">Filter</label>
<input onkeyup="updateFilter(this.value);" name="filter" value="" placeholder="Filter Songs">
<table id="song-table" class="pure-table pure-table-bordered center">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
{{ range $i, $v := .TemplateData.Songs }}
<tr data-file="{{$v.Name}}>
<td>{{$v.Name}}</td>
<td>
<a class="pure-button pure-button-secondary" onclick="javascript:toggleFile(this, '{{$v.Name}});">Add</a>
</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
<script>
var selectedFiles = [];
var tablerows = document.getElementsByTagName("tr");
function updateFilter(flt) {
flt = flt.toLowerCase();
for(var i = 0; i < tablerows.length; i++) {
if(tablerows[i].dataset.file.toLowerCase().startsWith(flt)) {
tablerows[i].classList.remove("hidden");
} else {
tablerows[i].classList.add("hidden");
}
}
}
function toggleFile(btn, sng) {
if(!btn.classList.contains("pure-button-warning")) {
btn.classList.remove("pure-button-secondary");
btn.classList.add("pure-button-warning");
for(var i = 0; i < selectedFiles.length; i++) {
if(selectedFiles[i] == sng) { return; }
}
selectedFiles.push(sng);
btn.innerText = "Remove";
} else {
btn.classList.remove("pure-button-warning");
btn.classList.add("pure-button-secondary");
for(var i = 0; i < selectedFiles.length; i++) {
if(selectedFiles[i] == sng) { delete selectedFiles[i]; }
}
btn.innerText = "Add";
}
updateFilesInput();
}
function removeSong(sng) {
for(var i = 0; i < selectedFiles.length; i++ {
if(selectedFiles[i] == sng) { delete selectedFiles[i]; }
}
updateFilesInput();
}
</script>
{{ end }}