Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cleanup names in webUI #4607

Merged
merged 3 commits into from
Dec 7, 2022
Merged

Cleanup names in webUI #4607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
944b75c
Fix _ in labels
NickM-27 Dec 5, 2022
9cf8337
Capitalize camera names in system
NickM-27 Dec 5, 2022
c6a855e
Update storage to link to cameras and share name styling with rest of ui
NickM-27 Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 46 additions & 28 deletions web/src/routes/Events.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const clipDuration = (start_time, end_time) => {
duration = formatDuration(intervalToDuration({ start, end }));
}
return duration;
}
};

export default function Events({ path, ...props }) {
const apiHost = useApiHost();
Expand Down Expand Up @@ -100,7 +100,7 @@ export default function Events({ path, ...props }) {

const { data: config } = useSWR('config');

const { data: allSubLabels } = useSWR('sub_labels')
const { data: allSubLabels } = useSWR('sub_labels');

const filterValues = useMemo(
() => ({
Expand Down Expand Up @@ -296,21 +296,20 @@ export default function Events({ path, ...props }) {
</option>
))}
</select>
{
filterValues.sub_labels.length > 0 && (
<select
className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
value={searchParams.sub_label}
onChange={(e) => onFilter('sub_label', e.target.value)}
>
<option value="all">all sub labels</option>
{filterValues.sub_labels.map((item) => (
<option key={item} value={item}>
{item}
</option>
))}
</select>
)}
{filterValues.sub_labels.length > 0 && (
<select
className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
value={searchParams.sub_label}
onChange={(e) => onFilter('sub_label', e.target.value)}
>
<option value="all">all sub labels</option>
{filterValues.sub_labels.map((item) => (
<option key={item} value={item}>
{item}
</option>
))}
</select>
)}
<div ref={datePicker} className="ml-auto">
<CalendarIcon
className="h-8 w-8 cursor-pointer"
Expand Down Expand Up @@ -426,7 +425,15 @@ export default function Events({ path, ...props }) {
<p className="mb-2">Confirm deletion of saved event.</p>
</div>
<div className="p-2 flex justify-start flex-row-reverse space-x-2">
<Button className="ml-2" color="red" onClick={(e) => { setDeleteFavoriteState({ ...state, showDeleteFavorite: false }); onDelete(e, deleteFavoriteState.deletingFavoriteEventId, false) }} type="text">
<Button
className="ml-2"
color="red"
onClick={(e) => {
setDeleteFavoriteState({ ...state, showDeleteFavorite: false });
onDelete(e, deleteFavoriteState.deletingFavoriteEventId, false);
}}
type="text"
>
Delete
</Button>
</div>
Expand Down Expand Up @@ -465,12 +472,15 @@ export default function Events({ path, ...props }) {
<div className="m-2 flex grow">
<div className="flex flex-col grow">
<div className="capitalize text-lg font-bold">
{event.sub_label ? `${event.label}: ${event.sub_label}` : event.label} (
{(event.top_score * 100).toFixed(0)}%)
{event.sub_label
? `${event.label.replaceAll('_', ' ')}: ${event.sub_label.replaceAll('_', ' ')}`
: event.label.replaceAll('_', ' ')}{' '}
({(event.top_score * 100).toFixed(0)}%)
</div>
<div className="text-sm">
{new Date(event.start_time * 1000).toLocaleDateString()}{' '}
{new Date(event.start_time * 1000).toLocaleTimeString()} ({clipDuration(event.start_time, event.end_time)})
{new Date(event.start_time * 1000).toLocaleTimeString()} (
{clipDuration(event.start_time, event.end_time)})
</div>
<div className="capitalize text-sm flex align-center mt-1">
<Camera className="h-5 w-5 mr-2 inline" />
Expand Down Expand Up @@ -499,7 +509,11 @@ export default function Events({ path, ...props }) {
)}
</div>
<div class="flex flex-col">
<Delete className="h-6 w-6 cursor-pointer" stroke="#f87171" onClick={(e) => onDelete(e, event.id, event.retain_indefinitely)} />
<Delete
className="h-6 w-6 cursor-pointer"
stroke="#f87171"
onClick={(e) => onDelete(e, event.id, event.retain_indefinitely)}
/>

<Download
className="h-6 w-6 mt-auto"
Expand All @@ -512,15 +526,19 @@ export default function Events({ path, ...props }) {
{viewEvent !== event.id ? null : (
<div className="space-y-4">
<div className="mx-auto max-w-7xl">
<div className='flex justify-center w-full py-2'>
<Tabs selectedIndex={event.has_clip && eventDetailType == 'clip' ? 0 : 1} onChange={handleEventDetailTabChange} className='justify'>
<TextTab text='Clip' disabled={!event.has_clip} />
<div className="flex justify-center w-full py-2">
<Tabs
selectedIndex={event.has_clip && eventDetailType == 'clip' ? 0 : 1}
onChange={handleEventDetailTabChange}
className="justify"
>
<TextTab text="Clip" disabled={!event.has_clip} />
<TextTab text={event.has_snapshot ? 'Snapshot' : 'Thumbnail'} />
</Tabs>
</div>

<div>
{((eventDetailType == 'clip') && event.has_clip) ? (
{eventDetailType == 'clip' && event.has_clip ? (
<VideoPlayer
options={{
preload: 'auto',
Expand All @@ -533,11 +551,11 @@ export default function Events({ path, ...props }) {
],
}}
seekOptions={{ forward: 10, back: 5 }}
onReady={() => { }}
onReady={() => {}}
/>
) : null}

{((eventDetailType == 'image') || !event.has_clip) ? (
{eventDetailType == 'image' || !event.has_clip ? (
<div className="flex justify-center">
<img
className="flex-grow-0"
Expand Down
5 changes: 4 additions & 1 deletion web/src/routes/Storage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Heading from '../components/Heading';
import { useWs } from '../api/ws';
import useSWR from 'swr';
import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
import Link from '../components/Link';

const emptyObject = Object.freeze({});

Expand Down Expand Up @@ -82,7 +83,9 @@ export default function Storage() {
<div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{Object.entries(storage).map(([name, camera]) => (
<div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="text-lg flex justify-between p-4">{name}</div>
<div className="capitalize text-lg flex justify-between p-4">
<Link href={`/cameras/${name}`}>{name.replaceAll('_', ' ')}</Link>
</div>
<div className="p-2">
<Table className="w-full">
<Thead>
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/System.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export default function System() {
<div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{cameraNames.map((camera) => (
<div key={camera} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="text-lg flex justify-between p-4">
<div className="capitalize text-lg flex justify-between p-4">
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
<Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
</div>
Expand Down