feat: rework home page file selector

editor/public/static/js/index.js

@@ -1,31 +1,59 @@
-function addOptions(files) {
-    const select = document.getElementById("file-sel")
-    select.innerHTML = ""
-    const defaultOpt = document.createElement("option")
-    defaultOpt.innerText = "----- Select a file -----"
-    defaultOpt.value = ""
-    select.appendChild(defaultOpt)
-    files.sort().forEach(file => {
-        const option = document.createElement("option")
-        option.innerText = file
-        option.value = file
-        select.appendChild(option)
-    })
+function makeFilm(meta) {
+    const file = document.getElementById("film-template").cloneNode(true)
+    file.querySelector(".title").innerText = meta.title
+    return file
 }
 
-function selectFile(event) {
-    const file = event.target.value
-    if (file !== "") {
-        const url = new URL("/edit/", window.location.origin)
-        url.searchParams.set("f", file)
-        window.location.href = url.href
+function makeSeries(meta) {
+    const file = document.getElementById("series-template").cloneNode(true)
+    file.querySelector(".title").innerText = meta.title
+    file.querySelector(".episodes .num").innerText = meta.episodes
+    return file
+}
+
+function makeFile(meta) {
+    let file
+    switch (meta.type) {
+        case "film":
+            file = makeFilm(meta)
+            break
+        case "series":
+            file = makeSeries(meta)
+            break
+        default:
+            throw new Error(`Invalid file type '${meta.type}'`)
     }
+
+    file.title = meta.filename
+    file.id = null
+    file.classList.remove("template")
+    const url = new URL("/edit/", window.location.origin)
+    url.searchParams.set("f", meta.filename)
+    file.href = url.href
+    return file
+}
+
+/**
+ * 
+ * @param {object[]} files 
+ */
+function addFiles(files) {
+    const list = document.getElementById("files")
+    list.innerHTML = ""
+    const filenames = files.map(meta => meta.filename)
+    // Copy array because sort changes it in place
+    Array.from(filenames).sort().forEach(filename => {
+        const i = filenames.indexOf(filename)
+        const meta = files[i]
+        const file = makeFile(meta)
+        list.appendChild(file)
+    })
 }
 
 window.addEventListener("load", () => {
     fetch("/api/files").then(res => {
         return res.json()
     }).then(files => {
-        addOptions(files)
+        addFiles(files)
     })
 })

editor/public/static/js/integrity_manager.mjs

@@ -316,7 +316,7 @@ export default class IntegrityManager {
                 if (fields.flags.hearing_impaired) {
                     name += " SDH"
                 }
-                name += " : " + fields.type
+                name += " | " + fields.type
                 break
         }
         return name