mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-03-13 11:57:36 +03:00
refactor profilesview and add dots/border colors when overridden
This commit is contained in:
Josh Hawkins
parent
33e4dddb3e
commit
5ec1b1841c
@ -16,6 +16,12 @@
|
||||
"maintenance": "Maintenance - Frigate",
|
||||
"profiles": "Profiles - Frigate"
|
||||
},
|
||||
"button": {
|
||||
"overriddenGlobal": "Overridden (Global)",
|
||||
"overriddenGlobalTooltip": "This camera overrides global configuration settings in this section",
|
||||
"overriddenBaseConfig": "Overridden (Base Config)",
|
||||
"overriddenBaseConfigTooltip": "The {{profile}} profile overrides configuration settings in this section"
|
||||
},
|
||||
"menu": {
|
||||
"general": "General",
|
||||
"globalConfig": "Global configuration",
|
||||
@ -1453,6 +1459,8 @@
|
||||
"deactivated": "Profile deactivated",
|
||||
"noProfiles": "No profiles defined. Add a profile from any camera section.",
|
||||
"noOverrides": "No overrides",
|
||||
"cameraCount_one": "{{count}} camera",
|
||||
"cameraCount_other": "{{count}} cameras",
|
||||
"baseConfig": "Base Config",
|
||||
"addProfile": "Add Profile",
|
||||
"newProfile": "New Profile",
|
||||
|
||||
@ -28,6 +28,11 @@ import { useConfigOverride } from "@/hooks/use-config-override";
|
||||
import { useSectionSchema } from "@/hooks/use-config-schema";
|
||||
import type { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { LuChevronDown, LuChevronRight } from "react-icons/lu";
|
||||
import Heading from "@/components/ui/heading";
|
||||
@ -127,6 +132,7 @@ export interface BaseSectionProps {
|
||||
onStatusChange?: (status: {
|
||||
hasChanges: boolean;
|
||||
isOverridden: boolean;
|
||||
overrideSource?: "global" | "profile";
|
||||
hasValidationErrors: boolean;
|
||||
}) => void;
|
||||
/** Pending form data keyed by "sectionKey" or "cameraName::sectionKey" */
|
||||
@ -139,6 +145,8 @@ export interface BaseSectionProps {
|
||||
) => void;
|
||||
/** When set, editing this profile's overrides instead of the base config */
|
||||
profileName?: string;
|
||||
/** Border color class for profile override badge (e.g., "border-amber-500") */
|
||||
profileBorderColor?: string;
|
||||
}
|
||||
|
||||
export interface CreateSectionOptions {
|
||||
@ -170,6 +178,7 @@ export function ConfigSection({
|
||||
pendingDataBySection,
|
||||
onPendingDataChange,
|
||||
profileName,
|
||||
profileBorderColor,
|
||||
}: ConfigSectionProps) {
|
||||
// For replay level, treat as camera-level config access
|
||||
const effectiveLevel = level === "replay" ? "camera" : level;
|
||||
@ -267,7 +276,7 @@ export function ConfigSection({
|
||||
[sectionPath, level, sectionSchema],
|
||||
);
|
||||
|
||||
// Get override status
|
||||
// Get override status (camera vs global)
|
||||
const { isOverridden, globalValue, cameraValue } = useConfigOverride({
|
||||
config,
|
||||
cameraName: effectiveLevel === "camera" ? cameraName : undefined,
|
||||
@ -275,6 +284,16 @@ export function ConfigSection({
|
||||
compareFields: sectionConfig.overrideFields,
|
||||
});
|
||||
|
||||
// Check if the active profile overrides the base config for this section
|
||||
const profileOverridesSection = useMemo(() => {
|
||||
if (!profileName || !cameraName || !config) return false;
|
||||
const profileData = config.cameras?.[cameraName]?.profiles?.[profileName];
|
||||
return !!profileData?.[sectionPath as keyof typeof profileData];
|
||||
}, [profileName, cameraName, config, sectionPath]);
|
||||
|
||||
const overrideSource: "global" | "profile" | undefined =
|
||||
profileOverridesSection ? "profile" : isOverridden ? "global" : undefined;
|
||||
|
||||
// Get current form data
|
||||
// When editing a profile, show base camera config deep-merged with profile overrides
|
||||
const rawSectionValue = useMemo(() => {
|
||||
@ -409,8 +428,20 @@ export function ConfigSection({
|
||||
}, [formData, pendingData, extraHasChanges]);
|
||||
|
||||
useEffect(() => {
|
||||
onStatusChange?.({ hasChanges, isOverridden, hasValidationErrors });
|
||||
}, [hasChanges, isOverridden, hasValidationErrors, onStatusChange]);
|
||||
onStatusChange?.({
|
||||
hasChanges,
|
||||
isOverridden: profileOverridesSection || isOverridden,
|
||||
overrideSource,
|
||||
hasValidationErrors,
|
||||
});
|
||||
}, [
|
||||
hasChanges,
|
||||
isOverridden,
|
||||
profileOverridesSection,
|
||||
overrideSource,
|
||||
hasValidationErrors,
|
||||
onStatusChange,
|
||||
]);
|
||||
|
||||
// Handle form data change
|
||||
const handleChange = useCallback(
|
||||
@ -991,13 +1022,32 @@ export function ConfigSection({
|
||||
<Heading as="h4">{title}</Heading>
|
||||
{showOverrideIndicator &&
|
||||
effectiveLevel === "camera" &&
|
||||
isOverridden && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{t("button.overridden", {
|
||||
ns: "common",
|
||||
defaultValue: "Overridden",
|
||||
})}
|
||||
</Badge>
|
||||
(profileOverridesSection || isOverridden) && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{overrideSource === "profile"
|
||||
? t("button.overriddenBaseConfig", {
|
||||
ns: "common",
|
||||
defaultValue: "Overridden (Base Config)",
|
||||
})
|
||||
: t("button.overriddenGlobal", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "Overridden (Global)",
|
||||
})}
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{overrideSource === "profile"
|
||||
? t("button.overriddenBaseConfigTooltip", {
|
||||
ns: "common",
|
||||
profile: profileName,
|
||||
})
|
||||
: t("button.overriddenGlobalTooltip", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{hasChanges && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
@ -1035,16 +1085,40 @@ export function ConfigSection({
|
||||
<Heading as="h4">{title}</Heading>
|
||||
{showOverrideIndicator &&
|
||||
effectiveLevel === "camera" &&
|
||||
isOverridden && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="cursor-default border-2 border-selected text-xs text-primary-variant"
|
||||
>
|
||||
{t("button.overridden", {
|
||||
ns: "common",
|
||||
defaultValue: "Overridden",
|
||||
})}
|
||||
</Badge>
|
||||
(profileOverridesSection || isOverridden) && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
"cursor-default border-2 text-xs text-primary-variant",
|
||||
overrideSource === "profile" && profileBorderColor
|
||||
? profileBorderColor
|
||||
: "border-selected",
|
||||
)}
|
||||
>
|
||||
{overrideSource === "profile"
|
||||
? t("button.overriddenBaseConfig", {
|
||||
ns: "common",
|
||||
defaultValue: "Overridden (Base Config)",
|
||||
})
|
||||
: t("button.overriddenGlobal", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "Overridden (Global)",
|
||||
})}
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{overrideSource === "profile"
|
||||
? t("button.overriddenBaseConfigTooltip", {
|
||||
ns: "common",
|
||||
profile: profileName,
|
||||
})
|
||||
: t("button.overriddenGlobalTooltip", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{hasChanges && (
|
||||
<Badge
|
||||
|
||||
@ -1309,12 +1309,29 @@ export default function Settings() {
|
||||
[],
|
||||
);
|
||||
|
||||
// The active profile being edited for the selected camera
|
||||
const activeEditingProfile = selectedCamera
|
||||
? (editingProfile[selectedCamera] ?? null)
|
||||
: null;
|
||||
|
||||
// Profile color for the active editing profile
|
||||
const activeProfileColor = useMemo(
|
||||
() =>
|
||||
activeEditingProfile
|
||||
? getProfileColor(activeEditingProfile, allProfileNames)
|
||||
: undefined,
|
||||
[activeEditingProfile, allProfileNames],
|
||||
);
|
||||
|
||||
// Initialize override status for all camera sections
|
||||
useEffect(() => {
|
||||
if (!selectedCamera || !cameraOverrides) return;
|
||||
|
||||
const overrideMap: Partial<
|
||||
Record<SettingsType, Pick<SectionStatus, "hasChanges" | "isOverridden">>
|
||||
Record<
|
||||
SettingsType,
|
||||
Pick<SectionStatus, "hasChanges" | "isOverridden" | "overrideSource">
|
||||
>
|
||||
> = {};
|
||||
|
||||
// Build a set of menu keys that have pending changes for this camera
|
||||
@ -1327,13 +1344,29 @@ export default function Settings() {
|
||||
}
|
||||
}
|
||||
|
||||
// Get profile data if a profile is being edited
|
||||
const profileData = activeEditingProfile
|
||||
? config?.cameras?.[selectedCamera]?.profiles?.[activeEditingProfile]
|
||||
: undefined;
|
||||
|
||||
// Set override status for all camera sections using the shared mapping
|
||||
Object.entries(CAMERA_SECTION_MAPPING).forEach(
|
||||
([sectionKey, settingsKey]) => {
|
||||
const isOverridden = cameraOverrides.includes(sectionKey);
|
||||
const globalOverridden = cameraOverrides.includes(sectionKey);
|
||||
|
||||
// Check if the active profile overrides this section
|
||||
const profileOverrides = profileData
|
||||
? !!profileData[sectionKey as keyof typeof profileData]
|
||||
: false;
|
||||
|
||||
overrideMap[settingsKey] = {
|
||||
hasChanges: pendingMenuKeys.has(settingsKey),
|
||||
isOverridden,
|
||||
isOverridden: profileOverrides || globalOverridden,
|
||||
overrideSource: profileOverrides
|
||||
? "profile"
|
||||
: globalOverridden
|
||||
? "global"
|
||||
: undefined,
|
||||
};
|
||||
},
|
||||
);
|
||||
@ -1346,6 +1379,7 @@ export default function Settings() {
|
||||
merged[key as SettingsType] = {
|
||||
hasChanges: status.hasChanges,
|
||||
isOverridden: status.isOverridden,
|
||||
overrideSource: status.overrideSource,
|
||||
hasValidationErrors: existingStatus?.hasValidationErrors ?? false,
|
||||
};
|
||||
});
|
||||
@ -1356,6 +1390,8 @@ export default function Settings() {
|
||||
cameraOverrides,
|
||||
pendingDataBySection,
|
||||
pendingKeyToMenuKey,
|
||||
activeEditingProfile,
|
||||
config,
|
||||
]);
|
||||
|
||||
const renderMenuItemLabel = useCallback(
|
||||
@ -1365,13 +1401,20 @@ export default function Settings() {
|
||||
CAMERA_SECTION_KEYS.has(key) && status?.isOverridden;
|
||||
const showUnsavedDot = status?.hasChanges;
|
||||
|
||||
const dotColor =
|
||||
status?.overrideSource === "profile" && activeProfileColor
|
||||
? activeProfileColor.dot
|
||||
: "bg-selected";
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center justify-between pr-4 md:pr-0">
|
||||
<div>{t("menu." + key)}</div>
|
||||
{(showOverrideDot || showUnsavedDot) && (
|
||||
<div className="ml-2 flex items-center gap-2">
|
||||
{showOverrideDot && (
|
||||
<span className="inline-block size-2 rounded-full bg-selected" />
|
||||
<span
|
||||
className={cn("inline-block size-2 rounded-full", dotColor)}
|
||||
/>
|
||||
)}
|
||||
{showUnsavedDot && (
|
||||
<span className="inline-block size-2 rounded-full bg-danger" />
|
||||
@ -1381,7 +1424,7 @@ export default function Settings() {
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[sectionStatusByKey, t],
|
||||
[sectionStatusByKey, t, activeProfileColor],
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
|
||||
@ -2,6 +2,7 @@ export type ProfileColor = {
|
||||
bg: string;
|
||||
text: string;
|
||||
dot: string;
|
||||
border: string;
|
||||
bgMuted: string;
|
||||
};
|
||||
|
||||
|
||||
@ -5,48 +5,56 @@ const PROFILE_COLORS: ProfileColor[] = [
|
||||
bg: "bg-amber-500",
|
||||
text: "text-amber-500",
|
||||
dot: "bg-amber-500",
|
||||
border: "border-amber-500",
|
||||
bgMuted: "bg-amber-500/20",
|
||||
},
|
||||
{
|
||||
bg: "bg-purple-500",
|
||||
text: "text-purple-500",
|
||||
dot: "bg-purple-500",
|
||||
border: "border-purple-500",
|
||||
bgMuted: "bg-purple-500/20",
|
||||
},
|
||||
{
|
||||
bg: "bg-rose-500",
|
||||
text: "text-rose-500",
|
||||
dot: "bg-rose-500",
|
||||
border: "border-rose-500",
|
||||
bgMuted: "bg-rose-500/20",
|
||||
},
|
||||
{
|
||||
bg: "bg-cyan-500",
|
||||
text: "text-cyan-500",
|
||||
dot: "bg-cyan-500",
|
||||
border: "border-cyan-500",
|
||||
bgMuted: "bg-cyan-500/20",
|
||||
},
|
||||
{
|
||||
bg: "bg-orange-500",
|
||||
text: "text-orange-500",
|
||||
dot: "bg-orange-500",
|
||||
border: "border-orange-500",
|
||||
bgMuted: "bg-orange-500/20",
|
||||
},
|
||||
{
|
||||
bg: "bg-teal-500",
|
||||
text: "text-teal-500",
|
||||
dot: "bg-teal-500",
|
||||
border: "border-teal-500",
|
||||
bgMuted: "bg-teal-500/20",
|
||||
},
|
||||
{
|
||||
bg: "bg-emerald-500",
|
||||
text: "text-emerald-500",
|
||||
dot: "bg-emerald-500",
|
||||
border: "border-emerald-500",
|
||||
bgMuted: "bg-emerald-500/20",
|
||||
},
|
||||
{
|
||||
bg: "bg-blue-500",
|
||||
text: "text-blue-500",
|
||||
dot: "bg-blue-500",
|
||||
border: "border-blue-500",
|
||||
bgMuted: "bg-blue-500/20",
|
||||
},
|
||||
];
|
||||
|
||||
@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
|
||||
import useSWR from "swr";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { Camera, Trash2 } from "lucide-react";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { LuChevronDown, LuChevronRight, LuPlus } from "react-icons/lu";
|
||||
import type { FrigateConfig } from "@/types/frigateConfig";
|
||||
import type { ProfileState } from "@/types/profile";
|
||||
import { getProfileColor } from "@/utils/profileColors";
|
||||
@ -13,6 +14,7 @@ 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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
@ -20,6 +22,18 @@ import {
|
||||
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,
|
||||
@ -32,6 +46,7 @@ import {
|
||||
} 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 ProfilesApiResponse = {
|
||||
profiles: string[];
|
||||
@ -59,6 +74,12 @@ export default function ProfilesView({
|
||||
const [activating, setActivating] = useState(false);
|
||||
const [deleteProfile, setDeleteProfile] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [expandedProfiles, setExpandedProfiles] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [addDialogOpen, setAddDialogOpen] = useState(false);
|
||||
const [newProfileName, setNewProfileName] = useState("");
|
||||
const [nameError, setNameError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = t("documentTitle.profiles", {
|
||||
@ -105,13 +126,33 @@ export default function ProfilesView({
|
||||
return data;
|
||||
}, [config, allProfileNames]);
|
||||
|
||||
const cameraCount = useMemo(() => {
|
||||
if (!config) return 0;
|
||||
return Object.keys(profileOverviewData).reduce((max, profile) => {
|
||||
const count = Object.keys(profileOverviewData[profile] ?? {}).length;
|
||||
return Math.max(max, count);
|
||||
}, 0);
|
||||
}, [config, profileOverviewData]);
|
||||
const validateName = useCallback(
|
||||
(name: string): string | null => {
|
||||
if (!name.trim()) return null;
|
||||
if (!/^[a-z0-9_]+$/.test(name)) {
|
||||
return t("profiles.nameInvalid", { ns: "views/settings" });
|
||||
}
|
||||
if (allProfileNames.includes(name)) {
|
||||
return t("profiles.nameDuplicate", { ns: "views/settings" });
|
||||
}
|
||||
return null;
|
||||
},
|
||||
[allProfileNames, t],
|
||||
);
|
||||
|
||||
const handleAddSubmit = useCallback(() => {
|
||||
const name = newProfileName.trim();
|
||||
if (!name) return;
|
||||
const error = validateName(name);
|
||||
if (error) {
|
||||
setNameError(error);
|
||||
return;
|
||||
}
|
||||
profileState?.onAddProfile(name);
|
||||
setAddDialogOpen(false);
|
||||
setNewProfileName("");
|
||||
setNameError(null);
|
||||
}, [newProfileName, validateName, profileState]);
|
||||
|
||||
const handleActivateProfile = useCallback(
|
||||
async (profile: string | null) => {
|
||||
@ -215,6 +256,18 @@ export default function ProfilesView({
|
||||
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;
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!config || !profilesData) {
|
||||
return null;
|
||||
}
|
||||
@ -244,67 +297,67 @@ export default function ProfilesView({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{profilesUIEnabled && (
|
||||
{profilesUIEnabled && !hasProfiles && (
|
||||
<p className="mb-5 max-w-xl text-sm text-primary-variant">
|
||||
{t("profiles.enabledDescription", { ns: "views/settings" })}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Active Profile Section — only when profiles exist */}
|
||||
{hasProfiles && (
|
||||
<div className="mb-6 rounded-lg border border-border/70 bg-card/30 p-4">
|
||||
<div className="mb-3 text-sm font-semibold text-primary-variant">
|
||||
{t("profiles.activeProfile", { ns: "views/settings" })}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Select
|
||||
value={activeProfile ?? "__none__"}
|
||||
onValueChange={(v) =>
|
||||
handleActivateProfile(v === "__none__" ? null : v)
|
||||
}
|
||||
disabled={activating}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<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,
|
||||
)}
|
||||
/>
|
||||
{profile}
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{activeProfile && (
|
||||
<Badge
|
||||
className={cn(
|
||||
"cursor-default",
|
||||
getProfileColor(activeProfile, allProfileNames).bg,
|
||||
"text-white",
|
||||
)}
|
||||
{/* 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}
|
||||
>
|
||||
{t("profiles.active", { ns: "views/settings" })}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<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,
|
||||
)}
|
||||
/>
|
||||
{profile}
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{activating && <ActivityIndicator className="w-auto" size={18} />}
|
||||
</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 Cards */}
|
||||
{/* Profile List */}
|
||||
{!hasProfiles ? (
|
||||
profilesUIEnabled ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@ -314,104 +367,171 @@ export default function ProfilesView({
|
||||
<div />
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
<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 (
|
||||
<div
|
||||
<Collapsible
|
||||
key={profile}
|
||||
className={cn(
|
||||
"rounded-lg border p-4",
|
||||
isActive
|
||||
? "border-selected bg-selected/5"
|
||||
: "border-border/70 bg-card/30",
|
||||
)}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleExpanded(profile)}
|
||||
>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
"h-2.5 w-2.5 shrink-0 rounded-full",
|
||||
color.dot,
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{profile}</span>
|
||||
{isActive && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs text-primary-variant"
|
||||
>
|
||||
{t("profiles.active", { ns: "views/settings" })}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => setDeleteProfile(profile)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{cameras.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("profiles.noOverrides", { ns: "views/settings" })}
|
||||
</p>
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
"grid gap-2",
|
||||
cameraCount <= 3
|
||||
? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
|
||||
: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
|
||||
)}
|
||||
>
|
||||
{cameras.map((camera) => {
|
||||
const sections = cameraData[camera];
|
||||
return (
|
||||
<div
|
||||
key={camera}
|
||||
className="flex items-start gap-2 rounded-md bg-secondary/40 px-3 py-2"
|
||||
<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">{profile}</span>
|
||||
{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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteProfile(profile);
|
||||
}}
|
||||
>
|
||||
<Camera className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-xs font-medium">
|
||||
{resolveCameraName(config, camera)}
|
||||
<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 className="mt-1 flex flex-wrap gap-1">
|
||||
{sections.map((section) => (
|
||||
<span
|
||||
key={section}
|
||||
className={cn(
|
||||
"rounded px-1.5 py-0.5 text-[10px] leading-tight text-white",
|
||||
color.bg,
|
||||
)}
|
||||
>
|
||||
{t(`configForm.sections.${section}`, {
|
||||
ns: "views/settings",
|
||||
defaultValue: section,
|
||||
})}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</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) {
|
||||
setNewProfileName("");
|
||||
setNameError(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[360px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{t("profiles.newProfile", { ns: "views/settings" })}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2 py-2">
|
||||
<Input
|
||||
placeholder={t("profiles.profileNamePlaceholder", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
value={newProfileName}
|
||||
onChange={(e) => {
|
||||
setNewProfileName(e.target.value);
|
||||
setNameError(validateName(e.target.value));
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleAddSubmit();
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
{nameError && (
|
||||
<p className="text-xs text-destructive">{nameError}</p>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setAddDialogOpen(false)}>
|
||||
{t("button.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button
|
||||
variant="select"
|
||||
onClick={handleAddSubmit}
|
||||
disabled={!newProfileName.trim() || !!nameError}
|
||||
>
|
||||
{t("button.add", { ns: "common" })}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Profile Confirmation */}
|
||||
<AlertDialog
|
||||
open={!!deleteProfile}
|
||||
|
||||
@ -4,9 +4,16 @@ import type { SectionConfig } from "@/components/config-form/sections";
|
||||
import { ConfigSectionTemplate } from "@/components/config-form/sections";
|
||||
import type { PolygonType } from "@/types/canvas";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import type { ConfigSectionData } from "@/types/configForm";
|
||||
import type { ProfileState } from "@/types/profile";
|
||||
import { getSectionConfig } from "@/utils/configUtil";
|
||||
import { getProfileColor } from "@/utils/profileColors";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LuExternalLink } from "react-icons/lu";
|
||||
@ -35,6 +42,8 @@ export type SettingsPageProps = {
|
||||
export type SectionStatus = {
|
||||
hasChanges: boolean;
|
||||
isOverridden: boolean;
|
||||
/** Where the override comes from: "global" = camera overrides global, "profile" = profile overrides base */
|
||||
overrideSource?: "global" | "profile";
|
||||
hasValidationErrors: boolean;
|
||||
};
|
||||
|
||||
@ -87,6 +96,14 @@ export function SingleSectionPage({
|
||||
? (profileState?.editingProfile[selectedCamera] ?? null)
|
||||
: null;
|
||||
|
||||
const profileColor = useMemo(
|
||||
() =>
|
||||
currentEditingProfile && profileState?.allProfileNames
|
||||
? getProfileColor(currentEditingProfile, profileState.allProfileNames)
|
||||
: undefined,
|
||||
[currentEditingProfile, profileState?.allProfileNames],
|
||||
);
|
||||
|
||||
const handleSectionStatusChange = useCallback(
|
||||
(status: SectionStatus) => {
|
||||
setSectionStatus(status);
|
||||
@ -136,15 +153,40 @@ export function SingleSectionPage({
|
||||
{level === "camera" &&
|
||||
showOverrideIndicator &&
|
||||
sectionStatus.isOverridden && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="cursor-default border-2 border-selected text-xs text-primary-variant"
|
||||
>
|
||||
{t("button.overridden", {
|
||||
ns: "common",
|
||||
defaultValue: "Overridden",
|
||||
})}
|
||||
</Badge>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
"cursor-default border-2 text-xs text-primary-variant",
|
||||
sectionStatus.overrideSource === "profile" &&
|
||||
profileColor
|
||||
? profileColor.border
|
||||
: "border-selected",
|
||||
)}
|
||||
>
|
||||
{sectionStatus.overrideSource === "profile"
|
||||
? t("button.overriddenBaseConfig", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "Overridden (Base Config)",
|
||||
})
|
||||
: t("button.overriddenGlobal", {
|
||||
ns: "views/settings",
|
||||
defaultValue: "Overridden (Global)",
|
||||
})}
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{sectionStatus.overrideSource === "profile"
|
||||
? t("button.overriddenBaseConfigTooltip", {
|
||||
ns: "common",
|
||||
profile: currentEditingProfile,
|
||||
})
|
||||
: t("button.overriddenGlobalTooltip", {
|
||||
ns: "views/settings",
|
||||
})}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{sectionStatus.hasChanges && (
|
||||
<Badge
|
||||
@ -170,6 +212,7 @@ export function SingleSectionPage({
|
||||
requiresRestart={requiresRestart}
|
||||
onStatusChange={handleSectionStatusChange}
|
||||
profileName={currentEditingProfile ?? undefined}
|
||||
profileBorderColor={profileColor?.border}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user