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.

ts/xmltv.ts

@@ -0,0 +1,206 @@
+class XMLTVFile {
+  File:string
+
+  getFiles(set:string):any {
+    var fileIDs:string[] = getObjKeys(SERVER["xepg"]["xmltvMap"])
+    var values = new Array("-");
+    var text  = new Array("-");
+
+    for (let i = 0; i < fileIDs.length; i++) {
+      if (fileIDs[i] != "xTeVe Dummy") {
+        values.push(getValueFromProviderFile(fileIDs[i], "xmltv", "file.xteve"))
+        text.push(getValueFromProviderFile(fileIDs[i], "xmltv", "name"))
+      } else {
+        values.push(fileIDs[i])
+        text.push(fileIDs[i])
+      }
+
+    }
+
+    var select = document.createElement("SELECT")
+    for (let i = 0; i < text.length; i++) {
+      var option = document.createElement("OPTION")
+      option.setAttribute("value", values[i])
+      option.innerText = text[i]
+      select.appendChild(option)
+    }
+
+    if(set != "") {
+      (select as HTMLSelectElement).value = set
+    }
+
+    return select
+  }
+
+  getPrograms(file:string, set:string):any {
+    //var fileIDs:string[] = getObjKeys(SERVER["xepg"]["xmltvMap"])
+    var values = getObjKeys(SERVER["xepg"]["xmltvMap"][file]);
+    var text = new Array()
+    var displayName:string
+
+    for (let i = 0; i < values.length; i++) {
+      if (SERVER["xepg"]["xmltvMap"][file][values[i]].hasOwnProperty('display-name') == true) {
+        displayName = SERVER["xepg"]["xmltvMap"][file][values[i]]["display-name"];
+      } else {
+        displayName = "-"
+      }
+     
+      text[i] = displayName + " (" + values[i]  + ")";
+    }
+
+    text.unshift("-");
+    values.unshift("-");
+
+    var select = document.createElement("SELECT")
+    for (let i = 0; i < text.length; i++) {
+      var option = document.createElement("OPTION")
+      option.setAttribute("value", values[i])
+      option.innerText = text[i]
+      select.appendChild(option)
+    }
+
+    if(set != "") {
+      (select as HTMLSelectElement).value = set
+    }
+
+    if ((select as HTMLSelectElement).value != set) {
+      (select as HTMLSelectElement).value = "-"
+    }    
+
+    return select
+  }
+
+  return
+}
+
+function getValueFromProviderFile(file:string, fileType, key) {
+
+  if (file == "xTeVe Dummy") {
+    return file
+  }
+
+  var fileID:string
+  var indicator = file.charAt(0)
+
+  switch (indicator) {
+    case "M":
+      fileType = "m3u"
+      fileID = file
+      break;
+
+    case "H":
+      fileType = "hdhr"
+      fileID = file
+      break;
+
+    case "X":
+      fileType = "xmltv"
+      fileID = file.substring(0, file.lastIndexOf('.'))
+      break;
+    
+  }
+
+  if (SERVER["settings"]["files"][fileType].hasOwnProperty(fileID) == true) {
+    var data = SERVER["settings"]["files"][fileType][fileID];
+    return data[key]
+  }
+
+  return
+
+}
+
+function setXmltvChannel(id, element) {
+
+  var xmltv:XMLTVFile = new XMLTVFile()
+  var xmlFile = element.value
+
+  var tvgId:string = SERVER["xepg"]["epgMapping"][id]["tvg-id"]
+  var td = document.getElementById("popup-mapping").parentElement
+  td.innerHTML = ""
+
+  var select = xmltv.getPrograms(element.value, tvgId)
+  select.setAttribute("name", "x-mapping")
+  select.setAttribute("id", "popup-mapping")
+  markChangedOnChange(select, function(element) { checkXmltvChannel(id, element, xmlFile) })
+  select.className = "changed"
+  sortSelect(select)
+  td.appendChild(select);
+  
+  checkXmltvChannel(id, select, xmlFile)
+}
+
+function checkXmltvChannel(id:string, element:any, xmlFile) {
+  
+  var value = (element as HTMLSelectElement).value
+  var bool:boolean
+  var checkbox = document.getElementById('active')
+  var channel:any = SERVER["xepg"]["epgMapping"][id]
+  var updateLogo:boolean
+  
+
+  if (value == "-") {
+    bool = false
+  } else {
+    bool = true
+  }
+
+  (checkbox as HTMLInputElement).checked = bool
+  checkbox.className = "changed"
+  console.log(xmlFile);
+  
+  // Kanallogo aktualisieren
+  /*
+  updateLogo = (document.getElementById("update-icon") as HTMLInputElement).checked
+  console.log(updateLogo);
+  */
+  
+  if(xmlFile != "xTeVe Dummy" && bool == true) {
+    
+    //(document.getElementById("update-icon") as HTMLInputElement).checked = true;
+    //(document.getElementById("update-icon") as HTMLInputElement).className = "changed";
+
+    console.log("ID", id)
+    changeChannelLogo(id)
+
+    return
+  }
+
+  if (xmlFile == "xTeVe Dummy") {
+    (document.getElementById("update-icon") as HTMLInputElement).checked = false;
+    (document.getElementById("update-icon") as HTMLInputElement).className = "changed";
+  }
+
+  return
+}
+
+function changeChannelLogo(id:string) {
+
+  var updateLogo:boolean
+  var channel:any = SERVER["xepg"]["epgMapping"][id]
+
+  var f = (document.getElementById("popup-xmltv") as HTMLSelectElement);
+  var xmltvFile = f.options[f.selectedIndex].value;
+
+  var m = (document.getElementById("popup-mapping") as HTMLSelectElement);
+  var xMapping = m.options[m.selectedIndex].value;
+
+  var xmltvLogo = SERVER["xepg"]["xmltvMap"][xmltvFile][xMapping]["icon"]
+  updateLogo = (document.getElementById("update-icon") as HTMLInputElement).checked
+
+  if (updateLogo == true && xmltvFile != "xTeVe Dummy") {
+
+    if (SERVER["xepg"]["xmltvMap"][xmltvFile].hasOwnProperty(xMapping)) {
+      var logo = xmltvLogo
+    } else {
+        logo = channel["tvg-logo"]
+    }
+
+    var logoInput = (document.getElementById("channel-icon") as HTMLInputElement);
+    logoInput.value = logo
+    if (BULK_EDIT == false) {
+      logoInput.className = "changed"
+    }
+
+  }
+
+}