Refactor event label and sub-label score display in Events.jsx to include the event label and sub-label percentage

This commit is contained in:
Sergey Krashevich 2023-07-11 06:42:44 +03:00
parent 7c0d25f9da
commit 87c23adf1e
No known key found for this signature in database
GPG Key ID: 625171324E7D3856

View File

@ -1,4 +1,5 @@
import { h, Fragment } from 'preact'; import { h, Fragment } from 'preact';
import { usePersistence } from '../context';
import { route } from 'preact-router'; import { route } from 'preact-router';
import ActivityIndicator from '../components/ActivityIndicator'; import ActivityIndicator from '../components/ActivityIndicator';
import Heading from '../components/Heading'; import Heading from '../components/Heading';
@ -111,6 +112,8 @@ export default function Events({ path, ...props }) {
const { data: allLabels } = useSWR(['labels']); const { data: allLabels } = useSWR(['labels']);
const { data: allSubLabels } = useSWR(['sub_labels', { split_joined: 1 }]); const { data: allSubLabels } = useSWR(['sub_labels', { split_joined: 1 }]);
const [displayLabels, setDisplayLabels] = usePersistence('display-labels', false);
const filterValues = useMemo( const filterValues = useMemo(
() => ({ () => ({
cameras: Object.keys(config?.cameras || {}), cameras: Object.keys(config?.cameras || {}),
@ -216,6 +219,13 @@ export default function Events({ path, ...props }) {
setState({ ...state, showDownloadMenu: true }); setState({ ...state, showDownloadMenu: true });
}; };
const onLabelsClick = (e) => {
setDisplayLabels(!displayLabels);
if (e) {
e.stopPropagation();
}
};
const showSubmitToPlus = (event_id, label, box, e) => { const showSubmitToPlus = (event_id, label, box, e) => {
if (e) { if (e) {
e.stopPropagation(); e.stopPropagation();
@ -627,13 +637,13 @@ export default function Events({ path, ...props }) {
{event.zones.join(', ').replaceAll('_', ' ')} {event.zones.join(', ').replaceAll('_', ' ')}
</div> </div>
<div className="capitalize text-sm flex align-center"> <div className="capitalize text-sm flex align-center">
<Score className="w-5 h-5 mr-2 inline" /> <Score className="w-5 h-5 mr-2 inline" onClick={(e) => onLabelsClick(e, event.id)} />
{(event?.data?.top_score || event.top_score || 0) == 0 {(event?.data?.top_score || event.top_score || 0) == 0
? null ? null
: `Label: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`} : `${displayLabels ? event.label : 'Label'}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`}
{(event?.data?.sub_label_score || 0) == 0 {(event?.data?.sub_label_score || 0) == 0
? null ? null
: `, Sub Label: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`} : `, ${displayLabels ? event.sub_label : 'Sub-label'}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`}
</div> </div>
</div> </div>
<div class="hidden sm:flex flex-col justify-end mr-2"> <div class="hidden sm:flex flex-col justify-end mr-2">