From afe03fe8734909290250a55bc84111844082d2af Mon Sep 17 00:00:00 2001 From: shm Date: Mon, 2 Sep 2024 01:59:51 +0900 Subject: [PATCH] add: setting --- src-tauri/src/commands/config.rs | 16 +++++++ src-tauri/src/enums/hardware.rs | 22 +++++++++- src-tauri/src/main.rs | 1 + src/App.tsx | 22 ++-------- src/atom/main.ts | 8 ---- src/atom/useSettingsAtom.ts | 42 +++++++++++++++++++ src/services/settingService.ts | 10 +++++ src/template/Chart.tsx | 4 +- .../modals => template}/SettingsSheet.tsx | 27 +++++------- 9 files changed, 104 insertions(+), 48 deletions(-) delete mode 100644 src/atom/main.ts create mode 100644 src/atom/useSettingsAtom.ts rename src/{components/modals => template}/SettingsSheet.tsx (82%) diff --git a/src-tauri/src/commands/config.rs b/src-tauri/src/commands/config.rs index a8fbf4f..dbf8940 100644 --- a/src-tauri/src/commands/config.rs +++ b/src-tauri/src/commands/config.rs @@ -77,6 +77,12 @@ impl Settings { self.write_file(); println!("{:?}", self); } + + pub fn set_display_targets(&mut self, new_targets: Vec) { + self.display_targets = new_targets; + self.write_file(); + println!("{:?}", self); + } } #[derive(Debug)] @@ -122,4 +128,14 @@ pub mod commands { let settings = state.settings.lock().unwrap().clone(); Ok(settings) } + + #[tauri::command] + pub async fn set_display_targets( + state: tauri::State<'_, AppState>, + new_targets: Vec, + ) -> Result<(), String> { + let mut settings = state.settings.lock().unwrap(); + settings.set_display_targets(new_targets); + Ok(()) + } } diff --git a/src-tauri/src/enums/hardware.rs b/src-tauri/src/enums/hardware.rs index 2fb1c34..3b76c97 100644 --- a/src-tauri/src/enums/hardware.rs +++ b/src-tauri/src/enums/hardware.rs @@ -1,6 +1,6 @@ -use serde::{Deserialize, Serialize, Serializer}; +use serde::{Deserialize, Deserializer, Serialize, Serializer}; -#[derive(Debug, PartialEq, Eq, Clone, Deserialize)] +#[derive(Debug, PartialEq, Eq, Clone)] pub enum HardwareType { CPU, Memory, @@ -20,3 +20,21 @@ impl Serialize for HardwareType { serializer.serialize_str(s) } } + +impl<'de> Deserialize<'de> for HardwareType { + fn deserialize(deserializer: D) -> Result + where + D: Deserializer<'de>, + { + let s = String::deserialize(deserializer)?.to_lowercase(); + match s.as_str() { + "cpu" => Ok(HardwareType::CPU), + "memory" => Ok(HardwareType::Memory), + "gpu" => Ok(HardwareType::GPU), + _ => Err(serde::de::Error::unknown_variant( + &s, + &["cpu", "memory", "gpu"], + )), + } + } +} diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index dd2a977..3e5e319 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -58,6 +58,7 @@ fn main() { hardware::get_gpu_usage_history, config::commands::set_language, config::commands::set_theme, + config::commands::set_display_targets, config::commands::get_settings ]) .on_menu_event(|event| { diff --git a/src/App.tsx b/src/App.tsx index f887e27..9d1b8c3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,36 +3,20 @@ import TestTemplate from "./components/Sample"; import ChartTemplate from "./template/Chart"; import "./index.css"; import { useSettingsModalListener } from "@/hooks/useTauriEventListener"; -import { useAtom } from "jotai"; -import { settingsAtom } from "./atom/main"; +import { useSettingsAtom } from "./atom/useSettingsAtom"; -import SettingsSheet from "./components/modals/SettingsSheet"; +import SettingsSheet from "@/template/SettingsSheet"; import { useDarkMode } from "./hooks/useDarkMode"; -import { getSettings } from "./services/settingService"; type ButtonState = "chart" | "raw"; -const useLoadSettings = () => { - const [, setSettings] = useAtom(settingsAtom); - - useEffect(() => { - const loadSettings = async () => { - const setting = await getSettings(); - setSettings(setting); - }; - loadSettings(); - }, [setSettings]); -}; - const Page = () => { const [buttonState, setButtonState] = useState("chart"); - const [settings] = useAtom(settingsAtom); + const { settings } = useSettingsAtom(); const { toggle } = useDarkMode(); useSettingsModalListener(); - useLoadSettings(); - const handleShowData = () => { setButtonState(buttonState === "raw" ? "chart" : "raw"); }; diff --git a/src/atom/main.ts b/src/atom/main.ts deleted file mode 100644 index a7ef9c5..0000000 --- a/src/atom/main.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { Settings } from "@/types/settingsType"; -import { atom } from "jotai"; - -export const settingsAtom = atom({ - language: "en", - theme: "light", - display_targets: [], -}); diff --git a/src/atom/useSettingsAtom.ts b/src/atom/useSettingsAtom.ts new file mode 100644 index 0000000..496fb31 --- /dev/null +++ b/src/atom/useSettingsAtom.ts @@ -0,0 +1,42 @@ +import { + getSettings, + setDisplayTargets, + setTheme, +} from "@/services/settingService"; +import type { ChartDataType } from "@/types/chartType"; +import type { Settings } from "@/types/settingsType"; +import { atom, useAtom } from "jotai"; +import { useEffect } from "react"; +const settingsAtom = atom({ + language: "en", + theme: "light", + display_targets: [], +}); + +export const useSettingsAtom = () => { + const [settings, setSettings] = useAtom(settingsAtom); + + useEffect(() => { + const loadSettings = async () => { + const setting = await getSettings(); + setSettings(setting); + }; + loadSettings(); + }, [setSettings]); + + const toggleDisplayTarget = async (target: ChartDataType) => { + const newTargets = settings.display_targets.includes(target) + ? settings.display_targets.filter((t) => t !== target) + : [...settings.display_targets, target]; + + setSettings((prev) => ({ ...prev, display_targets: newTargets })); + await setDisplayTargets(settings.display_targets); + }; + + const toggleTheme = async (theme: "light" | "dark") => { + setSettings((prev) => ({ ...prev, theme })); + await setTheme(theme); + }; + + return { settings, toggleDisplayTarget, toggleTheme }; +}; diff --git a/src/services/settingService.ts b/src/services/settingService.ts index d9dfd59..d56b2e6 100644 --- a/src/services/settingService.ts +++ b/src/services/settingService.ts @@ -4,3 +4,13 @@ import { invoke } from "@tauri-apps/api/tauri"; export const getSettings = async (): Promise => { return await invoke("get_settings"); }; + +export const setTheme = async (theme: Settings["theme"]): Promise => { + return await invoke("set_theme", { newTheme: theme }); +}; + +export const setDisplayTargets = async ( + targets: Settings["display_targets"], +): Promise => { + return await invoke("set_display_targets", { newTargets: targets }); +}; diff --git a/src/template/Chart.tsx b/src/template/Chart.tsx index 7538412..1c4e866 100644 --- a/src/template/Chart.tsx +++ b/src/template/Chart.tsx @@ -3,7 +3,7 @@ import { graphicUsageHistoryAtom, memoryUsageHistoryAtom, } from "@/atom/chart"; -import { settingsAtom } from "@/atom/main"; +import { useSettingsAtom } from "@/atom/useSettingsAtom"; import LineChart from "@/components/charts/LineChart"; import { chartConfig } from "@/consts/chart"; import { useUsageUpdater } from "@/hooks/useHardwareData"; @@ -45,7 +45,7 @@ const GpuUsageChart = () => { }; const ChartTemplate = () => { - const [settings] = useAtom(settingsAtom); + const { settings } = useSettingsAtom(); const renderedCharts = useMemo(() => { return ( diff --git a/src/components/modals/SettingsSheet.tsx b/src/template/SettingsSheet.tsx similarity index 82% rename from src/components/modals/SettingsSheet.tsx rename to src/template/SettingsSheet.tsx index 27754db..b2861ee 100644 --- a/src/components/modals/SettingsSheet.tsx +++ b/src/template/SettingsSheet.tsx @@ -1,13 +1,11 @@ -import { settingsAtom } from "@/atom/main"; import { modalAtoms } from "@/atom/ui"; +import { useSettingsAtom } from "@/atom/useSettingsAtom"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Sheet, - SheetClose, SheetContent, SheetDescription, - SheetFooter, SheetHeader, SheetTitle, } from "@/components/ui/sheet"; @@ -16,11 +14,11 @@ import type { ChartDataType } from "@/types/chartType"; import { useAtom } from "jotai"; const SettingGraphType = () => { - const [settings] = useAtom(settingsAtom); + const { settings, toggleDisplayTarget } = useSettingsAtom(); const selectedGraphTypes = settings.display_targets; - const toggleGraphType = (type: ChartDataType) => { - console.log(type); + const toggleGraphType = async (type: ChartDataType) => { + await toggleDisplayTarget(type); }; return ( @@ -35,7 +33,7 @@ const SettingGraphType = () => { checked={selectedGraphTypes.includes("cpu")} onChange={() => toggleGraphType("cpu")} /> - Line Graph + CPU @@ -59,10 +57,10 @@ const SettingGraphType = () => { }; const SettingColorMode = () => { - const [settings] = useAtom(settingsAtom); + const { settings, toggleTheme } = useSettingsAtom(); - const toggleDarkMode = (mode: "light" | "dark") => { - console.log(mode); + const toggleDarkMode = async (mode: "light" | "dark") => { + await toggleTheme(mode); }; return ( @@ -105,11 +103,6 @@ const SettingsSheet = () => { - - - - - );