feat: begin laying infrastructure for REST and mDNS

Author: ZanzyTHEbar

GUI/ETVR/src/components/Camera/index.tsx

@@ -6,7 +6,6 @@ import { setOpenModal } from '@src/store/ui/ui'
 import { ActiveStatus } from '@src/utils/utils'
 
 // TODO: switch camera based on status
-// TODO: add modal for settings
 // TODO: create grid to make it flexible
 
 export const Camera = (props: ICamera) => {
@@ -23,11 +22,11 @@ export const Camera = (props: ICamera) => {
                 </div>
                 <div class="bg-[#292D36] ml-[14px] rounded-[14px] h-[100%] p-[14px] ">
                     <div class="text-center  pb-[14px]">
-                        <div class=" text-[#FFFF]">camera 1</div>
+                        <div class=" text-[#FFFF]"> {props.activeCameraSection} </div>
                     </div>
                     <div>
                         <div class="flex text-[#FFFF] justify-between">
-                            <div class="pr-[25px] pb-[14px]">Camera IP</div>
+                            <div class="pr-[25px] pb-[14px]">Camera Address</div>
                             <div>{props.address}</div>
                         </div>
                         <div class="flex text-[#FFFF] justify-between">

GUI/ETVR/src/store/api/endpoints.ts

@@ -0,0 +1,25 @@
+export enum RESTType {
+    GET = 'GET',
+    POST = 'POST',
+    PUT = 'PUT',
+    DELETE = 'DELETE',
+}
+
+export interface IEndpoint {
+    name: string
+    url: string
+    type: RESTType
+}
+
+export const endpoints: IEndpoint[] = [
+    {
+        name: 'heartbeat',
+        url: '/ping',
+        type: RESTType.GET,
+    },
+    {
+        name: 'getCamera',
+        url: '/camera',
+        type: RESTType.GET,
+    }
+]

GUI/ETVR/src/store/api/restAPI.ts

@@ -0,0 +1,35 @@
+import { createMemo } from 'solid-js'
+import { createStore, produce } from 'solid-js/store'
+
+export enum RESTStatus {
+    ACTIVE = 'ACTIVE',
+    DISABLED = 'DISABLED',
+    LOADING = 'LOADING',
+    FAILED = 'FAILED',
+}
+
+export interface IRest {
+    status: RESTStatus
+    type: RESTType
+    endpoints: IEndpoint[]
+    data: object
+}
+
+export const defaultState = {
+    status: RESTStatus.DISABLED,
+    type: RESTType.GET,
+    endpoints: [],
+    data: {},
+}
+
+const [state, setState] = createStore<IRest>(defaultState)
+
+export const setRestStatus = (status: RESTStatus) => {
+    setState(
+        produce((s) => {
+            s.status = status
+        })
+    )
+}
+
+export const restState = createMemo(() => state)

GUI/ETVR/src/store/api/selectors.ts

@@ -0,0 +1,5 @@
+import { createMemo } from 'solid-js'
+import { restState } from './restAPI'
+
+export const restStatus = createMemo(() => restState().status)
+export const cameras = createMemo(() => restState().cameras)

GUI/ETVR/src/store/mdns/mdns.ts

@@ -31,7 +31,7 @@ const staticCamerasGenerator = new Array(5).fill(0).map(() => ({
     type: CameraType.WIRELESS,
     address: '192.168.0.204',
     name: 'left-eye',
-    activeCameraSection: 'left eye',
+    activeCameraSection: 'Left Eye',
 }))
 
 export const defaultState = {

GUI/ETVR/src/store/mdns/selectors.ts

@@ -3,3 +3,4 @@ import { mdnsState } from './mdns'
 
 export const connectedUserName = createMemo(() => mdnsState().connectedUser)
 export const cameras = createMemo(() => mdnsState().cameras)
+export const cameraAddresses = createMemo(() => cameras().map((c) => c.address))

GUI/ETVR/src/utils/hooks/useMDNSScanner.ts

@@ -0,0 +1,29 @@
+import { invoke } from '@tauri-apps/api/tauri'
+import { createSignal } from 'solid-js'
+
+export const useMDNSScanner = (serviceType: string, scanTime: number) => {
+    const [res, setRes] = createSignal(null)
+    const [loading, setLoading] = createSignal(false)
+    const [error, setError] = createSignal(null)
+
+    const scan = () => {
+        setLoading(true)
+        invoke('run_mdns_query', {
+            serviceType,
+            scanTime,
+        })
+            .then((response) => {
+                if (typeof response === 'string') {
+                    const parsedResponse = JSON.parse(response)
+                    setRes(parsedResponse)
+                }
+            })
+            .catch((err) => {
+                setError(err)
+            })
+            .finally(() => {
+                setLoading(false)
+            })
+    }
+    return { res, loading, error, scan }
+}

GUI/ETVR/src/utils/hooks/useRequest.ts

@@ -0,0 +1,37 @@
+import { invoke } from '@tauri-apps/api/tauri'
+import { createSignal } from 'solid-js'
+import { endpoints } from '@src/store/api/selectors'
+import { cameras } from '@src/store/mdns/selectors'
+
+export function useChartRequestHook() {
+    const [data, setData] = createSignal({})
+    const [loading, setLoading] = createSignal(false)
+    const [error, setError] = createSignal(null)
+    function doRequest() {
+        cameras().forEach((data) => {
+            setLoading(true)
+            invoke('do_rest_request', {
+                endpoint: data.address + data['endpoint'],
+                //deviceName: chartData['deviceName'],
+                method: 'GET',
+            })
+                .then((response) => {
+                    if (typeof response === 'string') {
+                        const parsedResponse = JSON.parse(response)
+                        setData((prevData) => ({
+                            ...prevData,
+                            [data['msg']]: parsedResponse,
+                        }))
+                    }
+                })
+                .catch((err) => {
+                    console.log(err)
+                    setError(err)
+                })
+                .finally(() => {
+                    setLoading(false)
+                })
+        })
+    }
+    return { data, loading, error, doRequest }
+}