aboutsummaryrefslogtreecommitdiff
path: root/src_frontend/routes
diff options
context:
space:
mode:
Diffstat (limited to 'src_frontend/routes')
-rw-r--r--src_frontend/routes/EditorRoute.svelte9
-rw-r--r--src_frontend/routes/LoginRoute.svelte106
-rw-r--r--src_frontend/routes/MainRoute.svelte61
-rw-r--r--src_frontend/routes/UnknownRoute.svelte21
-rw-r--r--src_frontend/routes/WidgetRoute.svelte130
5 files changed, 327 insertions, 0 deletions
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
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-27 23:11:25 +0000