:boom: Introduce new UI based on svelte, and rewrite a lot of the node app and the NeoRuntime

1 files changed, 64 insertions, 0 deletions

diff --git a/src_frontend/Components/ModeList/ModeList.svelte b/src_frontend/Components/ModeList/ModeList.svelte
new file mode 100644
index 0000000..8bac3f9
--- /dev/null
+++ b/src_frontend/Components/ModeList/ModeList.svelte
@@ -0,0 +1,64 @@
+<script>
+    import { onMount } from "svelte";
+    import { fade } from 'svelte/transition';
+    import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
+    import Mode from "./Mode.svelte";
+    import NewModeDialog from "./NewModeDialog.svelte";
+    
+    import { openSocket, authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore.js";
+	authorizedSocketNeeded.set(true);
+
+    let userModes = [];
+    let remotes = [];
+
+    openSocket.on("modelist", (modes) => {
+        userModes = [];
+        remotes = [];
+        for (let i = 0; i < modes.length; i++) {
+            if (modes[i].substr(0, 4) === "user") {
+                userModes.push(modes[i].replace("user/", ""));
+            }
+            if (modes[i].substr(0, 6) === "remote") {
+                remotes.push(modes[i].replace("remote/", ""));
+            }
+        }
+    });
+    onMount(async() => {
+        openSocket.emit("modelist:get");
+    });
+</script>
+
+<style>
+    .wrapper {
+        padding-bottom: var(--theme-padding);
+    }
+    .modes > * {
+        margin-bottom: 10px;
+    }
+    .button_menu {
+        margin-top: 20px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
+
+<div class="wrapper">
+    <h1>Modes</h1>
+    <div class="modes">
+        {#each userModes as mode}
+            <div>
+                <Mode id={mode} />
+            </div>
+        {/each}
+    </div>
+
+    <div class="button_menu">
+        <NewModeDialog>
+            <svelte:fragment slot="trigger" let:open>
+                <FloatingButton on:click={open} faIcon="fas fa-plus" label="NEW" />  
+            </svelte:fragment>
+        </NewModeDialog>
+    </div>
+</div>
\ No newline at end of file