128 lines
3 KiB
TypeScript
128 lines
3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Box, Modal, Typography, Divider, Grid } from "@mui/material";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../redux/reducers";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
setViewModal: Function;
|
|
handleView: (id: string | undefined) => void;
|
|
id?: number | undefined;
|
|
};
|
|
|
|
const style = {
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 400,
|
|
bgcolor: "background.paper",
|
|
borderRadius: 2,
|
|
boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
|
|
p: 4,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 2,
|
|
};
|
|
|
|
export default function StationViewModal({ open, setViewModal, id }: Props) {
|
|
const { stations } = useSelector(
|
|
(state: RootState) => state.stationReducer
|
|
);
|
|
const [selectedStation, setSelectedStation] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
if (id) {
|
|
const station = stations.find((station) => station.id === id);
|
|
setSelectedStation(station || null);
|
|
}
|
|
}, [id, stations]);
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
aria-labelledby="modal-title"
|
|
aria-describedby="modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<Typography
|
|
id="modal-title"
|
|
variant="h5"
|
|
fontWeight="bold"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Box sx={{ flex: 1, textAlign: "center" }}>
|
|
{selectedStation?.name || "Station"}'s Details
|
|
</Box>
|
|
<Box
|
|
onClick={() => setViewModal(false)}
|
|
sx={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</Box>
|
|
</Box>
|
|
</Typography>
|
|
|
|
<Divider sx={{ width: "100%" }} />
|
|
|
|
{selectedStation ? (
|
|
<Grid container spacing={2} sx={{ width: "80%" }}>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Station Name:</strong>{" "}
|
|
<Typography variant="body2">
|
|
{selectedStation.name}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Station Location:</strong>{" "}
|
|
<Typography variant="body2">
|
|
{selectedStation.registeredAddress}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Total Slots:</strong>
|
|
<Typography variant="body2">
|
|
{selectedStation.totalSlots}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Status:</strong>
|
|
<Typography variant="body2">
|
|
{selectedStation.status === "available"
|
|
? "Available"
|
|
: "Not Available"}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
) : (
|
|
<Typography align="center">
|
|
No station found with this ID
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|