diff --git a/src/components/SettingForms/WiFi&Modem/ModemCard.tsx b/src/components/SettingForms/WiFi&Modem/ModemCard.tsx index 79bcc52..dcc2dfc 100644 --- a/src/components/SettingForms/WiFi&Modem/ModemCard.tsx +++ b/src/components/SettingForms/WiFi&Modem/ModemCard.tsx @@ -1,96 +1,13 @@ import Card from "../../UI/Card"; import CardHeader from "../../UI/CardHeader"; -import { useState } from "react"; -import FormGroup from "../components/FormGroup"; +import ModemSettings from "./ModemSettings"; const ModemCard = () => { - const [apn, setApn] = useState(""); - const [username, setUsername] = useState(""); - const [password, setPassword] = useState(""); - const [authType, setAuthType] = useState("PAP"); - return ( - // TODO: Add switch for Auto vs Manual settings -
- - - setApn(e.target.value)} - /> - - - - setUsername(e.target.value)} - /> - - - - setPassword(e.target.value)} - /> - - - - - - -
+ + ); }; diff --git a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx new file mode 100644 index 0000000..ccf6402 --- /dev/null +++ b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx @@ -0,0 +1,148 @@ +import { Formik, Form, Field } from "formik"; +import FormGroup from "../components/FormGroup"; +import type { ModemSettingsType } from "../../../types/types"; +import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem"; +import { useEffect, useState } from "react"; +import ModemToggle from "./ModemToggle"; +import { toast } from "sonner"; + +const ModemSettings = () => { + const [showSettings, setShowSettings] = useState(false); + const { modemQuery, modemMutation } = useWifiAndModem(); + + const apn = modemQuery?.data?.propAPN?.value; + const username = modemQuery?.data?.propUsername.value; + const password = modemQuery?.data?.propPassword?.value; + const mode = modemQuery?.data?.propMode?.value; + + useEffect(() => { + setShowSettings(mode === "AUTO"); + }, [mode]); + + const inititalValues = { + apn: apn ?? "", + username: username ?? "", + password: password ?? "", + authenticationType: "PAP", + }; + + const handleSubmit = (values: ModemSettingsType) => { + const modemConfig = { + id: "ModemAndWifiManager-modem", + fields: [ + { + property: "propAPN", + value: values.apn, + }, + { + property: "propPassword", + value: values.password, + }, + { + property: "propUsername", + value: values.username, + }, + + { + property: "propMode", + value: showSettings ? "AUTO" : "MANUAL", + }, + ], + }; + modemMutation.mutate(modemConfig); + if (modemMutation.error) { + toast.error("Failed to update modem settings"); + return; + } + toast.success("Modem settings updated"); + }; + + return ( + <> + + {!showSettings && ( + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + )} + + ); +}; + +export default ModemSettings; diff --git a/src/components/SettingForms/WiFi&Modem/ModemToggle.tsx b/src/components/SettingForms/WiFi&Modem/ModemToggle.tsx new file mode 100644 index 0000000..dab4f41 --- /dev/null +++ b/src/components/SettingForms/WiFi&Modem/ModemToggle.tsx @@ -0,0 +1,30 @@ +type ModemToggleProps = { + showSettings: boolean; + onShowSettings: (showSettings: boolean) => void; +}; + +const ModemToggle = ({ showSettings, onShowSettings }: ModemToggleProps) => { + return ( +
+ +
+ ); +}; + +export default ModemToggle; diff --git a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx index 3f81cd0..6d1588b 100644 --- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx +++ b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx @@ -19,19 +19,24 @@ const WiFiSettingsForm = () => { 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", - }, + fields: [ + { + property: "propSSID", + value: values.ssid, + }, + { + property: "propPassword", + value: values.password, + }, + ], }; wifiMutation.mutate(wifiConfig); //todo: check what response is + if (wifiMutation.error) { + toast.error("Failed to update WiFi settings"); + return; + } toast.success("WiFi settings updated"); }; return ( diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 2de4734..daceab3 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -32,7 +32,7 @@ export default function Header() { }; return ( -
+
Logo diff --git a/src/hooks/useCameraWifiandModem.ts b/src/hooks/useCameraWifiandModem.ts index e256080..d501a6b 100644 --- a/src/hooks/useCameraWifiandModem.ts +++ b/src/hooks/useCameraWifiandModem.ts @@ -1,6 +1,6 @@ import { useQuery, useMutation } from "@tanstack/react-query"; import { CAM_BASE } from "../utils/config"; -import type { WifiConfig } from "../types/types"; +import type { ModemConfig, WifiConfig } from "../types/types"; const getWiFiSettings = async () => { const response = await fetch( @@ -27,6 +27,31 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => { return response.json(); }; +const getModemSettings = async () => { + const response = await fetch( + `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem` + ); + if (!response.ok) { + throw new Error("Cannot fetch modem settings"); + } + return response.json(); +}; + +const updateModemSettings = async (modemConfig: ModemConfig) => { + const response = await fetch( + `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`, + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(modemConfig), + } + ); + if (!response.ok) { + throw new Error("cannot update modem settings"); + } + return response.json(); +}; + export const useWifiAndModem = () => { const wifiQuery = useQuery({ queryKey: ["getWifiSettings"], @@ -36,10 +61,23 @@ export const useWifiAndModem = () => { const wifiMutation = useMutation({ mutationKey: ["updateWifiSettings"], mutationFn: (wifiConfig: WifiConfig) => updateWifiSettings(wifiConfig), + onError: (error) => console.log(error), + }); + + const modemQuery = useQuery({ + queryKey: ["getModemSettings"], + queryFn: getModemSettings, + }); + + const modemMutation = useMutation({ + mutationKey: ["updateModemSettings"], + mutationFn: (modemConfig: ModemConfig) => updateModemSettings(modemConfig), }); return { wifiQuery, wifiMutation, + modemQuery, + modemMutation, }; }; diff --git a/src/types/types.ts b/src/types/types.ts index 4add9a4..234d015 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -267,19 +267,25 @@ export type WifiSettingValues = { password: string; encryption: string; }; +export type ModemConfigPayload = { + property: string; + value: string; +}; +export type WifiConfigPayload = { + property: string; + value: string; +}; export type WifiConfig = { id: string; - configHash: string; - propSSID: { - value: string; - datatype: string; - }; - propPassword: { - value: string; - datatype: string; - }; + fields: WifiConfigPayload[]; }; + +export type ModemConfig = { + id: string; + fields: ModemConfigPayload[]; +}; + export type ZoomInOptions = { camera: string; multiplier: number; @@ -288,3 +294,10 @@ export type ZoomInOptions = { export type zoomConfig = { camera: string; }; + +export type ModemSettingsType = { + apn: string; + username: string; + password: string; + authenticationType: string; +};