tweaked sizing and added refresh btn
This commit is contained in:
@@ -3,6 +3,8 @@ import type { SightingType } from "../../types/types";
|
||||
import NumberPlate from "../PlateStack/NumberPlate";
|
||||
import ModalComponent from "../UI/ModalComponent";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useAlertHitContext } from "../../context/AlertHitContext";
|
||||
import { toast, Toaster } from "sonner";
|
||||
|
||||
type SightingModalProps = {
|
||||
isSightingModalOpen: boolean;
|
||||
@@ -15,47 +17,49 @@ const SightingModal = ({
|
||||
handleClose,
|
||||
sighting,
|
||||
}: SightingModalProps) => {
|
||||
const { dispatch } = useAlertHitContext();
|
||||
|
||||
const handleAcknowledgeButton = () => {
|
||||
if (!sighting) {
|
||||
toast.error("Cannot add sigthing to alert list");
|
||||
handleClose();
|
||||
return;
|
||||
}
|
||||
dispatch({ type: "ADD", payload: sighting });
|
||||
toast.success("Sighting successfully added to alert list");
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
|
||||
<div className="max-w-screen-lg mx-auto p-4">
|
||||
<div className="max-w-screen-lg mx-auto py-4 px-2">
|
||||
<div className="border-b border-gray-600 mb-4">
|
||||
<h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
|
||||
<h2 className="text-lg md:text-xl font-semibold">
|
||||
Sighting Details
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6 md:flex-row">
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<div className="flex justify-start md:justify-start">
|
||||
<div className="flex flex-col md:flex-row gap-3 items-center">
|
||||
<NumberPlate vrm={sighting?.vrm} motion={motionAway} />
|
||||
<img
|
||||
src={sighting?.plateUrlColour}
|
||||
alt="plate patch"
|
||||
className="h-16 object-contain rounded-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center gap-3">
|
||||
<img
|
||||
src={sighting?.overviewUrl}
|
||||
alt="overview patch"
|
||||
className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center gap-3">
|
||||
<img
|
||||
src={sighting?.plateUrlColour}
|
||||
alt="plate patch"
|
||||
className="h-16 w-auto object-contain rounded-md border border-gray-700"
|
||||
/>
|
||||
<img
|
||||
src={sighting?.plateUrlInfrared}
|
||||
alt="infrared patch"
|
||||
className="h-16 w-auto object-contain rounded-md border border-gray-700 opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl p-4 border h-[70%] border-gray-700">
|
||||
<aside className="w-full md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
|
||||
<h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
|
||||
Vehicle Info
|
||||
</h3>
|
||||
|
||||
<dl className="mt-3 grid grid-cols-1 sm:grid-cols-1 gap-x-4 gap-y-2 text-sm">
|
||||
<dl className="mt-3 gap-x-4 gap-y-2 text-sm">
|
||||
<div>
|
||||
<dt className="text-gray-300">VRM</dt>
|
||||
<dd className="font-medium text-2xl break-all">
|
||||
@@ -64,27 +68,40 @@ const SightingModal = ({
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Motion</dt>
|
||||
<dd className="font-medium">{sighting?.motion ?? "-"}</dd>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.motion ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Seen Count</dt>
|
||||
<dd className="font-medium">{sighting?.seenCount ?? "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Time</dt>
|
||||
<dd className="font-medium">{sighting?.timeStamp ?? "-"}</dd>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.seenCount ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt className="text-gray-300">Make</dt>
|
||||
<dd className="font-medium">{sighting?.make ?? "-"}</dd>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.make ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Model</dt>
|
||||
<dd className="font-medium">{sighting?.model ?? "-"}</dd>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.model ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-gray-300">Colour</dt>
|
||||
<dd className="font-medium">{sighting?.color ?? "-"}</dd>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.color ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Time</dt>
|
||||
<dd className="font-medium text-xl">
|
||||
{sighting?.timeStamp ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</aside>
|
||||
@@ -92,22 +109,24 @@ const SightingModal = ({
|
||||
|
||||
<div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-auto"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
|
||||
onClick={handleAcknowledgeButton}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCheck} />
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<FontAwesomeIcon icon={faX} />
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-auto"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCheck} />
|
||||
Acknowledge
|
||||
Deny
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalComponent>
|
||||
<Toaster />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
faListCheck,
|
||||
faMaximize,
|
||||
faMinimize,
|
||||
faRotate,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import type { VersionFieldType } from "../../types/types";
|
||||
import { useEffect, useState } from "react";
|
||||
@@ -54,6 +55,10 @@ export default function Header() {
|
||||
}
|
||||
};
|
||||
|
||||
const refreshBrowser = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
fetchVersions(ac.signal)
|
||||
@@ -94,7 +99,7 @@ export default function Header() {
|
||||
</div>
|
||||
{/* Right: Texts stacked + icons */}
|
||||
<div className="flex items-center space-x-24">
|
||||
<div className="flex flex-col leading-tight text-white text-sm tabular-nums">
|
||||
<div className="flex flex-col leading-tight text-white tabular-nums text-xl">
|
||||
<h2>Local: {localStr}</h2>
|
||||
<h2>UTC: {utcStr}</h2>
|
||||
</div>
|
||||
@@ -105,8 +110,11 @@ export default function Header() {
|
||||
) : (
|
||||
<FontAwesomeIcon icon={faMaximize} size="2x" />
|
||||
)}
|
||||
{/* <small>{isFullscreen ? "Shrink" : "enlarge"}</small> */}
|
||||
</div>
|
||||
<div onClick={refreshBrowser}>
|
||||
<FontAwesomeIcon icon={faRotate} size="2x" />
|
||||
</div>
|
||||
|
||||
<Link to={"/session-settings"}>
|
||||
<FontAwesomeIcon
|
||||
className="text-white"
|
||||
|
||||
@@ -5,7 +5,6 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
|
||||
|
||||
const Dashboard = () => {
|
||||
const folkestoneUrl = import.meta.env.VITE_FOLKESTONE_URL;
|
||||
const outsideCamUrl = import.meta.env.VITE_MAV_URL;
|
||||
|
||||
return (
|
||||
<div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
|
||||
@@ -17,7 +16,7 @@ const Dashboard = () => {
|
||||
/>
|
||||
</SightingFeedProvider>
|
||||
|
||||
<SightingFeedProvider url={outsideCamUrl} side="Rear">
|
||||
<SightingFeedProvider url={folkestoneUrl} side="Rear">
|
||||
<RearCameraOverviewCard className="order-2" />
|
||||
<SightingHistoryWidget
|
||||
className="order-4"
|
||||
|
||||
Reference in New Issue
Block a user