mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-02 09:02:15 +03:00
Camera profile support (#22482)
* add CameraProfileConfig model for named config overrides * add profiles field to CameraConfig * add active_profile field to FrigateConfig Runtime-only field excluded from YAML serialization, tracks which profile is currently active. * add ProfileManager for profile activation and persistence Handles snapshotting base configs, applying profile overrides via deep_merge + apply_section_update, publishing ZMQ updates, and persisting active profile to /config/.active_profile. * add profile API endpoints (GET /profiles, GET/PUT /profile) * add MQTT and dispatcher integration for profiles - Subscribe to frigate/profile/set MQTT topic - Publish profile/state and profiles/available on connect - Add _on_profile_command handler to dispatcher - Broadcast active profile state on WebSocket connect * wire ProfileManager into app startup and FastAPI - Create ProfileManager after dispatcher init - Restore persisted profile on startup - Pass dispatcher and profile_manager to FastAPI app * add tests for invalid profile values and keys Tests that Pydantic rejects: invalid field values (fps: "not_a_number"), unknown section keys (ffmpeg in profile), invalid nested values, and invalid profiles in full config parsing. * formatting * fix CameraLiveConfig JSON serialization error on profile activation refactor _publish_updates to only publish ZMQ updates for sections that actually changed, not all sections on affected cameras. * consolidate * add enabled field to camera profiles for enabling/disabling cameras * add zones support to camera profiles * add frontend profile types, color utility, and config save support * add profile state management and save preview support * add profileName prop to BaseSection for profile-aware config editing * add profile section dropdown and wire into camera settings pages * add per-profile camera enable/disable to Camera Management view * add profiles summary page with card-based layout and fix backend zone comparison bug * add active profile badge to settings toolbar * i18n * add red dot for any pending changes including profiles * profile support for mask and zone editor * fix hidden field validation errors caused by lodash wildcard and schema gaps lodash unset does not support wildcard (*) segments, so hidden fields like filters.*.mask were never stripped from form data, leaving null raw_coordinates that fail RJSF anyOf validation. Add unsetWithWildcard helper and also strip hidden fields from the JSON schema itself as defense-in-depth. * add face_recognition and lpr to profile-eligible sections * move profile dropdown from section panes to settings header * add profiles enable toggle and improve empty state * formatting * tweaks * tweak colors and switch * fix profile save diff, masksAndZones delete, and config sync * ui tweaks * ensure profile manager gets updated config * rename profile settings to ui settings * refactor profilesview and add dots/border colors when overridden * implement an update_config method for profile manager * fix mask deletion * more unique colors * add top-level profiles config section with friendly names * implement profile friendly names and improve profile UI - Add ProfileDefinitionConfig type and profiles field to FrigateConfig - Use ProfilesApiResponse type with friendly_name support throughout - Replace Record<string, unknown> with proper JsonObject/JsonValue types - Add profile creation form matching zone pattern (Zod + NameAndIdFields) - Add pencil icon for renaming profile friendly names in ProfilesView - Move Profiles menu item to first under Camera Configuration - Add activity indicators on save/rename/delete buttons - Display friendly names in CameraManagementView profile selector - Fix duplicate colored dots in management profile dropdown - Fix i18n namespace for overridden base config tooltips - Move profile override deletion from dropdown trash icon to footer button with confirmation dialog, matching Reset to Global pattern - Remove Add Profile from section header dropdown to prevent saving camera overrides before top-level profile definition exists - Clean up newProfiles state after API profile deletion - Refresh profiles SWR cache after saving profile definitions * remove profile badge in settings and add profiles to main menu * use icon only on mobile * change color order * docs * show activity indicator on trash icon while deleting a profile * tweak language * immediately create profiles on backend instead of deferring to Save All * hide restart-required fields when editing a profile section fields that require a restart cannot take effect via profile switching, so they are merged into hiddenFields when profileName is set * show active profile indicator in desktop status bar * fix profile config inheritance bug where Pydantic defaults override base values The /config API was dumping profile overrides with model_dump() which included all Pydantic defaults. When the frontend merged these over the camera's base config, explicitly-set base values were lost. Now profile overrides are re-dumped with exclude_unset=True so only user-specified fields are returned. Also fixes the Save All path generating spurious deletion markers for restart-required fields that are hidden during profile editing but not excluded from the raw data sanitization in prepareSectionSavePayload. * docs tweaks * docs tweak * formatting * formatting * fix typing * fix test pollution test_maintainer was injecting MagicMock() into sys.modules["frigate.config.camera.updater"] at module load time and never restoring it. When the profile tests later imported CameraConfigUpdateEnum and CameraConfigUpdateTopic from that module, they got mock objects instead of the real dataclass/enum, so equality comparisons always failed * remove * fix settings showing profile-merged values when editing base config When a profile is active, the in-memory config contains effective (profile-merged) values. The settings UI was displaying these merged values even when the "Base Config" view was selected. Backend: snapshot pre-profile base configs in ProfileManager and expose them via a `base_config` key in the /api/config camera response when a profile is active. The top-level sections continue to reflect the effective running config. Frontend: read from `base_config` when available in BaseSection, useConfigOverride, useAllCameraOverrides, and prepareSectionSavePayload. Include formData labels in Object/Audio switches widgets so that labels added only by a profile override remain visible when editing that profile. * use rasterized_mask as field makes it easier to exclude from the schema with exclude=True prevents leaking of the field when using model_dump for profiles * fix zones - Fix zone colors not matching across profiles by falling back to base zone color when profile zone data lacks a color field - Use base_config for base-layer values in masks/zones view so profile-merged values don't pollute the base config editing view - Handle zones separately in profile manager snapshot/restore since ZoneConfig requires special serialization (color as private attr, contour generation) - Inherit base zone color and generate contours for profile zone overrides in profile manager * formatting * don't require restart for camera enabled change for profiles * publish camera state when changing profiles * formatting * remove available profiles from mqtt * improve typing
This commit is contained in:
Josh Hawkins
@@ -0,0 +1,733 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useForm, FormProvider } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import useSWR from "swr";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { Pencil, Trash2 } from "lucide-react";
|
||||
import { LuChevronDown, LuChevronRight, LuPlus } from "react-icons/lu";
|
||||
import type { FrigateConfig } from "@/types/frigateConfig";
|
||||
import type { JsonObject } from "@/types/configForm";
|
||||
import type { ProfileState, ProfilesApiResponse } from "@/types/profile";
|
||||
import { getProfileColor } from "@/utils/profileColors";
|
||||
import { PROFILE_ELIGIBLE_SECTIONS } from "@/utils/configUtil";
|
||||
import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import NameAndIdFields from "@/components/input/NameAndIdFields";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
|
||||
type ProfilesViewProps = {
|
||||
setUnsavedChanges?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
profileState?: ProfileState;
|
||||
profilesUIEnabled?: boolean;
|
||||
setProfilesUIEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
export default function ProfilesView({
|
||||
profileState,
|
||||
profilesUIEnabled,
|
||||
setProfilesUIEnabled,
|
||||
}: ProfilesViewProps) {
|
||||
const { t } = useTranslation(["views/settings", "common"]);
|
||||
const { data: config, mutate: updateConfig } =
|
||||
useSWR<FrigateConfig>("config");
|
||||
const { data: profilesData, mutate: updateProfiles } =
|
||||
useSWR<ProfilesApiResponse>("profiles");
|
||||
|
||||
const [activating, setActivating] = useState(false);
|
||||
const [deleteProfile, setDeleteProfile] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [renameProfile, setRenameProfile] = useState<string | null>(null);
|
||||
const [renameValue, setRenameValue] = useState("");
|
||||
const [renaming, setRenaming] = useState(false);
|
||||
const [expandedProfiles, setExpandedProfiles] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [addDialogOpen, setAddDialogOpen] = useState(false);
|
||||
|
||||
const allProfileNames = useMemo(
|
||||
() => profileState?.allProfileNames ?? [],
|
||||
[profileState?.allProfileNames],
|
||||
);
|
||||
|
||||
const addProfileSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(2, {
|
||||
message: t("profiles.error.mustBeAtLeastTwoCharacters", {
|
||||
ns: "views/settings",
|
||||
}),
|
||||
})
|
||||
.refine((value) => !value.includes("."), {
|
||||
message: t("profiles.error.mustNotContainPeriod", {
|
||||
ns: "views/settings",
|
||||
}),
|
||||
})
|
||||
.refine((value) => !allProfileNames.includes(value), {
|
||||
message: t("profiles.error.alreadyExists", {
|
||||
ns: "views/settings",
|
||||
}),
|
||||
}),
|
||||
friendly_name: z.string().min(2, {
|
||||
message: t("profiles.error.mustBeAtLeastTwoCharacters", {
|
||||
ns: "views/settings",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
[t, allProfileNames],
|
||||
);
|
||||
|
||||
type AddProfileForm = z.infer<typeof addProfileSchema>;
|
||||
const addForm = useForm<AddProfileForm>({
|
||||
resolver: zodResolver(addProfileSchema),
|
||||
defaultValues: { friendly_name: "", name: "" },
|
||||
});
|
||||
|
||||
const profileFriendlyNames = profileState?.profileFriendlyNames;
|
||||
|
||||
useEffect(() => {
|
||||
document.title = t("documentTitle.profiles", {
|
||||
ns: "views/settings",
|
||||
});
|
||||
}, [t]);
|
||||
|
||||
const activeProfile = profilesData?.active_profile ?? null;
|
||||
|
||||
// Build overview data: for each profile, which cameras have which sections
|
||||
const profileOverviewData = useMemo(() => {
|
||||
if (!config || allProfileNames.length === 0) return {};
|
||||
|
||||
const data: Record<string, Record<string, string[]>> = {};
|
||||
const cameras = Object.keys(config.cameras).sort();
|
||||
|
||||
for (const profile of allProfileNames) {
|
||||
data[profile] = {};
|
||||
for (const camera of cameras) {
|
||||
const profileData = config.cameras[camera]?.profiles?.[profile];
|
||||
if (!profileData) continue;
|
||||
|
||||
const sections: string[] = [];
|
||||
for (const section of PROFILE_ELIGIBLE_SECTIONS) {
|
||||
if (
|
||||
profileData[section as keyof typeof profileData] !== undefined &&
|
||||
profileData[section as keyof typeof profileData] !== null
|
||||
) {
|
||||
sections.push(section);
|
||||
}
|
||||
}
|
||||
if (profileData.enabled !== undefined && profileData.enabled !== null) {
|
||||
sections.push("enabled");
|
||||
}
|
||||
if (sections.length > 0) {
|
||||
data[profile][camera] = sections;
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}, [config, allProfileNames]);
|
||||
|
||||
const [addingProfile, setAddingProfile] = useState(false);
|
||||
|
||||
const handleAddSubmit = useCallback(
|
||||
async (data: AddProfileForm) => {
|
||||
const id = data.name.trim();
|
||||
const friendlyName = data.friendly_name.trim();
|
||||
if (!id || !friendlyName) return;
|
||||
|
||||
setAddingProfile(true);
|
||||
try {
|
||||
await axios.put("config/set", {
|
||||
requires_restart: 0,
|
||||
config_data: {
|
||||
profiles: { [id]: { friendly_name: friendlyName } },
|
||||
},
|
||||
});
|
||||
await updateConfig();
|
||||
await updateProfiles();
|
||||
toast.success(
|
||||
t("profiles.createSuccess", {
|
||||
ns: "views/settings",
|
||||
profile: friendlyName,
|
||||
}),
|
||||
{ position: "top-center" },
|
||||
);
|
||||
setAddDialogOpen(false);
|
||||
addForm.reset();
|
||||
} catch {
|
||||
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
} finally {
|
||||
setAddingProfile(false);
|
||||
}
|
||||
},
|
||||
[updateConfig, updateProfiles, addForm, t],
|
||||
);
|
||||
|
||||
const handleActivateProfile = useCallback(
|
||||
async (profile: string | null) => {
|
||||
setActivating(true);
|
||||
try {
|
||||
await axios.put("profile/set", {
|
||||
profile: profile || null,
|
||||
});
|
||||
await updateProfiles();
|
||||
toast.success(
|
||||
profile
|
||||
? t("profiles.activated", {
|
||||
ns: "views/settings",
|
||||
profile: profileFriendlyNames?.get(profile) ?? profile,
|
||||
})
|
||||
: t("profiles.deactivated", { ns: "views/settings" }),
|
||||
{ position: "top-center" },
|
||||
);
|
||||
} catch (err) {
|
||||
const message =
|
||||
axios.isAxiosError(err) && err.response?.data?.message
|
||||
? String(err.response.data.message)
|
||||
: undefined;
|
||||
toast.error(
|
||||
message || t("profiles.activateFailed", { ns: "views/settings" }),
|
||||
{ position: "top-center" },
|
||||
);
|
||||
} finally {
|
||||
setActivating(false);
|
||||
}
|
||||
},
|
||||
[updateProfiles, profileFriendlyNames, t],
|
||||
);
|
||||
|
||||
const handleDeleteProfile = useCallback(async () => {
|
||||
if (!deleteProfile || !config) return;
|
||||
|
||||
setDeleting(true);
|
||||
|
||||
try {
|
||||
// If this profile is active, deactivate it first
|
||||
if (activeProfile === deleteProfile) {
|
||||
await axios.put("profile/set", { profile: null });
|
||||
}
|
||||
|
||||
// Remove the profile from all cameras and the top-level definition
|
||||
const cameraData: JsonObject = {};
|
||||
for (const camera of Object.keys(config.cameras)) {
|
||||
if (config.cameras[camera]?.profiles?.[deleteProfile]) {
|
||||
cameraData[camera] = {
|
||||
profiles: { [deleteProfile]: "" },
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const configData: JsonObject = {
|
||||
profiles: { [deleteProfile]: "" },
|
||||
};
|
||||
if (Object.keys(cameraData).length > 0) {
|
||||
configData.cameras = cameraData;
|
||||
}
|
||||
|
||||
await axios.put("config/set", {
|
||||
requires_restart: 0,
|
||||
config_data: configData,
|
||||
});
|
||||
|
||||
await updateConfig();
|
||||
await updateProfiles();
|
||||
|
||||
toast.success(
|
||||
t("profiles.deleteSuccess", {
|
||||
ns: "views/settings",
|
||||
profile: profileFriendlyNames?.get(deleteProfile) ?? deleteProfile,
|
||||
}),
|
||||
{ position: "top-center" },
|
||||
);
|
||||
} catch (err) {
|
||||
const errorMessage =
|
||||
axios.isAxiosError(err) && err.response?.data?.message
|
||||
? String(err.response.data.message)
|
||||
: undefined;
|
||||
toast.error(
|
||||
errorMessage || t("toast.save.error.noMessage", { ns: "common" }),
|
||||
{ position: "top-center" },
|
||||
);
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
setDeleteProfile(null);
|
||||
}
|
||||
}, [
|
||||
deleteProfile,
|
||||
activeProfile,
|
||||
config,
|
||||
profileFriendlyNames,
|
||||
updateConfig,
|
||||
updateProfiles,
|
||||
t,
|
||||
]);
|
||||
|
||||
const toggleExpanded = useCallback((profile: string) => {
|
||||
setExpandedProfiles((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(profile)) {
|
||||
next.delete(profile);
|
||||
} else {
|
||||
next.add(profile);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleRename = useCallback(async () => {
|
||||
if (!renameProfile || !renameValue.trim()) return;
|
||||
|
||||
setRenaming(true);
|
||||
try {
|
||||
await axios.put("config/set", {
|
||||
requires_restart: 0,
|
||||
config_data: {
|
||||
profiles: {
|
||||
[renameProfile]: { friendly_name: renameValue.trim() },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await updateConfig();
|
||||
await updateProfiles();
|
||||
|
||||
toast.success(
|
||||
t("profiles.renameSuccess", {
|
||||
ns: "views/settings",
|
||||
profile: renameValue.trim(),
|
||||
}),
|
||||
{ position: "top-center" },
|
||||
);
|
||||
} catch {
|
||||
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
} finally {
|
||||
setRenaming(false);
|
||||
setRenameProfile(null);
|
||||
}
|
||||
}, [renameProfile, renameValue, updateConfig, updateProfiles, t]);
|
||||
|
||||
if (!config || !profilesData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hasProfiles = allProfileNames.length > 0;
|
||||
|
||||
return (
|
||||
<div className="flex size-full max-w-5xl flex-col lg:pr-2">
|
||||
<Heading as="h4">{t("profiles.title", { ns: "views/settings" })}</Heading>
|
||||
<div className="my-1 text-sm text-muted-foreground">
|
||||
{t("profiles.disabledDescription", { ns: "views/settings" })}
|
||||
</div>
|
||||
|
||||
{/* Enable Profiles Toggle — shown only when no profiles exist */}
|
||||
{!hasProfiles && setProfilesUIEnabled && (
|
||||
<div className="my-6 max-w-xl rounded-lg border border-border/70 bg-card/30 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="profiles-toggle" className="cursor-pointer">
|
||||
{t("profiles.enableSwitch", { ns: "views/settings" })}
|
||||
</Label>
|
||||
<Switch
|
||||
id="profiles-toggle"
|
||||
checked={profilesUIEnabled ?? false}
|
||||
onCheckedChange={setProfilesUIEnabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{profilesUIEnabled && !hasProfiles && (
|
||||
<p className="mb-5 max-w-xl text-sm text-primary-variant">
|
||||
{t("profiles.enabledDescription", { ns: "views/settings" })}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Active Profile + Add Profile bar */}
|
||||
{(hasProfiles || profilesUIEnabled) && (
|
||||
<div className="my-4 flex items-center justify-between rounded-lg border border-border/70 bg-card/30 p-4">
|
||||
{hasProfiles && (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-semibold text-primary-variant">
|
||||
{t("profiles.activeProfile", { ns: "views/settings" })}
|
||||
</span>
|
||||
<Select
|
||||
value={activeProfile ?? "__none__"}
|
||||
onValueChange={(v) =>
|
||||
handleActivateProfile(v === "__none__" ? null : v)
|
||||
}
|
||||
disabled={activating}
|
||||
>
|
||||
<SelectTrigger className="">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__">
|
||||
{t("profiles.noActiveProfile", { ns: "views/settings" })}
|
||||
</SelectItem>
|
||||
{allProfileNames.map((profile) => {
|
||||
const color = getProfileColor(profile, allProfileNames);
|
||||
return (
|
||||
<SelectItem key={profile} value={profile}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 shrink-0 rounded-full",
|
||||
color.dot,
|
||||
)}
|
||||
/>
|
||||
{profileFriendlyNames?.get(profile) ?? profile}
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{activating && <ActivityIndicator className="size-4" />}
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => setAddDialogOpen(true)}
|
||||
>
|
||||
<LuPlus className="mr-1.5 size-4" />
|
||||
{t("profiles.addProfile", { ns: "views/settings" })}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Profile List */}
|
||||
{!hasProfiles ? (
|
||||
profilesUIEnabled ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("profiles.noProfiles", { ns: "views/settings" })}
|
||||
</p>
|
||||
) : (
|
||||
<div />
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{allProfileNames.map((profile) => {
|
||||
const color = getProfileColor(profile, allProfileNames);
|
||||
const isActive = activeProfile === profile;
|
||||
const cameraData = profileOverviewData[profile] ?? {};
|
||||
const cameras = Object.keys(cameraData).sort();
|
||||
const isExpanded = expandedProfiles.has(profile);
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
key={profile}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleExpanded(profile)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border",
|
||||
isActive
|
||||
? "border-selected bg-selected/5"
|
||||
: "border-border/70",
|
||||
)}
|
||||
>
|
||||
<CollapsibleTrigger asChild>
|
||||
<div className="flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-secondary/30">
|
||||
<div className="flex items-center gap-3">
|
||||
{isExpanded ? (
|
||||
<LuChevronDown className="size-4 text-muted-foreground" />
|
||||
) : (
|
||||
<LuChevronRight className="size-4 text-muted-foreground" />
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"size-2.5 shrink-0 rounded-full",
|
||||
color.dot,
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">
|
||||
{profileFriendlyNames?.get(profile) ?? profile}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-6 text-muted-foreground hover:text-primary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setRenameProfile(profile);
|
||||
setRenameValue(
|
||||
profileFriendlyNames?.get(profile) ?? profile,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Pencil className="size-3" />
|
||||
</Button>
|
||||
{isActive && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs text-primary-variant"
|
||||
>
|
||||
{t("profiles.active", { ns: "views/settings" })}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{cameras.length > 0
|
||||
? t("profiles.cameraCount", {
|
||||
ns: "views/settings",
|
||||
count: cameras.length,
|
||||
})
|
||||
: t("profiles.noOverrides", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 text-muted-foreground hover:text-destructive"
|
||||
disabled={deleting && deleteProfile === profile}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteProfile(profile);
|
||||
}}
|
||||
>
|
||||
{deleting && deleteProfile === profile ? (
|
||||
<ActivityIndicator className="size-4" />
|
||||
) : (
|
||||
<Trash2 className="size-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
{cameras.length > 0 ? (
|
||||
<div className="mx-4 mb-3 ml-11 border-l border-border/50 pl-4">
|
||||
{cameras.map((camera) => {
|
||||
const sections = cameraData[camera];
|
||||
return (
|
||||
<div
|
||||
key={camera}
|
||||
className="flex items-baseline gap-3 py-1.5"
|
||||
>
|
||||
<span className="min-w-[120px] shrink-0 truncate text-sm font-medium">
|
||||
{resolveCameraName(config, camera)}
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{sections
|
||||
.map((section) =>
|
||||
t(`configForm.sections.${section}`, {
|
||||
ns: "views/settings",
|
||||
defaultValue: section,
|
||||
}),
|
||||
)
|
||||
.join(", ")}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-4 mb-3 ml-11 text-sm text-muted-foreground">
|
||||
{t("profiles.noOverrides", { ns: "views/settings" })}
|
||||
</div>
|
||||
)}
|
||||
</CollapsibleContent>
|
||||
</div>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Profile Dialog */}
|
||||
<Dialog
|
||||
open={addDialogOpen}
|
||||
onOpenChange={(open) => {
|
||||
setAddDialogOpen(open);
|
||||
if (!open) {
|
||||
addForm.reset();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{t("profiles.newProfile", { ns: "views/settings" })}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<FormProvider {...addForm}>
|
||||
<form
|
||||
onSubmit={addForm.handleSubmit(handleAddSubmit)}
|
||||
className="space-y-4 py-2"
|
||||
>
|
||||
<NameAndIdFields<AddProfileForm>
|
||||
control={addForm.control}
|
||||
type="profile"
|
||||
nameField="friendly_name"
|
||||
idField="name"
|
||||
nameLabel={t("profiles.friendlyNameLabel", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
idLabel={t("profiles.profileIdLabel", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
idDescription={t("profiles.profileIdDescription", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
placeholderName={t("profiles.profileNamePlaceholder", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setAddDialogOpen(false)}
|
||||
disabled={addingProfile}
|
||||
>
|
||||
{t("button.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="select"
|
||||
disabled={
|
||||
addingProfile ||
|
||||
!addForm.watch("friendly_name").trim() ||
|
||||
!addForm.watch("name").trim()
|
||||
}
|
||||
>
|
||||
{addingProfile && (
|
||||
<ActivityIndicator className="mr-2 size-4" />
|
||||
)}
|
||||
{t("button.add", { ns: "common" })}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Profile Confirmation */}
|
||||
<AlertDialog
|
||||
open={!!deleteProfile}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setDeleteProfile(null);
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
{t("profiles.deleteProfile", { ns: "views/settings" })}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t("profiles.deleteProfileConfirm", {
|
||||
ns: "views/settings",
|
||||
profile: deleteProfile
|
||||
? (profileFriendlyNames?.get(deleteProfile) ?? deleteProfile)
|
||||
: "",
|
||||
})}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleting}>
|
||||
{t("button.cancel", { ns: "common" })}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-white hover:bg-destructive/90"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleDeleteProfile();
|
||||
}}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting && <ActivityIndicator className="mr-2 size-4" />}
|
||||
{t("button.delete", { ns: "common" })}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* Rename Profile Dialog */}
|
||||
<Dialog
|
||||
open={!!renameProfile}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setRenameProfile(null);
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{t("profiles.renameProfile", { ns: "views/settings" })}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
<Input
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
placeholder={t("profiles.profileNamePlaceholder", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setRenameProfile(null)}
|
||||
disabled={renaming}
|
||||
>
|
||||
{t("button.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button
|
||||
variant="select"
|
||||
onClick={handleRename}
|
||||
disabled={renaming || !renameValue.trim()}
|
||||
>
|
||||
{renaming && <ActivityIndicator className="mr-2 size-4" />}
|
||||
{t("button.save", { ns: "common" })}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user