feat: io section with url navigation & full page reload

.changeset/happy-papayas-lick.md

@@ -0,0 +1,5 @@
+---
+"@nuster/ui": patch
+---
+
+feat: io page is now using url navigation instead of variable navigation

.changeset/wise-singers-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@nuster/ui": patch
+---
+
+feat: users can now trigger a full page reload in settings

packages/ui/src/lib/utils/i18n/translations/en.json

@@ -225,6 +225,7 @@
             "lead": "Power management",
             "reboot": "Restart",
             "shutdown": "Shutdown",
+            "reload": "Reload UI",
             "modal": {
                 "shutdown": {
                     "title": "Shutting down",

packages/ui/src/lib/utils/i18n/translations/fr.json

@@ -223,6 +223,7 @@
             "lead": "Gestion de l'alimentation",
             "reboot": "Redémarrer",
             "shutdown": "Éteindre",
+            "reload": "Recharger l'interface",
             "modal": {
                 "shutdown": {
                     "title": "Arrêt en cours",

packages/ui/src/routes/(connected)/+page.svelte

@@ -12,7 +12,7 @@
 	import { translateProfileName } from "$lib/utils/i18n/i18nprofile";
 	import SelectableButton from "$lib/components/buttons/SelectableButton.svelte";
 	import type { ActionData, PageData } from "./$types";
-	import Gate from "./io/Gate.svelte";
+	import Gate from "$lib/components/io/Gate.svelte";
 	import Toggle from "$lib/components/inputs/Toggle.svelte";
 	import Label from "$lib/components/Label.svelte";
 	import { page } from "$app/stores";

packages/ui/src/routes/(connected)/Cycle.svelte

@@ -2,7 +2,7 @@
 
     import Button from "$lib/components/buttons/Button.svelte";
     import Flex from "$lib/components/layout/flex.svelte";
-	import Gate from "./io/Gate.svelte";
+	import Gate from "$lib/components/io/Gate.svelte";
 	import CycleStep from "./CycleStep.svelte";
 
     import { parseDurationToString } from "$lib/utils/dateparser";

packages/ui/src/routes/(connected)/containers/[id]/+page.svelte

@@ -2,7 +2,7 @@
 	import type { IOGatesHydrated } from "@nuster/turbine/types/hydrated";
 
 	import Flex from "$lib/components/layout/flex.svelte";
-	import Gate from "../../io/Gate.svelte";
+	import Gate from "$lib/components/io/Gate.svelte";
 
 	import { ChevronDown, ChevronUp } from "@steeze-ui/heroicons";
 	import { Icon } from "@steeze-ui/svelte-icon";

packages/ui/src/routes/(connected)/io/+layout.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { page } from "$app/stores";
+	import Wrapper from "$lib/components/Wrapper.svelte";
+	import SelectableButton from "$lib/components/buttons/SelectableButton.svelte";
+	import Flex from "$lib/components/layout/flex.svelte";
+	import { ArrowLeftOnRectangle, ArrowRightOnRectangle } from "@steeze-ui/heroicons";
+	import { Icon } from "@steeze-ui/svelte-icon";
+	import { _ } from "svelte-i18n";
+</script>
+
+<Flex direction="row" gap={6}>
+	<div class="shrink-0 drop-shadow-xl">
+		<Wrapper>
+			<Flex direction="col" gap={2}>
+				<h1 class="leading-8">{$_(`gates.lead`)}</h1>
+				{#each ["in", "out"] as bus}
+					<SelectableButton selected={$page.params.bus == bus} on:click={() => goto(`/io/${bus}`)}>
+						<Flex gap={4} items="center">
+							<Icon src={$page.params.bus == "in" ? ArrowLeftOnRectangle: ArrowRightOnRectangle} class="h-4 w-4" />
+							<h2>{$_('gates.bus.' + bus)}</h2>
+						</Flex>
+					</SelectableButton>
+				{/each}
+			</Flex>
+		</Wrapper>
+	</div>
+
+	<div class="grow drop-shadow-xl">
+		<Wrapper>
+            <h2 class="leading-10">{$_('gates.bus.' + $page.params.bus)}</h2>
+			<Flex direction="col" gap={1}>
+                <slot />
+			</Flex>
+		</Wrapper>
+	</div>
+</Flex>

packages/ui/src/routes/(connected)/io/+page.server.ts

@@ -1,26 +1,7 @@
-import { env } from '$env/dynamic/private';
-import { fail } from '@sveltejs/kit';
+import { redirect } from "@sveltejs/kit"
 
-export const actions = {
+export const load = () => {
 
-    editGateValue: async ({ request, fetch }) => {
+    return redirect(302, "/io/in");
 
-        // TODO: This could be replaced by an async send via websocket
-
-        const form = await request.formData();
-
-        const gate = form.get('gate')?.toString();
-        const value = form.get('value')?.toString();
-
-        if(gate === undefined || value === undefined)
-            return fail(400, { editGateValue: { error: "Invalid gate update parameters" }});
-
-        const gateUpdateRequest = await fetch(`http://${env.TURBINE_ADDRESS}/v1/io/${gate.replace("#", "_")}/${value}`, { method: "POST" });
-
-        if(gateUpdateRequest.status !== 200 || !gateUpdateRequest.ok)
-            return fail(500, { editGateValue: { error: "Failed to update gate value" }});
-
-        return { editGateValue: { success: true }};
-
-    }
 }

packages/ui/src/routes/(connected)/io/[bus]/+page.server.ts

@@ -0,0 +1,26 @@
+import { env } from '$env/dynamic/private';
+import { fail } from '@sveltejs/kit';
+
+export const actions = {
+
+    editGateValue: async ({ request, fetch }) => {
+
+        // TODO: This could be replaced by an async send via websocket
+
+        const form = await request.formData();
+
+        const gate = form.get('gate')?.toString();
+        const value = form.get('value')?.toString();
+
+        if(gate === undefined || value === undefined)
+            return fail(400, { editGateValue: { error: "Invalid gate update parameters" }});
+
+        const gateUpdateRequest = await fetch(`http://${env.TURBINE_ADDRESS}/v1/io/${gate.replace("#", "_")}/${value}`, { method: "POST" });
+
+        if(gateUpdateRequest.status !== 200 || !gateUpdateRequest.ok)
+            return fail(500, { editGateValue: { error: "Failed to update gate value" }});
+
+        return { editGateValue: { success: true }};
+
+    }
+}

packages/ui/src/routes/(connected)/io/[bus]/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Gate from "$lib/components/io/Gate.svelte";
+	import { realtime } from "$lib/utils/stores/nuster";
+	import { page } from "$app/stores";
+</script>
+
+{#each $realtime.io.filter(i => i.bus === $page.params.bus) as iog}
+	<Gate bind:io={iog} editable={iog.bus === "out"}/>
+{/each}

packages/ui/src/routes/(connected)/settings/+page.svelte

@@ -131,7 +131,12 @@
 
         <h2 class="mt-8">{$_('settings.power.lead')}</h2>
 
-        <Grid cols={2} gap={4}>
+        <Grid cols={3} gap={4}>
+            <Button color="hover:bg-indigo-500" ringColor="ring-indigo-500" on:click={() => window.location.reload()}>
+                <Icon src={ArrowPath} class="h-4 w-4 inline mr-2 mb-1" />
+                {$_('settings.power.reload')}
+            </Button>
+
             <form action="?/reboot" method="post">
                 <Button class="w-full" color="hover:bg-amber-500" ringColor="ring-amber-500" disabled={$realtime.cycle !== undefined}>
                     <Icon src={ArrowPath} class="h-4 w-4 inline mr-2 mb-1" />

packages/ui/src/routes/+error.svelte

@@ -1,23 +1,8 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-
-    let time = 0;
-
-    onMount(() => {
-        const interval = setInterval(() => {
-
-            if(time >= 5)
-                window.location.reload();
-
-            time++;
-        }, 1000);
-
-        return clearInterval(interval);
-    });
-
+	import { page } from '$app/stores';
 </script>
 
 <h1>Server render error</h1>
-<p>Refreshing in {5 - time} seconds.</p>
+<p>{$page.error?.message}</p>
 
-<a href="/">Redirect now</a>
+<a href="/">Reload page</a>