TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

storing changes, starting history list

Browse Source
This commit is contained in:
Toba Ojo
2025-09-15 10:27:31 +01:00
parent 7588326cbe
commit c414342515
12 changed files with 129 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/SightingsWidget/SightingWidget.tsx
View File

@@ -17,18 +17,21 @@ function useNow(tickMs = 1000) {
return undefined;
}
export type SightingHistoryProps = {
baseUrl: string;
type SightingHistoryProps = {
baseUrl?: string;
entries?: number; // number of rows to show
pollMs?: number; // poll frequency
autoSelectLatest?: boolean;
title: string;
className: React.HTMLAttributes<HTMLDivElement> | string;
};
type SightingHistoryWidgetProps = React.HTMLAttributes<HTMLDivElement>;
// /type SightingHistoryWidgetProps = React.HTMLAttributes<HTMLDivElement>;
export default function SightingHistoryWidget({
className,
}: SightingHistoryWidgetProps) {
title,
}: SightingHistoryProps) {
useNow(1000);
const {
@@ -40,7 +43,7 @@ export default function SightingHistoryWidget({
} = useSightingFeedContext();
const onRowClick = useCallback(
(sighting: SightingType) => {
(sighting: SightingType | SightingWidgetType) => {
if (!sighting) return;
setSightingModalOpen(!isSightingModalOpen);
setSelectedSighting(sighting);
@@ -57,7 +60,7 @@ export default function SightingHistoryWidget({
return (
<>
<Card className={clsx("overflow-y-auto h-100", className)}>
<CardHeader title="Front Camera Sightings" />
<CardHeader title={title} />
<div className="flex flex-col gap-3 ">
{/* Rows */}
<div className="flex flex-col">
@@ -73,18 +76,31 @@ export default function SightingHistoryWidget({
onClick={() => onRowClick(obj)}
>
{/* Info bar */}
<div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded">
<div className="min-w-14">
CH: {obj ? obj.charHeight : "—"}
<div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
<div className="flex items-center gap-3 text-xs">
{" "}
<div className="min-w-14">
CH: {obj ? obj.charHeight : "—"}
</div>
<div className="min-w-14">
Seen: {obj ? obj.seenCount : "—"}
</div>
<div className="min-w-20">
{obj ? capitalize(obj.motion) : "—"}
</div>
<div className="min-w-14 opacity-80">
{obj ? formatAge(obj.timeStampMillis) : "—"}
</div>
</div>
<div className="min-w-14">
Seen: {obj ? obj.seenCount : "—"}
</div>
<div className="min-w-20">
{obj ? capitalize(obj.motion) : "—"}
</div>
<div className="min-w-14 opacity-80">
{obj ? formatAge(obj.timeStampMillis) : "—"}
<div className="min-w-14 opacity-80 ">
{isNPEDHit ? (
<span className="text-red-500 font-semibold">
NPED HIT
</span>
) : (
""
)}
</div>
</div>