feat: add types of alerts

- hassome bugs - but it's a start

Author: ZanzyTHEbar

GUI/ETVR/src/components/Notifications/CustomToast/index.tsx

@@ -3,7 +3,7 @@ import { Transition, Toast, Alert } from 'solid-headless'
 import { AiOutlineCheckCircle } from 'solid-icons/ai'
 import { FiAlertTriangle, FiAlertOctagon } from 'solid-icons/fi'
 import { IoAlertCircleSharp } from 'solid-icons/io'
-import { createSignal, Component } from 'solid-js'
+import { createSignal, Component, Show } from 'solid-js'
 import CloseIcon from '@components/CloseIcon'
 import { ENotificationType } from '@static/types/enums'
 import { notifications, notificationsType } from '@store/ui/selectors'
@@ -14,16 +14,27 @@ interface ToastProps {
 }
 
 const NotificationIcon = () => {
-    switch (notificationsType()) {
-        case ENotificationType.SUCCESS:
-            return <AiOutlineCheckCircle size={25} color="#68D391" />
-        case ENotificationType.ERROR:
-            return <FiAlertOctagon size={25} color="#F56565" />
-        case ENotificationType.WARNING:
-            return <FiAlertTriangle size={25} color="#F6E05E" />
-        case ENotificationType.INFO:
-            return <IoAlertCircleSharp size={25} color="#90CDF4" />
-    }
+    return (
+        <div>
+            <Show when={notificationsType() === ENotificationType.SUCCESS}>
+                <AiOutlineCheckCircle size={25} color="#68D391" />
+            </Show>
+            <Show when={notificationsType() === ENotificationType.ERROR}>
+                <FiAlertOctagon size={25} color="#F56565" />
+            </Show>
+            <Show when={notificationsType() === ENotificationType.WARNING}>
+                <FiAlertTriangle size={25} color="#F6E05E" />
+            </Show>
+            <Show when={notificationsType() === ENotificationType.INFO}>
+                <IoAlertCircleSharp size={25} color="#90CDF4" />
+            </Show>
+        </div>
+    )
+
+    /* 
+    
+    
+    */
 }
 
 const CustomToast: Component<ToastProps> = (props) => {
@@ -48,7 +59,7 @@ const CustomToast: Component<ToastProps> = (props) => {
             }}>
             <Toast class="flex justify-between items-center">
                 <Alert class="bg-slate-600 flex grow flex-row items-center justify-center text-xl text-bold text-gray-50 p-4">
-                    {NotificationIcon()}
+                    <NotificationIcon />
                     <span class="flex-1 text-sm font-semibold pl-1 pr-1 text-gray-50">
                         {props.message}
                     </span>

GUI/ETVR/src/pages/Settings/index.tsx

@@ -1,13 +1,14 @@
 import { DropdownMenu } from '@kobalte/core'
 import { createSignal } from 'solid-js'
 import Button from '@components/Button'
-import { ENotificationAction } from '@static/types/enums'
 import { addNotification } from '@src/store/ui/components/actions'
+import { ENotificationAction, ENotificationType } from '@static/types/enums'
 import './styles.css'
 
 const SettingsPage = () => {
     const [open, setOpen] = createSignal(false)
     const [type, setType] = createSignal<ENotificationAction>(ENotificationAction.APP)
+    const [alertType, setAlertType] = createSignal<ENotificationType>(ENotificationType.INFO)
     return (
         <div class="pb-[5rem] h-[95%] xl:h-[100%] xl:pb-[1rem] grow flex-col pt-6 py-6 px-8">
             <DropdownMenu.Root isOpen={open()} onOpenChange={setOpen}>
@@ -25,13 +26,28 @@ const SettingsPage = () => {
                                 onClick={() => setType(ENotificationAction.APP)}>
                                 App Level Notification
                             </DropdownMenu.Item>
-                            <DropdownMenu.Separator class="dropdown-menu__separator" />
                             <DropdownMenu.Item
                                 class="dropdown-menu__item"
                                 onClick={() => setType(ENotificationAction.OS)}>
                                 OS Level Notification
                             </DropdownMenu.Item>
                         </DropdownMenu.Group>
+                        <DropdownMenu.Separator class="dropdown-menu__separator" />
+                        <DropdownMenu.Group>
+                            <DropdownMenu.GroupLabel class="dropdown-menu__group-label">
+                                Alert Type
+                            </DropdownMenu.GroupLabel>
+                            <DropdownMenu.Item
+                                class="dropdown-menu__item"
+                                onClick={() => setAlertType(ENotificationType.SUCCESS)}>
+                                SUCCESS
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                                class="dropdown-menu__item"
+                                onClick={() => setAlertType(ENotificationType.ERROR)}>
+                                ERROR
+                            </DropdownMenu.Item>
+                        </DropdownMenu.Group>
                         <DropdownMenu.Arrow />
                     </DropdownMenu.Content>
                 </DropdownMenu.Portal>
@@ -43,6 +59,7 @@ const SettingsPage = () => {
                         {
                             title: 'Test',
                             message: `This toast is created on ${new Date().toTimeString()}`,
+                            type: alertType(),
                         },
                         type(),
                     )

GUI/ETVR/src/store/ui/ui.ts

@@ -40,6 +40,7 @@ export const defaultState = {
     connectedUser: '',
     showCameraView: false,
     notifications: new ToasterStore<string>(),
+    notificationsType: ENotificationType.INFO,
     displayMode: POPOVER_ID.GRIP,
 }