fix errors message

add time validation

src/locales/en.ts

@@ -17,6 +17,7 @@ const en = {
     eventsPage: {
         selectStartTime: 'Select start time:',
         selectEndTime: 'Select end time:',
+        startTimeBiggerThanEnd: 'Start time bigger than end time',
     },
     frigateConfigPage: {
         copyConfig: 'Copy Config',

src/locales/ru.ts

@@ -15,7 +15,7 @@ const ru = {
     eventsPage: {
         selectStartTime: 'Выбери время начала:',
         selectEndTime: 'Выбери время окончания:',
-        maxEventsFetches: 'Ошибка: Невозможно получить события после {{maxRetries}} попыток. Пожалуйста попробуйте позже или установите меньший период.',
+        startTimeBiggerThanEnd: 'Время начала больше времени окончания',
     },
     frigateConfigPage: {
         copyConfig: 'Копировать Конфиг.',
@@ -97,6 +97,7 @@ const ru = {
         doubleClickToFullHint: 'Двойное нажатие мышью для полноэкранного просмотра',
         rating: 'Рейтинг',
     },
+    maxRetries: 'Ошибка: невозможно получить данные после {{maxRetries}} попыток. Пожалуйста попробуйте позже или поменяйте период на меньший.',
     config: 'Конфиг.',
     create: 'Создать',
     clear: 'Очистить',

src/pages/EditCameraPage.tsx

@@ -93,7 +93,7 @@ const EditCameraPage = () => {
                 id: e.message,
                 withCloseButton: true,
                 autoClose: false,
-                title: "Error",
+                title: t('error'),
                 message: e.message,
                 color: 'red',
                 icon: <IconAlertCircle />,

src/pages/EventsPage.tsx

@@ -1,12 +1,14 @@
 import { Flex, Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import { t } from 'i18next';
 import { observer } from 'mobx-react-lite';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Context } from '..';
+import { isStartBiggerThanEndTime } from '../shared/utils/dateUtil';
 import EventsBody from '../widgets/EventsBody';
 import EventsRightFilters from '../widgets/sidebars/EventsRightFilters';
 import { SideBarContext } from '../widgets/sidebars/SideBarContext';
-import { isProduction } from '../shared/env.const';
+import { IconAlertCircle } from '@tabler/icons-react';
 
 export const eventsPageQuery = {
     hostId: 'hostId',
@@ -16,8 +18,15 @@ export const eventsPageQuery = {
     hour: 'hour',
 }
 
+interface TimePeriod  {
+    startTime: string,
+    endTime: string,
+}
+
 const EventsPage = () => {
 
+    const [timePeriod, setTimePeriod] = useState<TimePeriod>()
+
     const { setRightChildren } = useContext(SideBarContext)
 
     useEffect(() => {
@@ -25,17 +34,43 @@ const EventsPage = () => {
         return () => setRightChildren(null)
     }, [])
 
+
+
     const { eventsStore } = useContext(Context)
     const { hostId, cameraId, period, startTime, endTime } = eventsStore.filters
 
+    useEffect(() => {
+        const startTime = eventsStore.filters.startTime
+        const endTime = eventsStore.filters.endTime
+        if (startTime && endTime) {
+            if (isStartBiggerThanEndTime(startTime, endTime)) {
+                const message = t('eventsPage.startTimeBiggerThanEnd')
+                notifications.show({
+                    id: message,
+                    withCloseButton: true,
+                    autoClose: 5000,
+                    title: t('error'),
+                    message: message,
+                    color: 'red',
+                    icon: <IconAlertCircle />,
+                })
+                return
+            }
+            setTimePeriod({
+                startTime,
+                endTime
+            })
+        }
+    }, [eventsStore.filters.startTime, eventsStore.filters.endTime])
+
     if (hostId && cameraId && period && period[0] && period[1]) {
         return (
             <EventsBody
                 hostId={hostId}
                 cameraId={cameraId}
                 period={[period[0], period[1]]}
-                startTime={startTime}
-                endTime={endTime}
+                startTime={timePeriod?.startTime}
+                endTime={timePeriod?.endTime}
             />
         )
     }

src/pages/FrigateHostsPage.tsx

@@ -63,7 +63,7 @@ const FrigateHostsPage = () => {
                     id: e.message,
                     withCloseButton: true,
                     autoClose: 5000,
-                    title: "Error",
+                    title: t('error'),
                     message: e.message,
                     color: 'red',
                     icon: <IconAlertCircle />,

src/pages/HostConfigPage.tsx

@@ -85,7 +85,7 @@ const HostConfigPage = () => {
         id: e.message,
         withCloseButton: true,
         autoClose: false,
-        title: "Error",
+        title: t('error'),
         message: e.message,
         color: 'red',
         icon: <IconAlertCircle />,

src/shared/components/filters/UserTagsFilter.tsx

@@ -71,7 +71,7 @@ const UserTagsFilter: React.FC<UserTagsFilterProps> = ({
                     id: e.message,
                     withCloseButton: true,
                     autoClose: 5000,
-                    title: "Error",
+                    title: t('error'),
                     message: e.message,
                     color: 'red',
                     icon: <IconAlertCircle />,
@@ -100,7 +100,7 @@ const UserTagsFilter: React.FC<UserTagsFilterProps> = ({
                     id: e.message,
                     withCloseButton: true,
                     autoClose: 5000,
-                    title: "Error",
+                    title: t('error'),
                     message: e.message,
                     color: 'red',
                     icon: <IconAlertCircle />,

src/shared/utils/dateUtil.ts

@@ -168,6 +168,18 @@ export const dayTimeToUnixTime = (day: Date, time: string) => {
   return Math.floor(day.getTime() / 1000)
 }
 
+export const isStartBiggerThanEndTime = (startTime: string, endTime: string) => {
+  const [hours1, minutes1] = startTime.split(':').map(Number)
+  const [hours2, minutes2] = endTime.split(':').map(Number)
+
+  const date1 = new Date();
+  const date2 = new Date();
+
+  date1.setHours(hours1, minutes1, 0, 0)
+  date2.setHours(hours2, minutes2, 0, 0)
+  return date1 > date2
+}
+
 /**
  * This function takes in a Unix timestamp, configuration options for date/time display, and an optional strftime format string,
  * and returns a formatted date/time string.

src/widgets/CameraTagsList.tsx

@@ -8,6 +8,7 @@ import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema'
 import AddBadge from '../shared/components/AddBadge';
 import TagBadge from '../shared/components/TagBadge';
 import { CameraTag } from '../types/tags';
+import { useTranslation } from 'react-i18next';
 
 
 interface CameraTagsListProps {
@@ -18,6 +19,7 @@ const CameraTagsList: React.FC<CameraTagsListProps> = ({
     camera
 }) => {
 
+    const { t } = useTranslation()
     const queryClient = useQueryClient()
 
     const [tagsList, setTagsList] = useState<CameraTag[]>(camera.tags)
@@ -45,7 +47,7 @@ const CameraTagsList: React.FC<CameraTagsListProps> = ({
                     id: e.message,
                     withCloseButton: true,
                     autoClose: 5000,
-                    title: "Error",
+                    title: t('error'),
                     message: e.message,
                     color: 'red',
                     icon: <IconAlertCircle />,
@@ -73,7 +75,7 @@ const CameraTagsList: React.FC<CameraTagsListProps> = ({
                     id: e.message,
                     withCloseButton: true,
                     autoClose: 5000,
-                    title: "Error",
+                    title: t('error'),
                     message: e.message,
                     color: 'red',
                     icon: <IconAlertCircle />,

src/widgets/EventsBody.tsx

@@ -15,6 +15,7 @@ interface EventsBodyProps {
     endTime?: string,
 }
 
+
 const EventsBody: FC<EventsBodyProps> = ({
     hostId,
     cameraId,

src/widgets/sidebars/EventsRightFilters.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Context } from '../..';
@@ -9,6 +9,8 @@ import HostSelect from '../../shared/components/filters/HostSelect';
 import TimePicker from '../../shared/components/filters/TimePicker';
 import { isProduction } from '../../shared/env.const';
 
+
+
 const EventsRightFilters = () => {
 
     const { t } = useTranslation()