feat: add toolbar + notifications

editor/public/static/js/editor.mjs

@@ -23,6 +23,13 @@ export default class Editor {
 
         this.integrity_mgr = new IntegrityManager(this)
 
+        document.getElementById("check-integrity").addEventListener("click", () => this.checkIntegrity())
+        document.getElementById("improve-all").addEventListener("click", () => this.improveAllNames())
+        document.getElementById("save").addEventListener("click", () => this.save())
+        document.getElementById("reload").addEventListener("click", () => window.location.reload())
+        document.getElementById("toggle-notifs").addEventListener("click", () => this.toggleNotifications())
+        document.getElementById("close-notifs").addEventListener("click", () => this.closeNotifications())
+
         this.setup()
     }
 
@@ -49,7 +56,6 @@ export default class Editor {
         document.getElementById("title").value = this.data.title
         this.tables.audio.loadTracks(this.data.audio_tracks)
         this.tables.subtitle.loadTracks(this.data.subtitle_tracks)
-        this.integrity_mgr.checkIntegrity()
     }
 
     save() {
@@ -63,8 +69,9 @@ export default class Editor {
             if (res.ok) {
                 this.dirty = false
                 document.getElementById("unsaved").classList.remove("show")
+                this.notify("Saved successfully !", "success")
             } else {
-                alert(`Error ${res.status}: ${res.statusText}`)
+                this.notify(`Error ${res.status}: ${res.statusText}`, "error", 10000)
             }
         })
     }
@@ -78,4 +85,47 @@ export default class Editor {
         updateObjectFromJoinedKey(this.data[listKey][trackIdx], key, value)
         this.setDirty()
     }
+
+    notify(text, type, duration=5000) {
+        const list = document.getElementById("notifs")
+        const hist = document.getElementById("notifs-hist").querySelector(".list")
+        const notif = document.createElement("div")
+        notif.classList.add("notif")
+        notif.dataset.type = type
+        notif.innerText = text
+        list.appendChild(notif)
+        setTimeout(() => notif.remove(), duration)
+        notif.addEventListener("click", () => notif.remove())
+        hist.prepend(notif.cloneNode(true))
+    }
+
+    checkIntegrity() {
+        if (this.integrity_mgr.checkIntegrity()) {
+            this.notify("No integrity error detected !", "success")
+        }
+    }
+
+    improveAllNames() {
+        this.integrity_mgr.improveAllNames()
+        this.notify("Improved all names !", "success")
+    }
+
+    toggleNotifications() {
+        const hist = document.getElementById("notifs-hist")
+        if (hist.classList.contains("show")) {
+            this.closeNotifications()
+        } else {
+            this.openNotifications()
+        }
+    }
+    
+    openNotifications() {
+        const hist = document.getElementById("notifs-hist")
+        hist.classList.add("show")
+    }
+    
+    closeNotifications() {
+        const hist = document.getElementById("notifs-hist")
+        hist.classList.remove("show")
+    }
 }