From 054b0bf4ea6511569ea9ebca68910df8070302a3 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Thu, 2 Oct 2025 22:53:38 +0100 Subject: [PATCH] WIP wifi modem settings --- .env | 2 +- .../SettingForms/WiFi&Modem/WiFiCard.tsx | 70 +----------- .../WiFi&Modem/WiFiSettingsForm.tsx | 106 ++++++++++++++++++ src/hooks/useCameraWifiandModem.ts | 45 ++++++++ src/types/types.ts | 19 ++++ src/utils/config.ts | 2 +- 6 files changed, 174 insertions(+), 70 deletions(-) create mode 100644 src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx create mode 100644 src/hooks/useCameraWifiandModem.ts diff --git a/.env b/.env index 81e1238..207d8b3 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ VITE_BASEURL=http://192.168.75.11/ -VITE_CAM_BASE=http://100.72.72.70:8080 +VITE_CAM_BASE=http://100.118.196.113:8080 VITE_FOLKESTONE_BASE=http://100.116.253.81 VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1 VITE_OUTSIDE_BASEURL=http://100.82.205.44 diff --git a/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx b/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx index 12345f9..ce28728 100644 --- a/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx +++ b/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx @@ -1,78 +1,12 @@ import Card from "../../UI/Card"; import CardHeader from "../../UI/CardHeader"; -import { useState } from "react"; -import FormGroup from "../components/FormGroup"; +import WiFiSettingsForm from "./WiFiSettingsForm"; const WiFiCard = () => { - const [ssid, setSsid] = useState(""); - const [password, setPassword] = useState(""); - const [encryption, setEncryption] = useState("WPA2"); - return ( -
- - - setSsid(e.target.value)} - /> - - - - setPassword(e.target.value)} - /> - - - - - - -
+ ); }; diff --git a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx new file mode 100644 index 0000000..3f81cd0 --- /dev/null +++ b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx @@ -0,0 +1,106 @@ +import { Field, Form, Formik } from "formik"; +import FormGroup from "../components/FormGroup"; +import type { WifiSettingValues } from "../../../types/types"; +import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem"; +import { toast } from "sonner"; + +const WiFiSettingsForm = () => { + const { wifiQuery, wifiMutation } = useWifiAndModem(); + + const wifiSSID = wifiQuery?.data?.propSSID?.value; + const wifiPassword = wifiQuery?.data?.propPassword?.value; + + const initialValues = { + ssid: wifiSSID ?? "", + password: wifiPassword ?? "", + encryption: "WPA2", + }; + + const handleSubmit = (values: WifiSettingValues) => { + const wifiConfig = { + id: "ModemAndWifiManager-wifi", + configHash: "206890572", + propSSID: { + value: values.ssid, + datatype: "java.lang.String", + }, + propPassword: { + value: values.password, + datatype: "java.lang.String", + }, + }; + + wifiMutation.mutate(wifiConfig); + //todo: check what response is + toast.success("WiFi settings updated"); + }; + return ( + + {() => ( +
+ + + + + + + + + + + + + + + + + + +
+ )} + + ); +}; + +export default WiFiSettingsForm; diff --git a/src/hooks/useCameraWifiandModem.ts b/src/hooks/useCameraWifiandModem.ts new file mode 100644 index 0000000..e256080 --- /dev/null +++ b/src/hooks/useCameraWifiandModem.ts @@ -0,0 +1,45 @@ +import { useQuery, useMutation } from "@tanstack/react-query"; +import { CAM_BASE } from "../utils/config"; +import type { WifiConfig } from "../types/types"; + +const getWiFiSettings = async () => { + const response = await fetch( + `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi` + ); + if (!response.ok) { + throw new Error("Cannot fetch Wifi settings"); + } + return response.json(); +}; + +const updateWifiSettings = async (wifiConfig: WifiConfig) => { + const response = await fetch( + `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`, + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(wifiConfig), + } + ); + if (!response.ok) { + throw new Error("Cannot update wifi settings"); + } + return response.json(); +}; + +export const useWifiAndModem = () => { + const wifiQuery = useQuery({ + queryKey: ["getWifiSettings"], + queryFn: getWiFiSettings, + }); + + const wifiMutation = useMutation({ + mutationKey: ["updateWifiSettings"], + mutationFn: (wifiConfig: WifiConfig) => updateWifiSettings(wifiConfig), + }); + + return { + wifiQuery, + wifiMutation, + }; +}; diff --git a/src/types/types.ts b/src/types/types.ts index e70d706..cbe327b 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -261,3 +261,22 @@ export type ZoomLevel = { py: number; level?: number; }; + +export type WifiSettingValues = { + ssid: string; + password: string; + encryption: string; +}; + +export type WifiConfig = { + id: string; + configHash: string; + propSSID: { + value: string; + datatype: string; + }; + propPassword: { + value: string; + datatype: string; + }; +}; diff --git a/src/utils/config.ts b/src/utils/config.ts index f403ad1..3cd72f3 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -1,4 +1,4 @@ -const rawCamBase = import.meta.env.VITE_OUTSIDE_BASEURL; +const rawCamBase = import.meta.env.VITE_CAM_BASE; export const CAM_BASE = rawCamBase && rawCamBase.trim().length > 0 ? rawCamBase