more fixes
This commit is contained in:
Spynder
parent
86947d6332
commit
fba2fb0f5c
11
src/App.tsx
11
src/App.tsx
@ -177,6 +177,17 @@ function App() {
|
|||||||
icon: <StationIcon />,
|
icon: <StationIcon />,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "stationmodal",
|
||||||
|
show: "/route/:id/station",
|
||||||
|
edit: "/route/:id/station/",
|
||||||
|
meta: {
|
||||||
|
hide: true,
|
||||||
|
canDelete: true,
|
||||||
|
label: "Маршруты",
|
||||||
|
icon: <RouteIcon />,
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "vehicle",
|
name: "vehicle",
|
||||||
list: "/vehicle",
|
list: "/vehicle",
|
||||||
|
|||||||
@ -34,6 +34,7 @@ import { articleStore } from "../store/ArticleStore";
|
|||||||
import { ArticleEditModal } from "./modals/ArticleEditModal";
|
import { ArticleEditModal } from "./modals/ArticleEditModal";
|
||||||
import { StationEditModal } from "./modals/StationEditModal";
|
import { StationEditModal } from "./modals/StationEditModal";
|
||||||
import { stationStore } from "../store/StationStore";
|
import { stationStore } from "../store/StationStore";
|
||||||
|
|
||||||
function insertAtPosition<T>(arr: T[], pos: number, value: T): T[] {
|
function insertAtPosition<T>(arr: T[], pos: number, value: T): T[] {
|
||||||
const index = pos - 1;
|
const index = pos - 1;
|
||||||
if (index >= arr.length) {
|
if (index >= arr.length) {
|
||||||
@ -90,7 +91,8 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
|
|||||||
}: LinkedItemsProps<T>) => {
|
}: LinkedItemsProps<T>) => {
|
||||||
const { language } = languageStore;
|
const { language } = languageStore;
|
||||||
const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
|
const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
|
||||||
const { setStationModalOpenAction, setStationIdAction } = stationStore;
|
const { setStationModalOpenAction, setStationIdAction, setRouteIdAction } =
|
||||||
|
stationStore;
|
||||||
const [position, setPosition] = useState<number>(1);
|
const [position, setPosition] = useState<number>(1);
|
||||||
const [items, setItems] = useState<T[]>([]);
|
const [items, setItems] = useState<T[]>([]);
|
||||||
const [linkedItems, setLinkedItems] = useState<T[]>([]);
|
const [linkedItems, setLinkedItems] = useState<T[]>([]);
|
||||||
@ -306,66 +308,65 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
|
|||||||
isDragDisabled={type !== "edit" || !dragAllowed}
|
isDragDisabled={type !== "edit" || !dragAllowed}
|
||||||
>
|
>
|
||||||
{(provided) => (
|
{(provided) => (
|
||||||
<>
|
<TableRow
|
||||||
<TableRow
|
sx={{
|
||||||
sx={{
|
cursor:
|
||||||
cursor:
|
childResource === "article"
|
||||||
childResource === "article"
|
? "pointer"
|
||||||
? "pointer"
|
: "default",
|
||||||
: "default",
|
}}
|
||||||
}}
|
onClick={() => {
|
||||||
onClick={() => {
|
if (childResource === "article") {
|
||||||
if (childResource === "article") {
|
setArticleModalOpenAction(true);
|
||||||
setArticleModalOpenAction(true);
|
setArticleIdAction(item.id);
|
||||||
setArticleIdAction(item.id);
|
}
|
||||||
}
|
if (childResource === "station") {
|
||||||
if (childResource === "station") {
|
setStationModalOpenAction(true);
|
||||||
setStationModalOpenAction(true);
|
setStationIdAction(item.id);
|
||||||
setStationIdAction(item.id);
|
setRouteIdAction(Number(parentId));
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
{...provided.draggableProps}
|
{...provided.draggableProps}
|
||||||
{...provided.dragHandleProps}
|
{...provided.dragHandleProps}
|
||||||
hover
|
hover
|
||||||
>
|
>
|
||||||
{type === "edit" && dragAllowed && (
|
{type === "edit" && dragAllowed && (
|
||||||
<TableCell {...provided.dragHandleProps}>
|
<TableCell {...provided.dragHandleProps}>
|
||||||
<IconButton size="small">
|
<IconButton size="small">
|
||||||
<DragIndicatorIcon />
|
<DragIndicatorIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
<TableCell key={String(item.id)}>
|
|
||||||
{index + 1}
|
|
||||||
</TableCell>
|
</TableCell>
|
||||||
{fields.map((field, index) => (
|
)}
|
||||||
<TableCell
|
<TableCell key={String(item.id)}>
|
||||||
key={String(field.data) + String(index)}
|
{index + 1}
|
||||||
>
|
</TableCell>
|
||||||
{field.render
|
{fields.map((field, index) => (
|
||||||
? field.render(item[field.data])
|
<TableCell
|
||||||
: item[field.data]}
|
key={String(field.data) + String(index)}
|
||||||
</TableCell>
|
>
|
||||||
))}
|
{field.render
|
||||||
|
? field.render(item[field.data])
|
||||||
|
: item[field.data]}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
|
||||||
{type === "edit" && (
|
{type === "edit" && (
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Button
|
<Button
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
color="error"
|
color="error"
|
||||||
size="small"
|
size="small"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
deleteItem(item.id);
|
deleteItem(item.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Отвязать
|
Отвязать
|
||||||
</Button>
|
</Button>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
)}
|
)}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</Draggable>
|
</Draggable>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -20,6 +20,9 @@ import { LanguageSwitch } from "../../LanguageSwitch/index";
|
|||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { stationStore } from "../../../store/StationStore";
|
import { stationStore } from "../../../store/StationStore";
|
||||||
|
import { useCustom } from "@refinedev/core";
|
||||||
|
import { useApiUrl } from "@refinedev/core";
|
||||||
|
import { StationItem } from "src/pages/route/types";
|
||||||
const MemoizedSimpleMDE = memo(MarkdownEditor);
|
const MemoizedSimpleMDE = memo(MarkdownEditor);
|
||||||
|
|
||||||
const TRANSFER_FIELDS = [
|
const TRANSFER_FIELDS = [
|
||||||
@ -47,7 +50,7 @@ const style = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const StationEditModal = observer(() => {
|
export const StationEditModal = observer(() => {
|
||||||
const { stationModalOpen, setStationModalOpenAction, selectedStationId } =
|
const { stationModalOpen, setStationModalOpenAction, selectedStationId, selectedRouteId } =
|
||||||
stationStore;
|
stationStore;
|
||||||
const { language } = languageStore;
|
const { language } = languageStore;
|
||||||
|
|
||||||
@ -57,6 +60,14 @@ export const StationEditModal = observer(() => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const apiUrl = useApiUrl();
|
||||||
|
|
||||||
|
const { data: stationQuery, isLoading: isStationLoading } = useCustom({
|
||||||
|
url: `${apiUrl}/route/${selectedRouteId ?? 1}/station`,
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
control,
|
control,
|
||||||
@ -65,14 +76,15 @@ export const StationEditModal = observer(() => {
|
|||||||
reset,
|
reset,
|
||||||
setValue,
|
setValue,
|
||||||
watch,
|
watch,
|
||||||
|
handleSubmit,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
refineCoreProps: {
|
refineCoreProps: {
|
||||||
resource: "station",
|
resource: `route/${selectedRouteId ?? 1}/station`,
|
||||||
id: selectedStationId ?? undefined,
|
|
||||||
action: "edit",
|
action: "edit",
|
||||||
|
id: "",
|
||||||
redirect: false,
|
redirect: false,
|
||||||
|
onMutationSuccess: (data) => {
|
||||||
onMutationSuccess: () => {
|
console.log(data);
|
||||||
setStationModalOpenAction(false);
|
setStationModalOpenAction(false);
|
||||||
reset();
|
reset();
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
@ -85,6 +97,19 @@ export const StationEditModal = observer(() => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (stationModalOpen) {
|
||||||
|
const station = stationQuery?.data?.find((station: StationItem) => station.id === selectedStationId);
|
||||||
|
if(!station) return;
|
||||||
|
for(const key in station) {
|
||||||
|
setValue(key, station[key]);
|
||||||
|
console.log(key, station[key]);
|
||||||
|
}
|
||||||
|
setValue("station_id", station.id);
|
||||||
|
console.log(stationQuery);
|
||||||
|
}
|
||||||
|
}, [stationModalOpen, stationQuery]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
open={stationModalOpen}
|
open={stationModalOpen}
|
||||||
|
|||||||
@ -163,6 +163,7 @@ export function InfiniteCanvas({children} : Readonly<{children?: ReactNode}>) {
|
|||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</pixiContainer>
|
</pixiContainer>
|
||||||
|
{/* Show center of the screen.
|
||||||
<pixiGraphics
|
<pixiGraphics
|
||||||
eventMode="none"
|
eventMode="none"
|
||||||
|
|
||||||
@ -172,7 +173,7 @@ export function InfiniteCanvas({children} : Readonly<{children?: ReactNode}>) {
|
|||||||
g.circle(center.x, center.y, 1);
|
g.circle(center.x, center.y, 1);
|
||||||
g.fill("#fff");
|
g.fill("#fff");
|
||||||
}}
|
}}
|
||||||
/>
|
/> */}
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -59,6 +59,7 @@ export function MapDataProvider({ children }: Readonly<{ children: ReactNode }>)
|
|||||||
url: `${apiUrl}/route/${routeId}`,
|
url: `${apiUrl}/route/${routeId}`,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: stationQuery, isLoading: isStationLoading } = useCustom({
|
const { data: stationQuery, isLoading: isStationLoading } = useCustom({
|
||||||
url: `${apiUrl}/route/${routeId}/station`,
|
url: `${apiUrl}/route/${routeId}/station`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
|
|||||||
@ -52,7 +52,7 @@ export function RightSidebar() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function pan({x, y}: {x: number, y: number}) {
|
function pan({x, y}: {x: number, y: number}) {
|
||||||
const coordinates = coordinatesToLocal(y,x);
|
const coordinates = coordinatesToLocal(x,y);
|
||||||
setTransform(coordinates.x, coordinates.y);
|
setTransform(coordinates.x, coordinates.y);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -144,7 +144,7 @@ export function RightSidebar() {
|
|||||||
<Stack direction="row" spacing={2}>
|
<Stack direction="row" spacing={2}>
|
||||||
<TextField
|
<TextField
|
||||||
type="number"
|
type="number"
|
||||||
label="Центр карты X"
|
label="Центр карты, широта"
|
||||||
variant="filled"
|
variant="filled"
|
||||||
value={Math.round(localCenter.x*100000)/100000}
|
value={Math.round(localCenter.x*100000)/100000}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
@ -160,7 +160,7 @@ export function RightSidebar() {
|
|||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
type="number"
|
type="number"
|
||||||
label="Центр карты Y"
|
label="Центр карты, высота"
|
||||||
variant="filled"
|
variant="filled"
|
||||||
value={Math.round(localCenter.y*100000)/100000}
|
value={Math.round(localCenter.y*100000)/100000}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
|||||||
@ -77,8 +77,6 @@ export function RouteMap() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("Use effect fired")
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
originalRouteData?.center_latitude === originalRouteData?.center_longitude &&
|
originalRouteData?.center_latitude === originalRouteData?.center_longitude &&
|
||||||
originalRouteData?.center_latitude === 0
|
originalRouteData?.center_latitude === 0
|
||||||
@ -99,7 +97,6 @@ export function RouteMap() {
|
|||||||
y: -(boundingBox.from.y + boundingBox.to.y) / 2
|
y: -(boundingBox.from.y + boundingBox.to.y) / 2
|
||||||
};
|
};
|
||||||
setPosition(newCenter);
|
setPosition(newCenter);
|
||||||
console.log("Taking easy way out", originalRouteData)
|
|
||||||
setIsSetup(true);
|
setIsSetup(true);
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (
|
||||||
@ -114,7 +111,6 @@ export function RouteMap() {
|
|||||||
originalRouteData?.rotate,
|
originalRouteData?.rotate,
|
||||||
originalRouteData?.scale_min
|
originalRouteData?.scale_min
|
||||||
);
|
);
|
||||||
console.log("Setup complete")
|
|
||||||
setIsSetup(true);
|
setIsSetup(true);
|
||||||
}
|
}
|
||||||
}, [points, originalRouteData?.center_latitude, originalRouteData?.center_longitude, originalRouteData?.rotate, isSetup, screenCenter]);
|
}, [points, originalRouteData?.center_latitude, originalRouteData?.center_longitude, originalRouteData?.rotate, isSetup, screenCenter]);
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
// approximation
|
// approximation
|
||||||
export function coordinatesToLocal(longitude: number, latitude: number) {
|
export function coordinatesToLocal(latitude: number, longitude: number) {
|
||||||
return {
|
return {
|
||||||
x: latitude,
|
x: longitude,
|
||||||
y: -longitude*2
|
y: -latitude*2,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function localToCoordinates(x: number, y: number) {
|
export function localToCoordinates(x: number, y: number) {
|
||||||
return {
|
return {
|
||||||
latitude: x,
|
longitude: x,
|
||||||
longitude: -y/2
|
latitude: -y/2,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -4,6 +4,8 @@ export type StationItem = {
|
|||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
description: string;
|
description: string;
|
||||||
|
offset_x: number;
|
||||||
|
offset_y: number;
|
||||||
[key: string]: string | number;
|
[key: string]: string | number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -460,13 +460,13 @@ export const SightEdit = observer(() => {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box sx={{ display: "flex", gap: 2, position: "relative" }}>
|
<Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
|
||||||
|
<Box sx={{ display: "flex", gap: 2, position: "relative", flex:1 }}>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
flex: 1,
|
flex: 1,
|
||||||
maxWidth: "50%",
|
|
||||||
gap: 10,
|
gap: 10,
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
}}
|
}}
|
||||||
@ -830,9 +830,10 @@ export const SightEdit = observer(() => {
|
|||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Блок предпросмотра */}
|
{/* Блок предпросмотра */}
|
||||||
<Paper
|
|
||||||
|
</Box>
|
||||||
|
<Paper
|
||||||
sx={{
|
sx={{
|
||||||
position: "fixed",
|
|
||||||
p: 2,
|
p: 2,
|
||||||
width: "30%",
|
width: "30%",
|
||||||
|
|
||||||
@ -1014,11 +1015,12 @@ export const SightEdit = observer(() => {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: "50%",
|
// display: "flex",
|
||||||
display: "flex",
|
flex:1,
|
||||||
flexDirection: "column",
|
// flexDirection: "column",
|
||||||
gap: 2,
|
gap: 2,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
@ -1098,143 +1100,59 @@ export const SightEdit = observer(() => {
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Edit>
|
{/* Предпросмотр */}
|
||||||
<Paper
|
<Paper
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
position: "fixed",
|
|
||||||
p: 0,
|
|
||||||
height: "max-content",
|
|
||||||
width: "30%",
|
|
||||||
|
|
||||||
top: "178px",
|
|
||||||
minHeight: "600px",
|
|
||||||
right: 50,
|
|
||||||
zIndex: 1000,
|
|
||||||
borderRadius: 2,
|
|
||||||
border: "1px solid",
|
|
||||||
|
|
||||||
bgcolor: "#806c59",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
flexGrow: 1,
|
p: 0,
|
||||||
|
height: "max-content",
|
||||||
|
minWidth: "400px",
|
||||||
|
width: "30%",
|
||||||
|
|
||||||
|
top: "178px",
|
||||||
|
minHeight: "600px",
|
||||||
|
right: 50,
|
||||||
|
zIndex: 1000,
|
||||||
|
borderRadius: 2,
|
||||||
|
border: "1px solid",
|
||||||
|
|
||||||
|
bgcolor: "#806c59",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{!previewSelected && (
|
<Box
|
||||||
<Box
|
sx={{
|
||||||
sx={{
|
display: "flex",
|
||||||
mb: 2,
|
flexDirection: "column",
|
||||||
margin: "0 auto",
|
flexGrow: 1,
|
||||||
display: "flex",
|
}}
|
||||||
flexDirection: "column",
|
>
|
||||||
maxHeight: "300px",
|
{!previewSelected && (
|
||||||
gap: 2,
|
<Box
|
||||||
}}
|
sx={{
|
||||||
>
|
mb: 2,
|
||||||
{mediaFile && mediaFile.src && mediaFile.media_type === 1 && (
|
margin: "0 auto",
|
||||||
<img
|
display: "flex",
|
||||||
src={mediaFile.src}
|
flexDirection: "column",
|
||||||
alt={mediaFile.filename}
|
maxHeight: "300px",
|
||||||
style={{
|
gap: 2,
|
||||||
maxWidth: "100%",
|
}}
|
||||||
objectFit: "contain",
|
>
|
||||||
borderRadius: 8,
|
{mediaFile && mediaFile.src && mediaFile.media_type === 1 && (
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{mediaFile && mediaFile.media_type === 2 && (
|
|
||||||
<video
|
|
||||||
src={mediaFile.src}
|
|
||||||
style={{
|
|
||||||
maxWidth: "50%",
|
|
||||||
|
|
||||||
objectFit: "contain",
|
|
||||||
borderRadius: 30,
|
|
||||||
}}
|
|
||||||
controls
|
|
||||||
autoPlay
|
|
||||||
muted
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{mediaFile && mediaFile.media_type === 3 && (
|
|
||||||
<img
|
|
||||||
src={mediaFile.src}
|
|
||||||
alt={mediaFile.filename}
|
|
||||||
style={{
|
|
||||||
maxWidth: "100%",
|
|
||||||
height: "40vh",
|
|
||||||
objectFit: "contain",
|
|
||||||
borderRadius: 8,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{mediaFile && mediaFile.media_type === 4 && (
|
|
||||||
<img
|
|
||||||
src={mediaFile.src}
|
|
||||||
alt={mediaFile.filename}
|
|
||||||
style={{
|
|
||||||
maxWidth: "100%",
|
|
||||||
height: "40vh",
|
|
||||||
objectFit: "contain",
|
|
||||||
borderRadius: 8,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{mediaFile && mediaFile.src && mediaFile.media_type == 5 && (
|
|
||||||
<ReactPhotoSphereViewer
|
|
||||||
src={mediaFile.src}
|
|
||||||
height={"300px"}
|
|
||||||
width={"350px"}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{mediaFile && mediaFile.media_type === 6 && (
|
|
||||||
<ModelViewer height={"400px"} fileUrl={mediaFile.src} />
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
mt: 0,
|
|
||||||
mb: 0,
|
|
||||||
flexGrow: 1,
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
height: "250px",
|
|
||||||
overflowY: "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{previewSelected &&
|
|
||||||
previewMedia &&
|
|
||||||
previewMedia.src &&
|
|
||||||
previewMedia.media_type === 1 && (
|
|
||||||
<img
|
<img
|
||||||
src={previewMedia.src}
|
src={mediaFile.src}
|
||||||
alt={previewMedia.filename}
|
alt={mediaFile.filename}
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
height: "250px",
|
|
||||||
objectFit: "contain",
|
objectFit: "contain",
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{previewSelected &&
|
{mediaFile && mediaFile.media_type === 2 && (
|
||||||
previewMedia &&
|
|
||||||
previewMedia.media_type === 2 && (
|
|
||||||
<video
|
<video
|
||||||
src={previewMedia.src}
|
src={mediaFile.src}
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "50%",
|
maxWidth: "50%",
|
||||||
|
|
||||||
@ -1246,26 +1164,22 @@ export const SightEdit = observer(() => {
|
|||||||
muted
|
muted
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{previewSelected &&
|
{mediaFile && mediaFile.media_type === 3 && (
|
||||||
previewMedia &&
|
|
||||||
previewMedia.media_type === 3 && (
|
|
||||||
<img
|
<img
|
||||||
src={previewMedia.src}
|
src={mediaFile.src}
|
||||||
alt={previewMedia.filename}
|
alt={mediaFile.filename}
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
height: "250px",
|
height: "40vh",
|
||||||
objectFit: "contain",
|
objectFit: "contain",
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{previewSelected &&
|
{mediaFile && mediaFile.media_type === 4 && (
|
||||||
previewMedia &&
|
|
||||||
previewMedia.media_type === 4 && (
|
|
||||||
<img
|
<img
|
||||||
src={previewMedia.src}
|
src={mediaFile.src}
|
||||||
alt={previewMedia.filename}
|
alt={mediaFile.filename}
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
height: "40vh",
|
height: "40vh",
|
||||||
@ -1275,114 +1189,204 @@ export const SightEdit = observer(() => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{previewSelected &&
|
{mediaFile && mediaFile.src && mediaFile.media_type == 5 && (
|
||||||
previewMedia &&
|
|
||||||
previewMedia.src &&
|
|
||||||
previewMedia.media_type == 5 && (
|
|
||||||
<ReactPhotoSphereViewer
|
<ReactPhotoSphereViewer
|
||||||
src={previewMedia.src}
|
src={mediaFile.src}
|
||||||
height={"300px"}
|
height={"300px"}
|
||||||
width={"350px"}
|
width={"350px"}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{previewSelected &&
|
{mediaFile && mediaFile.media_type === 6 && (
|
||||||
previewMedia &&
|
<ModelViewer height={"400px"} fileUrl={mediaFile.src} />
|
||||||
previewMedia.media_type === 6 && (
|
|
||||||
<ModelViewer height={"400px"} fileUrl={previewMedia.src} />
|
|
||||||
)}
|
)}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
{!previewSelected && (
|
{
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
mt: 0,
|
||||||
flexDirection: "column",
|
mb: 0,
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
gap: 2,
|
display: "flex",
|
||||||
}}
|
flexDirection: "column",
|
||||||
>
|
justifyContent: "space-between",
|
||||||
{selectedArticle && (
|
height: "250px",
|
||||||
<Typography
|
overflowY: "auto",
|
||||||
variant="h4"
|
}}
|
||||||
gutterBottom
|
>
|
||||||
px={2}
|
{previewSelected &&
|
||||||
py={.5}
|
previewMedia &&
|
||||||
|
previewMedia.src &&
|
||||||
sx={{
|
previewMedia.media_type === 1 && (
|
||||||
color: "text.primary",
|
<img
|
||||||
background:
|
src={previewMedia.src}
|
||||||
"linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
|
alt={previewMedia.filename}
|
||||||
boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
|
style={{
|
||||||
|
maxWidth: "100%",
|
||||||
|
height: "250px",
|
||||||
|
objectFit: "contain",
|
||||||
|
borderRadius: 8,
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
{selectedArticle.heading}
|
|
||||||
</Typography>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{selectedArticle && (
|
{previewSelected &&
|
||||||
<Typography
|
previewMedia &&
|
||||||
variant="body1"
|
previewMedia.media_type === 2 && (
|
||||||
gutterBottom
|
<video
|
||||||
px={2}
|
src={previewMedia.src}
|
||||||
sx={{ color: "text.primary" }}
|
style={{
|
||||||
>
|
maxWidth: "50%",
|
||||||
{selectedArticle.body}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
<Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "center",
|
|
||||||
margin: "0 auto",
|
|
||||||
background:
|
|
||||||
"linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
|
|
||||||
boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
|
|
||||||
|
|
||||||
}}
|
objectFit: "contain",
|
||||||
>
|
borderRadius: 30,
|
||||||
|
}}
|
||||||
|
controls
|
||||||
|
autoPlay
|
||||||
|
muted
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{previewSelected &&
|
||||||
|
previewMedia &&
|
||||||
|
previewMedia.media_type === 3 && (
|
||||||
|
<img
|
||||||
|
src={previewMedia.src}
|
||||||
|
alt={previewMedia.filename}
|
||||||
|
style={{
|
||||||
|
maxWidth: "100%",
|
||||||
|
height: "250px",
|
||||||
|
objectFit: "contain",
|
||||||
|
borderRadius: 8,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{previewSelected &&
|
||||||
|
previewMedia &&
|
||||||
|
previewMedia.media_type === 4 && (
|
||||||
|
<img
|
||||||
|
src={previewMedia.src}
|
||||||
|
alt={previewMedia.filename}
|
||||||
|
style={{
|
||||||
|
maxWidth: "100%",
|
||||||
|
height: "40vh",
|
||||||
|
objectFit: "contain",
|
||||||
|
borderRadius: 8,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{previewSelected &&
|
||||||
|
previewMedia &&
|
||||||
|
previewMedia.src &&
|
||||||
|
previewMedia.media_type == 5 && (
|
||||||
|
<ReactPhotoSphereViewer
|
||||||
|
src={previewMedia.src}
|
||||||
|
height={"300px"}
|
||||||
|
width={"350px"}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{previewSelected &&
|
||||||
|
previewMedia &&
|
||||||
|
previewMedia.media_type === 6 && (
|
||||||
|
<ModelViewer height={"400px"} fileUrl={previewMedia.src} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!previewSelected && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
flexGrow: 1,
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectedArticle && (
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
gutterBottom
|
||||||
|
px={2}
|
||||||
|
py={.5}
|
||||||
|
|
||||||
|
sx={{
|
||||||
|
color: "text.primary",
|
||||||
|
background:
|
||||||
|
"linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
|
||||||
|
boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
|
||||||
|
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectedArticle.heading}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedArticle && (
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
gutterBottom
|
||||||
|
px={2}
|
||||||
|
sx={{ color: "text.primary" }}
|
||||||
|
>
|
||||||
|
{selectedArticle.body}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
<Box>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
flexWrap: "wrap",
|
justifyContent: "center",
|
||||||
borderRadius: 2,
|
margin: "0 auto",
|
||||||
|
background:
|
||||||
|
"linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
|
||||||
|
boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{linkedArticles.map((article, index) => (
|
<Box
|
||||||
<Box
|
sx={{
|
||||||
key={article.id}
|
display: "flex",
|
||||||
onClick={() => {
|
flexDirection: "row",
|
||||||
setSelectedArticleIndex(index);
|
flexWrap: "wrap",
|
||||||
setPreviewSelected(false);
|
borderRadius: 2,
|
||||||
}}
|
}}
|
||||||
sx={{
|
>
|
||||||
cursor: "pointer",
|
{linkedArticles.map((article, index) => (
|
||||||
bgcolor: "transparent",
|
<Box
|
||||||
color: "inherit",
|
key={article.id}
|
||||||
textDecoration:
|
onClick={() => {
|
||||||
selectedArticleIndex === index ?
|
setSelectedArticleIndex(index);
|
||||||
"underline" : "none",
|
setPreviewSelected(false);
|
||||||
p: 1,
|
}}
|
||||||
borderRadius: 1,
|
sx={{
|
||||||
}}
|
cursor: "pointer",
|
||||||
>
|
bgcolor: "transparent",
|
||||||
<Typography variant="body1">
|
color: "inherit",
|
||||||
{article.heading}
|
textDecoration:
|
||||||
</Typography>
|
selectedArticleIndex === index ?
|
||||||
</Box>
|
"underline" : "none",
|
||||||
))}
|
p: 1,
|
||||||
|
borderRadius: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="body1">
|
||||||
|
{article.heading}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
}
|
||||||
}
|
</Box>
|
||||||
</Box>
|
</Paper>
|
||||||
</Paper>
|
</Box>
|
||||||
|
</Edit>
|
||||||
</CustomTabPanel>
|
</CustomTabPanel>
|
||||||
|
|
||||||
<CustomTabPanel value={tabValue} index={2}>
|
<CustomTabPanel value={tabValue} index={2}>
|
||||||
@ -1395,10 +1399,11 @@ export const SightEdit = observer(() => {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: "50%",
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
flex: 1,
|
||||||
gap: 2,
|
gap: 2,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
@ -1616,11 +1621,11 @@ export const SightEdit = observer(() => {
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
{/* Предпросмотр */}
|
||||||
<Paper
|
<Paper
|
||||||
sx={{
|
sx={{
|
||||||
position: "fixed",
|
|
||||||
p: 2,
|
p: 2,
|
||||||
|
minWidth: "fit-content",
|
||||||
width: "30%",
|
width: "30%",
|
||||||
|
|
||||||
top: "178px",
|
top: "178px",
|
||||||
@ -1758,6 +1763,7 @@ export const SightEdit = observer(() => {
|
|||||||
</Box>
|
</Box>
|
||||||
</Paper>
|
</Paper>
|
||||||
</Box>
|
</Box>
|
||||||
|
</Box>
|
||||||
</Edit>
|
</Edit>
|
||||||
</CustomTabPanel>
|
</CustomTabPanel>
|
||||||
<ArticleEditModal />
|
<ArticleEditModal />
|
||||||
|
|||||||
@ -55,6 +55,7 @@ export const StationList = observer(() => {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
align: "left",
|
align: "left",
|
||||||
headerAlign: "left",
|
headerAlign: "left",
|
||||||
|
flex: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "system_name",
|
field: "system_name",
|
||||||
@ -64,6 +65,7 @@ export const StationList = observer(() => {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
align: "left",
|
align: "left",
|
||||||
headerAlign: "left",
|
headerAlign: "left",
|
||||||
|
flex: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "direction",
|
field: "direction",
|
||||||
@ -123,15 +125,15 @@ export const StationList = observer(() => {
|
|||||||
align: "left",
|
align: "left",
|
||||||
headerAlign: "left",
|
headerAlign: "left",
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
field: "description",
|
// field: "description",
|
||||||
headerName: "Описание",
|
// headerName: "Описание",
|
||||||
type: "string",
|
// type: "string",
|
||||||
display: "flex",
|
// display: "flex",
|
||||||
align: "left",
|
// align: "left",
|
||||||
headerAlign: "left",
|
// headerAlign: "left",
|
||||||
flex: 1,
|
// flex: 1,
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
field: "actions",
|
field: "actions",
|
||||||
headerName: "Действия",
|
headerName: "Действия",
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { makeAutoObservable } from "mobx";
|
|||||||
class StationStore {
|
class StationStore {
|
||||||
stationModalOpen: boolean = false;
|
stationModalOpen: boolean = false;
|
||||||
selectedStationId: number | null = null;
|
selectedStationId: number | null = null;
|
||||||
|
selectedRouteId: number | null = null;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
makeAutoObservable(this);
|
makeAutoObservable(this);
|
||||||
@ -12,6 +13,10 @@ class StationStore {
|
|||||||
this.selectedStationId = id;
|
this.selectedStationId = id;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setRouteIdAction = (id: number) => {
|
||||||
|
this.selectedRouteId = id;
|
||||||
|
};
|
||||||
|
|
||||||
setStationModalOpenAction = (open: boolean) => {
|
setStationModalOpenAction = (open: boolean) => {
|
||||||
this.stationModalOpen = open;
|
this.stationModalOpen = open;
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user