From c96c98c38bdfa8aa176534974e37b064dc0d54a2 Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Fri, 23 Jun 2023 16:40:02 +0200
Subject: [PATCH] fixed several issues with rendering and synch

---
 ccp/js/executionhistorycontroller.js | 11 +++++------
 ccp/js/logterminalcontroller.js      | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/ccp/js/executionhistorycontroller.js b/ccp/js/executionhistorycontroller.js
index 8acab5b..c1d3e10 100644
--- a/ccp/js/executionhistorycontroller.js
+++ b/ccp/js/executionhistorycontroller.js
@@ -114,8 +114,7 @@ class CCPExecutionHistory extends HTMLElement {
                       <span style="text-overflow:ellipsis" class="badge badge-light text-info border border-info" name="infrastructure" alt="Infrastructure" title="Infrastructure"></span>
                       <span class="badge" name="runtime" alt="Runtime" title="Runtime"></span>
                     </div>
-                    <div style="margin:5px 0 5px 0">
-                      <d4s-ccp-logterminal maxstoredlines="100" maxlines="10"></d4s-ccp-logterminal>
+                    <div name="logterminalcontainer" style="margin:5px 0 5px 0">
                     </div>
                     <ul>
                       <li></li>
@@ -312,7 +311,7 @@ class CCPExecutionHistory extends HTMLElement {
   appendLogs(data){
     if(!data.length) return;
     const exid = data[0]["attrs"]["execution"]
-    const lt = this.#rootdoc.querySelector(`d4s-ccp-logterminal[index=${exid}]`)
+    const lt = this.#rootdoc.querySelector(`d4s-ccp-logterminal[index='${exid}']`)
     if(!lt){
       console.error("No terminal found for adding logs of " + exid)
     }else{
@@ -649,9 +648,9 @@ class CCPExecutionHistory extends HTMLElement {
                 }
               },
               {
-                target : "d4s-ccp-logterminal",
+                target : "div[name=logterminalcontainer]",
                 apply : (e,d)=>{
-                  e.setAttribute("index", d.id)
+                  e.innerHTML = `<d4s-ccp-logterminal index="${d.id}" maxstoredlines="100" maxlines="10"></d4s-ccp-logterminal>`
                 }
               },
               {
@@ -682,4 +681,4 @@ class CCPExecutionHistory extends HTMLElement {
     ]
   }
 }
-window.customElements.define('d4s-ccp-executionhistory', CCPExecutionHistory);
\ No newline at end of file
+window.customElements.define('d4s-ccp-executionhistory', CCPExecutionHistory);
diff --git a/ccp/js/logterminalcontroller.js b/ccp/js/logterminalcontroller.js
index 0c70c8b..6e1a2e9 100644
--- a/ccp/js/logterminalcontroller.js
+++ b/ccp/js/logterminalcontroller.js
@@ -6,19 +6,27 @@ class LogTerminal extends HTMLElement {
   #lines = [];
   #index = null;
   
+  static get observedAttributes() { return ['index']; }
+
   constructor(){
     super()
     this.#maxlines = this.getAttribute("maxlines") 
     this.#rootdoc = this.attachShadow({ "mode" : "open"})  
     this.render()
-    this.#index = this.getAttribute("index")
   }
 
   connectedCallback(){
       this.reloadLines()
       this.refresh()
   }
-  
+ 
+  attributeChangedCallback(name, oldValue, newValue) {
+    if(name === "index"){
+      this.#index = newValue
+      this.reloadLines()
+    }
+  }
+
   get lines(){
     return this.#lines
   }
@@ -30,8 +38,9 @@ class LogTerminal extends HTMLElement {
   }
   
   reloadLines(){
+    if(this.#index == null) return;
     if(sessionStorage.getItem("logs-" + this.#index)){
-      this.#lines = sessionStorage.getItem("logs-" + this.#index)
+      this.#lines = JSON.parse(sessionStorage.getItem("logs-" + this.#index))
     }else{
       this.#lines = []
     }
@@ -41,7 +50,7 @@ class LogTerminal extends HTMLElement {
     if(this.#lines.length > this.#maxstoredlines){
       this.#lines.splice(0, this.#lines.length - this.#maxstoredlines)
     }
-    sessionStorage.setItem("logs-" + this.#index, this.#lines)
+    sessionStorage.setItem("logs-" + this.#index, JSON.stringify(this.#lines))
   }
   
   render(){
@@ -103,4 +112,4 @@ class LogTerminal extends HTMLElement {
   }
 }
 
-window.customElements.define('d4s-ccp-logterminal', LogTerminal);
\ No newline at end of file
+window.customElements.define('d4s-ccp-logterminal', LogTerminal);