added terminal for viewing logs

ccp/js/logterminalcontroller.js

@@ -0,0 +1,75 @@
+class LogTerminal extends HTMLElement {
+  
+  #maxlines = 10;
+  #rootdoc = null;
+  #lines = []
+  
+  constructor(){
+    super()
+    this.#maxlines = this.getAttribute("maxlines") 
+    this.#rootdoc = this.attachShadow({ "mode" : "open"})  
+    this.render()
+  }
+
+  connectedCallback(){
+      
+  }
+  
+  render(){
+    this.innerHTML = `
+      <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+      <style>
+        .terminal-container{
+          overflow: hidden;
+        }
+        .terminal{
+          background-color: black;
+          max-height: 10rem;
+          height: 10rem;
+          min-height:10rem;
+          padding: 5px;
+          overflow:auto;
+        }
+        
+        .terminal > .line {
+          font-family: 'VT323', monospace;
+          color: #88ff00;
+          text-shadow: 1px 1px 1px rgba(0, 200, 0, .6), 0 0 .5em rgba(0, 200, 0, .6)
+        }
+        
+        .terminal > .line.error {
+          color: #ff3300;
+          text-shadow: 1px 1px 1px rgba(200, 0, 0, .6), 0 0 .5em rgba(200, 0, 0, .6)
+        }
+      </style>
+      <template id="TERMINAL_TEMPLATE">
+        <div name="terminal" class="container">
+          <div class="terminal" id="t">
+            <div class="line"></div>
+          </div>
+        </div>
+      </template> 
+      <div name="terminal" class="terminal"></div>
+    `
+  }
+  
+  refresh(){
+    BSS.apply(this.#terminal_bss)
+  }
+  
+  #terminal_bss = {
+    template : "#TERMINAL_TEMPLATE",
+    target : "div[name=terminal]",
+    in : ()=>this,
+    recurse : {
+      target : "div.line",
+      in: d=>d.#lines,
+      apply: (e,d,i)=>{
+        if(d.source === "stderr") e.classList.add("error");
+        e.innerHTML = `<span>${d.line}</span>`
+      }
+    }
+  }
+}
+
+window.customElements.define('d4s-ccp-logterminal', LogTerminal);