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/routes/EditorRoute.svelte  |   9 +++
 src_frontend/routes/LoginRoute.svelte   | 106 ++++++++++++++++++++++++++
 src_frontend/routes/MainRoute.svelte    |  61 +++++++++++++++
 src_frontend/routes/UnknownRoute.svelte |  21 ++++++
 src_frontend/routes/WidgetRoute.svelte  | 130 ++++++++++++++++++++++++++++++++
 5 files changed, 327 insertions(+)
 create mode 100644 src_frontend/routes/EditorRoute.svelte
 create mode 100644 src_frontend/routes/LoginRoute.svelte
 create mode 100644 src_frontend/routes/MainRoute.svelte
 create mode 100644 src_frontend/routes/UnknownRoute.svelte
 create mode 100644 src_frontend/routes/WidgetRoute.svelte

(limited to 'src_frontend/routes')

diff --git a/src_frontend/routes/EditorRoute.svelte b/src_frontend/routes/EditorRoute.svelte
new file mode 100644
index 0000000..283f8db
--- /dev/null
+++ b/src_frontend/routes/EditorRoute.svelte
@@ -0,0 +1,9 @@
+<script>
+    import Editor from "../Components/Editor/Editor.svelte";
+    import NotifsWrapper from "../Components/Notifs/NotifsWrapper.svelte";
+	export let params;
+    let modeId = params.wild;
+</script>
+
+<NotifsWrapper position="top-right" />
+<Editor modeId={modeId} />
\ No newline at end of file
diff --git a/src_frontend/routes/LoginRoute.svelte b/src_frontend/routes/LoginRoute.svelte
new file mode 100644
index 0000000..1f9ef45
--- /dev/null
+++ b/src_frontend/routes/LoginRoute.svelte
@@ -0,0 +1,106 @@
+<script>
+    import Button from "../ComponentLib/Button/Button.svelte";
+	import { authenticate } from "../stores/socketStore";
+
+    let isLoading = false;
+
+    let username;
+    let password;
+
+    let errorMessage = null;
+
+    function tryLogin() {
+        isLoading = true;
+        authenticate(username, password, (success) => {
+            if (!success) {
+                errorMessage = "Username/password incorrect";
+                setTimeout(() => {
+                    errorMessage = null;
+                }, 5000);
+            }
+            isLoading = false;
+        });
+    }
+</script>
+
+<style>
+    main {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		background-color: #3c3b3b;
+		text-align: center;
+    }
+    .login {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        background-color: white;
+        border-radius: 15px;
+        max-width: 200px;
+        box-sizing: border-box;
+    }
+    img {
+        margin-bottom: -18px;
+        margin-top: -5px;
+    }
+    form {
+        padding: 15px;
+        padding-top: 0;
+        text-align: left;
+    }
+    h2 {
+        margin: 0;
+    }
+    input {
+        width: 100%;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        box-sizing: border-box;
+        border: none;
+        padding: 10px 15px;
+        background: var(--grey-200);
+        border-radius: 5px;
+    }
+    label {
+        font-size: 12px;
+        color: var(--grey-600);
+        margin-bottom: 5px;
+    }
+    .error-message {
+        color: var(--red-500);
+        font-size: 12px;
+        margin: 15px;
+        margin-top: 0;
+    }
+</style>
+
+<main>
+    <div class="login">
+        <img src="./assets/img/logo/Icon-192h.png" alt="">
+        <!-- <h2>Luxcena neo Login</h2> -->
+        <form on:submit|preventDefault={tryLogin}>
+            <label for="username">Username</label>
+            <input type="text" id="username" autocomplete="username" minlength="1" required bind:value={username} />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" autocomplete="current-password" minlength="1" required bind:value={password} />
+
+            <Button fullWidth=true>
+                {#if isLoading}
+                <i class="fas fa-spinner fa-pulse"></i>
+                {:else}
+                Login
+                {/if}
+            </Button>
+        </form>
+
+        {#if errorMessage}
+        <div class="error-message">
+        {errorMessage}
+        </div>
+        {/if}
+
+    </div>
+</main>
\ No newline at end of file
diff --git a/src_frontend/routes/MainRoute.svelte b/src_frontend/routes/MainRoute.svelte
new file mode 100644
index 0000000..30a689c
--- /dev/null
+++ b/src_frontend/routes/MainRoute.svelte
@@ -0,0 +1,61 @@
+<script>
+	import ControlComponents from "../Components/MainControls/ControlComponents.svelte";
+	import ModeList from "../Components/ModeList/ModeList.svelte";
+	import LEDConfig from "../Components/LEDConfig/LEDConfig.svelte";
+	import Settings from "../Components/Settings/Settings.svelte";
+	import NotImplemented from '../Components/NotImplemented.svelte';
+
+	import Phone from "../layout/Phone.svelte";
+	import Desktop from "../layout/Desktop.svelte";
+
+	export let params;
+	$: updateComponent(params);
+
+	let activeLayout = Phone;
+	let activeComponent = ControlComponents;
+
+	const mql = window.matchMedia('(max-width: 900px)');
+	try {
+		mql.addEventListener('change', () => { updateLayout(); });
+	} catch {
+		mql.addListener(() => { updateLayout(); });
+	}
+
+	function updateLayout() {
+		const mobileView = mql.matches;
+		if (mobileView) {
+			activeLayout = Phone;
+		} else {
+			activeLayout = Desktop;
+		}
+	}
+	function updateComponent(params) {
+		switch (params[0]) {
+			case "/":
+				if (mql.matches) {
+					activeComponent = ControlComponents
+				} else {
+					activeComponent = ModeList;
+				}
+				break;
+			case "/led_config":
+				activeComponent = LEDConfig;
+				break;
+			case "/modes":
+				activeComponent = ModeList;
+				break;
+			case "/settings":
+				activeComponent = Settings;
+				break;
+			default:
+				activeComponent = NotImplemented;
+				break;
+		}
+	}
+	
+	updateLayout();
+</script>
+
+<svelte:component this={activeLayout}>
+	<svelte:component this={activeComponent}/>
+</svelte:component>
diff --git a/src_frontend/routes/UnknownRoute.svelte b/src_frontend/routes/UnknownRoute.svelte
new file mode 100644
index 0000000..eb649dd
--- /dev/null
+++ b/src_frontend/routes/UnknownRoute.svelte
@@ -0,0 +1,21 @@
+<script>
+    export let params;
+</script>
+
+<style>
+	main {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		padding: 15px;
+		background-color: #3c3b3b;
+		text-align: center;
+		color: white;
+	}
+</style>
+
+<main>
+    <div>
+        Unknown path ({params.wild})...
+    </div>
+</main>
\ No newline at end of file
diff --git a/src_frontend/routes/WidgetRoute.svelte b/src_frontend/routes/WidgetRoute.svelte
new file mode 100644
index 0000000..a3bbbe7
--- /dev/null
+++ b/src_frontend/routes/WidgetRoute.svelte
@@ -0,0 +1,130 @@
+<script>
+    import { onMount } from "svelte";
+	import { openSocket } from "../stores/socketStore";
+
+    let instanceName = "-"
+    let brightness = 0;
+    let powerIsOn = false;
+
+    openSocket.on("name", (name) => instanceName = name);
+    openSocket.on("power", (power) => powerIsOn = power);
+    openSocket.on("brightness", (value) => brightness = value);
+    // openSocket.on("mode", (newMode) => activeMode = newMode);
+
+    function setBrightness() {
+        openSocket.emit("brightness:set", brightness);
+    }
+    function setPower() {
+        openSocket.emit("power:set", powerIsOn);
+    }
+
+    onMount(async () => {
+        openSocket.emit("name:get");
+        openSocket.emit("power:get");
+        openSocket.emit("brightness:get");
+    });
+</script>
+
+<style>
+    .wrapper {
+        background-color: #3c3b3b;
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-columns: 1fr 60px;
+        grid-template-rows: 80% 1fr;
+        grid-template-areas: 
+            "name power"
+            "brightness brightness"
+        ;
+        padding: 15px;
+        box-sizing: border-box;
+    }
+    .name {
+        color: white;
+        grid-area: name; 
+        font-weight: bold;
+        align-self: center;
+    }
+    .power {
+        grid-area: power;
+        align-self: center;
+    }
+    .brightness { grid-area: brightness; }
+    input[type=range] {
+        width: 100%;
+    }
+
+    /* The switch - the box around the slider */
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+    }
+
+    /* Hide default HTML checkbox */
+    .switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    /* The slider */
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: .4s;
+        transition: .4s;
+        border-radius: 34px;
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: 26px;
+        width: 26px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s;
+        border-radius: 50%;
+    }
+
+    input:checked + .slider {
+        background-color: #2196F3;
+    }
+
+    input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+    }
+
+    input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+    }
+    /* .slider.round { border-radius: 34px; }
+    .slider.round:before { border-radius: 50%; } */
+</style>
+
+<div class="wrapper">
+    <div class="name">
+        {instanceName}
+    </div>
+    <div class="power">
+        <label class="switch">
+            <input type="checkbox" bind:checked={powerIsOn} on:change={setPower}/>
+            <span class="slider round"></span>
+        </label>
+    </div>
+    <div class="brightness">
+        <input type="range" min=0 max=255 bind:value={brightness} on:change={setBrightness}/>
+    </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3