mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-01 04:44:52 +03:00
refactor profile settings to match rjsf forms
This commit is contained in:
Josh Hawkins
parent
fc5ad3edf7
commit
ad00001049
@ -1,10 +1,7 @@
|
|||||||
import Heading from "@/components/ui/heading";
|
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
import { useCallback, useContext, useEffect } from "react";
|
import { ReactNode, useCallback, useContext, useEffect } from "react";
|
||||||
import { Toaster } from "@/components/ui/sonner";
|
import { Toaster, toast } from "sonner";
|
||||||
import { toast } from "sonner";
|
|
||||||
import { Separator } from "../../components/ui/separator";
|
|
||||||
import { Button } from "../../components/ui/button";
|
import { Button } from "../../components/ui/button";
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
@ -25,6 +22,100 @@ import { AuthContext } from "@/context/auth-context";
|
|||||||
|
|
||||||
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
|
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
|
||||||
const WEEK_STARTS_ON = ["Sunday", "Monday"];
|
const WEEK_STARTS_ON = ["Sunday", "Monday"];
|
||||||
|
const SPLIT_ROW_CLASS_NAME =
|
||||||
|
"space-y-2 md:grid md:grid-cols-[minmax(14rem,22rem)_minmax(0,1fr)] md:items-start md:gap-x-6 md:space-y-0";
|
||||||
|
const DESCRIPTION_CLASS_NAME = "text-sm text-muted-foreground";
|
||||||
|
const CONTROL_COLUMN_CLASS_NAME = "w-full md:max-w-2xl";
|
||||||
|
|
||||||
|
type SettingsGroupCardProps = {
|
||||||
|
title: string;
|
||||||
|
children: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
function SettingsGroupCard({ title, children }: SettingsGroupCardProps) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4 rounded-lg border border-border/70 bg-card/30 p-4">
|
||||||
|
<div className="text-md border-b border-border/60 pb-4 font-semibold text-primary-variant">
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type SwitchSettingRowProps = {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
checked: boolean | undefined;
|
||||||
|
onCheckedChange: (checked: boolean | undefined) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
function SwitchSettingRow({
|
||||||
|
id,
|
||||||
|
label,
|
||||||
|
description,
|
||||||
|
checked,
|
||||||
|
onCheckedChange,
|
||||||
|
}: SwitchSettingRowProps) {
|
||||||
|
return (
|
||||||
|
<div className={SPLIT_ROW_CLASS_NAME}>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<div className="flex items-center justify-between gap-4 md:block">
|
||||||
|
<Label className="cursor-pointer" htmlFor={id}>
|
||||||
|
{label}
|
||||||
|
</Label>
|
||||||
|
<div className="md:hidden">
|
||||||
|
<Switch
|
||||||
|
id={id}
|
||||||
|
checked={checked ?? false}
|
||||||
|
onCheckedChange={onCheckedChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className={DESCRIPTION_CLASS_NAME}>{description}</p>
|
||||||
|
</div>
|
||||||
|
<div className="hidden w-full md:flex md:max-w-2xl md:items-center">
|
||||||
|
<Switch
|
||||||
|
id={`${id}-desktop`}
|
||||||
|
checked={checked ?? false}
|
||||||
|
onCheckedChange={onCheckedChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type ValueSettingRowProps = {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
control: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
function ValueSettingRow({
|
||||||
|
id,
|
||||||
|
label,
|
||||||
|
description,
|
||||||
|
control,
|
||||||
|
}: ValueSettingRowProps) {
|
||||||
|
return (
|
||||||
|
<div className={SPLIT_ROW_CLASS_NAME}>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="cursor-pointer" htmlFor={id}>
|
||||||
|
{label}
|
||||||
|
</Label>
|
||||||
|
<p className="hidden text-sm text-muted-foreground md:block">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className={`${CONTROL_COLUMN_CLASS_NAME} space-y-1.5`}>
|
||||||
|
{control}
|
||||||
|
<p className="text-sm text-muted-foreground md:hidden">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function UiSettingsView() {
|
export default function UiSettingsView() {
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
@ -37,13 +128,11 @@ export default function UiSettingsView() {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
Object.entries(config.camera_groups).forEach(async (value) => {
|
Object.entries(config.camera_groups).forEach(async ([cameraName]) => {
|
||||||
await deleteUserNamespacedKey(`${value[0]}-draggable-layout`, username)
|
await deleteUserNamespacedKey(`${cameraName}-draggable-layout`, username)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast.success(
|
toast.success(
|
||||||
t("general.toast.success.clearStoredLayout", {
|
t("general.toast.success.clearStoredLayout", { cameraName }),
|
||||||
cameraName: value[0],
|
|
||||||
}),
|
|
||||||
{
|
{
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
},
|
},
|
||||||
@ -69,7 +158,7 @@ export default function UiSettingsView() {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
await deleteUserNamespacedKey(`streaming-settings`, username)
|
await deleteUserNamespacedKey("streaming-settings", username)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast.success(t("general.toast.success.clearStreamingSettings"), {
|
toast.success(t("general.toast.success.clearStreamingSettings"), {
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
@ -95,8 +184,6 @@ export default function UiSettingsView() {
|
|||||||
document.title = t("documentTitle.general");
|
document.title = t("documentTitle.general");
|
||||||
}, [t]);
|
}, [t]);
|
||||||
|
|
||||||
// settings
|
|
||||||
|
|
||||||
const [autoLive, setAutoLive] = useUserPersistence("autoLiveView", true);
|
const [autoLive, setAutoLive] = useUserPersistence("autoLiveView", true);
|
||||||
const [cameraNames, setCameraName] = useUserPersistence(
|
const [cameraNames, setCameraName] = useUserPersistence(
|
||||||
"displayCameraNames",
|
"displayCameraNames",
|
||||||
@ -110,229 +197,195 @@ export default function UiSettingsView() {
|
|||||||
3,
|
3,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const liveDashboardSwitchRows = [
|
||||||
|
{
|
||||||
|
id: "auto-live",
|
||||||
|
label: t("general.liveDashboard.automaticLiveView.label"),
|
||||||
|
description: t("general.liveDashboard.automaticLiveView.desc"),
|
||||||
|
checked: autoLive,
|
||||||
|
onCheckedChange: setAutoLive,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "images-only",
|
||||||
|
label: t("general.liveDashboard.playAlertVideos.label"),
|
||||||
|
description: t("general.liveDashboard.playAlertVideos.desc"),
|
||||||
|
checked: alertVideos,
|
||||||
|
onCheckedChange: setAlertVideos,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "camera-names",
|
||||||
|
label: t("general.liveDashboard.displayCameraNames.label"),
|
||||||
|
description: t("general.liveDashboard.displayCameraNames.desc"),
|
||||||
|
checked: cameraNames,
|
||||||
|
onCheckedChange: setCameraName,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="flex size-full flex-col md:flex-row">
|
||||||
<div className="flex size-full flex-col md:flex-row">
|
<Toaster position="top-center" closeButton={true} />
|
||||||
<Toaster position="top-center" closeButton={true} />
|
<div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
|
||||||
<div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
|
<div className="w-full max-w-5xl space-y-6">
|
||||||
<Heading as="h4" className="mb-2">
|
<SettingsGroupCard title={t("general.liveDashboard.title")}>
|
||||||
{t("general.title")}
|
<div className="space-y-6">
|
||||||
</Heading>
|
{liveDashboardSwitchRows.map((row) => (
|
||||||
|
<SwitchSettingRow key={row.id} {...row} />
|
||||||
|
))}
|
||||||
|
|
||||||
<Separator className="my-2 flex bg-secondary" />
|
<ValueSettingRow
|
||||||
|
id="live-fallback-timeout"
|
||||||
<Heading as="h4" className="my-2">
|
label={t("general.liveDashboard.liveFallbackTimeout.label")}
|
||||||
{t("general.liveDashboard.title")}
|
description={t(
|
||||||
</Heading>
|
"general.liveDashboard.liveFallbackTimeout.desc",
|
||||||
|
|
||||||
<div className="mt-2 space-y-6">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex flex-row items-center justify-start gap-2">
|
|
||||||
<Switch
|
|
||||||
id="auto-live"
|
|
||||||
checked={autoLive}
|
|
||||||
onCheckedChange={setAutoLive}
|
|
||||||
/>
|
|
||||||
<Label className="cursor-pointer" htmlFor="auto-live">
|
|
||||||
{t("general.liveDashboard.automaticLiveView.label")}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
|
|
||||||
<p>{t("general.liveDashboard.automaticLiveView.desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex flex-row items-center justify-start gap-2">
|
|
||||||
<Switch
|
|
||||||
id="images-only"
|
|
||||||
checked={alertVideos}
|
|
||||||
onCheckedChange={setAlertVideos}
|
|
||||||
/>
|
|
||||||
<Label className="cursor-pointer" htmlFor="images-only">
|
|
||||||
{t("general.liveDashboard.playAlertVideos.label")}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
|
|
||||||
<p>{t("general.liveDashboard.playAlertVideos.desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex flex-row items-center justify-start gap-2">
|
|
||||||
<Switch
|
|
||||||
id="camera-names"
|
|
||||||
checked={cameraNames}
|
|
||||||
onCheckedChange={setCameraName}
|
|
||||||
/>
|
|
||||||
<Label className="cursor-pointer" htmlFor="camera-names">
|
|
||||||
{t("general.liveDashboard.displayCameraNames.label")}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
|
|
||||||
<p>{t("general.liveDashboard.displayCameraNames.desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex flex-row items-center justify-start gap-2">
|
|
||||||
<Label
|
|
||||||
className="cursor-pointer"
|
|
||||||
htmlFor="live-fallback-timeout"
|
|
||||||
>
|
|
||||||
{t("general.liveDashboard.liveFallbackTimeout.label")}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
|
|
||||||
<p>{t("general.liveDashboard.liveFallbackTimeout.desc")}</p>
|
|
||||||
</div>
|
|
||||||
<Select
|
|
||||||
value={fallbackTimeout?.toString()}
|
|
||||||
onValueChange={(value) => setFallbackTimeout(parseInt(value))}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-36">
|
|
||||||
{t("time.second", {
|
|
||||||
ns: "common",
|
|
||||||
time: fallbackTimeout,
|
|
||||||
count: fallbackTimeout,
|
|
||||||
})}
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
{[1, 2, 3, 5, 8, 10, 12, 15].map((timeout) => (
|
|
||||||
<SelectItem
|
|
||||||
key={timeout}
|
|
||||||
className="cursor-pointer"
|
|
||||||
value={timeout.toString()}
|
|
||||||
>
|
|
||||||
{t("time.second", {
|
|
||||||
ns: "common",
|
|
||||||
time: timeout,
|
|
||||||
count: timeout,
|
|
||||||
})}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 flex w-full flex-col space-y-6">
|
|
||||||
<div className="mt-2 space-y-3">
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<div className="text-md">
|
|
||||||
{t("general.storedLayouts.title")}
|
|
||||||
</div>
|
|
||||||
<div className="my-2 text-sm text-muted-foreground">
|
|
||||||
<p>{t("general.storedLayouts.desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
aria-label={t("general.storedLayouts.clearAll")}
|
|
||||||
onClick={clearStoredLayouts}
|
|
||||||
>
|
|
||||||
{t("general.storedLayouts.clearAll")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-2 space-y-3">
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<div className="text-md">
|
|
||||||
{t("general.cameraGroupStreaming.title")}
|
|
||||||
</div>
|
|
||||||
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
|
|
||||||
<p>{t("general.cameraGroupStreaming.desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
aria-label={t("general.cameraGroupStreaming.clearAll")}
|
|
||||||
onClick={clearStreamingSettings}
|
|
||||||
>
|
|
||||||
{t("general.cameraGroupStreaming.clearAll")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator className="my-2 flex bg-secondary" />
|
|
||||||
|
|
||||||
<Heading as="h4" className="my-2">
|
|
||||||
{t("general.recordingsViewer.title")}
|
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<div className="mt-2 space-y-6">
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<div className="text-md">
|
|
||||||
{t("general.recordingsViewer.defaultPlaybackRate.label")}
|
|
||||||
</div>
|
|
||||||
<div className="my-2 text-sm text-muted-foreground">
|
|
||||||
<p>
|
|
||||||
{t("general.recordingsViewer.defaultPlaybackRate.desc")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Select
|
|
||||||
value={playbackRate?.toString()}
|
|
||||||
onValueChange={(value) => setPlaybackRate(parseFloat(value))}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-20">
|
|
||||||
{`${playbackRate}x`}
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
{PLAYBACK_RATE_DEFAULT.map((rate) => (
|
|
||||||
<SelectItem
|
|
||||||
key={rate}
|
|
||||||
className="cursor-pointer"
|
|
||||||
value={rate.toString()}
|
|
||||||
>
|
|
||||||
{rate}x
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<Separator className="my-2 flex bg-secondary" />
|
|
||||||
|
|
||||||
<Heading as="h4" className="my-2">
|
|
||||||
{t("general.calendar.title")}
|
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<div className="mt-2 space-y-6">
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<div className="text-md">
|
|
||||||
{t("general.calendar.firstWeekday.label")}
|
|
||||||
</div>
|
|
||||||
<div className="my-2 text-sm text-muted-foreground">
|
|
||||||
<p>{t("general.calendar.firstWeekday.desc")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Select
|
|
||||||
value={weekStartsOn?.toString()}
|
|
||||||
onValueChange={(value) => setWeekStartsOn(parseInt(value))}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-32">
|
|
||||||
{t(
|
|
||||||
"general.calendar.firstWeekday." +
|
|
||||||
WEEK_STARTS_ON[weekStartsOn ?? 0].toLowerCase(),
|
|
||||||
)}
|
)}
|
||||||
</SelectTrigger>
|
control={
|
||||||
<SelectContent>
|
<Select
|
||||||
<SelectGroup>
|
value={fallbackTimeout?.toString()}
|
||||||
{WEEK_STARTS_ON.map((day, index) => (
|
onValueChange={(value) =>
|
||||||
<SelectItem
|
setFallbackTimeout(parseInt(value, 10))
|
||||||
key={index}
|
}
|
||||||
className="cursor-pointer"
|
>
|
||||||
value={index.toString()}
|
<SelectTrigger
|
||||||
|
id="live-fallback-timeout"
|
||||||
|
className="w-full md:w-36"
|
||||||
>
|
>
|
||||||
{t("general.calendar.firstWeekday." + day.toLowerCase())}
|
{t("time.second", {
|
||||||
</SelectItem>
|
ns: "common",
|
||||||
))}
|
time: fallbackTimeout,
|
||||||
</SelectGroup>
|
count: fallbackTimeout,
|
||||||
</SelectContent>
|
})}
|
||||||
</Select>
|
</SelectTrigger>
|
||||||
<Separator className="my-2 flex bg-secondary" />
|
<SelectContent>
|
||||||
</div>
|
<SelectGroup>
|
||||||
|
{[1, 2, 3, 5, 8, 10, 12, 15].map((timeout) => (
|
||||||
|
<SelectItem
|
||||||
|
key={timeout}
|
||||||
|
className="cursor-pointer"
|
||||||
|
value={timeout.toString()}
|
||||||
|
>
|
||||||
|
{t("time.second", {
|
||||||
|
ns: "common",
|
||||||
|
time: timeout,
|
||||||
|
count: timeout,
|
||||||
|
})}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ValueSettingRow
|
||||||
|
id="stored-layouts-clear"
|
||||||
|
label={t("general.storedLayouts.title")}
|
||||||
|
description={t("general.storedLayouts.desc")}
|
||||||
|
control={
|
||||||
|
<Button
|
||||||
|
id="stored-layouts-clear"
|
||||||
|
aria-label={t("general.storedLayouts.clearAll")}
|
||||||
|
className="w-full md:w-auto"
|
||||||
|
onClick={clearStoredLayouts}
|
||||||
|
>
|
||||||
|
{t("general.storedLayouts.clearAll")}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ValueSettingRow
|
||||||
|
id="camera-group-streaming-clear"
|
||||||
|
label={t("general.cameraGroupStreaming.title")}
|
||||||
|
description={t("general.cameraGroupStreaming.desc")}
|
||||||
|
control={
|
||||||
|
<Button
|
||||||
|
id="camera-group-streaming-clear"
|
||||||
|
aria-label={t("general.cameraGroupStreaming.clearAll")}
|
||||||
|
className="w-full md:w-auto"
|
||||||
|
onClick={clearStreamingSettings}
|
||||||
|
>
|
||||||
|
{t("general.cameraGroupStreaming.clearAll")}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</SettingsGroupCard>
|
||||||
|
|
||||||
|
<SettingsGroupCard title={t("general.recordingsViewer.title")}>
|
||||||
|
<ValueSettingRow
|
||||||
|
id="default-playback-rate"
|
||||||
|
label={t("general.recordingsViewer.defaultPlaybackRate.label")}
|
||||||
|
description={t(
|
||||||
|
"general.recordingsViewer.defaultPlaybackRate.desc",
|
||||||
|
)}
|
||||||
|
control={
|
||||||
|
<Select
|
||||||
|
value={playbackRate?.toString()}
|
||||||
|
onValueChange={(value) => setPlaybackRate(parseFloat(value))}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="default-playback-rate"
|
||||||
|
className="w-full md:w-20"
|
||||||
|
>
|
||||||
|
{`${playbackRate}x`}
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
{PLAYBACK_RATE_DEFAULT.map((rate) => (
|
||||||
|
<SelectItem
|
||||||
|
key={rate}
|
||||||
|
className="cursor-pointer"
|
||||||
|
value={rate.toString()}
|
||||||
|
>
|
||||||
|
{rate}x
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsGroupCard>
|
||||||
|
|
||||||
|
<SettingsGroupCard title={t("general.calendar.title")}>
|
||||||
|
<ValueSettingRow
|
||||||
|
id="first-weekday"
|
||||||
|
label={t("general.calendar.firstWeekday.label")}
|
||||||
|
description={t("general.calendar.firstWeekday.desc")}
|
||||||
|
control={
|
||||||
|
<Select
|
||||||
|
value={weekStartsOn?.toString()}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setWeekStartsOn(parseInt(value, 10))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="first-weekday" className="w-full md:w-32">
|
||||||
|
{t(
|
||||||
|
"general.calendar.firstWeekday." +
|
||||||
|
WEEK_STARTS_ON[weekStartsOn ?? 0].toLowerCase(),
|
||||||
|
)}
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
{WEEK_STARTS_ON.map((day, index) => (
|
||||||
|
<SelectItem
|
||||||
|
key={index}
|
||||||
|
className="cursor-pointer"
|
||||||
|
value={index.toString()}
|
||||||
|
>
|
||||||
|
{t(
|
||||||
|
"general.calendar.firstWeekday." +
|
||||||
|
day.toLowerCase(),
|
||||||
|
)}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsGroupCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user