Merge pull request #231 from OpenDTU-App/219-implement-dtu-settings

Author: CommanderRedYT

.idea/i18nally.json

@@ -4,6 +4,7 @@ import { createContext, useContext, useEffect, useMemo } from 'react';
 import {
   clearOpenDtuState,
   setDeviceState,
+  setDtuSettings,
   setEventLog,
   setGridProfile,
   setInverterDevice,
@@ -186,6 +187,10 @@ export const ApiProvider: FC<PropsWithChildren> = ({ children }) => {
         dispatch(setNTPSettings({ data, index }));
       });
 
+      api.registerOnDtuSettingsHandler((data, index) => {
+        dispatch(setDtuSettings({ data, index }));
+      });
+
       log.debug('Connecting API Handler');
 
       api.connect();

src/api/ApiHandler.tsx

@@ -10,6 +10,7 @@ import type { EventLogData } from '@/types/opendtu/eventlog';
 import type { GridProfileData } from '@/types/opendtu/gridprofile';
 import type { InverterDeviceData } from '@/types/opendtu/inverterDevice';
 import type {
+  DtuSettings,
   NetworkSettings,
   NTPSettings,
   NTPTime,
@@ -118,6 +119,9 @@ class OpenDtuApi {
   private onNtpSettingsHandler:
     | ((data: NTPSettings, index: Index) => void)
     | null = null;
+  private onDtuSettingsHandler:
+    | ((data: DtuSettings, index: Index) => void)
+    | null = null;
 
   private ws: WebSocket | null = null;
   // communication
@@ -351,6 +355,18 @@ class OpenDtuApi {
     this.onNtpSettingsHandler = null;
   }
 
+  public registerOnDtuSettingsHandler(
+    handler: (data: DtuSettings, index: Index) => void,
+  ): void {
+    log.debug('OpenDtuApi.registerOnDtuSettingsHandler()');
+    this.onDtuSettingsHandler = handler;
+  }
+
+  public unregisterOnDtuSettingsHandler(): void {
+    log.debug('OpenDtuApi.unregisterOnDtuSettingsHandler()');
+    this.onDtuSettingsHandler = null;
+  }
+
   public async getSystemStatusFromUrl(
     url: URL,
   ): Promise<GetSystemStatusReturn> {
@@ -1401,6 +1417,64 @@ class OpenDtuApi {
     return res.status === 200 && parsed.type === 'success';
   }
 
+  public async getDtuConfig(): Promise<DtuSettings | null> {
+    if (!this.baseUrl) {
+      log.error('getDtuConfig', 'no base url');
+      return null;
+    }
+
+    const res = await this.makeAuthenticatedRequest('/api/dtu/config', 'GET');
+
+    if (!res) {
+      log.error('getDtuConfig', 'no response');
+      return null;
+    }
+
+    if (res.status === 200) {
+      const json = await res.json();
+
+      if (this.onDtuSettingsHandler && this.index !== null) {
+        this.onDtuSettingsHandler(json, this.index);
+      }
+
+      log.debug('getDtuConfig', 'success');
+
+      return json;
+    }
+
+    log.error('getDtuConfig', 'invalid status', res.status);
+
+    return null;
+  }
+
+  public async setDtuConfig(config: DtuSettings): Promise<boolean | null> {
+    if (!this.baseUrl) {
+      log.error('setDtuConfig', 'no base url');
+      return null;
+    }
+
+    const formData = new FormData();
+    formData.append('data', JSON.stringify(config));
+
+    const res = await this.makeAuthenticatedRequest('/api/dtu/config', 'POST', {
+      body: formData,
+    });
+
+    if (!res) {
+      log.error('setDtuConfig', 'no response');
+      return null;
+    }
+
+    const parsed = await res.json();
+
+    log.debug('setDtuConfig', 'success', {
+      status: res.status,
+      parsed,
+    });
+
+    return res.status === 200 && parsed.type === 'success';
+  }
+
   public async makeAuthenticatedRequest(
     route: string,
     method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'OPTIONS' | 'PATCH',

src/api/opendtuapi.ts

@@ -10,7 +10,7 @@ import { View } from 'react-native';
 
 import { spacing } from '@/constants';
 
-export interface ChangeValueModalProps {
+export interface ChangeBooleanValueModalProps {
   isOpen?: boolean;
   onClose?: () => void;
   defaultValue?: boolean;
@@ -21,7 +21,7 @@ export interface ChangeValueModalProps {
   inputProps?: Omit<SwitchProps, 'value' | 'onValueChange'>;
 }
 
-const ChangeTextValueModal: FC<ChangeValueModalProps> = ({
+const ChangeBooleanValueModal: FC<ChangeBooleanValueModalProps> = ({
   isOpen,
   title,
   description,
@@ -152,4 +152,4 @@ const ChangeTextValueModal: FC<ChangeValueModalProps> = ({
   );
 };
 
-export default ChangeTextValueModal;
+export default ChangeBooleanValueModal;

src/components/modals/ChangeBooleanValueModal.tsx

@@ -124,7 +124,14 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
             <Text variant="bodyMedium">{description}</Text>
           </View>
           <ScrollView style={{ maxHeight: 350, width: '100%' }}>
-            <Box mv={4}>
+            <Box
+              mv={4}
+              style={{
+                backgroundColor: theme.colors.surfaceVariant,
+                borderRadius: theme.roundness * 6,
+                paddingVertical: spacing,
+              }}
+            >
               <RadioButton.Group onValueChange={setValue} value={value}>
                 {possibleValues.map(({ label, value }) => (
                   <RadioButton.Item
@@ -133,7 +140,10 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
                     label={label}
                     labelVariant="bodyMedium"
                     style={{
-                      backgroundColor: theme.colors.surface,
+                      borderRadius: theme.roundness * 6,
+                    }}
+                    labelStyle={{
+                      borderRadius: theme.roundness * 6,
                     }}
                   />
                 ))}

src/components/modals/ChangeEnumValueModal.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { BottomDrawerMethods } from 'react-native-animated-bottom-drawer';
 import BottomDrawer from 'react-native-animated-bottom-drawer';
@@ -20,7 +20,7 @@ import { spacing } from '@/constants';
 
 const log = rootLogging.extend('ChangeTextValueModal');
 
-export interface ChangeValueModalProps {
+export interface ChangeTextValueModalProps {
   isOpen?: boolean;
   onClose?: () => void;
   defaultValue?: string;
@@ -30,9 +30,10 @@ export interface ChangeValueModalProps {
   extraHeight?: number;
   inputProps?: Omit<TextInputProps, 'value' | 'onChangeText'>;
   validate?: (value: string) => boolean;
+  allowedRegex?: RegExp;
 }
 
-const ChangeTextValueModal: FC<ChangeValueModalProps> = ({
+const ChangeTextValueModal: FC<ChangeTextValueModalProps> = ({
   isOpen,
   title,
   description,
@@ -42,6 +43,7 @@ const ChangeTextValueModal: FC<ChangeValueModalProps> = ({
   inputProps,
   validate,
   extraHeight,
+  allowedRegex,
 }) => {
   const theme = useTheme();
   const drawerRef = useRef<BottomDrawerMethods>(null);
@@ -149,13 +151,17 @@ const ChangeTextValueModal: FC<ChangeValueModalProps> = ({
         </View>
         <View style={{ marginTop: 40 }}>
           <TextInput
+            {...inputProps}
             defaultValue={value}
             onChangeText={value => {
+              if (allowedRegex && !allowedRegex.test(value)) {
+                return;
+              }
+
               setWasModified(true);
               setError(null);
               setValue(value);
             }}
-            {...inputProps}
             error={!!error}
           />
           <HelperText type="error" visible={!!error}>

src/components/modals/ChangeTextValueModal.tsx

@@ -6,11 +6,11 @@ import { List } from 'react-native-paper';
 import useMemoWithInterval from '@/hooks/useMemoWithInterval';
 
 export interface NTPCurrentTimeComponentsProps {
-  initalCurrentOpendtuTime?: Date;
+  initialCurrentOpenDtuTime?: Date;
 }
 
 const NTPCurrentTimeComponents: FC<NTPCurrentTimeComponentsProps> = ({
-  initalCurrentOpendtuTime,
+  initialCurrentOpenDtuTime,
 }) => {
   const { t } = useTranslation();
 
@@ -20,39 +20,42 @@ const NTPCurrentTimeComponents: FC<NTPCurrentTimeComponentsProps> = ({
     1000,
   );
 
-  const [currentOpendtuTime, setCurrentOpendtuTime] = useState<
+  const [currentOpenDtuTime, setCurrentOpenDtuTime] = useState<
     Date | undefined
-  >(initalCurrentOpendtuTime);
+  >(initialCurrentOpenDtuTime);
 
   useEffect(() => {
-    if (!initalCurrentOpendtuTime) {
+    if (!initialCurrentOpenDtuTime) {
       return;
     }
 
-    setCurrentOpendtuTime(initalCurrentOpendtuTime);
-  }, [initalCurrentOpendtuTime]);
+    setCurrentOpenDtuTime(initialCurrentOpenDtuTime);
+  }, [initialCurrentOpenDtuTime]);
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (currentOpendtuTime) {
-        const newDate = new Date(currentOpendtuTime.getTime() + 1000);
+      if (currentOpenDtuTime) {
+        const newDate = new Date(currentOpenDtuTime.getTime() + 1000);
 
-        setCurrentOpendtuTime(newDate);
+        setCurrentOpenDtuTime(newDate);
       }
     }, 1000);
 
     return () => {
       clearInterval(interval);
     };
-  }, [currentOpendtuTime]);
+  }, [currentOpenDtuTime]);
 
   return (
-    <List.Section title="Manual Time Synchronization">
+    <List.Section title={t('settings.ntpSettings.manualTimeSync')}>
       <List.Item
-        title="Current OpenDTU Time"
-        description={currentOpendtuTime?.toString() || t('unknown')}
+        title={t('settings.ntpSettings.currentOpenDtuTime')}
+        description={currentOpenDtuTime?.toString() || t('unknown')}
+      />
+      <List.Item
+        title={t('settings.ntpSettings.currentPhoneTime')}
+        description={currentLocalTime}
       />
-      <List.Item title="Current Local Time" description={currentLocalTime} />
     </List.Section>
   );
 };

src/components/settings/NTPCurrentTimeComponents.tsx

@@ -5,6 +5,7 @@ import type {
   OpenDTUReduxState,
   OpenDTUSettings,
   SetDeviceStateAction,
+  SetDtuSettingsAction,
   SetEventLogAction,
   SetGridProfileAction,
   SetInverterDeviceAction,
@@ -362,6 +363,21 @@ const opendtuSlice = createSlice({
           .settings as OpenDTUSettings
       ).ntp = action.payload.data;
     },
+    setDtuSettings: (state, action: SetDtuSettingsAction) => {
+      if (!state.dtuStates[action.payload.index]) {
+        state.dtuStates[action.payload.index] = {};
+      }
+
+      if (!state.dtuStates[action.payload.index]?.settings) {
+        (state.dtuStates[action.payload.index] as OpenDTUDeviceState).settings =
+          {};
+      }
+
+      (
+        (state.dtuStates[action.payload.index] as OpenDTUDeviceState)
+          .settings as OpenDTUSettings
+      ).dtu = action.payload.data;
+    },
   },
 });
 
@@ -388,6 +404,7 @@ export const {
   setLimitStatus,
   setNetworkSettings,
   setNTPSettings,
+  setDtuSettings,
 } = opendtuSlice.actions;
 
 export const { reducer: OpenDTUReducer } = opendtuSlice;