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,99 +17,116 @@ 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="border-b border-gray-600 mb-4">
|
||||
<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">
|
||||
<NumberPlate vrm={sighting?.vrm} motion={motionAway} />
|
||||
</div>
|
||||
|
||||
<>
|
||||
<ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
|
||||
<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>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<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 gap-x-4 gap-y-2 text-sm">
|
||||
<div>
|
||||
<dt className="text-gray-300">VRM</dt>
|
||||
<dd className="font-medium text-2xl break-all">
|
||||
{sighting?.vrm ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Motion</dt>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.motion ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Seen Count</dt>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.seenCount ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<dt className="text-gray-300">Make</dt>
|
||||
<dd className="font-medium text-2xl">
|
||||
{sighting?.make ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Model</dt>
|
||||
<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 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>
|
||||
</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">
|
||||
<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">
|
||||
<div>
|
||||
<dt className="text-gray-300">VRM</dt>
|
||||
<dd className="font-medium text-2xl break-all">
|
||||
{sighting?.vrm ?? "-"}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Motion</dt>
|
||||
<dd className="font-medium">{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>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Make</dt>
|
||||
<dd className="font-medium">{sighting?.make ?? "-"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-gray-300">Model</dt>
|
||||
<dd className="font-medium">{sighting?.model ?? "-"}</dd>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-gray-300">Colour</dt>
|
||||
<dd className="font-medium">{sighting?.color ?? "-"}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</aside>
|
||||
<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-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} />
|
||||
Deny
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalComponent>
|
||||
</ModalComponent>
|
||||
<Toaster />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user