Phase 5b and Phase 6: TypeScript restructure, jsdom tests, regex filters and per-playlist buffer in the UI

TypeScript: - menu_ts.ts split into menu.ts, content.ts, popup.ts and xmltv.ts; the other files drop their _ts suffix. Bundle order fixed in ts/tsconfig.json. - All 94 string event handlers (setAttribute("onclick", "javascript: ...")) replaced with addEventListener closures. changeButtonAction, which rewrote an onclick attribute from select values, is gone. - Settings rows are generated from one SETTINGS_FIELDS table instead of ~20 copy-pasted blocks; rendered HTML is byte-identical to before. saveSettings now serialises password inputs, so a changed Plex token is actually sent (the server treats the mask as unchanged). - createLayout rebuilds the menu list only when the set of visible items changes, so focus in the menu survives a refresh. - announce()/alertUser(): alerts are mirrored into an aria-live region. - Filter popup offers a third type, Regular Expression (regex-filter), and the filter table labels it. Playlist popups get a Buffer select (default / none / xTeVe / FFmpeg / VLC) saved as the playlist's "buffer" parameter; the tuner field stays editable when the playlist's own buffer is active. Tests: tests/ holds 27 jsdom tests (Node's built-in runner, jsdom pinned) that load the built bundle with a fixture server payload: menu visibility rules, mapping table renders names as text, settings panel fields, popup flows, sorting, bulk select, layout refresh keeps nodes, live region, regex option, buffer select. npm test runs in the Drone webui-check step. README-DEV documents the layout and the test workflow.
2026-09-26 13:39:35 +10:00
parent 3532679235
commit 014a3b04d2
21 changed files with 5257 additions and 4296 deletions
@@ -0,0 +1,764 @@
+class Content {
+
+  DocumentID:string = "content"
+  TableID:string = "content_table"
+  DivID:string
+  headerClass:string = "content_table_header"
+  interactionID:string = "content-interaction"
+
+  createHeadline(value):any {
+    var element = document.createElement("H3")
+    element.textContent = value
+    return element
+  }
+
+  createHR():any {
+    var element = document.createElement("HR")
+    return element
+  }
+
+  createInteraction():any {
+    var element = document.createElement("DIV")
+    element.setAttribute("id", this.interactionID)
+    return element
+  }
+
+  createDIV():any {
+    var element = document.createElement("DIV")
+    element.id = this.DivID
+    return element
+  }
+
+  createTABLE():any {
+    var element = document.createElement("TABLE")
+    element.id = this.TableID
+    return element
+  }
+
+  createTableRow():any {
+    var element = document.createElement("TR")
+    element.className = this.headerClass
+    return element
+  }
+
+  createTableContent(menuKey:string):string[] {
+
+    var data = new Object()
+    var rows = new Array()
+
+    switch(menuKey) {
+      case "playlist":
+        var fileTypes = new Array("m3u", "hdhr")
+
+        fileTypes.forEach(fileType => {
+          
+          data = SERVER["settings"]["files"][fileType]
+        
+          var keys = getObjKeys(data)
+          
+          keys.forEach(key => {
+            var tr = document.createElement("TR")
+            tr.id = key
+            
+            tr.addEventListener("click", function() { openPopUp(fileType, tr) })
+
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["name"] 
+            tr.appendChild(cell.createCell())
+
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            if (SERVER["settings"]["buffer"] != "-") {
+              cell.value = data[key]["tuner"] 
+            } else {
+              cell.value = "-"
+            }
+            
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["last.update"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["provider.availability"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["type"].toUpperCase();
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["compatibility"]["streams"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["compatibility"]["group.title"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["compatibility"]["tvg.id"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["compatibility"]["stream.id"]
+            tr.appendChild(cell.createCell())
+            
+            rows.push(tr)
+          });
+        
+        });
+        break
+      
+        case "filter":
+        delete SERVER["settings"]["filter"][-1]
+        data = SERVER["settings"]["filter"]
+        var keys = getObjKeys(data)
+        keys.forEach(key => {
+          var tr = document.createElement("TR")
+          tr.id = key
+
+          tr.addEventListener("click", function() { openPopUp(data[key]["type"], tr) })
+          
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+          cell.value = data[key]["name"]
+          tr.appendChild(cell.createCell())
+
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+          switch (data[key]["type"]) {
+            case "custom-filter":
+              cell.value = "Custom"
+              break;
+
+            case "group-title":
+              cell.value = "Group"
+              break;
+
+            case "regex-filter":
+              cell.value = "Regex"
+              break;
+          
+            default:
+              break;
+          }
+          
+          tr.appendChild(cell.createCell())
+
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+          cell.value = data[key]["filter"]
+          tr.appendChild(cell.createCell())
+
+          rows.push(tr)
+
+        });
+        break
+
+      case "xmltv":
+        var fileTypes = new Array("xmltv")
+
+        fileTypes.forEach(fileType => {
+            
+          data = SERVER["settings"]["files"][fileType]
+      
+          var keys = getObjKeys(data)
+    
+          keys.forEach(key => {
+            var tr = document.createElement("TR")
+          
+            tr.id = key
+            tr.addEventListener("click", function() { openPopUp(fileType, tr) })
+
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["name"] 
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["last.update"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["provider.availability"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["compatibility"]["xmltv.channels"]
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["compatibility"]["xmltv.programs"]
+            tr.appendChild(cell.createCell())
+            
+            rows.push(tr)
+          });
+        
+        });
+        break
+
+      case "users":
+        var fileTypes = new Array("users")
+
+        fileTypes.forEach(fileType => {
+          data = SERVER[fileType]
+      
+          var keys = getObjKeys(data)
+    
+          keys.forEach(key => {
+            var tr = document.createElement("TR")
+            tr.id = key
+            tr.addEventListener("click", function() { openPopUp(fileType, tr) })
+
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = data[key]["data"]["username"] 
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            cell.value = "******"
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            if (data[key]["data"]["authentication.web"] == true) {
+              cell.value = "✓"
+            } else {
+              cell.value = "-"
+            }
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            if (data[key]["data"]["authentication.pms"] == true) {
+              cell.value = "✓"
+            } else {
+              cell.value = "-"
+            }
+            tr.appendChild(cell.createCell())
+            
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            if (data[key]["data"]["authentication.m3u"] == true) {
+              cell.value = "✓"
+            } else {
+              cell.value = "-"
+            }
+            tr.appendChild(cell.createCell())
+
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            if (data[key]["data"]["authentication.xml"] == true) {
+              cell.value = "✓"
+            } else {
+              cell.value = "-"
+            }
+            tr.appendChild(cell.createCell())
+
+            var cell:Cell = new Cell()
+            cell.child = true
+            cell.childType = "P"
+            if (data[key]["data"]["authentication.api"] == true) {
+              cell.value = "✓"
+            } else {
+              cell.value = "-"
+            }
+            tr.appendChild(cell.createCell())
+            
+            rows.push(tr)
+          });
+        
+        });
+        break
+
+      case "mapping":
+        BULK_EDIT = false
+        createSearchObj()
+        checkUndo("epgMapping")
+        console.log("MAPPING")
+        data = SERVER["xepg"]["epgMapping"]
+
+        var keys = getObjKeys(data)
+        keys.forEach(key => {
+          var tr = document.createElement("TR")
+          tr.id = key
+
+
+          switch (data[key]["x-active"]) {
+            case true:
+              tr.className = "activeEPG"
+              break;
+          
+            case false:
+              tr.className = "notActiveEPG"
+              break;
+          }
+          
+          // Bulk
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "BULK"
+          cell.value = false
+          tr.appendChild(cell.createCell())
+
+          // Kanalnummer
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "INPUTCHANNEL"
+          cell.value = data[key]["x-channelID"]
+          tr.appendChild(cell.createCell())
+
+          // Logo
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "IMG"
+          cell.imageURL = data[key]["tvg-logo"]
+          tr.appendChild(cell.createCell())
+  
+          // Kanalname
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+          cell.className = data[key]["x-category"]
+          cell.value = data[key]["x-name"]
+          tr.appendChild(cell.createCell())
+          
+
+          // Playlist
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+          //cell.value = data[key]["_file.m3u.name"] 
+          cell.value = getValueFromProviderFile(data[key]["_file.m3u.id"], "m3u", "name")
+          tr.appendChild(cell.createCell())
+          
+
+          // Gruppe (group-title)
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+          cell.value = data[key]["x-group-title"] 
+          tr.appendChild(cell.createCell())
+
+          // XMLTV Datei
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+
+          if (data[key]["x-xmltv-file"] != "-") {            
+            cell.value = getValueFromProviderFile(data[key]["x-xmltv-file"], "xmltv", "name") 
+          } else {
+            cell.value = data[key]["x-xmltv-file"]
+          }
+          
+          tr.appendChild(cell.createCell())          
+
+          // XMLTV Kanal
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "P"
+          //var value = str.substring(1, 4);
+          var value = data[key]["x-mapping"]
+          if (value.length > 20) {
+            value = data[key]["x-mapping"].substring(0, 20) + "..."
+          }
+          cell.value = value
+          tr.appendChild(cell.createCell())
+
+          var cell:Cell = new Cell()
+          cell.child = true
+          cell.childType = "EDIT"
+          cell.value = "Edit"
+          var editTd = cell.createCell()
+          var editButton = (editTd.firstChild as HTMLInputElement)
+          editButton.addEventListener("click", function() { openPopUp("mapping", editButton) })
+          editButton.setAttribute("id", key)
+          editButton.setAttribute("aria-label", "Edit " + data[key]["x-name"])
+          tr.appendChild(editTd)
+
+          rows.push(tr)
+        });
+
+        break
+
+      case "settings":
+        alert()
+        break
+
+      default:
+        console.log("Table content (menuKey):", menuKey);
+        
+        break
+
+    }
+
+    return rows
+
+  }
+
+  return
+}
+
+class Cell {
+  child:Boolean
+  childType:string
+  value:any
+  className:string
+  tdClassName:string
+  imageURL:string
+  onclick:boolean
+  onclickHandler:() => void
+
+  createCell():any {
+    var td = document.createElement("TD")
+
+
+    if (this.child == true) {
+      var element:any
+
+      switch(this.childType){
+        case "P": 
+          element = document.createElement(this.childType);
+          element.textContent = this.value
+          element.className = this.className
+          break
+        
+        case "INPUT":
+          element = document.createElement(this.childType);
+          (element as HTMLInputElement).value = this.value;
+          (element as HTMLInputElement).type = "text";
+          break
+
+        case "INPUTCHANNEL":
+          element = document.createElement("INPUT");
+          (element as HTMLInputElement).addEventListener("change", function() { changeChannelNumber(element) });
+          (element as HTMLInputElement).value = this.value;
+          (element as HTMLInputElement).type = "text";
+          break
+
+        case "BULK":
+          element = document.createElement("INPUT");
+          (element as HTMLInputElement).checked = this.value;
+          (element as HTMLInputElement).type = "checkbox";
+          (element as HTMLInputElement).className = "bulk hideBulk";
+          (element as HTMLInputElement).addEventListener("click", function(event) {
+            scheduleChannelRangeSelection((element as HTMLInputElement), (event as MouseEvent))
+          })
+          break
+
+        case "BULK_HEAD":
+          element = document.createElement("INPUT");
+          (element as HTMLInputElement).checked = this.value;
+          (element as HTMLInputElement).type = "checkbox";
+          (element as HTMLInputElement).className = "bulk hideBulk";
+          (element as HTMLInputElement).addEventListener("click", function() { selectAllChannels() })
+          break
+
+        case "IMG":
+          element = document.createElement(this.childType);
+          element.setAttribute("src", this.imageURL)  
+          if (this.imageURL != "") {
+            // A broken logo falls back to no image; once, so the empty src cannot loop.
+            element.addEventListener("error", function() { element.setAttribute("src", "") }, {once: true})
+          }
+          break
+
+        case "EDIT":
+          element = document.createElement("INPUT");
+          (element as HTMLInputElement).type = "button";
+          (element as HTMLInputElement).value = this.value;
+          (element as HTMLInputElement).className = "mapping-edit-button";
+          break
+      }
+      
+      td.appendChild(element)
+      
+    } else {
+      td.textContent = this.value
+    }
+
+    if (this.onclick == true) {
+      td.addEventListener("click", this.onclickHandler)
+      td.className = "pointer"
+    }
+
+    if (this.tdClassName != undefined) {
+      td.className = this.tdClassName
+    }
+  
+    return td
+  }
+
+  return
+}
+
+class ShowContent extends Content {
+  menuID:number
+
+  constructor(menuID:number) {
+    super()
+    this.menuID = menuID
+  }
+
+  createInput(type:string, name:string, value:string,):any {
+    
+    var input = document.createElement("INPUT")
+    input.setAttribute("type", type)
+    input.setAttribute("name", name)
+    input.setAttribute("value", value)
+    return input
+  }
+
+  show():void {
+    COLUMN_TO_SORT = -1
+    // Alten Inhalt löschen
+    var doc = document.getElementById(this.DocumentID)
+    doc.innerHTML = ""
+    showPreview(false)
+
+    // Überschrift
+    var headline:string[] = menuItems[this.menuID].headline
+    
+    var menuKey = menuItems[this.menuID].menuKey
+    var h = this.createHeadline(headline)
+    doc.appendChild(h)
+
+    var hr = this.createHR()
+    doc.appendChild(hr)
+
+    // Interaktion
+    var div =this.createInteraction()
+    doc.appendChild(div)
+    var interaction = document.getElementById(this.interactionID)
+    switch (menuKey) {
+      case "playlist":
+        var input = this.createInput("button", menuKey, "New")
+        input.setAttribute("id", "-")
+        input.addEventListener("click", function() { openPopUp("playlist") })
+        interaction.appendChild(input)
+        break;
+
+      case "filter":
+        var input = this.createInput("button", menuKey, "New")
+        input.setAttribute("id", -1)
+        input.addEventListener("click", function(event) { openPopUp("filter", event.currentTarget) })
+        interaction.appendChild(input)
+        break;
+
+        
+      case "xmltv":
+        var input = this.createInput("button", menuKey, "New")
+        input.setAttribute("id", "xmltv")
+        input.addEventListener("click", function() { openPopUp("xmltv") })
+        interaction.appendChild(input)
+        break;
+
+      case "users":
+        var input = this.createInput("button", menuKey, "New")
+        input.setAttribute("id", "users")
+        input.addEventListener("click", function() { openPopUp("users") })
+        interaction.appendChild(input)
+        break;
+
+      case "mapping":
+        showElement("loading", true)
+        var input = this.createInput("button", menuKey, "Save")
+        input.addEventListener("click", function() { savePopupData("mapping", "", false, 0) })
+        interaction.appendChild(input)
+
+        var input = this.createInput("button", menuKey, "Bulk Edit")
+        input.addEventListener("click", function() { bulkEdit() })
+        interaction.appendChild(input)
+
+        var input = this.createInput("search", "search", "")
+        input.setAttribute("id", "searchMapping")
+        input.setAttribute("placeholder", "Search")
+        input.className = "search"
+        input.addEventListener("input", function() { searchInMapping() })
+        interaction.appendChild(input)
+        break;
+
+      case "settings":
+        var input = this.createInput("button", menuKey, "Save")
+        input.addEventListener("click", function() { saveSettings() })
+        interaction.appendChild(input)
+
+        var input = this.createInput("button", menuKey, "Backup")
+        input.addEventListener("click", function() { backup() })
+        interaction.appendChild(input)
+
+        var input = this.createInput("button", menuKey, "Restore")
+        input.addEventListener("click", function() { restore() })
+        interaction.appendChild(input)
+
+        var wrapper = document.createElement("DIV")
+        wrapper.setAttribute("id", "box-wrapper")
+        doc.appendChild(wrapper)
+
+        this.DivID = "content_settings"
+        var settings = this.createDIV()
+        wrapper.appendChild(settings)
+
+        showSettings()
+        
+        return
+        break
+
+      case "log":
+        var input = this.createInput("button", menuKey, "Reset Logs")
+        input.addEventListener("click", function() { resetLogs() })
+        interaction.appendChild(input)
+
+        var wrapper = document.createElement("DIV")
+        wrapper.setAttribute("id", "box-wrapper")
+        doc.appendChild(wrapper)
+
+        this.DivID = "content_log"
+        var logs = this.createDIV()
+        wrapper.appendChild(logs)
+
+        showLogs(true)
+
+        return
+        break
+
+      case "logout":
+        location.reload()
+        document.cookie = "Token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
+        break
+
+      default:
+        console.log("Show content (menuKey):", menuKey);
+        break;
+    }
+    
+    // Tabelle erstellen (falls benötigt)
+    var tableHeader:string[] = menuItems[this.menuID].tableHeader
+    if (tableHeader.length > 0) {
+      var wrapper = document.createElement("DIV")
+      doc.appendChild(wrapper)
+      wrapper.setAttribute("id", "box-wrapper")
+
+      var table = this.createTABLE()
+      wrapper.appendChild(table)
+
+      var header = this.createTableRow()
+      table.appendChild(header)
+
+      // Kopfzeile der Tablle
+      tableHeader.forEach(element => {
+        var cell:Cell = new Cell()
+        cell.child = true
+        cell.childType = "P"
+        cell.value = element
+        if (element == "BULK") {
+          cell.childType = "BULK_HEAD";
+          cell.value = false
+        }
+
+        if (menuKey == "mapping") {
+          
+          if (element == "Ch. No.") {
+            cell.onclick = true
+            cell.onclickHandler = function() { sortTable(1) }
+            cell.tdClassName = "sortThis"
+          }
+          
+          if (element == "Channel Name") {
+            cell.onclick = true
+            cell.onclickHandler = function() { sortTable(3) }
+          }
+  
+          if (element == "Playlist") {
+            cell.onclick = true
+            cell.onclickHandler = function() { sortTable(4) }
+          }
+  
+          if (element == "Group Title") {
+            cell.onclick = true
+            cell.onclickHandler = function() { sortTable(5) }
+          }
+  
+        }
+        
+        header.appendChild(cell.createCell())
+      });
+
+      table.appendChild(header)
+
+      // Inhalt der Tabelle
+      var rows:any = this.createTableContent(menuKey) 
+      rows.forEach(tr => {
+        table.appendChild(tr)
+      });
+      
+    }
+
+    switch (menuKey) {
+      case "mapping":
+        sortTable(1)
+        break;
+
+      case "filter":
+        showPreview(true)
+        sortTable(0)
+        break
+      
+      default:
+        COLUMN_TO_SORT = -1
+        sortTable(0)
+        break;
+    }
+
+    showElement("loading", false)
+  }
+  
+}
+
+function openThisMenu(element) {
+  var id = element.id
+  var content:ShowContent = new ShowContent(id)
+  setActiveMenu(id)
+  content.show()
+  closeLayoutMenuIfMobile()
+  calculateWrapperHeight()
+
+  return
+}