mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-03-10 10:33:11 +03:00
fix array field template
This commit is contained in:
parent
ab727089d2
commit
0b148d66f3
@ -1123,6 +1123,14 @@
|
||||
}
|
||||
},
|
||||
"configForm": {
|
||||
"global": {
|
||||
"title": "Global Settings",
|
||||
"description": "These settings apply to all cameras unless overridden in the camera-specific settings."
|
||||
},
|
||||
"camera": {
|
||||
"title": "Camera Settings",
|
||||
"description": "These settings apply only to this camera and override the global settings."
|
||||
},
|
||||
"showAdvanced": "Show Advanced Settings",
|
||||
"tabs": {
|
||||
"sharedDefaults": "Shared Defaults",
|
||||
|
||||
@ -17,6 +17,7 @@ export const ReviewSection = createConfigSection({
|
||||
"detections.labels",
|
||||
"detections.enabled_in_config",
|
||||
"detections.required_zones",
|
||||
"genai.enabled_in_config",
|
||||
],
|
||||
advancedFields: [],
|
||||
},
|
||||
|
||||
@ -22,6 +22,7 @@ import { SwitchesWidget } from "./widgets/SwitchesWidget";
|
||||
import { ObjectLabelSwitchesWidget } from "./widgets/ObjectLabelSwitchesWidget";
|
||||
import { AudioLabelSwitchesWidget } from "./widgets/AudioLabelSwitchesWidget";
|
||||
import { ZoneSwitchesWidget } from "./widgets/ZoneSwitchesWidget";
|
||||
import { ArrayAsTextWidget } from "./widgets/ArrayAsTextWidget";
|
||||
|
||||
import { FieldTemplate } from "./templates/FieldTemplate";
|
||||
import { ObjectFieldTemplate } from "./templates/ObjectFieldTemplate";
|
||||
@ -48,6 +49,7 @@ export const frigateTheme: FrigateTheme = {
|
||||
PasswordWidget: PasswordWidget,
|
||||
SelectWidget: SelectWidget,
|
||||
CheckboxWidget: SwitchWidget,
|
||||
ArrayAsTextWidget: ArrayAsTextWidget,
|
||||
// Custom widgets
|
||||
switch: SwitchWidget,
|
||||
password: PasswordWidget,
|
||||
|
||||
@ -1,19 +1,10 @@
|
||||
// Array Field Template - renders array fields with add/remove controls
|
||||
import type { ArrayFieldTemplateProps } from "@rjsf/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { LuPlus, LuTrash2, LuGripVertical } from "react-icons/lu";
|
||||
import { LuPlus } from "react-icons/lu";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ArrayItem {
|
||||
key: string;
|
||||
index: number;
|
||||
children: React.ReactNode;
|
||||
hasRemove: boolean;
|
||||
onDropIndexClick: (index: number) => () => void;
|
||||
}
|
||||
|
||||
export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
|
||||
const { items, canAdd, onAddClick, disabled, readonly, schema } = props;
|
||||
|
||||
@ -36,52 +27,20 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
|
||||
</p>
|
||||
)}
|
||||
|
||||
{(items as unknown as ArrayItem[]).map((element: ArrayItem) => (
|
||||
<div
|
||||
key={element.key}
|
||||
className={cn("flex items-start gap-2", !isSimpleType && "flex-col")}
|
||||
>
|
||||
{isSimpleType ? (
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<LuGripVertical className="h-4 w-4 cursor-move text-muted-foreground" />
|
||||
<div className="flex-1">{element.children}</div>
|
||||
{element.hasRemove && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={element.onDropIndexClick(element.index)}
|
||||
disabled={disabled || readonly}
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
>
|
||||
<LuTrash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="w-full">
|
||||
<CardContent className="pt-4">
|
||||
<div className="flex items-start gap-2">
|
||||
<LuGripVertical className="mt-2 h-4 w-4 cursor-move text-muted-foreground" />
|
||||
<div className="flex-1">{element.children}</div>
|
||||
{element.hasRemove && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={element.onDropIndexClick(element.index)}
|
||||
disabled={disabled || readonly}
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
>
|
||||
<LuTrash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{items.map((element, index) => {
|
||||
// RJSF items are pre-rendered React elements, render them directly
|
||||
return (
|
||||
<div
|
||||
key={element.key || index}
|
||||
className={cn(
|
||||
"flex items-start gap-2",
|
||||
!isSimpleType && "flex-col",
|
||||
)}
|
||||
>
|
||||
{element}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{canAdd && (
|
||||
<Button
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
// Widget that displays an array as a concatenated text string
|
||||
import type { WidgetProps } from "@rjsf/utils";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useCallback } from "react";
|
||||
|
||||
export function ArrayAsTextWidget(props: WidgetProps) {
|
||||
const { value, onChange, disabled, readonly, placeholder } = props;
|
||||
|
||||
// Convert array to space-separated string
|
||||
const textValue =
|
||||
Array.isArray(value) && value.length > 0 ? value.join(" ") : "";
|
||||
|
||||
const handleChange = useCallback(
|
||||
(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newText = event.target.value;
|
||||
// Convert space-separated string back to array
|
||||
const newArray = newText.trim() ? newText.trim().split(/\s+/) : [];
|
||||
onChange(newArray);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<Input
|
||||
value={textValue}
|
||||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
readOnly={readonly}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -62,6 +62,7 @@ const globalSectionConfigs: Record<
|
||||
advancedFields?: string[];
|
||||
liveValidate?: boolean;
|
||||
i18nNamespace: string;
|
||||
uiSchema?: Record<string, unknown>;
|
||||
}
|
||||
> = {
|
||||
mqtt: {
|
||||
@ -122,6 +123,11 @@ const globalSectionConfigs: Record<
|
||||
"hash_iterations",
|
||||
"roles",
|
||||
],
|
||||
uiSchema: {
|
||||
reset_admin_password: {
|
||||
"ui:widget": "switch",
|
||||
},
|
||||
},
|
||||
},
|
||||
tls: {
|
||||
i18nNamespace: "config/tls",
|
||||
@ -207,6 +213,44 @@ const globalSectionConfigs: Record<
|
||||
"apple_compatibility",
|
||||
"gpu",
|
||||
],
|
||||
uiSchema: {
|
||||
global_args: {
|
||||
"ui:widget": "ArrayAsTextWidget",
|
||||
"ui:options": {
|
||||
suppressMultiSchema: true,
|
||||
},
|
||||
},
|
||||
hwaccel_args: {
|
||||
"ui:widget": "ArrayAsTextWidget",
|
||||
"ui:options": {
|
||||
suppressMultiSchema: true,
|
||||
},
|
||||
},
|
||||
input_args: {
|
||||
"ui:widget": "ArrayAsTextWidget",
|
||||
"ui:options": {
|
||||
suppressMultiSchema: true,
|
||||
},
|
||||
},
|
||||
output_args: {
|
||||
"ui:widget": "ArrayAsTextWidget",
|
||||
"ui:options": {
|
||||
suppressMultiSchema: true,
|
||||
},
|
||||
detect: {
|
||||
"ui:widget": "ArrayAsTextWidget",
|
||||
"ui:options": {
|
||||
suppressMultiSchema: true,
|
||||
},
|
||||
},
|
||||
record: {
|
||||
"ui:widget": "ArrayAsTextWidget",
|
||||
"ui:options": {
|
||||
suppressMultiSchema: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
detectors: {
|
||||
i18nNamespace: "config/detectors",
|
||||
@ -247,10 +291,11 @@ const globalSectionConfigs: Record<
|
||||
"runtime_options",
|
||||
],
|
||||
advancedFields: ["base_url", "provider_options", "runtime_options"],
|
||||
hiddenFields: ["genai.enabled_in_config"],
|
||||
},
|
||||
classification: {
|
||||
i18nNamespace: "config/classification",
|
||||
fieldOrder: ["bird", "custom"],
|
||||
hiddenFields: ["custom"],
|
||||
advancedFields: [],
|
||||
},
|
||||
semantic_search: {
|
||||
@ -318,11 +363,6 @@ const globalSectionConfigs: Record<
|
||||
"replace_rules",
|
||||
],
|
||||
},
|
||||
go2rtc: {
|
||||
i18nNamespace: "config/go2rtc",
|
||||
fieldOrder: [],
|
||||
advancedFields: [],
|
||||
},
|
||||
};
|
||||
|
||||
// System sections (global only)
|
||||
@ -341,7 +381,6 @@ const systemSections = [
|
||||
"detectors",
|
||||
"model",
|
||||
"classification",
|
||||
"go2rtc",
|
||||
];
|
||||
|
||||
// Integration sections (global only)
|
||||
@ -481,6 +520,7 @@ function GlobalConfigSection({
|
||||
hiddenFields={sectionConfig.hiddenFields}
|
||||
advancedFields={sectionConfig.advancedFields}
|
||||
liveValidate={sectionConfig.liveValidate}
|
||||
uiSchema={sectionConfig.uiSchema}
|
||||
showSubmit={false}
|
||||
i18nNamespace={sectionConfig.i18nNamespace}
|
||||
disabled={isSaving}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user