From cc410d548af89e648371f9ad68ebbdab42a87bfd Mon Sep 17 00:00:00 2001 From: NlightN22 Date: Sat, 30 Nov 2024 15:55:10 +0700 Subject: [PATCH] add Events button to camera card --- package.json | 2 +- src/locales/en.ts | 11 +++--- src/locales/ru.ts | 2 +- .../components/menu/HostSettingsMenu.tsx | 2 +- src/shared/components/menu/OpenArhiveMenu.tsx | 39 +++++++++++++++++++ src/shared/stores/events.store.ts | 21 +++++++--- src/widgets/CameraCard.tsx | 10 +++-- yarn.lock | 21 +++++----- 8 files changed, 80 insertions(+), 28 deletions(-) create mode 100644 src/shared/components/menu/OpenArhiveMenu.tsx diff --git a/package.json b/package.json index dcaad8a..f7067fb 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@mantine/notifications": "^6.0.16", "@monaco-editor/react": "^4.6.0", "@react-keycloak/web": "^3.4.0", - "@tabler/icons-react": "^2.24.0", + "@tabler/icons-react": "^3.23.0", "@tanstack/react-query": "^5.21.2", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", diff --git a/src/locales/en.ts b/src/locales/en.ts index ea124ca..114eeac 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -70,11 +70,12 @@ const en = { memory: 'Memory %' }, hostMenu: { - editConfig: 'Edit config', - restart: 'Restart', - system: 'System', - storage: 'Storage', - }, + editConfig: 'Редакт. конфиг.', + restart: 'Перезагрузка', + system: 'Система', + storage: 'Хранилище', + }, + header: { home: 'Main', settings: 'Settings', diff --git a/src/locales/ru.ts b/src/locales/ru.ts index 5470ee5..af8a565 100644 --- a/src/locales/ru.ts +++ b/src/locales/ru.ts @@ -105,7 +105,7 @@ const ru = { config: 'Конфиг.', create: 'Создать', clear: 'Очистить', - edit: 'Изменить', + edit: 'Редакт.', version: 'Версия', uptime: 'Время работы', pleaseSelectRole: 'Пожалуйста выберите роль', diff --git a/src/shared/components/menu/HostSettingsMenu.tsx b/src/shared/components/menu/HostSettingsMenu.tsx index a3351a2..f948837 100644 --- a/src/shared/components/menu/HostSettingsMenu.tsx +++ b/src/shared/components/menu/HostSettingsMenu.tsx @@ -1,5 +1,5 @@ import { Button, Menu, rem } from '@mantine/core'; -import { IconEdit, IconGraph, IconRotateClockwise, IconServer, IconSettings } from '@tabler/icons-react'; +import { IconEdit, IconGraph, IconRotateClockwise, IconSettings } from '@tabler/icons-react'; import { useMutation } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; diff --git a/src/shared/components/menu/OpenArhiveMenu.tsx b/src/shared/components/menu/OpenArhiveMenu.tsx new file mode 100644 index 0000000..5d0d025 --- /dev/null +++ b/src/shared/components/menu/OpenArhiveMenu.tsx @@ -0,0 +1,39 @@ +import { Button, Menu, rem } from '@mantine/core'; +import { IconCalendarSearch, IconCamera, IconCameraAi } from '@tabler/icons-react'; +import { FC } from 'react'; +import { useTranslation } from 'react-i18next'; + + +interface OpenArhiveMenuProps { + onClickMenuItem?(num: number): void +} + +const OpenArhiveMenu: FC = ({ + onClickMenuItem +}) => { + const { t } = useTranslation() + + const handleClickMenuItem = (num: number) => { + if (onClickMenuItem) onClickMenuItem(num) + } + + return ( + + + + + handleClickMenuItem(0)} + icon={}> + {t('events')} + + handleClickMenuItem(1)} + icon={}> + {t('recordings')} + + + ); +}; + +export default OpenArhiveMenu; \ No newline at end of file diff --git a/src/shared/stores/events.store.ts b/src/shared/stores/events.store.ts index 8b8be36..7584a6f 100644 --- a/src/shared/stores/events.store.ts +++ b/src/shared/stores/events.store.ts @@ -8,6 +8,15 @@ interface Filters { endTime?: string } +export const eventsQueryParams = { + hostId: 'hostId', + cameraId: 'cameraId', + startDate: 'startDate', + endDate: 'endDate', + startTime: 'startTime', + endTime: 'endTime', + } + export class EventsStore { filters: Filters = {} @@ -18,15 +27,15 @@ export class EventsStore { loadFiltersFromURL() { const params = new URLSearchParams(window.location.search); - this.filters.hostId = params.get('hostId') || undefined; - this.filters.cameraId = params.get('cameraId') || undefined; - const startDate = params.get('startDate'); - const endDate = params.get('endDate'); + this.filters.hostId = params.get(eventsQueryParams.hostId) || undefined; + this.filters.cameraId = params.get(eventsQueryParams.cameraId) || undefined; + const startDate = params.get(eventsQueryParams.startDate); + const endDate = params.get(eventsQueryParams.endDate); if (startDate && endDate) { this.filters.period = [new Date(startDate), new Date(endDate)] } - this.filters.startTime = params.get('startTime') || undefined - this.filters.endTime = params.get('endTime') || undefined + this.filters.startTime = params.get(eventsQueryParams.startTime) || undefined + this.filters.endTime = params.get(eventsQueryParams.endTime) || undefined } setHostId(hostId: string, navigate: (path: string) => void) { diff --git a/src/widgets/CameraCard.tsx b/src/widgets/CameraCard.tsx index c4a521e..6759e22 100644 --- a/src/widgets/CameraCard.tsx +++ b/src/widgets/CameraCard.tsx @@ -10,6 +10,7 @@ import { mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.a import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema'; import AutoUpdatedImage from '../shared/components/images/AutoUpdatedImage'; import CameraTagsList from './CameraTagsList'; +import { eventsQueryParams } from '../shared/stores/events.store'; const useStyles = createStyles((theme) => ({ mainCard: { @@ -66,6 +67,10 @@ const CameraCard = ({ const url = `${routesPath.RECORDINGS_PATH}?${recordingsPageQuery.hostId}=${camera.frigateHost?.id}&${recordingsPageQuery.cameraId}=${camera.id}` navigate(url) } + const handleOpenEvents = () => { + const url = `${routesPath.EVENTS_PATH}?${eventsQueryParams.hostId}=${camera.frigateHost?.id}&${eventsQueryParams.cameraId}=${camera.id}` + navigate(url) + } const handleOpenEditCamera = () => { if (camera.frigateHost) { @@ -74,8 +79,6 @@ const CameraCard = ({ } } - - return ( @@ -85,8 +88,9 @@ const CameraCard = ({ } - + + {!isAdmin ? null : } diff --git a/yarn.lock b/yarn.lock index 26b41db..9907d86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2186,18 +2186,17 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" -"@tabler/icons-react@^2.24.0": - version "2.47.0" - resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-2.47.0.tgz#b704e7ae98f95be8bd6e938b4b2e84cd20b0cf31" - integrity sha512-iqly2FvCF/qUbgmvS8E40rVeYY7laltc5GUjRxQj59DuX0x/6CpKHTXt86YlI2whg4czvd/c8Ce8YR08uEku0g== +"@tabler/icons-react@^3.23.0": + version "3.23.0" + resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-3.23.0.tgz#68dd3ee4995935c00228c1a401a10bb7d2d9c4be" + integrity sha512-uSJfu1Tnhk6AAkerNCOBL3KL3aPpb/bnB4UjTbV3jItTJKitEgr4a98ted67qu5FHB3/tG1bxs32pqy5OL7NGw== dependencies: - "@tabler/icons" "2.47.0" - prop-types "^15.7.2" + "@tabler/icons" "3.23.0" -"@tabler/icons@2.47.0": - version "2.47.0" - resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.47.0.tgz#c41c680d1947e3ab2d60af3febc4132287c60596" - integrity sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA== +"@tabler/icons@3.23.0": + version "3.23.0" + resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.23.0.tgz#d00b5c98c110fd0e773dff81f4776ba52e49f576" + integrity sha512-Cz+X58jfRm0g/KcupXXuPw5knj671lNR054AnmLXvCjudiQBWI0wZulDDSsqDoGezvBzMTNPQtNcjLkZs82ZxQ== "@tanstack/match-sorter-utils@8.8.4": version "8.8.4" @@ -8577,7 +8576,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==