Redesign UI and add first-party Docker runtime support

ts/menu_ts.ts

@@ -37,6 +37,7 @@ class MainMenuItem extends MainMenu {
     var item = document.createElement("LI")
     item.setAttribute("onclick", "javascript: openThisMenu(this)")
     item.setAttribute("id", this.id)
+    item.setAttribute("data-menu", this.menuKey)
     var img = this.createIMG(this.imgSrc)
     var value = this.createValue(this.value)
     
@@ -683,7 +684,7 @@ class ShowContent extends Content {
         input.setAttribute("id", "searchMapping")
         input.setAttribute("placeholder", "{{.button.search}}")
         input.className = "search"
-        input.setAttribute("onchange", 'javascript: searchInMapping()')
+        input.setAttribute("oninput", 'javascript: searchInMapping()')
         interaction.appendChild(input)
         break;
 
@@ -824,12 +825,157 @@ class ShowContent extends Content {
   
 }
 
+var SHELL_LAYOUT_READY:boolean = false
+
+function setLayoutMenuState(open:boolean) {
+  if (document.body == null) {
+    return
+  }
+
+  if (open == true) {
+    document.body.classList.add("menu-open")
+  } else {
+    document.body.classList.remove("menu-open")
+  }
+}
+
+function toggleLayoutMenu() {
+  if (document.body == null) {
+    return
+  }
+
+  var isOpen:boolean = document.body.classList.contains("menu-open")
+  setLayoutMenuState(!isOpen)
+}
+
+function closeLayoutMenuIfMobile() {
+  if (window.innerWidth <= 900) {
+    setLayoutMenuState(false)
+  }
+}
+
+function setActiveMenu(menuID:string) {
+
+  ACTIVE_MENU_ID = menuID.toString()
+  var menu = document.getElementById("main-menu")
+  if (menu == null) {
+    return
+  }
+
+  var items = menu.getElementsByTagName("LI")
+  for (var i = 0; i < items.length; i++) {
+    items[i].classList.remove("menu-active")
+  }
+
+  var activeItem = document.getElementById(ACTIVE_MENU_ID)
+  if (activeItem != null) {
+    activeItem.classList.add("menu-active")
+  }
+}
+
+function renderStatusCards() {
+  var wrapper = document.getElementById("status-cards")
+  if (wrapper == null || SERVER.hasOwnProperty("clientInfo") == false) {
+    return
+  }
+
+  var info = SERVER["clientInfo"]
+  var errors:number = parseInt(info["errors"], 10)
+  var warnings:number = parseInt(info["warnings"], 10)
+  var cards:any[] = [
+    {label: "Streams", value: info["streams"], tone: "ok"},
+    {label: "EPG Source", value: info["epgSource"], tone: "neutral"},
+    {label: "XEPG Channels", value: info["xepg"], tone: "ok"},
+    {label: "Errors", value: info["errors"], tone: errors > 0 ? "error" : "ok"},
+    {label: "Warnings", value: info["warnings"], tone: warnings > 0 ? "warn" : "ok"},
+    {label: "DVR", value: info["DVR"], tone: "neutral"},
+  ]
+
+  wrapper.innerHTML = ""
+  cards.forEach(card => {
+
+    var box = document.createElement("DIV")
+    box.className = "status-card status-card-" + card.tone
+
+    var label = document.createElement("P")
+    label.className = "status-card-label"
+    label.innerText = card.label
+
+    var value = document.createElement("P")
+    value.className = "status-card-value"
+    if (card.value == undefined || card.value == "") {
+      value.innerText = "-"
+    } else {
+      value.innerText = card.value
+    }
+
+    box.appendChild(label)
+    box.appendChild(value)
+    wrapper.appendChild(box)
+  });
+
+}
+
+function initShellLayout() {
+
+  if (SHELL_LAYOUT_READY == true) {
+    return
+  }
+
+  var toggle = document.getElementById("menu-toggle")
+  if (toggle != null) {
+    toggle.onclick = function() {
+      toggleLayoutMenu()
+    }
+  }
+
+  var overlay = document.getElementById("layout-overlay")
+  if (overlay != null) {
+    overlay.onclick = function() {
+      setLayoutMenuState(false)
+    }
+  }
+
+  document.addEventListener("keydown", function(event) {
+
+    if (event.key == "Escape") {
+      setLayoutMenuState(false)
+      showElement("popup", false)
+      return
+    }
+
+    if (event.key == "/") {
+      var target = event.target as HTMLElement
+      var onInput = target.tagName == "INPUT" || target.tagName == "TEXTAREA" || target.tagName == "SELECT"
+
+      if (onInput == true) {
+        return
+      }
+
+      var search = document.getElementById("searchMapping")
+      if (search != null) {
+        event.preventDefault()
+        (search as HTMLInputElement).focus()
+      }
+    }
+
+  });
+
+  setConnectionState("idle")
+  SHELL_LAYOUT_READY = true
+}
+
 function PageReady() {
 
+  initShellLayout()
+
   var server:Server = new Server("getServerConfig")
   server.request(new Object())
 
   window.addEventListener("resize", function(){
+    if (window.innerWidth > 900) {
+      setLayoutMenuState(false)
+    }
     calculateWrapperHeight();
   }, true);
 
@@ -853,6 +999,7 @@ function createLayout() {
     }
   
   }
+  renderStatusCards()
 
   if (!document.getElementById("main-menu")) {
     return
@@ -889,13 +1036,32 @@ function createLayout() {
      
   }
 
+  if (ACTIVE_MENU_ID.length > 0 && document.getElementById(ACTIVE_MENU_ID)) {
+    setActiveMenu(ACTIVE_MENU_ID)
+  }
+
+  var content = document.getElementById("content")
+  var menu = document.getElementById("main-menu")
+  if (ACTIVE_MENU_ID.length == 0 && content != null && menu != null) {
+
+    if (content.innerHTML.replace(/\\s/g, "").length == 0) {
+      var firstItem = menu.getElementsByTagName("LI")[0]
+      if (firstItem != undefined) {
+        firstItem.click()
+      }
+    }
+
+  }
+
   return
 }
 
 function openThisMenu(element) {
   var id = element.id
   var content:ShowContent = new ShowContent(id)
+  setActiveMenu(id)
   content.show()
+  closeLayoutMenuIfMobile()
   calculateWrapperHeight()
 
   return