modem settings management: integrate ModemSettings and ModemToggle components, update hooks for modem configuration, and enhance WiFiSettingsForm submission handling.

2025-10-03 10:19:49 +01:00
parent 576afbb282
commit a972234e22
7 changed files with 257 additions and 106 deletions
--- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
+++ 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 (
+    <>
+      <ModemToggle
+        showSettings={showSettings}
+        onShowSettings={setShowSettings}
+      />
+      {!showSettings && (
+        <Formik
+          initialValues={inititalValues}
+          onSubmit={handleSubmit}
+          enableReinitialize
+        >
+          <Form className="flex flex-col space-y-5 px-2">
+            <FormGroup>
+              <label
+                htmlFor="apn"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                APN
+              </label>
+              <Field
+                placeholder="Enter APN"
+                name="apn"
+                id="apn"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="username"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Username
+              </label>
+              <Field
+                placeholder="Enter Username"
+                name="username"
+                id="username"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="password"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Password
+              </label>
+              <Field
+                placeholder="Enter Password"
+                name="password"
+                id="password"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="password"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Password
+              </label>
+              <Field
+                name="authenticationType"
+                as="select"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+              >
+                <option value="PAP">PAP</option>
+                <option value="CHAP">CHAP</option>
+                <option value="none">None</option>
+              </Field>
+            </FormGroup>
+            <button
+              type="submit"
+              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+            >
+              Save Modem settings
+            </button>
+          </Form>
+        </Formik>
+      )}
+    </>
+  );
+};
+
+export default ModemSettings;