mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-03-10 10:33:11 +03:00
configure for full i18n support
This commit is contained in:
Josh Hawkins
parent
425e68c51c
commit
737de2f53a
@ -2,6 +2,15 @@
|
||||
import type { FieldTemplateProps } from "@rjsf/utils";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
/**
|
||||
* Build the i18n translation key path for nested fields using the field path
|
||||
* provided by RJSF. This avoids ambiguity with underscores in field names.
|
||||
*/
|
||||
function buildTranslationPath(path: Array<string | number>): string {
|
||||
return path.filter((segment) => typeof segment === "string").join(".");
|
||||
}
|
||||
|
||||
export function FieldTemplate(props: FieldTemplateProps) {
|
||||
const {
|
||||
@ -16,8 +25,17 @@ export function FieldTemplate(props: FieldTemplateProps) {
|
||||
displayLabel,
|
||||
schema,
|
||||
uiSchema,
|
||||
registry,
|
||||
fieldPathId,
|
||||
} = props;
|
||||
|
||||
// Get i18n namespace from form context (passed through registry)
|
||||
const formContext = registry?.formContext as
|
||||
| Record<string, unknown>
|
||||
| undefined;
|
||||
const i18nNamespace = formContext?.i18nNamespace as string | undefined;
|
||||
const { t } = useTranslation([i18nNamespace || "common"]);
|
||||
|
||||
if (hidden) {
|
||||
return <div className="hidden">{children}</div>;
|
||||
}
|
||||
@ -29,6 +47,51 @@ export function FieldTemplate(props: FieldTemplateProps) {
|
||||
// Boolean fields (switches) render label inline
|
||||
const isBoolean = schema.type === "boolean";
|
||||
|
||||
// Get translation path for this field
|
||||
const translationPath = buildTranslationPath(fieldPathId.path);
|
||||
|
||||
// Use schema title/description as primary source (from JSON Schema)
|
||||
const schemaTitle = (schema as Record<string, unknown>).title as
|
||||
| string
|
||||
| undefined;
|
||||
const schemaDescription = (schema as Record<string, unknown>).description as
|
||||
| string
|
||||
| undefined;
|
||||
|
||||
// Try to get translated label, falling back to schema title, then RJSF label
|
||||
let finalLabel = label;
|
||||
if (i18nNamespace && translationPath) {
|
||||
const translationKey = `${translationPath}.label`;
|
||||
const translatedLabel = t(translationKey, {
|
||||
ns: i18nNamespace,
|
||||
defaultValue: "",
|
||||
});
|
||||
// Only use translation if it's not the key itself (which means translation exists)
|
||||
if (translatedLabel && translatedLabel !== translationKey) {
|
||||
finalLabel = translatedLabel;
|
||||
} else if (schemaTitle) {
|
||||
finalLabel = schemaTitle;
|
||||
}
|
||||
} else if (schemaTitle) {
|
||||
finalLabel = schemaTitle;
|
||||
}
|
||||
|
||||
// Try to get translated description, falling back to schema description
|
||||
let finalDescription = description || "";
|
||||
if (i18nNamespace && translationPath) {
|
||||
const translatedDesc = t(`${translationPath}.description`, {
|
||||
ns: i18nNamespace,
|
||||
defaultValue: "",
|
||||
});
|
||||
if (translatedDesc && translatedDesc !== `${translationPath}.description`) {
|
||||
finalDescription = translatedDesc;
|
||||
} else if (schemaDescription) {
|
||||
finalDescription = schemaDescription;
|
||||
}
|
||||
} else if (schemaDescription) {
|
||||
finalDescription = schemaDescription;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@ -37,7 +100,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
|
||||
isBoolean && "flex items-center justify-between gap-4",
|
||||
)}
|
||||
>
|
||||
{displayLabel && label && !isBoolean && (
|
||||
{displayLabel && finalLabel && !isBoolean && (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className={cn(
|
||||
@ -45,7 +108,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
|
||||
errors && errors.props?.errors?.length > 0 && "text-destructive",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
{finalLabel}
|
||||
{required && <span className="ml-1 text-destructive">*</span>}
|
||||
</Label>
|
||||
)}
|
||||
@ -53,22 +116,26 @@ export function FieldTemplate(props: FieldTemplateProps) {
|
||||
{isBoolean ? (
|
||||
<div className="flex w-full items-center justify-between gap-4">
|
||||
<div className="space-y-0.5">
|
||||
{displayLabel && label && (
|
||||
{displayLabel && finalLabel && (
|
||||
<Label htmlFor={id} className="text-sm font-medium">
|
||||
{label}
|
||||
{finalLabel}
|
||||
{required && <span className="ml-1 text-destructive">*</span>}
|
||||
</Label>
|
||||
)}
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
{finalDescription && (
|
||||
<p className="max-w-md text-sm text-muted-foreground">
|
||||
{String(finalDescription)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
{finalDescription && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{String(finalDescription)}
|
||||
</p>
|
||||
)}
|
||||
{children}
|
||||
</>
|
||||
|
||||
@ -37,4 +37,3 @@ export function MultiSchemaFieldTemplate<
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -19,6 +19,8 @@ export interface UiSchemaOptions {
|
||||
widgetMappings?: Record<string, string>;
|
||||
/** Whether to include descriptions */
|
||||
includeDescriptions?: boolean;
|
||||
/** i18n namespace for field labels (e.g., "config/detect") */
|
||||
i18nNamespace?: string;
|
||||
}
|
||||
|
||||
// Type guard for schema objects
|
||||
|
||||
@ -52,6 +52,26 @@ i18n
|
||||
"views/system",
|
||||
"views/exports",
|
||||
"views/explore",
|
||||
// Config section translations
|
||||
"config/detect",
|
||||
"config/record",
|
||||
"config/snapshots",
|
||||
"config/motion",
|
||||
"config/objects",
|
||||
"config/review",
|
||||
"config/audio",
|
||||
"config/notifications",
|
||||
"config/live",
|
||||
"config/timestamp_style",
|
||||
"config/mqtt",
|
||||
"config/database",
|
||||
"config/auth",
|
||||
"config/tls",
|
||||
"config/telemetry",
|
||||
"config/birdseye",
|
||||
"config/semantic_search",
|
||||
"config/face_recognition",
|
||||
"config/lpr",
|
||||
],
|
||||
defaultNS: "common",
|
||||
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
// Camera Configuration View
|
||||
// Per-camera configuration with tab navigation and override indicators
|
||||
|
||||
import { useMemo, useCallback, useState } from "react";
|
||||
import { useMemo, useCallback, useState, memo } from "react";
|
||||
import useSWR from "swr";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
DetectSection,
|
||||
RecordSection,
|
||||
SnapshotsSection,
|
||||
MotionSection,
|
||||
ObjectsSection,
|
||||
ReviewSection,
|
||||
AudioSection,
|
||||
NotificationsSection,
|
||||
LiveSection,
|
||||
TimestampSection,
|
||||
} from "@/components/config-form/sections";
|
||||
import { DetectSection } from "@/components/config-form/sections/DetectSection";
|
||||
import { RecordSection } from "@/components/config-form/sections/RecordSection";
|
||||
import { SnapshotsSection } from "@/components/config-form/sections/SnapshotsSection";
|
||||
import { MotionSection } from "@/components/config-form/sections/MotionSection";
|
||||
import { ObjectsSection } from "@/components/config-form/sections/ObjectsSection";
|
||||
import { ReviewSection } from "@/components/config-form/sections/ReviewSection";
|
||||
import { AudioSection } from "@/components/config-form/sections/AudioSection";
|
||||
import { NotificationsSection } from "@/components/config-form/sections/NotificationsSection";
|
||||
import { LiveSection } from "@/components/config-form/sections/LiveSection";
|
||||
import { TimestampSection } from "@/components/config-form/sections/TimestampSection";
|
||||
import { useAllCameraOverrides } from "@/hooks/use-config-override";
|
||||
import type { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface CameraConfigViewProps {
|
||||
@ -83,14 +82,14 @@ export default function CameraConfigView({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">
|
||||
<div className="flex size-full flex-col">
|
||||
<div className="mb-4">
|
||||
<Heading as="h2">
|
||||
{t("configForm.camera.title", {
|
||||
defaultValue: "Camera Configuration",
|
||||
})}
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
</Heading>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("configForm.camera.description", {
|
||||
defaultValue:
|
||||
"Configure settings for individual cameras. Overridden settings are highlighted.",
|
||||
@ -103,7 +102,7 @@ export default function CameraConfigView({
|
||||
<Tabs
|
||||
value={selectedCamera}
|
||||
onValueChange={handleCameraChange}
|
||||
className="w-full"
|
||||
className="flex flex-1 flex-col"
|
||||
>
|
||||
<ScrollArea className="w-full">
|
||||
<TabsList className="inline-flex w-max">
|
||||
@ -134,7 +133,7 @@ export default function CameraConfigView({
|
||||
</ScrollArea>
|
||||
|
||||
{cameras.map((camera) => (
|
||||
<TabsContent key={camera} value={camera} className="mt-4">
|
||||
<TabsContent key={camera} value={camera} className="mt-4 flex-1">
|
||||
<CameraConfigContent
|
||||
cameraName={camera}
|
||||
config={config}
|
||||
@ -166,13 +165,26 @@ interface CameraConfigContentProps {
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
function CameraConfigContent({
|
||||
const CameraConfigContent = memo(function CameraConfigContent({
|
||||
cameraName,
|
||||
config,
|
||||
overriddenSections,
|
||||
onSave,
|
||||
}: CameraConfigContentProps) {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
const { t } = useTranslation([
|
||||
"config/detect",
|
||||
"config/record",
|
||||
"config/snapshots",
|
||||
"config/motion",
|
||||
"config/objects",
|
||||
"config/review",
|
||||
"config/audio",
|
||||
"config/notifications",
|
||||
"config/live",
|
||||
"config/timestamp_style",
|
||||
"views/settings",
|
||||
"common",
|
||||
]);
|
||||
const [activeSection, setActiveSection] = useState("detect");
|
||||
|
||||
const cameraConfig = config.cameras?.[cameraName];
|
||||
@ -180,35 +192,73 @@ function CameraConfigContent({
|
||||
if (!cameraConfig) {
|
||||
return (
|
||||
<div className="text-muted-foreground">
|
||||
{t("configForm.camera.notFound", { defaultValue: "Camera not found" })}
|
||||
{t("configForm.camera.notFound", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "Camera not found",
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sections = [
|
||||
{ key: "detect", label: "Detect", component: DetectSection },
|
||||
{ key: "record", label: "Record", component: RecordSection },
|
||||
{ key: "snapshots", label: "Snapshots", component: SnapshotsSection },
|
||||
{ key: "motion", label: "Motion", component: MotionSection },
|
||||
{ key: "objects", label: "Objects", component: ObjectsSection },
|
||||
{ key: "review", label: "Review", component: ReviewSection },
|
||||
{ key: "audio", label: "Audio", component: AudioSection },
|
||||
{
|
||||
key: "detect",
|
||||
i18nNamespace: "config/detect",
|
||||
component: DetectSection,
|
||||
},
|
||||
{
|
||||
key: "record",
|
||||
i18nNamespace: "config/record",
|
||||
component: RecordSection,
|
||||
},
|
||||
{
|
||||
key: "snapshots",
|
||||
i18nNamespace: "config/snapshots",
|
||||
component: SnapshotsSection,
|
||||
},
|
||||
{
|
||||
key: "motion",
|
||||
i18nNamespace: "config/motion",
|
||||
component: MotionSection,
|
||||
},
|
||||
{
|
||||
key: "objects",
|
||||
i18nNamespace: "config/objects",
|
||||
component: ObjectsSection,
|
||||
},
|
||||
{
|
||||
key: "review",
|
||||
i18nNamespace: "config/review",
|
||||
component: ReviewSection,
|
||||
},
|
||||
{ key: "audio", i18nNamespace: "config/audio", component: AudioSection },
|
||||
{
|
||||
key: "notifications",
|
||||
label: "Notifications",
|
||||
i18nNamespace: "config/notifications",
|
||||
component: NotificationsSection,
|
||||
},
|
||||
{ key: "live", label: "Live", component: LiveSection },
|
||||
{ key: "timestamp_style", label: "Timestamp", component: TimestampSection },
|
||||
{ key: "live", i18nNamespace: "config/live", component: LiveSection },
|
||||
{
|
||||
key: "timestamp_style",
|
||||
i18nNamespace: "config/timestamp_style",
|
||||
component: TimestampSection,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-1 gap-6 overflow-hidden">
|
||||
{/* Section Navigation */}
|
||||
<nav className="w-48 shrink-0">
|
||||
<ul className="space-y-1">
|
||||
{sections.map((section) => {
|
||||
const isOverridden = overriddenSections.includes(section.key);
|
||||
const sectionLabel = t("label", {
|
||||
ns: section.i18nNamespace,
|
||||
defaultValue:
|
||||
section.key.charAt(0).toUpperCase() +
|
||||
section.key.slice(1).replace(/_/g, " "),
|
||||
});
|
||||
|
||||
return (
|
||||
<li key={section.key}>
|
||||
<button
|
||||
@ -220,14 +270,13 @@ function CameraConfigContent({
|
||||
: "hover:bg-muted",
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
{t(`configForm.${section.key}.title`, {
|
||||
defaultValue: section.label,
|
||||
})}
|
||||
</span>
|
||||
<span>{sectionLabel}</span>
|
||||
{isOverridden && (
|
||||
<Badge variant="secondary" className="h-5 px-1.5 text-xs">
|
||||
{t("common.modified", { defaultValue: "Modified" })}
|
||||
{t("button.modified", {
|
||||
ns: "common",
|
||||
defaultValue: "Modified",
|
||||
})}
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
@ -238,28 +287,25 @@ function CameraConfigContent({
|
||||
</nav>
|
||||
|
||||
{/* Section Content */}
|
||||
<ScrollArea className="h-[calc(100vh-300px)] flex-1">
|
||||
<div className="pr-4">
|
||||
{sections.map((section) => {
|
||||
const SectionComponent = section.component;
|
||||
return (
|
||||
<div
|
||||
key={section.key}
|
||||
className={cn(
|
||||
activeSection === section.key ? "block" : "hidden",
|
||||
)}
|
||||
>
|
||||
<SectionComponent
|
||||
level="camera"
|
||||
cameraName={cameraName}
|
||||
showOverrideIndicator
|
||||
onSave={onSave}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div className="scrollbar-container flex-1 overflow-y-auto pr-4">
|
||||
{sections.map((section) => {
|
||||
const SectionComponent = section.component;
|
||||
return (
|
||||
<div
|
||||
key={section.key}
|
||||
className={cn(activeSection === section.key ? "block" : "hidden")}
|
||||
>
|
||||
<SectionComponent
|
||||
level="camera"
|
||||
cameraName={cameraName}
|
||||
showOverrideIndicator
|
||||
onSave={onSave}
|
||||
showTitle={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,38 +1,75 @@
|
||||
// Global Configuration View
|
||||
// Main view for configuring global Frigate settings
|
||||
|
||||
import { useMemo, useCallback, useState } from "react";
|
||||
import { useMemo, useCallback, useState, memo } from "react";
|
||||
import useSWR from "swr";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ConfigForm } from "@/components/config-form/ConfigForm";
|
||||
import {
|
||||
DetectSection,
|
||||
RecordSection,
|
||||
SnapshotsSection,
|
||||
MotionSection,
|
||||
ObjectsSection,
|
||||
ReviewSection,
|
||||
AudioSection,
|
||||
NotificationsSection,
|
||||
LiveSection,
|
||||
TimestampSection,
|
||||
} from "@/components/config-form/sections";
|
||||
import { DetectSection } from "@/components/config-form/sections/DetectSection";
|
||||
import { RecordSection } from "@/components/config-form/sections/RecordSection";
|
||||
import { SnapshotsSection } from "@/components/config-form/sections/SnapshotsSection";
|
||||
import { MotionSection } from "@/components/config-form/sections/MotionSection";
|
||||
import { ObjectsSection } from "@/components/config-form/sections/ObjectsSection";
|
||||
import { ReviewSection } from "@/components/config-form/sections/ReviewSection";
|
||||
import { AudioSection } from "@/components/config-form/sections/AudioSection";
|
||||
import { NotificationsSection } from "@/components/config-form/sections/NotificationsSection";
|
||||
import { LiveSection } from "@/components/config-form/sections/LiveSection";
|
||||
import { TimestampSection } from "@/components/config-form/sections/TimestampSection";
|
||||
import type { RJSFSchema } from "@rjsf/utils";
|
||||
import type { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { extractSchemaSection } from "@/lib/config-schema";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import { LuSave } from "react-icons/lu";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Section configurations for global-only settings
|
||||
// Shared sections that can be overridden at camera level
|
||||
const sharedSections = [
|
||||
{ key: "detect", i18nNamespace: "config/detect", component: DetectSection },
|
||||
{ key: "record", i18nNamespace: "config/record", component: RecordSection },
|
||||
{
|
||||
key: "snapshots",
|
||||
i18nNamespace: "config/snapshots",
|
||||
component: SnapshotsSection,
|
||||
},
|
||||
{ key: "motion", i18nNamespace: "config/motion", component: MotionSection },
|
||||
{
|
||||
key: "objects",
|
||||
i18nNamespace: "config/objects",
|
||||
component: ObjectsSection,
|
||||
},
|
||||
{ key: "review", i18nNamespace: "config/review", component: ReviewSection },
|
||||
{ key: "audio", i18nNamespace: "config/audio", component: AudioSection },
|
||||
{
|
||||
key: "notifications",
|
||||
i18nNamespace: "config/notifications",
|
||||
component: NotificationsSection,
|
||||
},
|
||||
{ key: "live", i18nNamespace: "config/live", component: LiveSection },
|
||||
{
|
||||
key: "timestamp_style",
|
||||
i18nNamespace: "config/timestamp_style",
|
||||
component: TimestampSection,
|
||||
},
|
||||
];
|
||||
|
||||
// Section configurations for global-only settings (system and integrations)
|
||||
const globalSectionConfigs: Record<
|
||||
string,
|
||||
{ fieldOrder?: string[]; hiddenFields?: string[]; advancedFields?: string[] }
|
||||
{
|
||||
fieldOrder?: string[];
|
||||
hiddenFields?: string[];
|
||||
advancedFields?: string[];
|
||||
i18nNamespace: string;
|
||||
}
|
||||
> = {
|
||||
mqtt: {
|
||||
i18nNamespace: "config/mqtt",
|
||||
fieldOrder: [
|
||||
"enabled",
|
||||
"host",
|
||||
@ -56,10 +93,12 @@ const globalSectionConfigs: Record<
|
||||
],
|
||||
},
|
||||
database: {
|
||||
i18nNamespace: "config/database",
|
||||
fieldOrder: ["path"],
|
||||
advancedFields: [],
|
||||
},
|
||||
auth: {
|
||||
i18nNamespace: "config/auth",
|
||||
fieldOrder: [
|
||||
"enabled",
|
||||
"reset_admin_password",
|
||||
@ -70,14 +109,17 @@ const globalSectionConfigs: Record<
|
||||
advancedFields: ["failed_login_rate_limit", "trusted_proxies"],
|
||||
},
|
||||
tls: {
|
||||
i18nNamespace: "config/tls",
|
||||
fieldOrder: ["enabled", "cert", "key"],
|
||||
advancedFields: [],
|
||||
},
|
||||
telemetry: {
|
||||
i18nNamespace: "config/telemetry",
|
||||
fieldOrder: ["network_interfaces", "stats", "version_check"],
|
||||
advancedFields: ["stats"],
|
||||
},
|
||||
birdseye: {
|
||||
i18nNamespace: "config/birdseye",
|
||||
fieldOrder: [
|
||||
"enabled",
|
||||
"restream",
|
||||
@ -91,14 +133,17 @@ const globalSectionConfigs: Record<
|
||||
advancedFields: ["width", "height", "quality", "inactivity_threshold"],
|
||||
},
|
||||
semantic_search: {
|
||||
i18nNamespace: "config/semantic_search",
|
||||
fieldOrder: ["enabled", "reindex", "model_size"],
|
||||
advancedFields: ["reindex"],
|
||||
},
|
||||
face_recognition: {
|
||||
i18nNamespace: "config/face_recognition",
|
||||
fieldOrder: ["enabled", "threshold", "min_area", "model_size"],
|
||||
advancedFields: ["threshold", "min_area"],
|
||||
},
|
||||
lpr: {
|
||||
i18nNamespace: "config/lpr",
|
||||
fieldOrder: [
|
||||
"enabled",
|
||||
"threshold",
|
||||
@ -111,6 +156,17 @@ const globalSectionConfigs: Record<
|
||||
},
|
||||
};
|
||||
|
||||
// System sections (global only)
|
||||
const systemSections = ["database", "tls", "auth", "telemetry", "birdseye"];
|
||||
|
||||
// Integration sections (global only)
|
||||
const integrationSections = [
|
||||
"mqtt",
|
||||
"semantic_search",
|
||||
"face_recognition",
|
||||
"lpr",
|
||||
];
|
||||
|
||||
interface GlobalConfigSectionProps {
|
||||
sectionKey: string;
|
||||
schema: RJSFSchema | null;
|
||||
@ -118,13 +174,23 @@ interface GlobalConfigSectionProps {
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
function GlobalConfigSection({
|
||||
const GlobalConfigSection = memo(function GlobalConfigSection({
|
||||
sectionKey,
|
||||
schema,
|
||||
config,
|
||||
onSave,
|
||||
}: GlobalConfigSectionProps) {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
const sectionConfig = globalSectionConfigs[sectionKey];
|
||||
const { t } = useTranslation([
|
||||
sectionConfig?.i18nNamespace || "common",
|
||||
"views/settings",
|
||||
"common",
|
||||
]);
|
||||
const [pendingData, setPendingData] = useState<Record<
|
||||
string,
|
||||
unknown
|
||||
> | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const formData = useMemo((): Record<string, unknown> => {
|
||||
if (!config) return {} as Record<string, unknown>;
|
||||
@ -134,67 +200,118 @@ function GlobalConfigSection({
|
||||
);
|
||||
}, [config, sectionKey]);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (data: Record<string, unknown>) => {
|
||||
try {
|
||||
await axios.put("config/set", {
|
||||
requires_restart: 1,
|
||||
config_data: {
|
||||
[sectionKey]: data,
|
||||
},
|
||||
});
|
||||
const hasChanges = useMemo(() => {
|
||||
if (!pendingData) return false;
|
||||
return !isEqual(formData, pendingData);
|
||||
}, [formData, pendingData]);
|
||||
|
||||
toast.success(
|
||||
t(`configForm.${sectionKey}.toast.success`, {
|
||||
defaultValue: "Settings saved successfully",
|
||||
}),
|
||||
);
|
||||
const handleChange = useCallback((data: Record<string, unknown>) => {
|
||||
setPendingData(data);
|
||||
}, []);
|
||||
|
||||
onSave();
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
t(`configForm.${sectionKey}.toast.error`, {
|
||||
defaultValue: "Failed to save settings",
|
||||
}),
|
||||
);
|
||||
}
|
||||
},
|
||||
[sectionKey, t, onSave],
|
||||
);
|
||||
const handleSave = useCallback(async () => {
|
||||
if (!pendingData) return;
|
||||
|
||||
if (!schema) {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await axios.put("config/set", {
|
||||
requires_restart: 1,
|
||||
config_data: {
|
||||
[sectionKey]: pendingData,
|
||||
},
|
||||
});
|
||||
|
||||
toast.success(
|
||||
t("toast.success", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "Settings saved successfully",
|
||||
}),
|
||||
);
|
||||
|
||||
setPendingData(null);
|
||||
onSave();
|
||||
} catch {
|
||||
toast.error(
|
||||
t("toast.error", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "Failed to save settings",
|
||||
}),
|
||||
);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}, [sectionKey, pendingData, t, onSave]);
|
||||
|
||||
if (!schema || !sectionConfig) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sectionConfig = globalSectionConfigs[sectionKey] || {};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">
|
||||
{t(`configForm.${sectionKey}.title`, {
|
||||
defaultValue:
|
||||
sectionKey.charAt(0).toUpperCase() + sectionKey.slice(1),
|
||||
})}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ConfigForm
|
||||
schema={schema}
|
||||
formData={formData}
|
||||
onSubmit={handleSubmit}
|
||||
fieldOrder={sectionConfig.fieldOrder}
|
||||
hiddenFields={sectionConfig.hiddenFields}
|
||||
advancedFields={sectionConfig.advancedFields}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="space-y-4">
|
||||
<ConfigForm
|
||||
schema={schema}
|
||||
formData={pendingData || formData}
|
||||
onChange={handleChange}
|
||||
fieldOrder={sectionConfig.fieldOrder}
|
||||
hiddenFields={sectionConfig.hiddenFields}
|
||||
advancedFields={sectionConfig.advancedFields}
|
||||
showSubmit={false}
|
||||
i18nNamespace={sectionConfig.i18nNamespace}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div>
|
||||
{hasChanges && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("unsavedChanges", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "You have unsaved changes",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!hasChanges || isSaving}
|
||||
className="gap-2"
|
||||
>
|
||||
<LuSave className="h-4 w-4" />
|
||||
{isSaving
|
||||
? t("saving", { ns: "common", defaultValue: "Saving..." })
|
||||
: t("save", { ns: "common", defaultValue: "Save" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default function GlobalConfigView() {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
const { t } = useTranslation([
|
||||
"views/settings",
|
||||
"config/detect",
|
||||
"config/record",
|
||||
"config/snapshots",
|
||||
"config/motion",
|
||||
"config/objects",
|
||||
"config/review",
|
||||
"config/audio",
|
||||
"config/notifications",
|
||||
"config/live",
|
||||
"config/timestamp_style",
|
||||
"config/mqtt",
|
||||
"config/database",
|
||||
"config/auth",
|
||||
"config/tls",
|
||||
"config/telemetry",
|
||||
"config/birdseye",
|
||||
"config/semantic_search",
|
||||
"config/face_recognition",
|
||||
"config/lpr",
|
||||
"common",
|
||||
]);
|
||||
const [activeTab, setActiveTab] = useState("shared");
|
||||
const [activeSection, setActiveSection] = useState("detect");
|
||||
|
||||
const { data: config, mutate: refreshConfig } =
|
||||
useSWR<FrigateConfig>("config");
|
||||
@ -204,6 +321,37 @@ export default function GlobalConfigView() {
|
||||
refreshConfig();
|
||||
}, [refreshConfig]);
|
||||
|
||||
// Get the sections for the current tab
|
||||
const currentSections = useMemo(() => {
|
||||
if (activeTab === "shared") {
|
||||
return sharedSections;
|
||||
} else if (activeTab === "system") {
|
||||
return systemSections.map((key) => ({
|
||||
key,
|
||||
i18nNamespace: globalSectionConfigs[key].i18nNamespace,
|
||||
component: null, // Uses GlobalConfigSection instead
|
||||
}));
|
||||
} else {
|
||||
return integrationSections.map((key) => ({
|
||||
key,
|
||||
i18nNamespace: globalSectionConfigs[key].i18nNamespace,
|
||||
component: null,
|
||||
}));
|
||||
}
|
||||
}, [activeTab]);
|
||||
|
||||
// Reset active section when tab changes
|
||||
const handleTabChange = useCallback((tab: string) => {
|
||||
setActiveTab(tab);
|
||||
if (tab === "shared") {
|
||||
setActiveSection("detect");
|
||||
} else if (tab === "system") {
|
||||
setActiveSection("database");
|
||||
} else {
|
||||
setActiveSection("mqtt");
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!config || !schema) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
@ -213,14 +361,14 @@ export default function GlobalConfigView() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">
|
||||
<div className="flex size-full flex-col">
|
||||
<div className="mb-4">
|
||||
<Heading as="h2">
|
||||
{t("configForm.global.title", {
|
||||
defaultValue: "Global Configuration",
|
||||
})}
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
</Heading>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("configForm.global.description", {
|
||||
defaultValue:
|
||||
"Configure global settings that apply to all cameras by default.",
|
||||
@ -228,7 +376,11 @@ export default function GlobalConfigView() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={handleTabChange}
|
||||
className="flex flex-1 flex-col overflow-hidden"
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="shared">
|
||||
{t("configForm.global.tabs.shared", {
|
||||
@ -245,83 +397,126 @@ export default function GlobalConfigView() {
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<ScrollArea className="h-[calc(100vh-300px)]">
|
||||
<TabsContent value="shared" className="space-y-6 p-1">
|
||||
{/* Shared config sections - these can be overridden per camera */}
|
||||
<DetectSection level="global" onSave={handleSave} />
|
||||
<RecordSection level="global" onSave={handleSave} />
|
||||
<SnapshotsSection level="global" onSave={handleSave} />
|
||||
<MotionSection level="global" onSave={handleSave} />
|
||||
<ObjectsSection level="global" onSave={handleSave} />
|
||||
<ReviewSection level="global" onSave={handleSave} />
|
||||
<AudioSection level="global" onSave={handleSave} />
|
||||
<NotificationsSection level="global" onSave={handleSave} />
|
||||
<LiveSection level="global" onSave={handleSave} />
|
||||
<TimestampSection level="global" onSave={handleSave} />
|
||||
</TabsContent>
|
||||
<div className="mt-4 flex flex-1 gap-6 overflow-hidden">
|
||||
{/* Section Navigation */}
|
||||
<nav className="w-48 shrink-0">
|
||||
<ul className="space-y-1">
|
||||
{currentSections.map((section) => {
|
||||
const sectionLabel = t("label", {
|
||||
ns: section.i18nNamespace,
|
||||
defaultValue:
|
||||
section.key.charAt(0).toUpperCase() +
|
||||
section.key.slice(1).replace(/_/g, " "),
|
||||
});
|
||||
|
||||
<TabsContent value="system" className="space-y-6 p-1">
|
||||
{/* System configuration sections */}
|
||||
<GlobalConfigSection
|
||||
sectionKey="database"
|
||||
schema={extractSchemaSection(schema, "database")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
<GlobalConfigSection
|
||||
sectionKey="tls"
|
||||
schema={extractSchemaSection(schema, "tls")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
<GlobalConfigSection
|
||||
sectionKey="auth"
|
||||
schema={extractSchemaSection(schema, "auth")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
<GlobalConfigSection
|
||||
sectionKey="telemetry"
|
||||
schema={extractSchemaSection(schema, "telemetry")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
<GlobalConfigSection
|
||||
sectionKey="birdseye"
|
||||
schema={extractSchemaSection(schema, "birdseye")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</TabsContent>
|
||||
return (
|
||||
<li key={section.key}>
|
||||
<button
|
||||
onClick={() => setActiveSection(section.key)}
|
||||
className={cn(
|
||||
"flex w-full items-center justify-between rounded-md px-3 py-2 text-sm transition-colors",
|
||||
activeSection === section.key
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "hover:bg-muted",
|
||||
)}
|
||||
>
|
||||
<span>{sectionLabel}</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<TabsContent value="integrations" className="space-y-6 p-1">
|
||||
{/* Integration configuration sections */}
|
||||
<GlobalConfigSection
|
||||
sectionKey="mqtt"
|
||||
schema={extractSchemaSection(schema, "mqtt")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
<GlobalConfigSection
|
||||
sectionKey="semantic_search"
|
||||
schema={extractSchemaSection(schema, "semantic_search")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
<GlobalConfigSection
|
||||
sectionKey="face_recognition"
|
||||
schema={extractSchemaSection(schema, "face_recognition")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
<GlobalConfigSection
|
||||
sectionKey="lpr"
|
||||
schema={extractSchemaSection(schema, "lpr")}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</TabsContent>
|
||||
</ScrollArea>
|
||||
{/* Section Content */}
|
||||
<div className="scrollbar-container flex-1 overflow-y-auto pr-4">
|
||||
{activeTab === "shared" && (
|
||||
<>
|
||||
{sharedSections.map((section) => {
|
||||
const SectionComponent = section.component;
|
||||
return (
|
||||
<div
|
||||
key={section.key}
|
||||
className={cn(
|
||||
activeSection === section.key ? "block" : "hidden",
|
||||
)}
|
||||
>
|
||||
<Heading as="h4" className="mb-4">
|
||||
{t("label", {
|
||||
ns: section.i18nNamespace,
|
||||
defaultValue:
|
||||
section.key.charAt(0).toUpperCase() +
|
||||
section.key.slice(1).replace(/_/g, " "),
|
||||
})}
|
||||
</Heading>
|
||||
<SectionComponent
|
||||
level="global"
|
||||
onSave={handleSave}
|
||||
showTitle={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === "system" && (
|
||||
<>
|
||||
{systemSections.map((sectionKey) => (
|
||||
<div
|
||||
key={sectionKey}
|
||||
className={cn(
|
||||
activeSection === sectionKey ? "block" : "hidden",
|
||||
)}
|
||||
>
|
||||
<Heading as="h4" className="mb-4">
|
||||
{t("label", {
|
||||
ns: globalSectionConfigs[sectionKey].i18nNamespace,
|
||||
defaultValue:
|
||||
sectionKey.charAt(0).toUpperCase() +
|
||||
sectionKey.slice(1).replace(/_/g, " "),
|
||||
})}
|
||||
</Heading>
|
||||
<GlobalConfigSection
|
||||
sectionKey={sectionKey}
|
||||
schema={extractSchemaSection(schema, sectionKey)}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === "integrations" && (
|
||||
<>
|
||||
{integrationSections.map((sectionKey) => (
|
||||
<div
|
||||
key={sectionKey}
|
||||
className={cn(
|
||||
activeSection === sectionKey ? "block" : "hidden",
|
||||
)}
|
||||
>
|
||||
<Heading as="h4" className="mb-4">
|
||||
{t("label", {
|
||||
ns: globalSectionConfigs[sectionKey].i18nNamespace,
|
||||
defaultValue:
|
||||
sectionKey.charAt(0).toUpperCase() +
|
||||
sectionKey.slice(1).replace(/_/g, " "),
|
||||
})}
|
||||
</Heading>
|
||||
<GlobalConfigSection
|
||||
sectionKey={sectionKey}
|
||||
schema={extractSchemaSection(schema, sectionKey)}
|
||||
config={config}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user