From cffdc4f1ff1e307ea624eda2fcb7a6c8e5e27fd2 Mon Sep 17 00:00:00 2001 From: jgerbrandt Date: Sat, 23 Nov 2024 11:34:14 -0700 Subject: [PATCH 1/2] Started implementing mini rcu features --- .../src/lib/hooks/useInteraction.ts | 15 ++++++++ RocketControlUnitGUI/src/lib/stores.ts | 1 + .../src/routes/+layout.svelte | 38 ++++++++++--------- RocketControlUnitGUI/src/routes/+page.svelte | 22 ++++++++--- 4 files changed, 52 insertions(+), 24 deletions(-) diff --git a/RocketControlUnitGUI/src/lib/hooks/useInteraction.ts b/RocketControlUnitGUI/src/lib/hooks/useInteraction.ts index 3e9614a..f5d1e34 100644 --- a/RocketControlUnitGUI/src/lib/hooks/useInteraction.ts +++ b/RocketControlUnitGUI/src/lib/hooks/useInteraction.ts @@ -54,6 +54,20 @@ export const useInteraction = (pocketbaseHook: PocketbaseHook) => { modalStore.trigger(modal); }; + const confirmationModal = (title: string, onConfrim: () => void) => { + const modal: ModalSettings = { + type: 'confirm', + title: title, + response: (r: boolean) => { + if (r) { + onConfrim(); + } + } + }; + + modalStore.trigger(modal); + } + const instantStateChange = (state: string) => { nextStatePending = state; pocketbaseHook.writeStateChange(nextStatePending); @@ -165,5 +179,6 @@ export const useInteraction = (pocketbaseHook: PocketbaseHook) => { confirmStateChange, instantStateChange, resumeConfirmRemoveWeight, + confirmationModal }; }; diff --git a/RocketControlUnitGUI/src/lib/stores.ts b/RocketControlUnitGUI/src/lib/stores.ts index 8afde5f..92960a9 100644 --- a/RocketControlUnitGUI/src/lib/stores.ts +++ b/RocketControlUnitGUI/src/lib/stores.ts @@ -2,6 +2,7 @@ import { writable, type Writable } from 'svelte/store'; export const currentState = writable('N/A'); export const auth = writable(false); +export const miniRcu = writable(true); export interface Stores { ac1_open: Writable; diff --git a/RocketControlUnitGUI/src/routes/+layout.svelte b/RocketControlUnitGUI/src/routes/+layout.svelte index afeb5ac..743e884 100644 --- a/RocketControlUnitGUI/src/routes/+layout.svelte +++ b/RocketControlUnitGUI/src/routes/+layout.svelte @@ -2,7 +2,7 @@ import '../styles/app.postcss'; import ReadOnlySvg from '$lib/components/ReadOnlySvg.svelte'; import { ThemeData, ThemeType } from '$lib/theme'; - import { auth, currentState } from "$lib/stores"; + import { auth, currentState, miniRcu } from "$lib/stores"; import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; import { page } from '$app/stores'; import { @@ -57,23 +57,25 @@ - - - Icon - - - - Icon - - - - Icon - - - - Icon - - + {#if !$miniRcu} + + + Icon + + + + Icon + + + + Icon + + + + Icon + + + {/if} Some Slot diff --git a/RocketControlUnitGUI/src/routes/+page.svelte b/RocketControlUnitGUI/src/routes/+page.svelte index 31176b1..daf2a98 100644 --- a/RocketControlUnitGUI/src/routes/+page.svelte +++ b/RocketControlUnitGUI/src/routes/+page.svelte @@ -3,7 +3,7 @@ import Diagram from '$lib/components/Diagram.svelte'; import { initTimestamps, type Timestamps } from '$lib/timestamps'; import { usePocketbase } from '$lib/hooks/usePocketbase'; - import { initStores, auth, currentState } from '$lib/stores'; + import { initStores, auth, currentState, miniRcu } from '$lib/stores'; import { useInteraction } from '$lib/hooks/useInteraction'; import { onMount } from 'svelte'; import { SlideToggle } from '@skeletonlabs/skeleton'; @@ -25,7 +25,8 @@ const { confirmStateChange, instantStateChange, - resumeConfirmRemoveWeight + resumeConfirmRemoveWeight, + confirmationModal } = useInteractionHook; // Destructure stores for later use @@ -208,11 +209,20 @@ const handleSliderChange = async (e: any, target: string, openCommand: string, closeCommand: string) => { e.preventDefault(); - // Determine the command based on the current value of the slider - const command = e.target.checked ? openCommand : closeCommand; + const slideChangeCallback = () => { + // Determine the command based on the current value of the slider + const command = e.target.checked ? openCommand : closeCommand; - // Create a change on the 'RelayStatus' collection - writeArbitraryCommand(target, command); + // Create a change on the 'RelayStatus' collection + writeArbitraryCommand(target, command); + } + + if (miniRcu) { + confirmationModal("Confirm Action", slideChangeCallback); + } + else { + slideChangeCallback(); + } } let wasLiveAtAnyPoint = false; From 3df21da31ec4ac887beff155b3f68b7dd246d93c Mon Sep 17 00:00:00 2001 From: connellr023 Date: Wed, 4 Dec 2024 18:32:09 -0700 Subject: [PATCH 2/2] Expandable and collapsable sidebar --- RocketControlUnitGUI/src/lib/stores.ts | 7 +++ .../src/routes/+layout.svelte | 59 +++++++++++++------ 2 files changed, 47 insertions(+), 19 deletions(-) diff --git a/RocketControlUnitGUI/src/lib/stores.ts b/RocketControlUnitGUI/src/lib/stores.ts index 92960a9..79064d4 100644 --- a/RocketControlUnitGUI/src/lib/stores.ts +++ b/RocketControlUnitGUI/src/lib/stores.ts @@ -2,7 +2,14 @@ import { writable, type Writable } from 'svelte/store'; export const currentState = writable('N/A'); export const auth = writable(false); + +// These are intended for the smaller mini RCU screen. +// When `miniRcu` is enabled, the sidebar can be +// collapsed and expanded by clicking the soar logo. +// Additionally, there are confirmation modals +// when clicking the toggle switches. export const miniRcu = writable(true); +export const isSidebarExpanded = writable(false); // Specific to Mini RCU export interface Stores { ac1_open: Writable; diff --git a/RocketControlUnitGUI/src/routes/+layout.svelte b/RocketControlUnitGUI/src/routes/+layout.svelte index 743e884..0c765ce 100644 --- a/RocketControlUnitGUI/src/routes/+layout.svelte +++ b/RocketControlUnitGUI/src/routes/+layout.svelte @@ -2,7 +2,7 @@ import '../styles/app.postcss'; import ReadOnlySvg from '$lib/components/ReadOnlySvg.svelte'; import { ThemeData, ThemeType } from '$lib/theme'; - import { auth, currentState, miniRcu } from "$lib/stores"; + import { auth, currentState, isSidebarExpanded, miniRcu } from '$lib/stores'; import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; import { page } from '$app/stores'; import { @@ -21,6 +21,12 @@ initializeStores(); $: themeData = new ThemeData($modeCurrent ? ThemeType.LIGHT : ThemeType.DARK); + + const toggleSidebar = () => { + if ($miniRcu) { + $isSidebarExpanded = !$isSidebarExpanded; + } + }; @@ -33,12 +39,14 @@
- SOAR Logo +
@@ -55,33 +63,46 @@ - + - {#if !$miniRcu} +
- + Icon - - + + Icon - - + + Icon - - + + Icon - {/if} +
- + Some Slot \ No newline at end of file +