feat: add basic integrity checks + corrections

editor/public/static/js/tracks_table.mjs

@@ -1,24 +1,31 @@
-import { flattenObj } from "./utils.mjs"
+import { flattenObj, getLanguageOptions } from "./utils.mjs"
 
 export class Track {
     constructor(table, idx, fields) {
+        /** @type {TracksTable} */
         this.table = table
+
+        /** @type {number} */
         this.idx = idx
+
+        /** @type {object} */
         this.fields = flattenObj(fields)
+
+        this.row = null
     }
 
     makeRow() {
-        const tr = document.createElement("tr")
-        tr.dataset.i = this.idx
+        this.row = document.createElement("tr")
+        this.row.dataset.i = this.idx
         this.table.fields.forEach(field => {
-            const td = tr.insertCell(-1)
+            const td = this.row.insertCell(-1)
             const input = this.makeInput(field, this.fields[field.key], this.idx)
             td.appendChild(input)
         })
-        return tr
+        return this.row
     }
 
-    makeInput(field, value) {
+    makeInput(field, value, listeners=true) {
         let input = document.createElement("input")
         let getValue = () => input.value
         switch (field.type) {
@@ -39,7 +46,7 @@ export class Track {
                 getValue = () => input.checked
                 const hotone = this.table.CONSTRAINTS[field.key]?.type == "hotone"
                 
-                if (hotone) {
+                if (listeners && hotone) {
                     if (value) {
                         if (field.key in this.table.hotones) {
                             alert(`Error in metadata file: field ${field.name} is hotone but multiple tracks are enabled`)
@@ -62,11 +69,14 @@ export class Track {
             
             case "sel":
                 input = document.createElement("select")
-                const options = this.table.OPTIONS[field.key]
+                let options = this.table.OPTIONS[field.key]
+                if (typeof options === "function") {
+                    options = options()
+                }
                 options.forEach(option => {
                     const opt = document.createElement("option")
-                    opt.innerText = option
-                    opt.value = option
+                    opt.innerText = option.display
+                    opt.value = option.value
                     input.appendChild(opt)
                 })
                 input.value = value
@@ -78,21 +88,34 @@ export class Track {
         if (this.table.CONSTRAINTS[field.key]?.type === "readonly") {
             input.disabled = true
         }
-        input.addEventListener("change", () => {
-            this.editValue(field.key, getValue())
-        })
+        if (listeners) {
+            input.addEventListener("change", () => {
+                this.editValue(field.key, getValue())
+            })
+        }
         return input
     }
 
     editValue(key, value) {
         this.fields[key] = value
         this.table.editTrack(this.idx, key, value)
+
+        const input = this.row.querySelector(`[data-key='${key}']`)
+        const fieldType = this.table.getFieldProps(key).type
+        switch (fieldType) {
+            case "bool":
+                input.checked = value
+                break
+            default:
+                input.value = value
+                break
+        }
     }
 }
 
 export default class TracksTable {
     OPTIONS = {
-        "language": ["fre", "eng"]
+        "language": getLanguageOptions
     }
     CONSTRAINTS = {
         "flags/default": {
@@ -124,6 +147,10 @@ export default class TracksTable {
         this.hotones = {}
     }
 
+    getFieldProps(key) {
+        return this.fields.find(f => f.key == key)
+    }
+
     loadTracks(tracks) {
         this.tracks = tracks.map((t, i) => new Track(this, i, t))
         this.clear()