- {rows?.map((obj, idx) => {
- const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 201;
- const isSelected = obj?.ref === selectedRef;
- const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
- const primaryIsColour = obj?.srcCam === 1;
- const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
- return (
-
onRowClick(obj.ref)}
- >
- {/* Info bar */}
-
-
- CH: {obj ? obj.charHeight : "—"}
-
-
- Seen: {obj ? obj.seenCount : "—"}
-
-
- {obj ? capitalize(obj.motion) : "—"}
-
-
- {obj ? formatAge(obj.timeStampMillis) : "—"}
-
-
-
- {/* Patch row */}
+ <>
+
+
+
+ {/* Rows */}
+
+ {rows?.map((obj, idx) => {
+ const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 201;
+ const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
+ const primaryIsColour = obj?.srcCam === 1;
+ const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
+ console.log(obj);
+ return (
onRowClick(obj)}
+ >
+ {/* Info bar */}
+
+
+ CH: {obj ? obj.charHeight : "—"}
+
+
+ Seen: {obj ? obj.seenCount : "—"}
+
+
+ {obj ? capitalize(obj.motion) : "—"}
+
+
+ {obj ? formatAge(obj.timeStampMillis) : "—"}
+
+
+
+ {/* Patch row */}
+
-
-
-
-
-
-
- );
- })}
+ );
+ })}
+
+
);
}
diff --git a/src/components/SightingsWidget/SightingWidgetDetails.tsx b/src/components/SightingsWidget/SightingWidgetDetails.tsx
index 2bde728..4225148 100644
--- a/src/components/SightingsWidget/SightingWidgetDetails.tsx
+++ b/src/components/SightingsWidget/SightingWidgetDetails.tsx
@@ -1,4 +1,5 @@
import type { SightingWidgetType } from "../../types/types";
+import { useState } from "react";
type SightingWidgetDetailsProps = {
effectiveSelected: SightingWidgetType | null;
@@ -7,72 +8,88 @@ type SightingWidgetDetailsProps = {
const SightingWidgetDetails = ({
effectiveSelected,
}: SightingWidgetDetailsProps) => {
+ const [advancedDetailsEnabled, setAdvancedDetailsEnabled] = useState(false);
+
+ const handleDetailsClick = () =>
+ setAdvancedDetailsEnabled(!advancedDetailsEnabled);
+
return (
-
-
- VRM:{" "}
- {effectiveSelected?.vrm ?? "—"}
-
-
- Timestamp:{" "}
- {effectiveSelected?.timeStamp ?? "—"}
-
-
- Make:{" "}
- {effectiveSelected?.make ?? "—"}
-
-
- Model:{" "}
- {effectiveSelected?.model ?? "—"}
-
-
- Country:{" "}
- {effectiveSelected?.countryCode ?? "—"}
-
-
- Seen:{" "}
-
- {effectiveSelected?.seenCount ?? "—"}
-
-
-
- Colour:{" "}
- {effectiveSelected?.color ?? "—"}
-
-
- Category:{" "}
- {effectiveSelected?.category ?? "—"}
-
-
- Char Ht:{" "}
-
- {effectiveSelected?.charHeight ?? "—"}
-
-
-
- Plate Size:{" "}
-
- {effectiveSelected?.plateSize ?? "—"}
-
-
-
- Overview Size:{" "}
-
- {effectiveSelected?.overviewSize ?? "—"}
-
-
- {effectiveSelected?.detailsUrl ? (
-
-
- Sighting Details
-
+ <>
+
+
+ VRM:{" "}
+ {effectiveSelected?.vrm ?? "—"}
- ) : null}
-
+
+
+ Make:{" "}
+ {effectiveSelected?.make ?? "—"}
+
+
+ Model:{" "}
+ {effectiveSelected?.model ?? "—"}
+
+
+ Colour:{" "}
+ {effectiveSelected?.color ?? "—"}
+
+
+ Timestamp:{" "}
+
+ {effectiveSelected?.timeStamp ?? "—"}
+
+
+ {advancedDetailsEnabled && (
+ <>
+ {" "}
+
+ Country:{" "}
+
+ {effectiveSelected?.countryCode ?? "—"}
+
+
+
+ Seen:{" "}
+
+ {effectiveSelected?.seenCount ?? "—"}
+
+
+
+ Category:{" "}
+
+ {effectiveSelected?.category ?? "—"}
+
+
+
+ Char Ht:{" "}
+
+ {effectiveSelected?.charHeight ?? "—"}
+
+
+
+ Plate Size:{" "}
+
+ {effectiveSelected?.plateSize ?? "—"}
+
+
+
+ Overview Size:{" "}
+
+ {effectiveSelected?.overviewSize ?? "—"}
+
+
+
+ )}
+
+
+
);
};
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 4d71685..a0f298d 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -5,10 +5,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGear, faListCheck } from "@fortawesome/free-solid-svg-icons";
import type { VersionFieldType } from "../../types/types";
-async function fetchVersions(signal?: AbortSignal): Promise
{
- const res = await fetch("http://192.168.75.11/api/versions", { signal });
- if (!res.ok) throw new Error(`HTTP ${res.status}`);
- return res.json();
+async function fetchVersions(
+ signal?: AbortSignal
+): Promise {
+ try {
+ const res = await fetch("http://192.168.75.11/api/versions", { signal });
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ return res.json();
+ } catch (error) {
+ console.log(error);
+ return undefined;
+ }
}
const pad = (n: number) => String(n).padStart(2, "0");
@@ -33,10 +40,14 @@ export default function Header() {
const ac = new AbortController();
fetchVersions(ac.signal)
.then((data) => {
- const serverMs = normalizeToMs(data.timeStamp);
+ if (!data) throw new Error("No data");
+ const serverMs = normalizeToMs(data?.timeStamp);
setOffsetMs(serverMs - Date.now());
})
- return () => ac.abort();
+ .catch((err) => {
+ console.log(err);
+ });
+ return () => ac.abort("failed");
}, []);
React.useEffect(() => {
@@ -69,13 +80,14 @@ export default function Header() {
Local: {localStr}
UTC: {utcStr}
+