added sessions support

2023-05-12 09:44:36 +02:00
parent d3a0bd984e
commit e0c998cfac
13 changed files with 533 additions and 11 deletions
@@ -0,0 +1,33 @@
+session-list-item {
+    color: white;
+    padding: 10px;
+    display: block;
+    position: relative;
+    border-bottom: 1px solid grey;
+    cursor: pointer;
+}
+
+session-list-item.selected {
+    background-color: #1e1e1e;
+}
+
+.session-list-item-session-id::before {
+    content: "Session: ";
+}
+
+.session-list-item-session-id {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.session-list-item-number-of-changes {
+    font-size: 12px;
+}
+
+.session-list-item-number-of-changes::before {
+    content: "Number of changes: ";
+    position: relative;
+    z-index: 0;
+}
@@ -0,0 +1,108 @@
+import { BaseElement } from '../../../shared/_base';
+import { CodeEditorContainer } from '../code-editor-container/code-editor-container';
+import './session-list-item.less';
+import * as sessionApi from '../../../shared/session-api';
+
+export class SessionListItem extends BaseElement {
+    onInit(): void {
+        if (this.hasAttribute("sessionId")) {
+            var sessionIdEle = document.createElement("div");
+            sessionIdEle.classList.add("session-list-item-session-id");
+            sessionIdEle.innerHTML = this.getAttribute("sessionId")?.toString() ?? "";
+            this.appendChild(sessionIdEle);
+        }
+
+        if (this.hasAttribute("numberOfChanges")) {
+            var numberOfChangesEle = document.createElement("div");
+            numberOfChangesEle.classList.add("session-list-item-number-of-changes");
+            numberOfChangesEle.innerHTML = this.getAttribute("numberOfChanges")?.toString() ?? "";
+            this.appendChild(numberOfChangesEle);
+        }
+
+        this.addEventListener("click", (evt) => {
+            this.itemClicked();
+        });
+    }
+
+    private intervalHandle: number | null = null;
+    stopUpdate() {
+        this.classList.remove("selected");
+
+        if (this.intervalHandle) {
+            window.clearInterval(this.intervalHandle);
+            this.intervalHandle = null;
+        }
+    }
+
+    startUpdate() {
+        this.stopUpdate();
+
+        this.classList.add("selected");
+
+        this.intervalHandle = window.setInterval(this.updateInputs.bind(this), 1000);
+    }
+
+    updateInputs() {
+        var codeEditorHTMLContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='HTML']");
+        var codeEditorCSSContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='CSS']");
+        var codeEditorJavascriptContainer = <CodeEditorContainer>document.querySelector("code-editor-container[language='Javascript']");
+    
+        this.getSessionData((js, html, css) => {
+            codeEditorJavascriptContainer.setInput(js?.data ?? "");
+            codeEditorHTMLContainer.setInput(html?.data ?? "");
+            codeEditorCSSContainer.setInput(css?.data ?? "");
+        });
+
+    }
+
+    getSessionData(onGet: (javascript: any, html: any, css: any) => void) {
+        var lastJavascript: any | null = null;
+        var lastHtml: any | null = null;
+        var lastCSS: any | null = null;
+
+        sessionApi.getSessionData(this.getAttribute("sessionId")?.toString()?? "", (data) => {
+            for (var i = data.length - 1; i >= 0; i--) {
+                var dataPoint = data[i];
+                 if (!lastJavascript && dataPoint.type == 0) {
+                    lastJavascript = dataPoint;
+                 }
+                 else if (!lastHtml && dataPoint.type == 1) {
+                    lastHtml = dataPoint;
+                 }
+                 else if (!lastCSS && dataPoint.type == 2) {
+                    lastCSS = dataPoint;
+                 }
+            }
+
+            onGet(lastJavascript, lastHtml, lastCSS);
+        });
+    }
+
+    itemClicked() {
+        if (!this.intervalHandle) {
+            var containers = <HTMLElement>document.getElementsByClassName("code-editor-containers")[0];
+            var outputframe = <HTMLElement>document.getElementsByClassName("output-frame-container")[0];
+
+            containers.style.display = "block";
+            outputframe.style.display = "block";
+
+            var children = this.parentElement?.children;
+
+            if (children) {
+                for (let i = 0; i < children.length; i++) {
+                    const child = <SessionListItem>children[i];
+                    if (child != this) {
+                        child.stopUpdate();
+                    }
+                    else {
+                        child.startUpdate();
+                    }
+                }
+            }
+        }
+        else {
+            console.log("WOULD STOP!");
+            this.stopUpdate();
+        }
+    }
+}