From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 src_frontend/Components/Editor/Output.svelte | 54 ++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src_frontend/Components/Editor/Output.svelte

(limited to 'src_frontend/Components/Editor/Output.svelte')

diff --git a/src_frontend/Components/Editor/Output.svelte b/src_frontend/Components/Editor/Output.svelte
new file mode 100644
index 0000000..dcd5995
--- /dev/null
+++ b/src_frontend/Components/Editor/Output.svelte
@@ -0,0 +1,54 @@
+<script>
+    import { authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore";
+    authorizedSocketNeeded.set(true);
+
+    let scrollBox;
+    let htmlCode = "";
+
+    function addData(data, classname) {
+        // let styles = "white-space:pre-wrap;margin:0;";
+        // let styles = "overflow-x:auto;";
+        let styles = "";
+        switch (classname) {
+            case "exit":
+                styles += "color: green";
+                break;
+            case"stderr":
+                styles += "color: red";
+                break;
+        }
+        htmlCode += `<span style="${styles}">${data}</span>`;
+        if (scrollBox != null) {
+            scrollBox.scrollTop = scrollBox.scrollHeight + 100;
+        }
+    }
+    authorizedSocket.on("editor:proc:exit", (code) => addData(`\nMode exited with ${code}\n\n`, "exit"));
+    authorizedSocket.on("editor:proc:stdout", (stdout) => addData(stdout, "stdout"));
+    authorizedSocket.on("editor:proc:stderr", (stderr) => addData(stderr, "stderr"));
+</script>
+
+<style>
+    div {
+        height: 100%;
+        width: 100%;
+    }
+    pre {
+        height: 100%;
+        width: calc(100vw - 30px);
+        overflow: auto;
+        padding: 15px;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    @media (min-width: 800px) {
+        pre {
+            width: calc(100vw - 360px);
+        }
+    }
+</style>
+
+<div>
+    <pre bind:this={scrollBox}>
+        {@html htmlCode}
+    </pre>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3


From be218575e9bd4e029d8cf228e30f1b8abe7c4908 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <14180120+JakobST1n@users.noreply.github.com>
Date: Mon, 11 Oct 2021 07:54:07 +0200
Subject: :lipstick: Clear output box when mode restarts

---
 src_frontend/Components/Editor/Output.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src_frontend/Components/Editor/Output.svelte')

diff --git a/src_frontend/Components/Editor/Output.svelte b/src_frontend/Components/Editor/Output.svelte
index dcd5995..9e4c953 100644
--- a/src_frontend/Components/Editor/Output.svelte
+++ b/src_frontend/Components/Editor/Output.svelte
@@ -22,6 +22,8 @@
             scrollBox.scrollTop = scrollBox.scrollHeight + 100;
         }
     }
+    
+    authorizedSocket.on("editor:proc:start", () => htmlCode = "");
     authorizedSocket.on("editor:proc:exit", (code) => addData(`\nMode exited with ${code}\n\n`, "exit"));
     authorizedSocket.on("editor:proc:stdout", (stdout) => addData(stdout, "stdout"));
     authorizedSocket.on("editor:proc:stderr", (stderr) => addData(stderr, "stderr"));
@@ -51,4 +53,4 @@
     <pre bind:this={scrollBox}>
         {@html htmlCode}
     </pre>
-</div>
\ No newline at end of file
+</div>
-- 
cgit v1.2.3