web-components/ccp/js/logterminalcontroller.js

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(){
      
  }
  
  get lines(){
    return this.#lines
  }
  
  render(){
    this.#rootdoc.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="container"></div>
    `
  }
  
  refresh(){
    BSS.apply(this.#terminal_bss, this.#rootdoc)
  }
  
  #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);