136 lines
3.6 KiB
TypeScript
136 lines
3.6 KiB
TypeScript
import { Stack, Typography, Button } from "@mui/material";
|
||
import { useNavigate, useNavigationType } from "react-router";
|
||
import { MediaViewer } from "@widgets";
|
||
import { useMapData } from "./MapDataContext";
|
||
import { observer } from "mobx-react-lite";
|
||
import { useEffect, useState } from "react";
|
||
import { authInstance } from "@shared";
|
||
|
||
export const LeftSidebar = observer(() => {
|
||
const navigate = useNavigate();
|
||
const navigationType = useNavigationType(); // PUSH, POP, REPLACE
|
||
const { routeData } = useMapData();
|
||
const [carrierThumbnail, setCarrierThumbnail] = useState<string | null>(null);
|
||
const [carrierLogo, setCarrierLogo] = useState<string | null>(null);
|
||
useEffect(() => {
|
||
async function fetchCarrierThumbnail() {
|
||
if (routeData?.carrier_id) {
|
||
const { city_id, logo } = (
|
||
await authInstance.get(`/carrier/${routeData.carrier_id}`)
|
||
).data;
|
||
const { arms } = (await authInstance.get(`/city/${city_id}`)).data;
|
||
setCarrierThumbnail(arms);
|
||
setCarrierLogo(logo);
|
||
}
|
||
}
|
||
fetchCarrierThumbnail();
|
||
}, [routeData?.carrier_id]);
|
||
|
||
const handleBack = () => {
|
||
if (navigationType === "PUSH") {
|
||
navigate(-1);
|
||
} else {
|
||
navigate("/route");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Stack direction="column" width="300px" p={2} bgcolor="primary.main">
|
||
<button
|
||
onClick={handleBack}
|
||
type="button"
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
gap: 10,
|
||
color: "#fff",
|
||
backgroundColor: "#222",
|
||
borderRadius: 10,
|
||
height: 40,
|
||
width: "100%",
|
||
border: "none",
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
<p>Назад</p>
|
||
</button>
|
||
|
||
<Stack
|
||
direction="column"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
my={10}
|
||
>
|
||
<div
|
||
style={{
|
||
maxWidth: 200,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
gap: 10,
|
||
}}
|
||
>
|
||
{carrierThumbnail && (
|
||
<MediaViewer
|
||
media={{
|
||
id: carrierThumbnail,
|
||
media_type: 1, // Тип "Фото" для логотипа
|
||
filename: "route_thumbnail",
|
||
}}
|
||
fullWidth
|
||
fullHeight
|
||
/>
|
||
)}
|
||
<Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
|
||
При поддержке Правительства
|
||
</Typography>{" "}
|
||
</div>
|
||
</Stack>
|
||
|
||
<Stack
|
||
direction="column"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
my={10}
|
||
spacing={2}
|
||
>
|
||
<Button variant="outlined" color="warning" fullWidth>
|
||
Достопримечательности
|
||
</Button>
|
||
<Button variant="outlined" color="warning" fullWidth>
|
||
Остановки
|
||
</Button>
|
||
</Stack>
|
||
|
||
<Stack
|
||
direction="column"
|
||
alignItems="center"
|
||
maxHeight={150}
|
||
justifyContent="center"
|
||
my={10}
|
||
>
|
||
{carrierLogo && (
|
||
<MediaViewer
|
||
media={{
|
||
id: carrierLogo,
|
||
media_type: 1, // Тип "Фото" для логотипа
|
||
filename: "route_thumbnail_logo",
|
||
}}
|
||
fullHeight
|
||
/>
|
||
)}
|
||
</Stack>
|
||
|
||
<Typography
|
||
variant="h6"
|
||
textAlign="center"
|
||
mt="auto"
|
||
sx={{ color: "#fff" }}
|
||
>
|
||
#ВсемПоПути
|
||
</Typography>
|
||
</Stack>
|
||
);
|
||
});
|