added sessions support

codeeditor-app/elements/code-editor-container/code-editor-container.ts

@@ -4,6 +4,7 @@ import { ResizeHandle } from "../resize-handle/resize-handle";
 import './code-editor-container.less';
 
 export class CodeEditorContainer extends BaseElement {
+    private codeEditor: CodeEditor | null = null;
     onInit(): void {
         var language = this.getAttribute("language");
         this.classList.add("flex-vert");
@@ -22,11 +23,15 @@ export class CodeEditorContainer extends BaseElement {
         this.appendChild(div);
     }
 
+    setInput(input: any) {
+        this.codeEditor?.setInput(input);
+    }
+
     createCodeEditor(language: string, expandDir: 'vertical' | 'horizontal') {
         var codeEditorContent = document.createElement("div");
         codeEditorContent.classList.add("code-editor-content");
-        var codeEditor = <CodeEditor>document.createElement(language + "-code-editor");
-        codeEditorContent.appendChild(codeEditor);
+        this.codeEditor = <CodeEditor>document.createElement(language + "-code-editor");
+        codeEditorContent.appendChild(this.codeEditor);
 
         var resizeHandle = <ResizeHandle>document.createElement("resize-handle");
         resizeHandle.setAttribute("dir", expandDir);

codeeditor-app/elements/code-editor/code-editor.ts

@@ -3,11 +3,14 @@ import './code-editor.less';
 import * as monaco from 'monaco-editor';
 import { OutputFrame } from "../output-frame/output-frame";
 import { debounceManager } from "../../../shared/ensure-debounce";
+import * as sessionApi from '../../../shared/session-api';
+import { isSessionPage } from "../../../shared/page";
 
 export class CodeEditor extends BaseElement {
 
     public input: string = "";
     public language: string = "";
+    public editor!: monaco.editor.IStandaloneCodeEditor;
 
     onInit(): void {
 
@@ -18,11 +21,12 @@ export class CodeEditor extends BaseElement {
 
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
-        var editor = monaco.editor.create(this, {
-            value: this.input,
+        this.editor = monaco.editor.create(this, {
+            value: isSessionPage() ? "" : this.input,
             language: this.language,
             automaticLayout: true,
             contextmenu: false,
+            readOnly: isSessionPage(),
             minimap: {
                 enabled: false
             },
@@ -31,19 +35,30 @@ export class CodeEditor extends BaseElement {
         });
 
         var debounce = debounceManager(1000);
-        editor.onDidChangeModelContent((e) => {
-            this.input = editor.getValue();
-            debounce.ensureDebounce(() => {
-                this.outputFrame.setContent(this.language, this.input);
-            });
+        this.editor.onDidChangeModelContent((e) => {
+            if (!isSessionPage()) {
+                this.input = this.editor.getValue();
+                debounce.ensureDebounce(() => {
+                    sessionApi.setSessionData(this.language, this.input);
+                    this.outputFrame.setContent(this.language, this.input);
+                });
+            }
         });
 
         this.waitFor(this.outputFrame, () => {
-            this.outputFrame.setContent(this.language, this.input);
+            this.outputFrame.setContent(this.language, isSessionPage() ? "" : this.input);
         });
 
     }
 
+    setInput(input: any) {
+        if (this.input !== input) {
+            this.input = input;
+            this.editor.setValue(input);
+            this.outputFrame.setContent(this.language, this.input);
+        }
+    }
+
     setInitInput(): string {
         return "";
     }

codeeditor-app/elements/loading-spinner/loading-spinner.less

@@ -0,0 +1,176 @@
+loading-spinner {
+    display: block;
+    position: relative;
+    margin: 0 auto;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    opacity: 0.3;
+}
+
+.infinity-1 {
+    width:90px;
+    height:14px;
+    background: 
+      radial-gradient(circle 7px at bottom, #fff 92%,#0000 ) 0 0,
+      radial-gradient(circle 7px at top   , #fff 92%,#0000 ) 0 100%;
+    background-size:calc(100%/4) 50%;
+    background-repeat:repeat-x;
+    animation:i1 1s infinite;
+  }
+  @keyframes i1 {
+      80%,100% {background-position: calc(100%/3) 0,calc(100%/-3) 100%}
+  }
+  
+  .infinity-2 {
+    width:90px;
+    height:14px;
+    background: 
+      conic-gradient(from 135deg at top   ,#fff 90deg,#0000 0) 0 0,
+      conic-gradient(from -45deg at bottom,#fff 90deg,#0000 0) 0 100%;
+    background-size:calc(100%/4) 50%;
+    background-repeat:repeat-x;
+    animation:i2 1s infinite;
+  }
+  @keyframes i2 {
+      80%,100% {background-position: calc(100%/3) 0,calc(100%/-3) 100%}
+  }
+  
+  .infinity-3 {
+    width:90px;
+    height:14px;
+    background: 
+      radial-gradient(circle 7px at bottom, #fff 92%,#0000 ) calc(100%/2) 0,
+      radial-gradient(circle 7px at top   , #fff 92%,#0000 ) calc(100%/2) 100%,
+      conic-gradient(from 135deg at top   ,#fff 90deg,#0000 0) 0 0,
+      conic-gradient(from -45deg at bottom,#fff 90deg,#0000 0) 0 100%;
+    background-size:calc(100%/2) 50%;
+    background-repeat:repeat-x;
+    animation:i3 3s infinite;
+  }
+  @keyframes i3 {
+      0%  {background-position: calc(100%/2) 0,calc(100%/2) 100%,0 0, 0 100%}
+      20%,
+      30% {background-position: calc(3*100%/4) 0,calc(100%/4) 100%,calc(100%/4) 0, calc(100%/-4) 100%}
+      45%,
+      55% {background-position: 100% 0,0 100%,calc(100%/2) 0, calc(100%/-2) 100%}
+      70%,
+      80% {background-position: calc(5*100%/4) 0,calc(100%/-4) 100%,calc(3*100%/4) 0, calc(3*100%/-4) 100%}
+      100%{background-position: calc(3*100%/2) 0,calc(100%/-2) 100%,100% 0, -100% 100%}
+  }
+  
+  .infinity-4 {
+    width:90px;
+    height:14px;
+    background: 
+      radial-gradient(circle closest-side, #fff 92%,#0000 ) calc(100%/-4) 0,
+      radial-gradient(circle closest-side, #fff 92%,#0000 ) calc(100%/4)  0;
+    background-size:calc(100%/2) 100%;
+    animation:i4 1.5s infinite;
+  }
+  @keyframes i4 {
+      0%   {background-position: calc(100%/-4) 0    ,calc(100%/4) 0}
+      50%  {background-position: calc(100%/-4) -14px,calc(100%/4) 14px}
+      100% {background-position: calc(100%/4)  -14px,calc(3*100%/4) 14px}
+  }
+  
+  .infinity-5 {
+    width:60px;
+    aspect-ratio:1;
+    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
+    background: 
+      var(--g),
+      var(--g) 10px 10px,
+      var(--g) 20px 20px;
+    background-size: 50% 50%;
+    animation:i5 1s infinite;
+  }
+  @keyframes i5 {
+      90%,100%  {background-position: -30px 30px,-20px 40px,-10px 50px} 
+  }
+  
+  .infinity-6 {
+    width:60px;
+    aspect-ratio:1;
+    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
+    background: var(--g), var(--g), var(--g);
+    background-size: 50% 50%;
+    animation:i6 1s infinite;
+  }
+  @keyframes i6 {
+     0%   {background-position:0    0   ,10px 10px,20px 20px} 
+     50%  {background-position:0    20px,10px 10px,20px 0   } 
+     100% {background-position:20px 20px,10px 10px,0    0   } 
+  }
+  
+  .infinity-7 {
+    width:60px;
+    aspect-ratio:1;
+    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
+    background: var(--g), var(--g), var(--g);
+    background-size: 50% 50%;
+    animation:i7 1s infinite;
+  }
+  @keyframes i7 {
+     0%   {background-position:0     0, 10px 10px, 20px 20px}
+     33%  {background-position:-30px 0, 10px 10px, 20px 20px}
+     66%  {background-position:-30px 0,-20px 10px, 20px 20px}
+     100% {background-position:-30px 0,-20px 10px,-10px 20px}
+  }
+  
+  .infinity-8 {
+    width:60px;
+    aspect-ratio:1;
+    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
+    background: var(--g), var(--g), var(--g);
+    background-size: 50% 50%;
+    animation:i8 1s infinite;
+  }
+  @keyframes i8 {
+     0%   {background-position:0     0, 10px 10px, 20px 20px}
+     33%  {background-position:-30px 0, 10px 10px, 20px 20px}
+     66%  {background-position:-30px 0, 10px 40px, 20px 20px}
+     100% {background-position:-30px 0, 10px 40px, 50px 20px}
+  }
+  
+  .infinity-9 {
+    width:60px;
+    aspect-ratio:1;
+    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
+    background: var(--g), var(--g), var(--g);
+    background-size: 50% 50%;
+    animation:i9 1s infinite;
+  }
+  @keyframes i9 {
+     0%   {background-position:0     0, 10px 10px, 20px 20px}
+     33%  {background-position:10px  10px}
+     66%  {background-position:0    20px,10px 10px,20px 0   }
+     100% {background-position:0     0, 10px 10px, 20px 20px}
+  }
+  
+  .infinity-10 {
+    width:60px;
+    display:flex;
+    align-items:flex-start;
+    aspect-ratio:1;
+  }
+  .infinity-10:before,
+  .infinity-10:after {
+    content:"";
+    flex:1;
+    aspect-ratio:1;
+    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
+    background: var(--g), var(--g), var(--g);
+    filter:drop-shadow(30px 30px 0 #fff);
+    animation:i10 1s infinite;
+  }
+  .infinity-10:after {
+    transform:scaleX(-1);
+  }
+  @keyframes i10 {
+     0%   {background-position:0     0, 10px 10px, 20px 20px}
+     33%  {background-position:10px  10px}
+     66%  {background-position:0    20px,10px 10px,20px 0   }
+     100% {background-position:0     0, 10px 10px, 20px 20px}
+  }
+  

codeeditor-app/elements/loading-spinner/loading-spinner.ts

@@ -0,0 +1,8 @@
+import { BaseElement } from '../../../shared/_base';
+import './loading-spinner.less';
+
+export class LoadingSpinner extends BaseElement {
+    onInit(): void {
+        this.classList.add("infinity-5");
+    }
+}

codeeditor-app/elements/resize-handle/resize-handle.less

@@ -34,6 +34,13 @@ resize-handle[dir="vertical"][place='top'] {
     bottom: auto;
 }
 
+resize-handle[dir="horizontal"][place='right'] {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: auto;
+}
+
 #fixed-resize-overlay {
     position: fixed;
     left: 0;

codeeditor-app/elements/session-list-item/session-list-item.less

@@ -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;
+}

codeeditor-app/elements/session-list-item/session-list-item.ts

@@ -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();
+        }
+    }
+}

codeeditor-app/elements/session-list/session-list.ts

@@ -0,0 +1,49 @@
+import { BaseElement } from '../../../shared/_base';
+import './session-list.less';
+import * as sessionApi from '../../../shared/session-api';
+import { isSessionPage } from '../../../shared/page';
+
+export class SessionList extends BaseElement {
+    onInit(): void {
+
+        if (isSessionPage()) {
+            var loadingSpinner = document.createElement("loading-spinner");
+            this.appendChild(loadingSpinner);
+
+            this.setUpdate();
+
+            setInterval(() => {
+            this.setUpdate();
+            }, 5000);
+        }
+    }
+
+    setUpdate() {
+
+        sessionApi.getSessions((sessions) => {
+            var loadingSpinner = this.getElementsByTagName("loading-spinner")[0];
+
+            console.log(loadingSpinner);
+
+            if (loadingSpinner) {
+                this.removeChild(loadingSpinner);
+            }
+
+            for (let session of sessions) {
+                var exists = document.querySelector("session-list-item[sessionId='" + session.id + "']");
+
+                if (!exists) {
+                    var ele = document.createElement("session-list-item");
+                    ele.setAttribute("sessionId", session.id);
+                    ele.setAttribute("numberOfChanges", session.numberOfChanges);
+
+                    this.appendChild(ele);
+                }
+                else {
+                    exists.setAttribute("numberOfChanges", session.numberOfChanges);
+                    exists.getElementsByClassName("session-list-item-number-of-changes")[0].innerHTML = session.numberOfChanges;
+                }
+            }
+        });
+    }
+}