web-components/ccp/js/logterminalcontroller.js

121 lines
2.8 KiB
JavaScript
Raw Normal View History

2023-06-23 13:13:00 +02:00
class LogTerminal extends HTMLElement {
#maxlines = 10;
#maxstoredlines = 100;
2023-06-23 13:13:00 +02:00
#rootdoc = null;
#lines = [];
#index = null;
2023-06-23 13:13:00 +02:00
static get observedAttributes() { return ['index']; }
2023-06-23 13:13:00 +02:00
constructor(){
super()
this.#maxlines = this.getAttribute("maxlines")
this.#rootdoc = this.attachShadow({ "mode" : "open"})
this.render()
}
connectedCallback(){
this.reloadLines()
this.refresh()
2023-06-23 13:13:00 +02:00
}
attributeChangedCallback(name, oldValue, newValue) {
if(name === "index"){
this.#index = newValue
this.reloadLines()
}
}
get lines(){
return this.#lines
}
addLines(lines){
this.#lines = this.#lines.concat(lines)
this.refresh()
this.storeLines()
}
reloadLines(){
if(this.#index == null) return;
if(sessionStorage.getItem("logs-" + this.#index)){
this.#lines = JSON.parse(sessionStorage.getItem("logs-" + this.#index))
}else{
this.#lines = []
}
}
storeLines(){
if(this.#lines.length > this.#maxstoredlines){
this.#lines.splice(0, this.#lines.length - this.#maxstoredlines)
}
sessionStorage.setItem("logs-" + this.#index, JSON.stringify(this.#lines))
}
2023-06-23 13:13:00 +02:00
render(){
2023-06-23 14:15:08 +02:00
this.#rootdoc.innerHTML = `
2023-06-23 13:13:00 +02:00
<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;
2023-06-27 09:55:17 +02:00
font-size: x-small;
2023-06-26 12:08:47 +02:00
line-height: 0.9rem;
2023-06-23 13:13:00 +02:00
}
.terminal > .line {
font-family: 'VT323', monospace;
color: #88ff00;
}
.terminal > .line.error {
color: #ff3300;
}
2023-06-26 11:22:48 +02:00
2023-06-26 12:08:47 +02:00
.terminal > .line.infrastructure {
2023-06-27 09:55:17 +02:00
color: rgba(255,255,255,0.8);
2023-06-26 11:22:48 +02:00
}
2023-06-23 13:13:00 +02:00
</style>
<template id="TERMINAL_TEMPLATE">
<div name="terminal" class="container">
<div class="terminal" id="t">
<div class="line"></div>
</div>
</div>
</template>
2023-06-23 14:09:45 +02:00
<div name="terminal" class="container"></div>
2023-06-23 13:13:00 +02:00
`
}
refresh(){
2023-06-23 14:12:02 +02:00
BSS.apply(this.#terminal_bss, this.#rootdoc)
const lt = this.#rootdoc.querySelector("div.terminal")
lt.scrollTop = lt.scrollHeight;
2023-06-23 13:13:00 +02:00
}
#terminal_bss = {
template : "#TERMINAL_TEMPLATE",
target : "div[name=terminal]",
in : ()=>this,
recurse : {
target : "div.line",
in: (e,d)=>d.lines,
2023-06-23 13:13:00 +02:00
apply: (e,d,i)=>{
if(d.source === "stderr") e.classList.add("error");
2023-06-26 11:22:48 +02:00
if(d.source === "infrastructure") e.classList.add("infrastructure");
2023-06-23 13:13:00 +02:00
e.innerHTML = `<span>${d.line}</span>`
}
}
}
}
window.customElements.define('d4s-ccp-logterminal', LogTerminal);