From 87c90757721a4a313b3a78e97b1b6d0e6f03d1ab Mon Sep 17 00:00:00 2001
From: Pentamine <sasaovcaric@gmail.com>
Date: Fri, 1 Mar 2024 02:45:53 +0100
Subject: [PATCH] made console work (i hope i am unable to test)

---
 apps/console/package.json   |  3 ++-
 apps/console/src/App.svelte | 52 ++++++++++++++++++++++++++++++-------
 package-lock.json           | 23 +++++++++++++++-
 3 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/apps/console/package.json b/apps/console/package.json
index 9c77f96..f33dd47 100644
--- a/apps/console/package.json
+++ b/apps/console/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "@encedeus/js-api": "^0.0.101",
     "@repo/ui": "*",
-    "apexcharts": "^3.45.2"
+    "apexcharts": "^3.45.2",
+    "ws": "^8.16.0"
   },
   "devDependencies": {
     "@repo/tailwind-config": "*",
diff --git a/apps/console/src/App.svelte b/apps/console/src/App.svelte
index 1df8882..469fe24 100644
--- a/apps/console/src/App.svelte
+++ b/apps/console/src/App.svelte
@@ -3,6 +3,9 @@
     import ApexCharts from "apexcharts";
     import {onMount} from "svelte";
     import {api} from "./lib/services/api";
+    import WebSocket from 'ws';
+    import {WebSocket} from "vite";
+    import RawData = WebSocket.RawData;
 
     const urlParams = new URLSearchParams(window.location.search);
     const serverId = urlParams.get("serverId");
@@ -153,32 +156,60 @@
         const resp = await api.serversService.startServer(serverId!);
 
         if (resp.error) {
-            connectionError = resp.error?.message
-            return
+            connectionError = resp.error?.message;
+            return;
         }
-        connectionError = ""
+        connectionError = "";
     }
 
     async function onClickRestart() {
         const resp = await api.serversService.restartServer(serverId!);
 
         if (resp.error) {
-            connectionError = resp.error?.message
-            return
+            connectionError = resp.error?.message;
+            return;
         }
-        connectionError = ""
+        connectionError = "";
     }
 
     async function onClickStop() {
         const resp = await api.serversService.stopServer(serverId!);
 
         if (resp.error) {
-            connectionError = resp.error?.message
-            return
+            connectionError = resp.error?.message;
+            return;
         }
-        connectionError = ""
+        connectionError = "";
     }
 
+
+    let terminal = "";
+    let command = "";
+
+    const ws = new WebSocket(`ws://servers/${serverId}/console`, {
+        perMessageDeflate: false
+    });
+
+    ws.on('error', console.error);
+
+    ws.on('open', function open() {console.log("WebSocket open");});
+
+    ws.on('message', function message(data: RawData) {
+        const newLine = data.toString()
+        terminal += `${newLine}\n`
+    });
+
+    function handleSendCommand(event: KeyboardEvent) {
+        if (event.key != "Enter") {
+            return;
+        }
+
+        const message = JSON.stringify({cmd: command});
+
+        ws.send(message);
+    }
+
+
 </script>
 
 <main class="p-10 flex flex-col">
@@ -240,10 +271,11 @@
         </section>
         <section class="w-full h-full">
             <div class="bg-indigo-950 rounded-lg rounded-b-none h-[48rem] py-4 px-6 text-white overflow-y-auto break-words overflow-x-hidden">
+                {terminal}
             </div>
             <div class="bg-indigo-900 h-11 rounded-b-lg p-2.5 px-5 text-white flex gap-1.5 flex-shrink">
                 <span class="font-medium text-md">$</span>
-                <input type="text" placeholder="Type your command here"
+                <input on:keydown={handleSendCommand} bind:value={command} type="text" placeholder="Type your command here"
                        class="outline-indigo-500 opacity-85 focus:outline rounded-sm p-1 outline-2 bg-indigo-900 inline w-full">
             </div>
         </section>
diff --git a/package-lock.json b/package-lock.json
index 0f6f924..3a44e94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,8 @@
       "dependencies": {
         "@encedeus/js-api": "^0.0.101",
         "@repo/ui": "*",
-        "apexcharts": "^3.45.2"
+        "apexcharts": "^3.45.2",
+        "ws": "^8.16.0"
       },
       "devDependencies": {
         "@repo/tailwind-config": "*",
@@ -7205,6 +7206,26 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/ws": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",