diff --git a/src/content/docs/gcs/User Interface/UI Components/error-toast.mdx b/src/content/docs/gcs/User Interface/UI Components/error-toast.mdx index a69524b..769af1f 100644 --- a/src/content/docs/gcs/User Interface/UI Components/error-toast.mdx +++ b/src/content/docs/gcs/User Interface/UI Components/error-toast.mdx @@ -1,49 +1,41 @@ --- -title: Error Toast +title: Alert Toast --- import { Aside } from '@astrojs/starlight/components'; - - -The `ErrorToast.vue` component is used to display [errors and warnings](#errors-and-warnings) generated by abnormal vehicle or mission statuses. +The `AlertToast.vue` component is used to display [errors and warnings](#errors-and-warnings) generated by abnormal vehicle or mission statuses. This component uses the [Button](https://www.shadcn-vue.com/docs/components/button.html) and [Sonner](https://www.shadcn-vue.com/docs/components/sonner.html) components from [shadcn/vue](https://www.shadcn-vue.com/docs/introduction.html). ## Features - -- Row of placeholder buttons to generate toasts. - - This component is not complete as it is missing backend integration. To trigger errors/warnings, we have test buttons at the button of the screen. - [Toasts sync between screens](#toast-synchronization). - [Toasts position themselves based on the current screen](#toast-positioning). - Toasts don't [expire](#toast-expiration) nor have a [limit](#toast-limit). +- [Backend Integration](#backend-integration). +- Row of placeholder buttons to generate/test toasts. + -*MISSING: Toasts do not persist through page refreshes. This can be added when this component is integrated with the backend.* ### Toast Synchronization -Because we have two application windows or screens, we need a way to synchronize the toasts and interactions between them. Since we do not have backend integration for toasts yet, the current solution is to use Tauri listeners/emitters. This approach will very likely be replaced in the future. +Because we have two application windows or screens, we need a way to synchronize the toasts and interactions between them. The system uses Tauri listeners/emitters to ensure alerts appear consistently across all windows. As mentioned earlier, these toasts do not persist on page refreshes. If you refresh one screen/page, the toasts will be out of sync. -First, we need a data structure to store the toasts. Just for our purposes, we can use `Maps` which offer fast lookups, flexible types, and preserved order of the added toasts. - -```js -// src/components/ErrorToast.vue -const toastMap = new Map(); -var id: String; -``` +#### Event System -Next, setup the listeners for each event-- creating toast, dismissing toast, and dismissing all toasts. +First, we set up the listeners for each event: creating toast, dismissing toast, and dismissing all toasts. When creating the toast, we create a Dismiss button under the `action` property. -Do note that Dismiss All is emitted by a test button, opposed to a button that is located on the toast itself like the regular Dismiss. +Do note that Dismiss All is emitted by a test button, as opposed to a button that is located on the toast itself like the regular Dismiss. + +The AlertToast.vue component listens for three events: + ```js -// src/components/ErrorToast.vue +// src/components/AlertToast.vue listen("create-toast", (event) => { const { id, type, title, description } = event.payload as { id: string; @@ -52,44 +44,43 @@ listen("create-toast", (event) => { description: string; }; - const toastId = toast[type](title, { + toast[type](title, { id, description, duration: Infinity, - action: { label: "Dismiss", onClick: () => emit("dismiss-toast", { id }) } // Dismiss button on toast + action: { label: "Dismiss", onClick: () => emit("dismiss-toast", { id }) } }); - - toastMap.set(id, String(toastId)); }); listen("dismiss-toast", (event) => { const { id } = event.payload as { id: string }; toast.dismiss(id); + console.log(`Alert cleared: ${id}`); }); -listen("dismiss-all-toasts", (event) => { +listen("dismiss-all-toasts", () => { toast.dismiss(); + console.log(`All toast cleared`); }); ``` Lastly, setup the test buttons to emit the events. Here's one button as an example. ```vue -// src/components/ErrorToast.vue +// src/components/AlertToast.vue ``` @@ -97,14 +88,14 @@ Lastly, setup the test buttons to emit the events. Here's one button as an examp ### Toast Positioning -We do not want the toasts to cover the sidebars, which contain critical information. Thus, we position the `ErrorToast` component based on which screen it is. +We do not want the toasts to cover the sidebars, which contain critical information. Thus, we position the `AlertToast` component based on which screen it is. On the `Camera Screen`, the toasts will be positioned at the bottom-right. On the `Over View` screen, the toasts will be positioned at the bottom-left. In the toast component, we retrieve the route and then set `toasterPosition` as the result of the computation. ```js -// src/components/ErrorToast.vue +// src/components/AlertToast.vue const route = useRoute(); const toasterPosition = computed(() => { @@ -115,7 +106,7 @@ const toasterPosition = computed(() => { Then under `