administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-04 20:47:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix filter tips steps

Browse Source
This commit is contained in:
Josh Hawkins 2025-04-17 07:18:00 -05:00 committed by Nicolas Mowen
parent b950096ca4
commit 00b0c51376
2 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/public/locales/en/views/search.json
View File

@ -46,8 +46,13 @@
"title": "How to use text filters",
"desc": {
"text": "Filters help you narrow down your search results. Here's how to use them in the input field:",
"step": "<ul className=\"list-disc pl-5 text-sm text-primary-variant\"><li>Type a filter name followed by a colon (e.g., \"cameras:\").</li><li>Select a value from the suggestions or type your own.</li><li>Use multiple filters by adding them one after another with a space in between.</li><li>Date filters (before: and after:) use <em>{{DateFormat}}</em> format.</li><li>Time range filter uses <em>{{exampleTime}}</em> format.</li><li>Remove filters by clicking the 'x' next to them.</li></ul>",
"example": "Example: <code className=\"text-primary\">cameras:front_door label:person before:01012024 time_range:3:00PM-4:00PM </code>"
"step1": "Type a filter key name followed by a colon (e.g., \"cameras:\").",
"step2": "Select a value from the suggestions or type your own.",
"step3": "Use multiple filters by adding them one after another with a space in between.",
"step4": "Date filters (before: and after:) use {{DateFormat}} format.",
"step5": "Time range filter uses {{exampleTime}} format.",
"step6": "Remove filters by clicking the 'x' next to them.",
"exampleLabel": "Example:"
}
},
"header": {

39
web/src/components/input/InputWithTags.tsx
View File

@ -51,7 +51,7 @@ import { toast } from "sonner";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { MdImageSearch } from "react-icons/md";
import { Trans, useTranslation } from "react-i18next";
import { useTranslation } from "react-i18next";
type InputWithTagsProps = {
inputFocused: boolean;
@ -729,20 +729,31 @@ export default function InputWithTags({
<p className="text-sm text-muted-foreground">
{t("filter.tips.desc.text")}
</p>
<Trans
ns="views/search"
values={{
DateFormat: getIntlDateFormat(),
exampleTime:
config?.ui.time_format == "24hour"
? "15:00-16:00"
: "3:00PM-4:00PM",
}}
>
filter.tips.desc.step
</Trans>
<ul className="list-disc pl-5 text-sm text-primary-variant">
<li>{t("filter.tips.desc.step1")}</li>
<li>{t("filter.tips.desc.step2")}</li>
<li>{t("filter.tips.desc.step3")}</li>
<li>
{t("filter.tips.desc.step4", {
DateFormat: getIntlDateFormat(),
})}
</li>
<li>
{t("filter.tips.desc.step5", {
exampleTime:
config?.ui.time_format == "24hour"
? "15:00-16:00"
: "3:00PM-4:00PM",
})}
</li>
<li>{t("filter.tips.desc.step6")}</li>
</ul>
<p className="text-sm text-muted-foreground">
<Trans ns="views/search">filter.tips.desc.example</Trans>
{t("filter.tips.desc.exampleLabel")}{" "}
<code className="text-primary">
cameras:front_door label:person before:01012024
time_range:3:00PM-4:00PM
</code>
</p>
</div>
</PopoverContent>