From dbadc7388c2f69355eef05aac7fe069b04c4b31a Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Tue, 2 Dec 2025 13:45:44 +0000 Subject: [PATCH] - added settings page - can post and get data from endpoint - moved toaster to main page - updated config for CORS --- src/features/settings/components/Settings.tsx | 25 ++++ .../settings/components/SystemConfig.tsx | 133 ++++++++++++++++++ .../settings/hooks/useSystemSettings.ts | 54 +++++++ src/routes/__root.tsx | 2 + src/routes/baywatch.tsx | 2 - src/routes/settings.tsx | 13 +- src/types/types.ts | 10 ++ vite.config.ts | 8 ++ 8 files changed, 241 insertions(+), 6 deletions(-) create mode 100644 src/features/settings/components/Settings.tsx create mode 100644 src/features/settings/components/SystemConfig.tsx create mode 100644 src/features/settings/hooks/useSystemSettings.ts diff --git a/src/features/settings/components/Settings.tsx b/src/features/settings/components/Settings.tsx new file mode 100644 index 0000000..ee92572 --- /dev/null +++ b/src/features/settings/components/Settings.tsx @@ -0,0 +1,25 @@ +import { Tabs, Tab, TabList, TabPanel } from "react-tabs"; +import "react-tabs/style/react-tabs.css"; +import Card from "../../../ui/Card"; +import SystemConfig from "./SystemConfig"; +import CardHeader from "../../../ui/CardHeader"; + +const Settings = () => { + return ( +
+ + + Systems + + + + + + + + +
+ ); +}; + +export default Settings; diff --git a/src/features/settings/components/SystemConfig.tsx b/src/features/settings/components/SystemConfig.tsx new file mode 100644 index 0000000..2706a95 --- /dev/null +++ b/src/features/settings/components/SystemConfig.tsx @@ -0,0 +1,133 @@ +import { Formik, Form, Field } from "formik"; +import { useSystemSettings } from "../hooks/useSystemSettings"; +import type { SystemSettings } from "../../../types/types"; +import { toast } from "sonner"; + +const SystemConfig = () => { + const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings(); + + const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted; + const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, "")); + const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted; + const timeSourceOpts = timeSourceOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, "")); + const deviceName = systemSettingsQuery?.data?.propDeviceName?.value; + const timeZone = systemSettingsQuery?.data?.propLocalTimeZone?.value; + const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value; + const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value; + const timeSource = systemSettingsQuery?.data?.propTimeSource?.value; + // const primaryServer = systemSettingsQuery?.data?.propPrimaryDNSServer?.value; + // const secondaryServer = systemSettingsQuery?.data?.propSecondaryDNSServer?.value; + + const initialValues = { + deviceName: deviceName ?? "", + timeZone: timeZone ?? "", + localTimeZone: timeZone ?? "", + SNTPServer: SNTPServer ?? "", + SNTPInterval: SNTPInterval ?? 60, + SNTPIntervalMinutes: SNTPInterval ?? 60, + primaryServer: "", + secondaryServer: "", + timeSource: timeSource ?? "", + }; + + const handleSubmit = async (values: SystemSettings) => { + const result = await systemSettingsMutation.mutateAsync(values); + console.log(result); + if (result.id) { + toast.success("System settings updated successfully"); + } + }; + + return ( + +
+
+ + +
+
+ + + {timeZoneOpts?.map((option: string) => ( + + ))} + +
+
+ + + {timeSourceOpts?.map((option: string) => ( + + ))} + +
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + ); +}; + +export default SystemConfig; diff --git a/src/features/settings/hooks/useSystemSettings.ts b/src/features/settings/hooks/useSystemSettings.ts new file mode 100644 index 0000000..46eb4e8 --- /dev/null +++ b/src/features/settings/hooks/useSystemSettings.ts @@ -0,0 +1,54 @@ +import { useQuery, useMutation } from "@tanstack/react-query"; +import { CAMBASE } from "../../../utils/config"; +import type { SystemSettings } from "../../../types/types"; +const camBase = import.meta.env.MODE !== "development" ? CAMBASE : ""; + +const fetchSystemSettings = async () => { + const response = await fetch(`${camBase}/api/fetch-config?id=GLOBAL--Device`); + if (!response.ok) { + throw new Error("Failed to fetch system settings"); + } + return response.json(); +}; + +const postSystemSettings = async (settings: SystemSettings) => { + const systemSettingConfig = { + id: "GLOBAL--Device", + fields: [ + { property: "propDeviceName", value: settings.deviceName }, + { property: "propSNTPServer", value: settings.SNTPServer }, + { + property: "propSNTPIntervalMinutes", + value: Number(settings.SNTPIntervalMinutes), + }, + { property: "propLocalTimeZone", value: settings.localTimeZone }, + { property: "propTimeSource", value: settings.timeSource }, + ], + }; + + const response = await fetch(`${camBase}/api/update-config`, { + method: "POST", + body: JSON.stringify(systemSettingConfig), + headers: { + "Content-Type": "application/json", + }, + }); + if (!response.ok) { + throw new Error("Failed to update system settings"); + } + return response.json(); +}; + +export const useSystemSettings = () => { + const systemSettingsQuery = useQuery({ + queryKey: ["systemSettings"], + queryFn: fetchSystemSettings, + }); + + const systemSettingsMutation = useMutation({ + mutationKey: ["updateSystemSettings"], + mutationFn: postSystemSettings, + }); + + return { systemSettingsQuery, systemSettingsMutation }; +}; diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 6621494..5fff20b 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -2,12 +2,14 @@ import { createRootRoute, Outlet } from "@tanstack/react-router"; import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"; import Header from "../ui/Header"; import Footer from "../ui/Footer"; +import { Toaster } from "sonner"; const RootLayout = () => ( <>
+