fix: fix camera bug

- setup modals to be specific to device
EyeTrackVR · Jan 26, 2023 · 429be3d · 429be3d
1 parent f784f5c
commit 429be3d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 15 deletions.
diff --git a/GUI/ETVR/src/components/Camera/index.tsx b/GUI/ETVR/src/components/Camera/index.tsx
@@ -1,6 +1,8 @@
 import { IconButton } from '@hope-ui/core'
 import { FaSolidGear } from 'solid-icons/fa'
 import CameraStatusIndicator from './CameraIndicator/CameraIndicator'
+import { setRestDevice } from '@src/store/api/restAPI'
+import { restDevice } from '@src/store/api/selectors'
 import { ICamera } from '@src/store/mdns/mdns'
 import { setOpenModal } from '@src/store/ui/ui'
 import { ActiveStatus } from '@src/utils/utils'
@@ -9,6 +11,11 @@ import { ActiveStatus } from '@src/utils/utils'
 // TODO: create grid to make it flexible
 
 export const Camera = (props: ICamera) => {
+    const settingsHandler = () => {
+        setRestDevice(props.address)
+        setOpenModal(true)
+        console.log(restDevice())
+    }
     return (
         <div class=" m-[10px] pr-[14px] pl-[14px] py-[14px] pb-[14px] rounded-[14px] bg-[#333742] flex">
             <div class="flex">
@@ -45,7 +52,7 @@ export const Camera = (props: ICamera) => {
                                 variant="plain"
                                 colorScheme="neutral"
                                 size="lg"
-                                onClick={() => setOpenModal(true)}>
+                                onClick={settingsHandler}>
                                 <FaSolidGear />
                             </IconButton>
                         </div>

diff --git a/GUI/ETVR/src/pages/Home/index.tsx b/GUI/ETVR/src/pages/Home/index.tsx
@@ -9,6 +9,7 @@ import { CAMERA_VIEW_MODE } from '@src/utils/enums'
 
 const CameraHandler = () => {
     const _cameras = cameras()
+    console.log('cameras:', _cameras.size)
     return (
         <Show
             when={_cameras.size > 0}
@@ -19,16 +20,22 @@ const CameraHandler = () => {
                     </Text>
                 </div>
             }>
-            <For each={Array.from({ length: _cameras.size })}>
-                {() => {
-                    createEffect(() => console.log('increment:', _cameras.values().next().value))
-                    return <Camera {...(_cameras.values().next().value as ICamera)} />
-                }}
+            <For each={Array.from(_cameras.keys())}>
+                {(key) => <Camera {...(_cameras.get(key) as ICamera)} />}
             </For>
         </Show>
     )
 }
 
+/* {
+    ;() => {
+        for (const values of _cameras.values()) {
+            const value = values as ICamera
+            return <Camera {...value} />
+        }
+    }
+} */
+
 const Main = () => {
     const [selectMode, setSelectMode] = createSignal(CAMERA_VIEW_MODE.GRIP)
     return (

diff --git a/GUI/ETVR/src/store/api/restAPI.ts b/GUI/ETVR/src/store/api/restAPI.ts
@@ -23,14 +23,14 @@ export interface IEndpoint {
 
 export interface IRest {
     status: RESTStatus
-    type: RESTType
-    data: object
+    device: string
+    response: object
 }
 
-export const defaultState = {
+export const defaultState: IRest = {
     status: RESTStatus.COMPLETE,
-    type: RESTType.GET,
-    data: {},
+    device: '',
+    response: {},
 }
 
 /**
@@ -70,4 +70,20 @@ export const setRestStatus = (status: RESTStatus) => {
     )
 }
 
+export const setRestDevice = (device: string) => {
+    setState(
+        produce((s) => {
+            s.device = device
+        })
+    )
+}
+
+export const setRestResponse = (response: object) => {
+    setState(
+        produce((s) => {
+            s.response = response
+        })
+    )
+}
+
 export const restState = createMemo(() => state)
diff --git a/GUI/ETVR/src/store/api/selectors.ts b/GUI/ETVR/src/store/api/selectors.ts
@@ -2,4 +2,6 @@ import { createMemo } from 'solid-js'
 import { restState, endpointsMap } from './restAPI'
 
 export const restStatus = createMemo(() => restState().status)
+export const restDevice = createMemo(() => restState().device)
+export const restResponse = createMemo(() => restState().response)
 export const endpoints = createMemo(() => endpointsMap)
diff --git a/GUI/ETVR/src/store/mdns/mdns.ts b/GUI/ETVR/src/store/mdns/mdns.ts
@@ -27,17 +27,35 @@ interface IMdnsStore {
 }
 
 /* TEMPORARY - REMOVE WHEN NOT NEEDED */
-const staticCamerasGenerator = new Array(5).fill(0).map(() => ({
+/* const staticCamerasGenerator = new Array(5).fill(0).map(() => ({
     status: CameraStatus.LOADING,
     type: CameraType.WIRELESS,
     address: `${Math.floor(Math.random() * 255)}`,
     activeCameraSection: 'Left Eye',
-}))
+})) */
 
-export const defaultState = {
+const tempCameraComponents: ReactiveMap<string, ICamera> = new ReactiveMap<string, ICamera>(
+    [
+        ['left_eye_tracker', {
+            status: CameraStatus.LOADING,
+            type: CameraType.WIRELESS,
+            address: '192.168.0.204',
+            activeCameraSection: 'Left Eye',
+        }],
+        ['right_eye_tracker', {
+            status: CameraStatus.LOADING,
+            type: CameraType.WIRELESS,
+            address: '192.168.0.232',
+            activeCameraSection: 'Right Eye',
+        }],
+
+    ]
+)
+// new ReactiveMap<string, ICamera>(staticCamerasGenerator.map((c) => [c.address, c])),
+export const defaultState: IMdnsStore = {
     connectedUser: '',
     restClient: '',
-    camerasMap: new ReactiveMap<string, ICamera>(staticCamerasGenerator.map((c) => [c.address, c])),
+    camerasMap: tempCameraComponents
 }
 
 const [state, setState] = createStore<IMdnsStore>(defaultState)