Add COCCON Spain Enclosure code frame (9)

Add UI code

Author: dostuffthatmatters

packages/ui/src/components/configuration/index.ts

@@ -9,6 +9,7 @@ import ConfigSectionCamtracker from './sections/config-section-camtracker';
 import ConfigSectionMeasurementTriggers from './sections/config-section-measurement-triggers';
 import ConfigSectionOpus from './sections/config-section-opus';
 import ConfigSectionTUMEnclosure from './sections/config-section-tum-enclosure';
+import ConfigSectionCOCCONSpainEnclosure from './sections/config-section-coccon-spain-enclosure';
 import ConfigSectionHelios from './sections/config-section-helios';
 import ConfigSectionUpload from './sections/config-section-upload';
 import ConfigElementLine from './rows/config-element-line';
@@ -29,6 +30,7 @@ export default {
     ConfigSectionMeasurementTriggers,
     ConfigSectionOpus,
     ConfigSectionTUMEnclosure,
+    ConfigSectionCOCCONSpainEnclosure,
     ConfigSectionHelios,
     ConfigSectionUpload,
 };

packages/ui/src/components/configuration/sections/config-section-coccon-spain-enclosure.tsx

@@ -0,0 +1,59 @@
+import { configurationComponents, essentialComponents } from '../..';
+import { useConfigStore } from '../../../utils/zustand-utils/config-zustand';
+import { Button } from '../../ui/button';
+
+export default function ConfigSectionCOCCONSpainEnclosure() {
+    const { centralConfig, localConfig, setLocalConfigItem } = useConfigStore();
+
+    const centralSectionConfig = centralConfig?.coccon_spain_enclosure;
+    const localSectionConfig = localConfig?.coccon_spain_enclosure;
+
+    function addDefault() {
+        setLocalConfigItem('coccon_spain_enclosure', {
+            ip: '10.10.0.4',
+        });
+    }
+
+    function setNull() {
+        setLocalConfigItem('coccon_spain_enclosure', null);
+    }
+
+    if (localSectionConfig === undefined || centralSectionConfig === undefined) {
+        return <></>;
+    }
+
+    if (localSectionConfig === null) {
+        return (
+            <div className="relative space-y-2 text-sm flex-col-left">
+                <Button onClick={addDefault}>set up now</Button>
+                <essentialComponents.PreviousValue
+                    previousValue={
+                        centralSectionConfig !== null
+                            ? JSON.stringify(centralSectionConfig)
+                                  .replace(/":/g, '": ')
+                                  .replace(/,"/g, ', "')
+                            : undefined
+                    }
+                />
+                {centralSectionConfig !== null && (
+                    <div className="absolute -top-2.5 -left-1 w-1 h-[calc(100%+0.625rem)] -translate-x-2.5 bg-blue-300" />
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <div>
+                <Button onClick={setNull}>remove configuration</Button>
+            </div>
+            <configurationComponents.ConfigElementLine />
+            <configurationComponents.ConfigElementText
+                title="IP"
+                value={localSectionConfig.ip}
+                setValue={(v: string) => setLocalConfigItem('coccon_spain_enclosure.ip', v)}
+                oldValue={centralSectionConfig !== null ? centralSectionConfig.ip : 'null'}
+            />
+        </>
+    );
+}

packages/ui/src/components/overview/system-state.tsx

@@ -93,6 +93,29 @@ export function SystemState() {
                     </StatePanel>
                 </div>
             )}
+            {centralConfig.coccon_spain_enclosure !== null && (
+                <div className="grid w-full grid-cols-4 px-4 pb-1 text-sm gap-x-1">
+                    <StatePanel title="Cover Angle">
+                        {renderString(coreState.coccon_spain_enclosure_state.actors.cover_position)}
+                    </StatePanel>
+                    <StatePanel title="Temperature">
+                        {renderString(coreState.coccon_spain_enclosure_state.sensors.temperature, {
+                            appendix: ' °C',
+                        })}
+                    </StatePanel>
+                    <StatePanel title="Humidity">
+                        {renderString(coreState.coccon_spain_enclosure_state.sensors.humidity, {
+                            appendix: ' rH',
+                        })}
+                    </StatePanel>
+                    <StatePanel title="Helios Edge Pixels">
+                        {renderNumber(
+                            lastEdgeFractionValue === null ? null : lastEdgeFractionValue * 100,
+                            { appendix: ' %' }
+                        )}
+                    </StatePanel>
+                </div>
+            )}
             {coreState?.tum_enclosure_state.state.rain === true &&
                 coreState?.tum_enclosure_state.state.cover_closed === false && (
                     <div className="w-full px-4 mb-4 -mt-2 text-sm">

packages/ui/src/custom-types.ts

@@ -18,6 +18,7 @@ export namespace customTypes {
         | 'error_email'
         | 'measurement_triggers'
         | 'tum_enclosure'
+        | 'coccon_spain_enclosure'
         | 'helios'
         | 'upload';
     export type config = {
@@ -72,6 +73,9 @@ export namespace customTypes {
             version: number;
             controlled_by_user: boolean;
         };
+        coccon_spain_enclosure: null | {
+            ip: string;
+        };
         helios: null | {
             camera_id: number;
             evaluation_size: number;
@@ -146,6 +150,9 @@ export namespace customTypes {
             version?: number;
             controlled_by_user?: boolean;
         };
+        coccon_spain_enclosure?: null | {
+            ip?: string;
+        };
         helios?: null | {
             camera_id?: number;
             evaluation_size?: number;

packages/ui/src/tabs/configuration-tab.tsx

@@ -43,6 +43,7 @@ const hardwareSections: {
     icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<Icon>>;
 }[] = [
     { key: 'tum_enclosure', label: 'TUM Enclosure', icon: IconCpu },
+    { key: 'coccon_spain_enclosure', label: 'COCCON Spain Enclosure', icon: IconCpu },
     { key: 'helios', label: 'Helios', icon: IconCpu },
 ];
 
@@ -170,6 +171,9 @@ export default function ConfigurationTab() {
                 {activeKey === 'tum_enclosure' && (
                     <configurationComponents.ConfigSectionTUMEnclosure />
                 )}
+                {activeKey === 'coccon_spain_enclosure' && (
+                    <configurationComponents.ConfigSectionCOCCONSpainEnclosure />
+                )}
                 {activeKey === 'helios' && <configurationComponents.ConfigSectionHelios />}
                 {activeKey === 'upload' && <configurationComponents.ConfigSectionUpload />}
                 {configIsDiffering() && (

packages/ui/src/utils/zustand-utils/config-zustand.ts

@@ -73,6 +73,11 @@ export const configSchema = z.object({
             controlled_by_user: z.boolean(),
         })
         .nullable(),
+    coccon_spain_enclosure: z
+        .object({
+            ip: z.string(),
+        })
+        .nullable(),
     helios: z
         .object({
             camera_id: intSchema,

packages/ui/src/utils/zustand-utils/core-state-zustand.ts

@@ -48,6 +48,19 @@ const coreStateSchema = z.object({
             spectrometer: z.boolean().nullable(),
         }),
     }),
+    coccon_spain_enclosure_state: z.object({
+        last_full_fetch: z.string().nullable(),
+        actors: z.object({
+            fan_speed: z.number().nullable(),
+            cover_position: z.number().nullable(),
+        }),
+        sensors: z.object({
+            humidity: z.number().nullable(),
+            temperature: z.number().nullable(),
+            wind_direction: z.number().nullable(),
+            wind_speed: z.number().nullable(),
+        }),
+    }),
     operating_system_state: z.object({
         cpu_usage: z.array(z.number()).nullable(),
         memory_usage: z.number().nullable(),

packages/ui/src/utils/zustand-utils/logs-zustand.ts

@@ -10,6 +10,7 @@ interface LogsStore {
         system_monitor: string[] | undefined;
         upload: string[] | undefined;
         tum_enclosure: string[] | undefined;
+        coccon_spain_enclosure: string[] | undefined;
         helios: string[] | undefined;
     };
     uiLogs: { timestamp: number; text: string; details: string }[];
@@ -27,6 +28,7 @@ export const useLogsStore = create<LogsStore>()((set) => ({
         system_monitor: undefined,
         upload: undefined,
         tum_enclosure: undefined,
+        coccon_spain_enclosure: undefined,
         helios: undefined,
     },
     uiLogs: [],
@@ -42,6 +44,7 @@ export const useLogsStore = create<LogsStore>()((set) => ({
                     | 'system_monitor'
                     | 'upload'
                     | 'tum_enclosure'
+                    | 'coccon_spain_enclosure'
                     | 'helios']: string[];
             } = {
                 all: [],
@@ -52,6 +55,7 @@ export const useLogsStore = create<LogsStore>()((set) => ({
                 system_monitor: [],
                 upload: [],
                 tum_enclosure: [],
+                coccon_spain_enclosure: [],
                 helios: [],
             };
             let currentCategory:
@@ -62,6 +66,7 @@ export const useLogsStore = create<LogsStore>()((set) => ({
                 | 'system_monitor'
                 | 'upload'
                 | 'tum_enclosure'
+                | 'coccon_spain_enclosure'
                 | 'helios' = 'main';
             allLogs.forEach((logLine) => {
                 if (logLine.trim().length > 0) {
@@ -84,6 +89,9 @@ export const useLogsStore = create<LogsStore>()((set) => ({
                             case 'tum-enclosure':
                                 currentCategory = 'tum_enclosure';
                                 break;
+                            case 'coccon-spain-enclosure':
+                                currentCategory = 'coccon_spain_enclosure';
+                                break;
                             case 'upload':
                                 currentCategory = 'upload';
                                 break;