Merge pull request #14 from OpenDTU-App/information-screens

Author: CommanderRedYT

README.md

@@ -19,10 +19,10 @@ I am a OpenDTU user, but I am not affiliated with the original project. However,
     - [ ] Firmware Upgrade with Firmware Browser
     - [ ] Device Reboot
   - [ ] Information
-    - [ ] System Information
-    - [ ] Network Information
-    - [ ] NTP Information
-    - [ ] MQTT Information
+    - [x] System Information
+    - [x] Network Information
+    - [x] NTP Information
+    - [x] MQTT Information
     - [ ] tbd if also console
   - [ ] Livedata
     - [x] Today's Yield 

babel.config.js

@@ -18,6 +18,7 @@ module.exports = {
         shippedProposals: true,
       },
     ],
+    //['@babel/plugin-transform-private-property-in-object', { loose: true }],
     'react-native-reanimated/plugin',
     [
       'module-resolver',

licenses.json

@@ -5,7 +5,7 @@
         "licenseUrl": "[email protected]:os-team/libs/utils",
         "parents": "opendtu-react-native"
     },
-    "@react-native-async-storage/[email protected].5": {
+    "@react-native-async-storage/[email protected].8": {
         "licenses": "MIT",
         "repository": "https://github.com/react-native-async-storage/async-storage",
         "licenseUrl": "https://github.com/react-native-async-storage/async-storage/raw/master/LICENSE",
@@ -106,7 +106,7 @@
         "licenseUrl": "https://github.com/ds300/postinstall-postinstall/raw/master/LICENSE",
         "parents": "opendtu-react-native"
     },
-    "[email protected].2": {
+    "[email protected].3": {
         "licenses": "MIT",
         "repository": "https://github.com/samber/prometheus-query-js",
         "licenseUrl": "https://github.com/samber/prometheus-query-js/raw/master/LICENSE",
@@ -136,7 +136,7 @@
         "licenseUrl": "https://github.com/yamankatby/react-native-flex-layout/raw/master/LICENSE",
         "parents": "opendtu-react-native"
     },
-    "react-native-get-random-values@1.9.0": {
+    "react-native-get-random-values@1.10.0": {
         "licenses": "MIT",
         "repository": "https://github.com/LinusU/react-native-get-random-values",
         "licenseUrl": "https://github.com/LinusU/react-native-get-random-values/raw/master/LICENSE",
@@ -166,7 +166,7 @@
         "licenseUrl": "https://github.com/web-ridge/react-native-paper-dates/raw/master/LICENSE",
         "parents": "opendtu-react-native"
     },
-    "[email protected].1": {
+    "[email protected].2": {
         "licenses": "MIT",
         "repository": "https://github.com/callstack/react-native-paper",
         "licenseUrl": "https://github.com/callstack/react-native-paper/raw/master/LICENSE.md",

package.json

@@ -53,7 +53,7 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-logs": "^5.0.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
-    "react-native-paper": "^5.11.0",
+    "react-native-paper": "^5.11.2",
     "react-native-paper-dates": "^0.20.4",
     "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.7.2",

src/App.tsx

@@ -54,7 +54,7 @@ const App = () => {
 
 const LightTheme: MD3Theme = {
   ...MD3LightTheme,
-  colors: {
+  /*colors: {
     primary: 'rgb(0, 95, 175)',
     onPrimary: 'rgb(255, 255, 255)',
     primaryContainer: 'rgb(212, 227, 255)',
@@ -95,12 +95,12 @@ const LightTheme: MD3Theme = {
     surfaceDisabled: 'rgba(26, 28, 30, 0.12)',
     onSurfaceDisabled: 'rgba(26, 28, 30, 0.38)',
     backdrop: 'rgba(45, 49, 56, 0.4)',
-  },
+  },*/
 };
 
 const DarkTheme: MD3Theme = {
   ...MD3DarkTheme,
-  colors: {
+  /*colors: {
     primary: 'rgb(165, 200, 255)',
     onPrimary: 'rgb(0, 49, 95)',
     primaryContainer: 'rgb(0, 71, 134)',
@@ -141,7 +141,7 @@ const DarkTheme: MD3Theme = {
     surfaceDisabled: 'rgba(227, 226, 230, 0.12)',
     onSurfaceDisabled: 'rgba(227, 226, 230, 0.38)',
     backdrop: 'rgba(45, 49, 56, 0.4)',
-  },
+  },*/
 };
 
 const _App: FC = () => {
@@ -153,14 +153,21 @@ const _App: FC = () => {
 
   const darkMode = useMemo(() => {
     if (appTheme === 'system') {
+      console.log('systemModeWantsDark', systemModeWantsDark);
       return systemModeWantsDark;
     }
 
+    console.log('appTheme === dark', appTheme === 'dark');
     return appTheme === 'dark';
   }, [appTheme, systemModeWantsDark]);
 
   const theme = useMemo(() => {
-    if (darkMode) return DarkTheme;
+    if (darkMode) {
+      console.log('darkMode');
+      return DarkTheme;
+    }
+
+    console.log('lightMode');
     return LightTheme;
   }, [darkMode]);
 

src/api/ApiHandler.tsx

@@ -7,6 +7,9 @@ import {
   setDeviceState,
   setIsConnected,
   setLiveData,
+  setMqttStatus,
+  setNetworkStatus,
+  setNtpStatus,
   setSystemStatus,
   setTriedToConnect,
 } from '@/slices/opendtu';
@@ -81,21 +84,39 @@ export const ApiProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
         dispatch(setDeviceState({ deviceState: DeviceState.Connected, index }));
       });
 
-      api.registerSystemStatusHandler((data, index) => {
-        if (data.systemStatus) {
-          dispatch(setSystemStatus({ data: data.systemStatus }));
-          dispatch(
-            updateDtuHostname({ hostname: data.systemStatus.hostname, index }),
-          );
-          dispatch(
-            updateDtuCustomNameIfEmpty({
-              customName: data.systemStatus.hostname,
-              index,
-            }),
-          );
-        }
-        setDeviceState({ deviceState: DeviceState.Connected, index });
-      });
+      api.registerHttpStatusHandler(
+        ({ systemStatus, networkStatus, ntpStatus, mqttStatus }, index) => {
+          if (systemStatus) {
+            dispatch(setSystemStatus({ data: systemStatus }));
+            dispatch(
+              updateDtuHostname({
+                hostname: systemStatus.hostname,
+                index,
+              }),
+            );
+            dispatch(
+              updateDtuCustomNameIfEmpty({
+                customName: systemStatus.hostname,
+                index,
+              }),
+            );
+          }
+
+          if (networkStatus) {
+            dispatch(setNetworkStatus({ data: networkStatus }));
+          }
+
+          if (ntpStatus) {
+            dispatch(setNtpStatus({ data: ntpStatus }));
+          }
+
+          if (mqttStatus) {
+            dispatch(setMqttStatus({ data: mqttStatus }));
+          }
+
+          setDeviceState({ deviceState: DeviceState.Connected, index });
+        },
+      );
 
       console.log('Connecting API Handler');
 

src/api/opendtuapi.ts

@@ -3,7 +3,13 @@ import { logger } from 'react-native-logs';
 
 import type { OpenDTUAuthenticateResponse } from '@/types/opendtu/authenticate';
 import { DeviceState } from '@/types/opendtu/state';
-import type { LiveData, SystemStatus } from '@/types/opendtu/status';
+import type {
+  LiveData,
+  MqttStatus,
+  NetworkStatus,
+  NtpStatus,
+  SystemStatus,
+} from '@/types/opendtu/status';
 import type { Index, OpenDTUConfig } from '@/types/settings';
 
 const log = logger.createLogger();
@@ -19,10 +25,15 @@ export interface GetSystemStatusReturn {
   deviceState: DeviceState;
 }
 
-export type SystemStatusHandler = (
-  data: GetSystemStatusReturn,
-  index: Index,
-) => void;
+export interface HttpStatusData {
+  systemStatus?: SystemStatus;
+  deviceState: DeviceState;
+  networkStatus: NetworkStatus | null;
+  ntpStatus: NtpStatus | null;
+  mqttStatus: MqttStatus | null;
+}
+
+export type HttpStatusHandler = (data: HttpStatusData, index: Index) => void;
 
 class OpenDtuApi {
   // variables for communication
@@ -32,7 +43,7 @@ class OpenDtuApi {
 
   // handlers
   private liveDataHandler: LiveDataHandler | null = null;
-  private systemStatusHandler: SystemStatusHandler | null = null;
+  private httpStatusHandler: HttpStatusHandler | null = null;
   private onConnectedHandler: ((index: Index) => void) | null = null;
   private onDisconnectedHandler: (() => void) | null = null;
 
@@ -107,12 +118,12 @@ class OpenDtuApi {
     this.liveDataHandler = null;
   }
 
-  public registerSystemStatusHandler(handler: SystemStatusHandler): void {
-    this.systemStatusHandler = handler;
+  public registerHttpStatusHandler(handler: HttpStatusHandler): void {
+    this.httpStatusHandler = handler;
   }
 
-  public unregisterSystemStatusHandler(): void {
-    this.systemStatusHandler = null;
+  public unregisterHttpStatusHandler(): void {
+    this.httpStatusHandler = null;
   }
 
   public registerOnConnectedHandler(handler: (index: Index) => void): void {
@@ -431,20 +442,28 @@ class OpenDtuApi {
   public async updateHttpState(): Promise<void> {
     log.info('OpenDtuApi.updateHttpState()');
 
-    if (this.systemStatusHandler && this.index !== null) {
-      const systemStatus = await this.getSystemStatus();
+    if (this.index === null) {
+      log.warn('OpenDtuApi.updateHttpState() index is null');
+      return;
+    }
 
-      if (
-        systemStatus.systemStatus &&
-        'git_hash' in systemStatus.systemStatus
-      ) {
-        this.systemStatusHandler(systemStatus, this.index);
-      } else {
-        console.log('OpenDtuApi.updateHttpState() systemStatus is invalid');
-      }
-    } else {
-      console.log('OpenDtuApi.updateHttpState() systemStatusHandler is null');
+    if (!this.httpStatusHandler) {
+      log.warn('OpenDtuApi.updateHttpState() httpStatusHandler is null');
+      return;
     }
+
+    const systemStatus = await this.getSystemStatus();
+
+    this.httpStatusHandler(
+      {
+        systemStatus: systemStatus.systemStatus,
+        deviceState: systemStatus.deviceState,
+        networkStatus: await this.getNetworkStatus(),
+        ntpStatus: await this.getNtpStatus(),
+        mqttStatus: await this.getMqttStatus(),
+      },
+      this.index,
+    );
   }
 
   private getAuthString(): string {
@@ -463,6 +482,51 @@ class OpenDtuApi {
     return '';
   }
 
+  public async getNetworkStatus(): Promise<NetworkStatus | null> {
+    if (!this.baseUrl) {
+      return null;
+    }
+
+    const res = await this.makeAuthenticatedRequest(
+      '/api/network/status',
+      'GET',
+    );
+
+    if (res.status === 200) {
+      return await res.json();
+    }
+
+    return null;
+  }
+
+  public async getNtpStatus(): Promise<NtpStatus | null> {
+    if (!this.baseUrl) {
+      return null;
+    }
+
+    const res = await this.makeAuthenticatedRequest('/api/ntp/status', 'GET');
+
+    if (res.status === 200) {
+      return await res.json();
+    }
+
+    return null;
+  }
+
+  public async getMqttStatus(): Promise<MqttStatus | null> {
+    if (!this.baseUrl) {
+      return null;
+    }
+
+    const res = await this.makeAuthenticatedRequest('/api/mqtt/status', 'GET');
+
+    if (res.status === 200) {
+      return await res.json();
+    }
+
+    return null;
+  }
+
   public async makeAuthenticatedRequest(
     route: string,
     method: string,