v2.0.0.0000

2019-08-02 20:12:09 +02:00
parent e396af91cb
commit e001b06b62
85 changed files with 22786 additions and 2 deletions
--- a/ts/authentication_ts.ts
+++ b/ts/authentication_ts.ts
@@ -0,0 +1,47 @@
+function login() {
+  var err:Boolean = false
+  var data = new Object()
+  var div:any = document.getElementById("content")
+  var form:any = document.getElementById("authentication")
+
+  var inputs:any = div.getElementsByTagName("INPUT")
+
+  console.log(inputs)
+
+  for (var i = inputs.length - 1; i >= 0; i--) {
+    
+    var key:string = (inputs[i] as HTMLInputElement).name
+    var value:string = (inputs[i] as HTMLInputElement).value
+
+    if (value.length == 0) {
+      inputs[i].style.borderColor = "red"
+      err = true
+    }
+
+    data[key] = value
+
+  }
+
+  if (err == true) {
+    data = new Object()
+    return
+  }
+
+  if (data.hasOwnProperty("confirm")) {
+
+    if (data["confirm"] != data["password"]) {
+      alert("sdafsd")
+      document.getElementById('password').style.borderColor = "red"
+      document.getElementById('confirm').style.borderColor = "red"
+
+      document.getElementById("err").innerHTML = "{{.account.failed}}"
+      return
+    }
+
+  }
+  
+  console.log(data)
+
+  form.submit();
+
+}
--- a/ts/base_ts.ts
+++ b/ts/base_ts.ts
@@ -0,0 +1,663 @@
+var SERVER = new Object()
+var BULK_EDIT:Boolean = false
+var COLUMN_TO_SORT:number
+var SEARCH_MAPPING = new Object()
+var UNDO = new Object()
+var SERVER_CONNECTION = false
+var WS_AVAILABLE = false
+
+
+// Menü
+var menuItems = new Array()
+menuItems.push(new MainMenuItem("playlist", "{{.mainMenu.item.playlist}}", "m3u.png", "{{.mainMenu.headline.playlist}}"))
+//menuItems.push(new MainMenuItem("pmsID", "{{.mainMenu.item.pmsID}}", "number.png", "{{.mainMenu.headline.pmsID}}"))
+menuItems.push(new MainMenuItem("filter", "{{.mainMenu.item.filter}}", "filter.png", "{{.mainMenu.headline.filter}}"))
+menuItems.push(new MainMenuItem("xmltv", "{{.mainMenu.item.xmltv}}", "xmltv.png", "{{.mainMenu.headline.xmltv}}"))
+menuItems.push(new MainMenuItem("mapping", "{{.mainMenu.item.mapping}}", "mapping.png", "{{.mainMenu.headline.mapping}}"))
+menuItems.push(new MainMenuItem("users", "{{.mainMenu.item.users}}", "users.png", "{{.mainMenu.headline.users}}"))
+menuItems.push(new MainMenuItem("settings", "{{.mainMenu.item.settings}}", "settings.png", "{{.mainMenu.headline.settings}}"))
+menuItems.push(new MainMenuItem("log", "{{.mainMenu.item.log}}", "log.png", "{{.mainMenu.headline.log}}"))
+menuItems.push(new MainMenuItem("logout", "{{.mainMenu.item.logout}}", "logout.png", "{{.mainMenu.headline.logout}}"))
+
+// Kategorien für die Einstellungen
+var settingsCategory = new Array()
+settingsCategory.push(new SettingsCategoryItem("{{.settings.category.general}}", "xteveAutoUpdate,tuner,epgSource,api"))
+settingsCategory.push(new SettingsCategoryItem("{{.settings.category.files}}", "update,files.update,temp.path,cache.images,xepg.replace.missing.images"))
+settingsCategory.push(new SettingsCategoryItem("{{.settings.category.streaming}}", "buffer,buffer.size.kb,buffer.timeout,user.agent"))
+settingsCategory.push(new SettingsCategoryItem("{{.settings.category.backup}}", "backup.path,backup.keep"))
+settingsCategory.push(new SettingsCategoryItem("{{.settings.category.authentication}}", "authentication.web,authentication.pms,authentication.m3u,authentication.xml,authentication.api"))
+
+function showPopUpElement(elm) {
+
+  var allElements = new Array("popup-custom");
+
+  for (var i = 0; i < allElements.length; i++) {
+    showElement(allElements[i], false)
+  }
+
+  showElement(elm, true)
+
+  setTimeout(function(){
+    showElement("popup", true);
+  }, 10);
+
+  return
+}
+
+function showElement(elmID, type) {
+
+  var cssClass:string
+  switch(type) {
+    case true:  cssClass = "block"; break;
+    case false: cssClass = "none"; break;
+  }
+
+  document.getElementById(elmID).className = cssClass;
+}
+
+function changeButtonAction(element, buttonID, attribute) {
+  var value = element.options[element.selectedIndex].value;
+  document.getElementById(buttonID).setAttribute(attribute, value)
+}
+
+function getLocalData(dataType, id):object {
+  var data = new Object()
+  switch(dataType) {
+    case "m3u":
+      data = SERVER["settings"]["files"][dataType][id]
+      break
+
+    case "hdhr":
+      data = SERVER["settings"]["files"][dataType][id]
+      break
+
+    case "filter":
+    case "custom-filter":
+    case "group-title":
+      if (id == -1) {
+        data["active"] = true
+        data["caseSensitive"] = false
+        data["description"] = ""
+        data["exclude"] = ""
+        data["filter"] = ""
+        data["include"] = ""
+        data["name"] = ""
+        data["type"] = "group-title"
+        SERVER["settings"]["filter"][id] = data
+      }
+      data = SERVER["settings"]["filter"][id]
+      break
+
+    case "xmltv":
+      data = SERVER["settings"]["files"][dataType][id]
+      break
+
+    case "users":
+      data = SERVER["users"][id]["data"]
+      break
+
+    case "mapping":
+      data = SERVER["xepg"]["epgMapping"][id]
+      break
+
+    case "m3uGroups":
+      data = SERVER["data"]["playlist"]["m3u"]["groups"]
+      break
+  }
+
+  return data
+}
+
+function getObjKeys(obj) {
+  var keys = new Array();
+
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+      keys.push(i);
+    }
+  }
+
+  return keys;
+}
+
+function getAllSelectedChannels():string[] {
+
+  var channels:string[] = new Array()
+
+  if (BULK_EDIT == false) {
+    return channels
+  }
+
+  var trs = document.getElementById("content_table").getElementsByTagName("TR")
+
+  for (var i = 1; i < trs.length; i++) {
+
+    if ((trs[i] as HTMLElement).style.display != "none") {
+
+      if ((trs[i].firstChild.firstChild as HTMLInputElement).checked == true) {
+        channels.push(trs[i].id)
+      }
+
+    }
+
+  }
+
+  return channels
+}
+
+function selectAllChannels() {
+
+  var bulk:Boolean = false
+  var trs = document.getElementById("content_table").getElementsByTagName("TR")
+
+  if ((trs[0].firstChild.firstChild as HTMLInputElement).checked == true) {
+    bulk = true
+  }
+
+  for (var i = 1; i < trs.length; i++) {
+
+    if ((trs[i] as HTMLElement).style.display != "none") {
+
+      switch (bulk) {
+
+        case true:
+          (trs[i].firstChild.firstChild as HTMLInputElement).checked = true
+          break
+
+        case false:
+          (trs[i].firstChild.firstChild as HTMLInputElement).checked = false
+          break
+
+      }
+
+    }
+
+  }
+
+  return
+}
+
+function bulkEdit() {
+
+  BULK_EDIT = !BULK_EDIT
+  var className:string
+  var rows = document.getElementsByClassName("bulk");
+
+  switch (BULK_EDIT) {
+    case true:
+      className = "bulk showBulk"
+      break;
+
+    case false:
+      className = "bulk hideBulk"
+      break;
+  }
+
+  for (var i = 0; i < rows.length; i++) {
+    rows[i].className = className;
+    (rows[i] as HTMLInputElement).checked = false
+  }
+
+  return
+}
+
+function sortTable(column) {
+  //console.log(columm);
+
+  if (column == COLUMN_TO_SORT) {
+    return;
+  }
+
+
+  var table       = document.getElementById("content_table");
+  var tableHead   = table.getElementsByTagName("TR")[0];
+  var tableItems  = tableHead.getElementsByTagName("TD");
+
+  var sortObj = new Object();
+  var x, xValue;
+  var tableHeader
+  var sortByString = false
+
+  if (column > 0 && COLUMN_TO_SORT > 0)  {
+    tableItems[COLUMN_TO_SORT].className = "pointer";
+    tableItems[column].className = "sortThis";
+  }
+
+  COLUMN_TO_SORT = column;
+
+
+  var rows = (table as HTMLTableElement).rows;
+
+  if (rows[1] != undefined) {
+    tableHeader = rows[0]
+
+    x = rows[1].getElementsByTagName("TD")[column];
+
+    for (i = 1; i < rows.length; i++) {
+
+      x = rows[i].getElementsByTagName("TD")[column];
+
+      switch(x.childNodes[0].tagName.toLowerCase()) {
+        case "input":
+          xValue = x.getElementsByTagName("INPUT")[0].value.toLowerCase();
+          break;
+
+        case "p":
+          xValue = x.getElementsByTagName("P")[0].innerText.toLowerCase();
+          break;
+
+        default: console.log(x.childNodes[0].tagName);
+      }
+
+      if (xValue == "" || xValue == NaN) {
+
+        xValue = i
+        sortObj[i] = rows[i];
+
+      } else {
+
+        switch(isNaN(xValue)) {
+          case false:
+
+            xValue = parseFloat(xValue);
+            sortObj[xValue] = rows[i]
+            break;
+
+          case true:
+
+            sortByString = true
+            sortObj[xValue.toLowerCase() + i] = rows[i]
+            break;
+
+        }
+
+      }
+
+    }
+
+    while (table.firstChild) {
+      table.removeChild(table.firstChild);
+    }
+
+    var sortValues = getObjKeys(sortObj)
+
+    if (sortByString == true) {
+      sortValues.sort()
+      console.log(sortValues);
+    } else {
+      function sortFloat(a, b) {
+        return a - b;
+      }
+      sortValues.sort(sortFloat);
+    }
+
+    table.appendChild(tableHeader)
+
+    for (var i = 0; i < sortValues.length; i++) {
+
+      table.appendChild(sortObj[sortValues[i]])
+
+    }
+
+  }
+
+  return
+}
+
+function createSearchObj() {
+
+  SEARCH_MAPPING = new Object()
+  var data = SERVER["xepg"]["epgMapping"]
+  var channels = getObjKeys(data)
+
+  var channelKeys:string[] = ["x-active", "x-channelID", "x-name", "_file.m3u.name", "x-group-title"]
+
+  channels.forEach(id => {
+
+    channelKeys.forEach(key => {
+
+      if (key == "x-active") {
+
+        switch (data[id][key]) {
+          case true:
+            SEARCH_MAPPING[id] = "online "
+            break;
+
+          case false:
+            SEARCH_MAPPING[id] = "offline "
+            break;
+
+        }
+
+      } else {
+
+        SEARCH_MAPPING[id] = SEARCH_MAPPING[id] + data[id][key] + " "
+
+      }
+
+    })
+
+  })
+
+  return
+}
+
+function searchInMapping() {
+
+  var searchValue = (document.getElementById("searchMapping") as HTMLInputElement).value;
+  var trs = document.getElementById("content_table").getElementsByTagName("TR")
+
+  for (var i = 1; i < trs.length; ++i) {
+
+    var id = trs[i].getAttribute("id")
+    var element = SEARCH_MAPPING[id]
+
+    switch (element.toLowerCase().includes(searchValue.toLowerCase())) {
+      case true:
+        document.getElementById(id).style.display = ""
+        break;
+
+      case false:
+        document.getElementById(id).style.display = "none"
+        break;
+    }
+
+
+  }
+
+  return
+}
+
+function calculateWrapperHeight() {
+
+  if (document.getElementById("box-wrapper")){
+
+    var elm = document.getElementById("box-wrapper");
+
+    var divs = new Array("myStreamsBox", "clientInfo", "content");
+    var elementsHeight = 0 - elm.offsetHeight;
+    for (var i = 0; i < divs.length; i++) {
+      elementsHeight = elementsHeight + document.getElementById(divs[i]).offsetHeight;
+    }
+
+    elm.style.height = window.innerHeight - elementsHeight + "px";
+
+  }
+
+  return
+}
+
+function changeChannelNumber(element) {
+
+  var dbID = element.parentNode.parentNode.id
+
+  var newNumber:number = parseFloat(element.value)
+  var channelNumbers:number[] = []
+  var data = SERVER["xepg"]["epgMapping"]
+  var channels = getObjKeys(data)
+
+  if (isNaN(newNumber)) {
+    alert("{{.alert.invalidChannelNumber}}")
+    return
+  }
+
+  channels.forEach(id => {
+
+    var channelNumber = parseFloat(data[id]["x-channelID"])
+    channelNumbers.push(channelNumber)
+
+  })
+
+  for (var i = 0; i < channelNumbers.length; i++) {
+     
+    if (channelNumbers.indexOf(newNumber) == -1) {
+      break
+    }
+
+    if (Math.floor(newNumber) == newNumber) {
+      newNumber = newNumber + 1
+    } else {
+      newNumber = newNumber + 0.1;
+      newNumber.toFixed(1)
+      newNumber = Math.round(newNumber * 10) / 10
+    }
+
+  }
+ 
+  data[dbID]["x-channelID"] = newNumber.toString()
+  element.value = newNumber
+
+  console.log(data[dbID]["x-channelID"])
+
+  if (COLUMN_TO_SORT == 1) {
+    COLUMN_TO_SORT = -1
+    sortTable(1)
+  }
+
+  return
+}
+
+function backup() {
+
+  var data = new Object()
+  console.log("Backup data")
+
+  var cmd = "xteveBackup"
+
+  console.log("SEND TO SERVER");
+  console.log(data)
+
+  var server:Server = new Server(cmd)
+  server.request(data)
+
+  return
+}
+
+function toggleChannelStatus(id:string) {
+
+  var element:any
+  var status:boolean
+
+  if(document.getElementById("active")) {
+    var checkbox = (document.getElementById("active") as HTMLInputElement)
+    status = (checkbox).checked
+  }
+  
+
+  var ids:string[] = getAllSelectedChannels()
+  if (ids.length == 0) {
+    ids.push(id)
+  }
+
+  ids.forEach(id => {
+
+    var channel = SERVER["xepg"]["epgMapping"][id]
+
+    channel["x-active"] = status
+
+    switch (channel["x-active"]) {
+      case true:
+        if (channel["x-xmltv-file"] == "-" || channel["x-mapping"] == "-") {
+
+          if (BULK_EDIT == false) {
+            alert(channel["x-name"] + ": Missing XMLTV file / channel")
+            checkbox.checked = false
+          }
+          
+          channel["x-active"] = false
+        
+        }
+
+        break
+
+      case false:
+        // code...
+        break;
+    }
+
+    if (channel["x-active"] == false) {
+      document.getElementById(id).className = "notActiveEPG"
+    } else {
+      document.getElementById(id).className = "activeEPG"
+    }
+
+  });
+
+}
+
+function restore() {
+
+  if (document.getElementById('upload')) {
+    document.getElementById('upload').remove()
+  }
+
+  var restore = document.createElement("INPUT");
+  restore.setAttribute("type", "file");
+  restore.setAttribute("class", "notVisible");
+  restore.setAttribute("name", "");
+  restore.id = "upload";
+
+  document.body.appendChild(restore);
+  restore.click();
+
+  restore.onchange = function() {
+
+    var filename = (restore as HTMLInputElement).files[0].name
+    var check = confirm("File: " + filename + "\n{{.confirm.restore}}");
+
+    if (check == true) {
+
+      var reader  = new FileReader();
+      var file = (document.querySelector('input[type=file]') as HTMLInputElement).files[0];
+
+      if (file) {
+
+        reader.readAsDataURL(file);
+        reader.onload = function() {
+          console.log(reader.result);
+          var data = new Object();
+          var cmd = "xteveRestore"
+          data["base64"]  = reader.result
+
+          var server:Server = new Server(cmd)
+          server.request(data)
+
+        };
+
+      } else {
+        alert("File could not be loaded")
+      }
+
+      restore.remove()
+      return
+    }
+
+  }
+
+  return
+}
+
+function uploadLogo() {
+
+  if (document.getElementById('upload')) {
+    document.getElementById('upload').remove()
+  }
+
+  var upload = document.createElement("INPUT");
+  upload.setAttribute("type", "file");
+  upload.setAttribute("class", "notVisible");
+  upload.setAttribute("name", "");
+  upload.id = "upload";
+
+  document.body.appendChild(upload);
+  upload.click();
+
+  upload.onblur = function() {
+    alert()
+  }
+
+  upload.onchange = function() {
+
+    var filename = (upload as HTMLInputElement).files[0].name
+
+    var reader  = new FileReader();
+    var file = (document.querySelector('input[type=file]') as HTMLInputElement).files[0];
+
+    if (file) {
+
+      reader.readAsDataURL(file);
+      reader.onload = function() {
+        console.log(reader.result);
+        var data = new Object();
+        var cmd = "uploadLogo"
+        data["base64"]  = reader.result
+        data["filename"]  = file.name
+
+        var server:Server = new Server(cmd)
+        server.request(data)
+
+        var updateLogo = (document.getElementById('update-icon') as HTMLInputElement)
+        updateLogo.checked = false
+        updateLogo.className = "changed"
+
+      };
+
+    } else {
+      alert("File could not be loaded")
+    }
+
+    upload.remove()
+    return
+  }
+
+}
+
+function checkUndo(key:string) {
+
+  switch (key) {
+    case "epgMapping":
+      if (UNDO.hasOwnProperty(key)) {
+        SERVER["xepg"][key] = JSON.parse(JSON.stringify(UNDO[key]))
+      } else {
+        UNDO[key] = JSON.parse(JSON.stringify(SERVER["xepg"][key]));
+      }
+      break;
+    
+    default:
+    
+      break;
+  }
+
+  return
+}
+
+function sortSelect(elem) {
+
+  var tmpAry = [];
+  var selectedValue = elem[elem.selectedIndex].value;
+
+  for (var i=0;i<elem.options.length;i++) tmpAry.push(elem.options[i]);
+
+  tmpAry.sort(function(a,b){ return (a.text < b.text)?-1:1; });
+  while (elem.options.length > 0) elem.options[0] = null;
+
+  var newSelectedIndex = 0;
+
+  for (var i=0;i<tmpAry.length;i++) {
+
+      elem.options[i] = tmpAry[i];
+      if(elem.options[i].value == selectedValue) newSelectedIndex = i;
+  
+  }
+  
+  elem.selectedIndex = newSelectedIndex; // Set new selected index after sorting
+  return;
+}
+
+function updateLog() {
+
+  console.log("TOKEN")
+  var server:Server = new Server("updateLog")
+  server.request(new Object())
+
+}
--- a/ts/compileJS.sh
+++ b/ts/compileJS.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+tsc *.ts --outDir ../html/js/
--- a/ts/configuration_ts.ts
+++ b/ts/configuration_ts.ts
@@ -0,0 +1,169 @@
+class WizardCategory {
+  DocumentID = "content"
+
+  createCategoryHeadline(value:string):any {
+    var element = document.createElement("H4")
+    element.innerHTML = value
+    return element
+  }
+}
+
+class WizardItem extends WizardCategory {
+  key:string
+  headline:string
+
+  constructor(key:string, headline:string) {
+    super()
+    this.headline = headline
+    this.key = key
+  }
+
+  createWizard():void {
+    var headline = this.createCategoryHeadline(this.headline)
+    var key = this.key
+    var content:PopupContent = new PopupContent()
+    var description:string
+
+    var doc = document.getElementById(this.DocumentID)
+    doc.innerHTML = ""
+    doc.appendChild(headline)
+
+    switch (key) {
+      case "tuner":
+        var text = new Array()
+        var values = new Array()
+
+        for (var i = 1; i <= 100; i++) {
+          text.push(i)
+          values.push(i)
+        }
+
+        var select = content.createSelect(text, values, "1", key)
+        select.setAttribute("class", "wizard")
+        select.id = key
+        doc.appendChild(select)
+
+        description = "{{.wizard.tuner.description}}"
+
+        break;
+      
+      case "epgSource":
+        var text:any[] = ["PMS", "XEPG"]
+        var values:any[] = ["PMS", "XEPG"]
+
+        var select = content.createSelect(text, values, "XEPG", key)
+        select.setAttribute("class", "wizard")
+        select.id = key
+        doc.appendChild(select)
+
+        description = "{{.wizard.epgSource.description}}"
+
+        break
+
+      case "m3u":
+        var input = content.createInput("text", key, "")
+        input.setAttribute("class", "wizard")
+        input.id = key
+        doc.appendChild(input)
+
+        description = "{{.wizard.m3u.description}}"
+
+        break
+
+      case "xmltv":
+        var input = content.createInput("text", key, "")
+        input.setAttribute("class", "wizard")
+        input.id = key
+        doc.appendChild(input)
+
+        description = "{{.wizard.xmltv.description}}"
+
+      break
+
+      default:
+        console.log(key)
+        break;
+    }
+
+    var pre = document.createElement("PRE")
+    pre.innerHTML = description
+    doc.appendChild(pre)
+
+    console.log(headline, key)
+  }
+
+
+}
+
+
+function readyForConfiguration(wizard:number) {
+
+  var server:Server = new Server("getServerConfig")
+  server.request(new Object())
+
+  showElement("loading", false)
+
+  configurationWizard[wizard].createWizard()
+
+}
+
+function saveWizard() {
+
+  var cmd = "saveWizard"
+  var div = document.getElementById("content")
+  var config = div.getElementsByClassName("wizard")
+
+  var wizard = new Object()
+
+  for (var i = 0; i < config.length; i++) {
+
+    var name:string
+    var value:any
+    
+    switch (config[i].tagName) {
+      case "SELECT":
+        name = (config[i] as HTMLSelectElement).name
+        value = (config[i] as HTMLSelectElement).value
+
+        // Wenn der Wert eine Zahl ist, wird dieser als Zahl gespeichert
+        if(isNaN(value)){
+          wizard[name] = value
+        } else {
+          wizard[name] = parseInt(value)
+        }
+
+        break
+
+      case "INPUT":
+        switch ((config[i] as HTMLInputElement).type) {
+          case "text":
+            name = (config[i] as HTMLInputElement).name
+            value = (config[i] as HTMLInputElement).value
+
+            wizard[name] = value
+            break
+        }
+        break
+      
+      default:
+        // code...
+        break;
+    }
+
+  }
+
+  var data = new Object()
+  data["wizard"] = wizard
+
+  var server:Server = new Server(cmd)
+  server.request(data)
+
+  console.log(data)
+}
+
+// Wizard
+var configurationWizard = new Array()
+configurationWizard.push(new WizardItem("tuner", "{{.wizard.tuner.title}}"))
+configurationWizard.push(new WizardItem("epgSource", "{{.wizard.epgSource.title}}"))
+configurationWizard.push(new WizardItem("m3u", "{{.wizard.m3u.title}}"))
+configurationWizard.push(new WizardItem("xmltv", "{{.wizard.xmltv.title}}"))
--- a/ts/logs_ts.ts
+++ b/ts/logs_ts.ts
@@ -0,0 +1,65 @@
+class Log {
+
+  createLog(entry:string):any {
+
+    var element = document.createElement("PRE");
+
+    if (entry.indexOf("WARNING") != -1) {
+      element.className = "warningMsg"
+    }
+
+    if (entry.indexOf("ERROR") != -1) {
+      element.className = "errorMsg"
+    }
+
+    if (entry.indexOf("DEBUG") != -1) {
+      element.className = "debugMsg"
+    }
+
+    element.innerHTML = entry
+
+    return element
+  }
+
+}
+
+function showLogs(bottom:boolean) {
+
+  var log = new Log()
+
+  var logs = SERVER["log"]["log"]
+  var div = document.getElementById("content_log")
+
+  div.innerHTML = ""
+
+  var keys = getObjKeys(logs)
+
+  keys.forEach(logID => {
+
+    var entry = log.createLog(logs[logID])
+
+    div.append(entry)
+  
+  });
+
+  setTimeout(function(){ 
+
+    if (bottom == true) {
+  
+      var wrapper = document.getElementById("box-wrapper");
+      wrapper.scrollTop = wrapper.scrollHeight;
+
+    }
+
+  }, 10);
+
+}
+
+function resetLogs() {
+
+  var cmd = "resetLogs"
+  var data = new Object()
+  var server:Server = new Server(cmd)
+  server.request(data)
+
+}
--- a/ts/menu_ts.ts
+++ b/ts/menu_ts.ts
--- a/ts/network_ts.ts
+++ b/ts/network_ts.ts
@@ -0,0 +1,147 @@
+class Server {
+  protocol:string
+  cmd:string
+
+  constructor(cmd:string) {
+    this.cmd = cmd
+  }
+
+  request(data:Object):any {
+
+    if (SERVER_CONNECTION == true) {
+      return
+    }
+
+    SERVER_CONNECTION = true
+    
+    console.log(data)
+    if (this.cmd != "updateLog") {
+      showElement("loading", true)
+      UNDO = new Object()
+    }
+    
+    switch(window.location.protocol) {
+      case "http:": 
+        this.protocol = "ws://"
+        break
+      case "https://": 
+        this.protocol = "wss://"
+        break
+    }
+
+    var url = this.protocol + window.location.hostname + ":" + window.location.port + "/data/" + "?Token=" + getCookie("Token")
+
+    data["cmd"] = this.cmd
+    var ws = new WebSocket(url)
+    ws.onopen = function() {
+
+      WS_AVAILABLE = true
+
+      console.log("REQUEST (JS):");
+      console.log(data)
+
+      console.log("REQUEST: (JSON)");
+      console.log(JSON.stringify(data))
+
+      this.send(JSON.stringify(data));
+      
+    }
+
+    ws.onerror = function(e) {
+      
+      console.log("No websocket connection to xTeVe could be established. Check your network configuration.")
+      SERVER_CONNECTION = false
+
+      if (WS_AVAILABLE == false) {
+        alert("No websocket connection to xTeVe could be established. Check your network configuration.")
+      }
+
+    }
+
+
+    ws.onmessage = function (e) {
+      
+      SERVER_CONNECTION = false
+      showElement("loading", false)
+
+      console.log("RESPONSE:");
+      var response = JSON.parse(e.data);
+  
+      console.log(response);
+
+      if (response.hasOwnProperty("token")) {
+        document.cookie = "Token=" + response["token"]
+      }
+
+      if (response["status"] == false) {
+        
+        alert(response["err"])
+
+        if (response.hasOwnProperty("reload")) {
+          location.reload()
+        }
+
+        return
+      }
+
+
+      if (response.hasOwnProperty("logoURL")) {
+        var div = (document.getElementById("channel-icon") as HTMLInputElement)
+        div.value = response["logoURL"]
+        div.className = "changed"
+        return
+      }
+
+      switch (data["cmd"]) {
+        case "updateLog":
+          SERVER["log"] = response["log"]
+          if (document.getElementById("content_log")) {
+            showLogs(false)
+          }
+          return
+          break;
+        
+        default:
+          SERVER = new Object()
+          SERVER = response
+          break;
+      }
+
+      if (response.hasOwnProperty("openMenu")) {
+        var menu = document.getElementById(response["openMenu"])
+        menu.click()
+        showElement("popup", false)
+      }
+
+      if (response.hasOwnProperty("openLink")) {
+        window.location = response["openLink"]
+      }
+
+      if (response.hasOwnProperty("alert")) {
+        alert(response["alert"])
+      }
+
+      if (response.hasOwnProperty("reload")) {
+        location.reload()
+      }
+
+
+      if (response.hasOwnProperty("wizard")) {
+        createLayout()
+        configurationWizard[response["wizard"]].createWizard()
+        return
+      }
+
+      createLayout()
+
+    }
+  
+  }
+  
+}
+
+function getCookie(name) {
+  var value = "; " + document.cookie;
+  var parts = value.split("; " + name + "=");
+  if (parts.length == 2) return parts.pop().split(";").shift();
+}
--- a/ts/settings_ts.ts
+++ b/ts/settings_ts.ts
@@ -0,0 +1,564 @@
+class SettingsCategory {
+  DocumentID:string = "content_settings"
+  createCategoryHeadline(value:string):any {
+    var element = document.createElement("H4")
+    element.innerHTML = value
+    return element
+  }
+
+  createHR():any {
+    var element = document.createElement("HR")
+    return element
+  }
+
+  createSettings(settingsKey:string):any {
+    var setting = document.createElement("TR")
+    var content:PopupContent = new PopupContent()
+    var data = SERVER["settings"][settingsKey]
+
+    switch (settingsKey) {
+
+        // Texteingaben
+      case "update":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.update.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createInput("text", "update", data.toString())
+        input.setAttribute("placeholder", "{{.settings.update.placeholder}}")
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "backup.path":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.backupPath.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createInput("text", "backup.path", data)
+        input.setAttribute("placeholder", "{{.settings.backupPath.placeholder}}")
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "temp.path":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.tempPath.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createInput("text", "temp.path", data)
+        input.setAttribute("placeholder", "{{.settings.tmpPath.placeholder}}")
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "user.agent":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.userAgent.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createInput("text", "user.agent", data)
+        input.setAttribute("placeholder", "{{.settings.userAgent.placeholder}}")
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "buffer.timeout":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.bufferTimeout.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createInput("text", "buffer.timeout", data)
+        input.setAttribute("placeholder", "{{.settings.bufferTimeout.placeholder}}")
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+        // Checkboxen
+      case "authentication.web":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.authenticationWEB.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "authentication.pms":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.authenticationPMS.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "authentication.m3u":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.authenticationM3U.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "authentication.xml":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.authenticationXML.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "authentication.api":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.authenticationAPI.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "files.update":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.filesUpdate.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "cache.images":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.cacheImages.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "xepg.replace.missing.images":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.replaceEmptyImages.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "xteveAutoUpdate":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.xteveAutoUpdate.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "buffer":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.streamBuffering.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "api":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.api.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var input = content.createCheckbox(settingsKey)
+        input.checked = data
+        input.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(input)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+        // Select
+      case "tuner":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.tuner.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var text = new Array()
+        var values = new Array()
+
+        for (var i = 1; i <= 100; i++) {
+          text.push(i)
+          values.push(i)
+        }
+
+        var select = content.createSelect(text, values, data, settingsKey)
+        select.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(select)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "epgSource":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.epgSource.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var text:any[] = ["PMS", "XEPG"]
+        var values:any[] = ["PMS", "XEPG"]
+
+        var select = content.createSelect(text, values, data, settingsKey)
+        select.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(select)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "backup.keep":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.backupKeep.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var text:any[] = ["5", "10", "20", "30", "40", "50"]
+        var values:any[] = ["5", "10", "20", "30", "40", "50"]
+
+        var select = content.createSelect(text, values, data, settingsKey)
+        select.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(select)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+      case "buffer.size.kb":
+        var tdLeft = document.createElement("TD")
+        tdLeft.innerHTML = "{{.settings.bufferSize.title}}" + ":"
+
+        var tdRight = document.createElement("TD")
+        var text:any[] = ["0.5 MB", "1 MB", "2 MB", "3 MB", "4 MB", "5 MB", "6 MB", "7 MB", "8 MB"]
+        var values:any[] = ["512", "1024", "2048", "3072", "4096", "5120", "6144", "7168", "8192"]
+
+        var select = content.createSelect(text, values, data, settingsKey)
+        select.setAttribute("onchange", "javascript: this.className = 'changed'")
+        tdRight.appendChild(select)
+
+        setting.appendChild(tdLeft)
+        setting.appendChild(tdRight)
+        break
+
+    }
+
+    return setting
+
+  }
+
+  
+  createDescription(settingsKey:string):any {
+
+    var description = document.createElement("TR")
+    var text:string
+    switch (settingsKey) {
+      
+      case "authentication.web":
+        text = "{{.settings.authenticationWEB.description}}"
+        break
+
+      case "authentication.m3u":
+        text = "{{.settings.authenticationM3U.description}}"
+        break
+
+      case "authentication.pms":
+        text = "{{.settings.authenticationPMS.description}}"
+        break
+
+      case "authentication.xml":
+        text = "{{.settings.authenticationXML.description}}"
+        break
+
+      case "authentication.api":
+        if (SERVER["settings"]["authentication.web"] == true) {
+          text = "{{.settings.authenticationAPI.description}}"
+        }
+        break
+
+      case "xteveAutoUpdate":
+        text = "{{.settings.xteveAutoUpdate.description}}"
+        break
+
+      case "backup.keep":
+        text = "{{.settings.backupKeep.description}}"
+        break
+
+      case "backup.path":
+        text = "{{.settings.backupPath.description}}"
+        break
+
+      case "temp.path":
+        text = "{{.settings.tempPath.description}}"
+        break
+
+      case "buffer":
+        text = "{{.settings.streamBuffering.description}}"
+        break
+
+      case "buffer.size.kb":
+        text = "{{.settings.bufferSize.description}}"
+        break
+
+      case "buffer.timeout":
+        text = "{{.settings.bufferTimeout.description}}"
+        break
+
+      case "user.agent":
+        text = "{{.settings.userAgent.description}}"
+        break
+
+      case "epgSource":
+        text = "{{.settings.epgSource.description}}"
+        break
+
+      case "tuner":
+        text = "{{.settings.tuner.description}}"
+        break
+
+      case "update":
+        text = "{{.settings.update.description}}"
+        break
+
+      case "api":
+        text = "{{.settings.api.description}}"
+        break
+
+      case "files.update":
+        text = "{{.settings.filesUpdate.description}}"
+        break
+
+      case "cache.images":
+        text = "{{.settings.cacheImages.description}}"
+        break
+
+      case "xepg.replace.missing.images":
+        text = "{{.settings.replaceEmptyImages.description}}"
+        break
+
+      default:
+        text = ""
+        break
+  
+    }
+
+    var tdLeft = document.createElement("TD")
+    tdLeft.innerHTML = ""
+
+    var tdRight = document.createElement("TD")
+    var pre = document.createElement("PRE")
+    pre.innerHTML = text
+    tdRight.appendChild(pre)
+
+    description.appendChild(tdLeft)
+    description.appendChild(tdRight)
+    
+    return description
+
+  }
+
+}
+
+class SettingsCategoryItem extends SettingsCategory {
+  headline:string
+  settingsKeys:string
+
+  constructor(headline:string, settingsKeys:string) {
+    super()
+    this.headline = headline
+    this.settingsKeys = settingsKeys
+  }
+
+  createCategory():void {
+    var headline = this.createCategoryHeadline(this.headline)
+    var settingsKeys = this.settingsKeys
+    
+    var doc = document.getElementById(this.DocumentID)
+    doc.appendChild(headline)
+
+    // Tabelle für die Kategorie erstellen
+      
+    var table = document.createElement("TABLE")
+
+    var keys = settingsKeys.split(",")
+
+    keys.forEach(settingsKey => {
+
+      switch (settingsKey) {
+
+        case "authentication.pms":
+        case "authentication.m3u":
+        case "authentication.xml":
+        case "authentication.api":
+          if (SERVER["settings"]["authentication.web"] == false) {
+            break
+          }
+
+        default:
+          var item = this.createSettings(settingsKey)
+          var description = this.createDescription(settingsKey)
+
+          table.appendChild(item)
+          table.appendChild(description)
+          break
+
+      }
+
+    });
+
+    doc.appendChild(table)
+    doc.appendChild(this.createHR())
+  }
+
+}
+
+function showSettings() {
+  console.log("SETTINGS");
+
+  for (let i = 0; i < settingsCategory.length; i++) {
+    settingsCategory[i].createCategory()
+  }
+  
+}
+
+function saveSettings() {
+  console.log("Save Settings");
+
+  var cmd = "saveSettings"
+  var div = document.getElementById("content_settings")
+  var settings = div.getElementsByClassName("changed")
+
+  var newSettings = new Object();
+
+  for (let i = 0; i < settings.length; i++) {
+
+    var name:string
+    var value:any
+
+    switch (settings[i].tagName) {
+      case "INPUT":
+
+        switch ((settings[i] as HTMLInputElement).type) {
+          case "checkbox":
+            name = (settings[i] as HTMLInputElement).name
+            value = (settings[i] as HTMLInputElement).checked
+            newSettings[name] = value
+            break
+
+          case "text":
+            name = (settings[i] as HTMLInputElement).name
+            value = (settings[i] as HTMLInputElement).value
+
+            switch (name) {
+              case "update":
+                value = value.split(",")
+                value = value.filter(function(e:any) { return e})
+                break
+
+              case "buffer.timeout":
+                value = parseFloat(value)
+
+            }
+
+            newSettings[name] = value
+            break
+        }
+
+        break
+
+      case "SELECT":
+        name = (settings[i] as HTMLSelectElement).name
+        value = (settings[i] as HTMLSelectElement).value
+
+        // Wenn der Wert eine Zahl ist, wird dieser als Zahl gespeichert
+        if(isNaN(value)){
+          newSettings[name] = value
+        } else {
+          newSettings[name] = parseInt(value)
+        }
+
+        break
+
+    }
+    
+  }
+
+  var data = new Object()
+  data["settings"] = newSettings
+
+  var server:Server = new Server(cmd)
+  server.request(data)
+}