Initial Commit

templates/song-picker.html

@@ -0,0 +1,74 @@
+{{ 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 }}