Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

fix(web): ensure all links on events page include pathname

Browse Source
This commit is contained in:
Paul Armstrong 2021-01-25 10:06:35 -08:00 committed by Blake Blackshear
parent 15b5ffddd4
commit 26e7d34f18
1 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/Events.jsx
View File

@ -11,7 +11,7 @@ export default function Events({ url } = {}) {
const apiHost = useContext(ApiHost); const apiHost = useContext(ApiHost);
const [events, setEvents] = useState([]); const [events, setEvents] = useState([]);
const searchParams = new URL(`${window.location.protocol}//${window.location.host}${url || '/events'}`).searchParams; const { pathname, searchParams } = new URL(`${window.location.protocol}//${window.location.host}${url || '/events'}`);
const searchParamsString = searchParams.toString(); const searchParamsString = searchParams.toString();
useEffect(async () => { useEffect(async () => {
@ -32,9 +32,10 @@ export default function Events({ url } = {}) {
<div className="flex flex-wrap space-x-2"> <div className="flex flex-wrap space-x-2">
{searchKeys.map((filterKey) => ( {searchKeys.map((filterKey) => (
<UnFilterable <UnFilterable
paramName={filterKey}
searchParams={searchParamsString}
name={`${filterKey}: ${searchParams.get(filterKey)}`} name={`${filterKey}: ${searchParams.get(filterKey)}`}
paramName={filterKey}
pathname={pathname}
searchParams={searchParamsString}
/> />
))} ))}
</div> </div>
@ -71,17 +72,32 @@ export default function Events({ url } = {}) {
</a> </a>
</Td> </Td>
<Td> <Td>
<Filterable searchParams={searchParamsString} paramName="camera" name={camera} /> <Filterable
pathname={pathname}
searchParams={searchParamsString}
paramName="camera"
name={camera}
/>
</Td> </Td>
<Td> <Td>
<Filterable searchParams={searchParamsString} paramName="label" name={label} /> <Filterable
pathname={pathname}
searchParams={searchParamsString}
paramName="label"
name={label}
/>
</Td> </Td>
<Td>{(score * 100).toFixed(2)}%</Td> <Td>{(score * 100).toFixed(2)}%</Td>
<Td> <Td>
<ul> <ul>
{zones.map((zone) => ( {zones.map((zone) => (
<li> <li>
<Filterable searchParams={searchParamsString} paramName="zone" name={zone} /> <Filterable
pathname={pathname}
searchParams={searchParamsString}
paramName="zone"
name={zone}
/>
</li> </li>
))} ))}
</ul> </ul>
@ -100,19 +116,19 @@ export default function Events({ url } = {}) {
); );
} }
function Filterable({ searchParams, paramName, name }) { function Filterable({ pathname, searchParams, paramName, name }) {
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set(paramName, name); params.set(paramName, name);
return <Link href={`?${params.toString()}`}>{name}</Link>; return <Link href={`${pathname}?${params.toString()}`}>{name}</Link>;
} }
function UnFilterable({ searchParams, paramName, name }) { function UnFilterable({ pathname, searchParams, paramName, name }) {
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.delete(paramName); params.delete(paramName);
return ( return (
<a <a
className="bg-gray-700 text-white px-3 py-1 rounded-md hover:bg-gray-300 hover:text-gray-900 dark:bg-gray-300 dark:text-gray-900 dark:hover:bg-gray-700 dark:hover:text-white" className="bg-gray-700 text-white px-3 py-1 rounded-md hover:bg-gray-300 hover:text-gray-900 dark:bg-gray-300 dark:text-gray-900 dark:hover:bg-gray-700 dark:hover:text-white"
href={`?${params.toString()}`} href={`${pathname}?${params.toString()}`}
> >
{name} {name}
</a> </a>