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/ModeList/Mode.svelte | 57 ++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src_frontend/Components/ModeList/Mode.svelte

(limited to 'src_frontend/Components/ModeList/Mode.svelte')

diff --git a/src_frontend/Components/ModeList/Mode.svelte b/src_frontend/Components/ModeList/Mode.svelte
new file mode 100644
index 0000000..67752c2
--- /dev/null
+++ b/src_frontend/Components/ModeList/Mode.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { push } from "svelte-spa-router";
+    import ConfirmActionDialog from "../Dialogs/ConfirmActionDialog.svelte";
+    import { authorizedSocket } from "../../stores/socketStore.js";
+    import { notif } from "../../stores/notifs";
+    export let id;
+
+    function deleteMode() {
+        authorizedSocket.emit("mode:delete", `user/${id}`, (res) => {
+            if (!res.success) {
+                notif({title: "Error", text: "Could not delete mode...", type: "danger"})
+                console.log(res);
+            }
+        });
+    }
+</script>
+
+<style>
+    .wrapper {
+        width: 100%;
+        padding: var(--theme-padding);
+        box-sizing: border-box;
+        border-radius: 15px;
+
+        display: flex;
+        align-items: center;
+    }
+    .right {
+        margin-left: auto;
+    }
+    button {
+        border: none;
+        background-color: white;
+        background-color: transparent;
+        border: none;
+        padding: 10px;
+        border-radius: 15px;
+    }
+    button:hover {
+        background-color: var(--grey-300);
+    }
+    button:active {
+        background-color: var(--grey-400);
+    }
+</style>
+
+<div class="wrapper drop-shadow">
+    {id}
+    <div class="right">
+        <ConfirmActionDialog title="Are you sure?" text="Are you sure you want to delete {id}" action={deleteMode}>
+            <svelte:fragment slot="trigger" let:open>
+                <button on:click={open}><i class="fas fa-trash"></i></button>
+            </svelte:fragment>
+        </ConfirmActionDialog>
+        <button on:click={() => {push(`/editor/${id}`)}}><i class="fas fa-edit"></i></button>
+    </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3