administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-18 09:04:28 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

remove switch and use select for suspending in frontend

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-17 14:21:36 -06:00
parent 82433ee75d
commit b0c5fe931c
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/types/frigateConfig.ts
View File

@ -110,6 +110,11 @@ export interface CameraConfig {
timestamp: boolean; timestamp: boolean;
}; };
name: string; name: string;
notifications: {
enabled: boolean;
email?: string;
enabled_in_config: boolean;
};
objects: { objects: {
filters: { filters: {
[objectName: string]: { [objectName: string]: {
@ -363,6 +368,7 @@ export interface FrigateConfig {
notifications: { notifications: {
enabled: boolean; enabled: boolean;
email?: string; email?: string;
enabled_in_config: boolean;
}; };
objects: { objects: {

48
web/src/views/settings/NotificationsSettingsView.tsx
View File

@ -31,7 +31,6 @@ import {
useNotificationSuspend, useNotificationSuspend,
useNotificationTest, useNotificationTest,
} from "@/api/ws"; } from "@/api/ws";
import FilterSwitch from "@/components/filter/FilterSwitch";
import { import {
Select, Select,
SelectTrigger, SelectTrigger,
@ -39,6 +38,7 @@ import {
SelectContent, SelectContent,
SelectItem, SelectItem,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js"; const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";
@ -66,7 +66,7 @@ export default function NotificationView({
} }
return Object.values(config.cameras) return Object.values(config.cameras)
.filter((conf) => conf.ui.dashboard && conf.enabled) .filter((conf) => conf.enabled && conf.notifications.enabled_in_config)
.sort((aConf, bConf) => aConf.ui.order - bConf.ui.order); .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
}, [config]); }, [config]);
@ -388,7 +388,10 @@ export default function NotificationView({
<div className="flex max-w-72 flex-col gap-2.5"> <div className="flex max-w-72 flex-col gap-2.5">
{cameras.map((item) => ( {cameras.map((item) => (
<CameraNotificationSwitch camera={item.name} /> <CameraNotificationSwitch
config={config}
camera={item.name}
/>
))} ))}
</div> </div>
</div> </div>
@ -401,10 +404,12 @@ export default function NotificationView({
} }
type CameraNotificationSwitchProps = { type CameraNotificationSwitchProps = {
config?: FrigateConfig;
camera: string; camera: string;
}; };
export function CameraNotificationSwitch({ export function CameraNotificationSwitch({
config,
camera, camera,
}: CameraNotificationSwitchProps) { }: CameraNotificationSwitchProps) {
const { payload: notificationState, send: sendNotification } = const { payload: notificationState, send: sendNotification } =
@ -420,21 +425,26 @@ export function CameraNotificationSwitch({
}, [notificationSuspendUntil]); }, [notificationSuspendUntil]);
const handleSuspend = (duration: string) => { const handleSuspend = (duration: string) => {
if (duration == "off") {
sendNotification("OFF");
setIsSuspended(true);
} else {
sendNotificationSuspend(duration); sendNotificationSuspend(duration);
}
}; };
const handleCancelSuspension = () => { const handleCancelSuspension = () => {
sendNotificationSuspend("0"); // Assuming sending "0" cancels the suspension sendNotificationSuspend("0");
}; };
const formatSuspendedUntil = (timestamp: string) => { const formatSuspendedUntil = (timestamp: string) => {
const date = new Date(parseInt(timestamp) * 1000); if (timestamp === "0") return "Frigate restarts.";
return date.toLocaleString(undefined, {
year: "numeric", return formatUnixTimestampToDateTime(parseInt(timestamp), {
month: "short", time_style: "medium",
day: "numeric", date_style: "medium",
hour: "2-digit", timezone: config?.ui.timezone,
minute: "2-digit", strftime_fmt: `%b %d, ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
}); });
}; };
@ -443,14 +453,13 @@ export function CameraNotificationSwitch({
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<FilterSwitch <Label
key={camera} className="mx-2 w-full cursor-pointer capitalize text-primary"
isChecked={isOn} htmlFor="camera"
label={camera.replaceAll("_", " ")} >
onCheckedChange={(isChecked) => { {camera.replaceAll("_", " ")}
sendNotification(isChecked ? "ON" : "OFF"); </Label>
}}
/>
{!isSuspended && isOn && ( {!isSuspended && isOn && (
<Select onValueChange={handleSuspend}> <Select onValueChange={handleSuspend}>
<SelectTrigger className="w-auto"> <SelectTrigger className="w-auto">
@ -463,6 +472,7 @@ export function CameraNotificationSwitch({
<SelectItem value="360">Suspend for 6 hours</SelectItem> <SelectItem value="360">Suspend for 6 hours</SelectItem>
<SelectItem value="840">Suspend for 12 hours</SelectItem> <SelectItem value="840">Suspend for 12 hours</SelectItem>
<SelectItem value="1440">Suspend for 24 hours</SelectItem> <SelectItem value="1440">Suspend for 24 hours</SelectItem>
<SelectItem value="off">Suspend until restart</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
)} )}