chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Add ability to use 12 hour time in input time filter (#13961)

Browse Source
This commit is contained in:
Josh Hawkins
2024-09-25 12:15:08 -05:00
committed by GitHub
parent 45aceea53b
commit be3e1831d4
3 changed files with 91 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,6 +38,7 @@ import {
convertTo12Hour,
getIntlDateFormat,
isValidTimeRange,
to24Hour,
} from "@/utils/dateUtil";
import { toast } from "sonner";
import useSWR from "swr";
@@ -191,7 +192,8 @@ export default function InputWithTags({
if (
allSuggestions[type as FilterType]?.includes(value) ||
type == "before" ||
type == "after"
type == "after" ||
type == "time_range"
) {
const newFilters = { ...filters };
let timestamp = 0;
@@ -235,23 +237,6 @@ export default function InputWithTags({
}
break;
case "time_range":
if (!value.includes(",")) {
toast.error(
"The correct format is after,before. Example: 15:00,18:00.",
{
position: "top-center",
},
);
return;
}
if (!isValidTimeRange(value)) {
toast.error("Time range is not valid.", {
position: "top-center",
});
return;
}
newFilters[type] = value;
break;
case "search_type":
@@ -299,7 +284,9 @@ export default function InputWithTags({
: (filterValues as number)) * 1000,
).toLocaleDateString(window.navigator?.language || "en-US");
} else if (filterType === "time_range") {
const [startTime, endTime] = (filterValues as string).split(",");
const [startTime, endTime] = (filterValues as string)
.replace("-", ",")
.split(",");
return `${
config?.ui.time_format === "24hour"
? startTime
@@ -320,9 +307,23 @@ export default function InputWithTags({
if (
allSuggestions[filterType]?.includes(trimmedValue) ||
((filterType === "before" || filterType === "after") &&
trimmedValue.match(/^\d{8}$/))
trimmedValue.match(/^\d{8}$/)) ||
(filterType === "time_range" &&
isValidTimeRange(
trimmedValue.replace("-", ","),
config?.ui.time_format,
))
) {
createFilter(filterType, trimmedValue);
createFilter(
filterType,
filterType === "time_range"
? trimmedValue
.replace("-", ",")
.split(",")
.map((time) => to24Hour(time.trim(), config?.ui.time_format))
.join(",")
: trimmedValue,
);
setInputValue((prev) => {
const regex = new RegExp(
`${filterType}:${filterValue.trim()}[,\\s]*`,
@@ -335,7 +336,7 @@ export default function InputWithTags({
setCurrentFilterType(null);
}
},
[allSuggestions, createFilter],
[allSuggestions, createFilter, config],
);
const handleInputChange = useCallback(
@@ -362,18 +363,11 @@ export default function InputWithTags({
if (filterType in allSuggestions) {
setCurrentFilterType(filterType);
if (filterType === "before" || filterType === "after") {
// For before and after, we don't need to update suggestions
if (filterValue.match(/^\d{8}$/)) {
handleFilterCreation(filterType, filterValue);
}
} else {
updateSuggestions(filterValue, filterType);
updateSuggestions(filterValue, filterType);
// Check if the last character is a space or comma
if (isLastCharSpaceOrComma) {
handleFilterCreation(filterType, filterValue);
}
// Check if the last character is a space or comma
if (isLastCharSpaceOrComma) {
handleFilterCreation(filterType, filterValue);
}
} else {
resetSuggestions(value);
@@ -413,6 +407,13 @@ export default function InputWithTags({
(suggestion: string) => {
if (currentFilterType) {
// Apply the selected suggestion to the current filter type
if (currentFilterType == "time_range") {
suggestion = suggestion
.replace("-", ",")
.split(",")
.map((time) => to24Hour(time.trim(), config?.ui.time_format))
.join(",");
}
createFilter(currentFilterType, suggestion);
setInputValue((prev) => {
const regex = new RegExp(`${currentFilterType}:[^\\s,]*`, "g");
@@ -439,7 +440,7 @@ export default function InputWithTags({
inputRef.current?.focus();
},
[createFilter, currentFilterType, allSuggestions],
[createFilter, currentFilterType, allSuggestions, config],
);
const handleSearch = useCallback(
@@ -565,7 +566,7 @@ export default function InputWithTags({
<h3 className="font-medium">How to use text filters</h3>
<p className="text-sm text-muted-foreground">
Filters help you narrow down your search results. Here's how
to use them:
to use them in the input field:
</p>
<ul className="list-disc pl-5 text-sm text-primary-variant">
<li>
@@ -575,11 +576,21 @@ export default function InputWithTags({
Select a value from the suggestions or type your own.
</li>
<li>
Use multiple filters by adding them one after another.
Use multiple filters by adding them one after another with
a space in between.
</li>
<li>
Date filters (before: and after:) use{" "}
{getIntlDateFormat()} format.
<em>{getIntlDateFormat()}</em> format.
</li>
<li>
Time range filter uses{" "}
<em>
{config?.ui.time_format == "24hour"
? "15:00-16:00"
: "3:00PM-4:00PM"}{" "}
</em>
format.
</li>
<li>Remove filters by clicking the 'x' next to them.</li>
</ul>
@@ -587,6 +598,7 @@ export default function InputWithTags({
Example:{" "}
<code className="text-primary">
cameras:front_door label:person before:01012024
time_range:3:00PM-4:00PM
</code>
</p>
</div>