KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more fixes

Browse Source
This commit is contained in:
Spynder 2025-05-06 17:56:05 +03:00
parent 86947d6332
commit fba2fb0f5c
12 changed files with 366 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.tsx
View File

@ -177,6 +177,17 @@ function App() {
icon: <StationIcon />,
},
},
{
name: "stationmodal",
show: "/route/:id/station",
edit: "/route/:id/station/",
meta: {
hide: true,
canDelete: true,
label: "Маршруты",
icon: <RouteIcon />,
},
},
{
name: "vehicle",
list: "/vehicle",

119
src/components/LinkedItems.tsx
View File

@ -34,6 +34,7 @@ import { articleStore } from "../store/ArticleStore";
import { ArticleEditModal } from "./modals/ArticleEditModal";
import { StationEditModal } from "./modals/StationEditModal";
import { stationStore } from "../store/StationStore";
function insertAtPosition<T>(arr: T[], pos: number, value: T): T[] {
const index = pos - 1;
if (index >= arr.length) {
@ -90,7 +91,8 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
}: LinkedItemsProps<T>) => {
const { language } = languageStore;
const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
const { setStationModalOpenAction, setStationIdAction } = stationStore;
const { setStationModalOpenAction, setStationIdAction, setRouteIdAction } =
stationStore;
const [position, setPosition] = useState<number>(1);
const [items, setItems] = 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}
>
{(provided) => (
<>
<TableRow
sx={{
cursor:
childResource === "article"
? "pointer"
: "default",
}}
onClick={() => {
if (childResource === "article") {
setArticleModalOpenAction(true);
setArticleIdAction(item.id);
}
if (childResource === "station") {
setStationModalOpenAction(true);
setStationIdAction(item.id);
}
}}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
hover
>
{type === "edit" && dragAllowed && (
<TableCell {...provided.dragHandleProps}>
<IconButton size="small">
<DragIndicatorIcon />
</IconButton>
</TableCell>
)}
<TableCell key={String(item.id)}>
{index + 1}
<TableRow
sx={{
cursor:
childResource === "article"
? "pointer"
: "default",
}}
onClick={() => {
if (childResource === "article") {
setArticleModalOpenAction(true);
setArticleIdAction(item.id);
}
if (childResource === "station") {
setStationModalOpenAction(true);
setStationIdAction(item.id);
setRouteIdAction(Number(parentId));
}
}}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
hover
>
{type === "edit" && dragAllowed && (
<TableCell {...provided.dragHandleProps}>
<IconButton size="small">
<DragIndicatorIcon />
</IconButton>
</TableCell>
{fields.map((field, index) => (
<TableCell
key={String(field.data) + String(index)}
>
{field.render
? field.render(item[field.data])
: item[field.data]}
</TableCell>
))}
)}
<TableCell key={String(item.id)}>
{index + 1}
</TableCell>
{fields.map((field, index) => (
<TableCell
key={String(field.data) + String(index)}
>
{field.render
? field.render(item[field.data])
: item[field.data]}
</TableCell>
))}
{type === "edit" && (
<TableCell>
<Button
variant="outlined"
color="error"
size="small"
onClick={(e) => {
e.stopPropagation();
deleteItem(item.id);
}}
>
Отвязать
</Button>
</TableCell>
)}
</TableRow>
</>
{type === "edit" && (
<TableCell>
<Button
variant="outlined"
color="error"
size="small"
onClick={(e) => {
e.stopPropagation();
deleteItem(item.id);
}}
>
Отвязать
</Button>
</TableCell>
)}
</TableRow>
)}
</Draggable>
))}

35
src/components/modals/StationEditModal/index.tsx
View File

@ -20,6 +20,9 @@ import { LanguageSwitch } from "../../LanguageSwitch/index";
import { useState } from "react";
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 TRANSFER_FIELDS = [
@ -47,7 +50,7 @@ const style = {
};
export const StationEditModal = observer(() => {
const { stationModalOpen, setStationModalOpenAction, selectedStationId } =
const { stationModalOpen, setStationModalOpenAction, selectedStationId, selectedRouteId } =
stationStore;
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 {
register,
control,
@ -65,14 +76,15 @@ export const StationEditModal = observer(() => {
reset,
setValue,
watch,
handleSubmit,
} = useForm({
refineCoreProps: {
resource: "station",
id: selectedStationId ?? undefined,
resource: `route/${selectedRouteId ?? 1}/station`,
action: "edit",
id: "",
redirect: false,
onMutationSuccess: () => {
onMutationSuccess: (data) => {
console.log(data);
setStationModalOpenAction(false);
reset();
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 (
<Modal
open={stationModalOpen}

3
src/pages/route-preview/InfiniteCanvas.tsx
View File

@ -163,6 +163,7 @@ export function InfiniteCanvas({children} : Readonly<{children?: ReactNode}>) {
>
{children}
</pixiContainer>
{/* Show center of the screen.
<pixiGraphics
eventMode="none"
@ -172,7 +173,7 @@ export function InfiniteCanvas({children} : Readonly<{children?: ReactNode}>) {
g.circle(center.x, center.y, 1);
g.fill("#fff");
}}
/>
/> */}
</ErrorBoundary>
);
}

1
src/pages/route-preview/MapDataContext.tsx
View File

@ -59,6 +59,7 @@ export function MapDataProvider({ children }: Readonly<{ children: ReactNode }>)
url: `${apiUrl}/route/${routeId}`,
method: 'get',
});
const { data: stationQuery, isLoading: isStationLoading } = useCustom({
url: `${apiUrl}/route/${routeId}/station`,
method: 'get'

6
src/pages/route-preview/RightSidebar.tsx
View File

@ -52,7 +52,7 @@ export function RightSidebar() {
}
function pan({x, y}: {x: number, y: number}) {
const coordinates = coordinatesToLocal(y,x);
const coordinates = coordinatesToLocal(x,y);
setTransform(coordinates.x, coordinates.y);
}
@ -144,7 +144,7 @@ export function RightSidebar() {
<Stack direction="row" spacing={2}>
<TextField
type="number"
label="Центр карты X"
label="Центр карты, широта"
variant="filled"
value={Math.round(localCenter.x*100000)/100000}
onChange={(e) => {
@ -160,7 +160,7 @@ export function RightSidebar() {
/>
<TextField
type="number"
label="Центр карты Y"
label="Центр карты, высота"
variant="filled"
value={Math.round(localCenter.y*100000)/100000}
onChange={(e) => {

4
src/pages/route-preview/index.tsx
View File

@ -77,8 +77,6 @@ export function RouteMap() {
return;
}
console.log("Use effect fired")
if (
originalRouteData?.center_latitude === originalRouteData?.center_longitude &&
originalRouteData?.center_latitude === 0
@ -99,7 +97,6 @@ export function RouteMap() {
y: -(boundingBox.from.y + boundingBox.to.y) / 2
};
setPosition(newCenter);
console.log("Taking easy way out", originalRouteData)
setIsSetup(true);
}
} else if (
@ -114,7 +111,6 @@ export function RouteMap() {
originalRouteData?.rotate,
originalRouteData?.scale_min
);
console.log("Setup complete")
setIsSetup(true);
}
}, [points, originalRouteData?.center_latitude, originalRouteData?.center_longitude, originalRouteData?.rotate, isSetup, screenCenter]);

10
src/pages/route-preview/utils.ts
View File

@ -1,14 +1,14 @@
// approximation
export function coordinatesToLocal(longitude: number, latitude: number) {
export function coordinatesToLocal(latitude: number, longitude: number) {
return {
x: latitude,
y: -longitude*2
x: longitude,
y: -latitude*2,
}
}
export function localToCoordinates(x: number, y: number) {
return {
latitude: x,
longitude: -y/2
longitude: x,
latitude: -y/2,
}
}

2
src/pages/route/types.ts
View File

@ -4,6 +4,8 @@ export type StationItem = {
id: number;
name: string;
description: string;
offset_x: number;
offset_y: number;
[key: string]: string | number;
};

466
src/pages/sight/edit.tsx
View File

@ -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
sx={{
display: "flex",
flexDirection: "column",
flex: 1,
maxWidth: "50%",
gap: 10,
justifyContent: "space-between",
}}
@ -830,9 +830,10 @@ export const SightEdit = observer(() => {
</Box>
{/* Блок предпросмотра */}
<Paper
</Box>
<Paper
sx={{
position: "fixed",
p: 2,
width: "30%",
@ -1014,11 +1015,12 @@ export const SightEdit = observer(() => {
},
}}
>
<Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
<Box
sx={{
maxWidth: "50%",
display: "flex",
flexDirection: "column",
// display: "flex",
flex:1,
// flexDirection: "column",
gap: 2,
position: "relative",
}}
@ -1098,143 +1100,59 @@ export const SightEdit = observer(() => {
/>
</Box>
</Box>
</Edit>
<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
{/* Предпросмотр */}
<Paper
sx={{
display: "flex",
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
sx={{
mb: 2,
margin: "0 auto",
display: "flex",
flexDirection: "column",
maxHeight: "300px",
gap: 2,
}}
>
{mediaFile && mediaFile.src && mediaFile.media_type === 1 && (
<img
src={mediaFile.src}
alt={mediaFile.filename}
style={{
maxWidth: "100%",
objectFit: "contain",
borderRadius: 8,
}}
/>
)}
{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 && (
<Box
sx={{
display: "flex",
flexDirection: "column",
flexGrow: 1,
}}
>
{!previewSelected && (
<Box
sx={{
mb: 2,
margin: "0 auto",
display: "flex",
flexDirection: "column",
maxHeight: "300px",
gap: 2,
}}
>
{mediaFile && mediaFile.src && mediaFile.media_type === 1 && (
<img
src={previewMedia.src}
alt={previewMedia.filename}
src={mediaFile.src}
alt={mediaFile.filename}
style={{
maxWidth: "100%",
height: "250px",
objectFit: "contain",
borderRadius: 8,
}}
/>
)}
{previewSelected &&
previewMedia &&
previewMedia.media_type === 2 && (
{mediaFile && mediaFile.media_type === 2 && (
<video
src={previewMedia.src}
src={mediaFile.src}
style={{
maxWidth: "50%",
@ -1246,26 +1164,22 @@ export const SightEdit = observer(() => {
muted
/>
)}
{previewSelected &&
previewMedia &&
previewMedia.media_type === 3 && (
{mediaFile && mediaFile.media_type === 3 && (
<img
src={previewMedia.src}
alt={previewMedia.filename}
src={mediaFile.src}
alt={mediaFile.filename}
style={{
maxWidth: "100%",
height: "250px",
height: "40vh",
objectFit: "contain",
borderRadius: 8,
}}
/>
)}
{previewSelected &&
previewMedia &&
previewMedia.media_type === 4 && (
{mediaFile && mediaFile.media_type === 4 && (
<img
src={previewMedia.src}
alt={previewMedia.filename}
src={mediaFile.src}
alt={mediaFile.filename}
style={{
maxWidth: "100%",
height: "40vh",
@ -1275,114 +1189,204 @@ export const SightEdit = observer(() => {
/>
)}
{previewSelected &&
previewMedia &&
previewMedia.src &&
previewMedia.media_type == 5 && (
{mediaFile && mediaFile.src && mediaFile.media_type == 5 && (
<ReactPhotoSphereViewer
src={previewMedia.src}
src={mediaFile.src}
height={"300px"}
width={"350px"}
/>
)}
{previewSelected &&
previewMedia &&
previewMedia.media_type === 6 && (
<ModelViewer height={"400px"} fileUrl={previewMedia.src} />
{mediaFile && mediaFile.media_type === 6 && (
<ModelViewer height={"400px"} fileUrl={mediaFile.src} />
)}
</Box>
)}
{!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)",
{
<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
src={previewMedia.src}
alt={previewMedia.filename}
style={{
maxWidth: "100%",
height: "250px",
objectFit: "contain",
borderRadius: 8,
}}
>
{selectedArticle.heading}
</Typography>
/>
)}
{selectedArticle && (
<Typography
variant="body1"
gutterBottom
px={2}
sx={{ color: "text.primary" }}
>
{selectedArticle.body}
</Typography>
{previewSelected &&
previewMedia &&
previewMedia.media_type === 2 && (
<video
src={previewMedia.src}
style={{
maxWidth: "50%",
objectFit: "contain",
borderRadius: 30,
}}
controls
autoPlay
muted
/>
)}
</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)",
}}
>
{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
sx={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
borderRadius: 2,
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)",
}}
>
{linkedArticles.map((article, index) => (
<Box
key={article.id}
onClick={() => {
setSelectedArticleIndex(index);
setPreviewSelected(false);
}}
sx={{
cursor: "pointer",
bgcolor: "transparent",
color: "inherit",
textDecoration:
selectedArticleIndex === index ?
"underline" : "none",
p: 1,
borderRadius: 1,
}}
>
<Typography variant="body1">
{article.heading}
</Typography>
</Box>
))}
<Box
sx={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
borderRadius: 2,
}}
>
{linkedArticles.map((article, index) => (
<Box
key={article.id}
onClick={() => {
setSelectedArticleIndex(index);
setPreviewSelected(false);
}}
sx={{
cursor: "pointer",
bgcolor: "transparent",
color: "inherit",
textDecoration:
selectedArticleIndex === index ?
"underline" : "none",
p: 1,
borderRadius: 1,
}}
>
<Typography variant="body1">
{article.heading}
</Typography>
</Box>
))}
</Box>
</Box>
</Box>
</Box>
</Box>
}
</Box>
</Paper>
}
</Box>
</Paper>
</Box>
</Edit>
</CustomTabPanel>
<CustomTabPanel value={tabValue} index={2}>
@ -1395,10 +1399,11 @@ export const SightEdit = observer(() => {
},
}}
>
<Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
<Box
sx={{
maxWidth: "50%",
display: "flex",
flex: 1,
gap: 2,
position: "relative",
}}
@ -1616,11 +1621,11 @@ export const SightEdit = observer(() => {
/>
</Box>
{/* Предпросмотр */}
<Paper
sx={{
position: "fixed",
p: 2,
minWidth: "fit-content",
width: "30%",
top: "178px",
@ -1758,6 +1763,7 @@ export const SightEdit = observer(() => {
</Box>
</Paper>
</Box>
</Box>
</Edit>
</CustomTabPanel>
<ArticleEditModal />

20
src/pages/station/list.tsx
View File

@ -55,6 +55,7 @@ export const StationList = observer(() => {
display: "flex",
align: "left",
headerAlign: "left",
flex: 1,
},
{
field: "system_name",
@ -64,6 +65,7 @@ export const StationList = observer(() => {
display: "flex",
align: "left",
headerAlign: "left",
flex: 1,
},
{
field: "direction",
@ -123,15 +125,15 @@ export const StationList = observer(() => {
align: "left",
headerAlign: "left",
},
{
field: "description",
headerName: "Описание",
type: "string",
display: "flex",
align: "left",
headerAlign: "left",
flex: 1,
},
// {
// field: "description",
// headerName: "Описание",
// type: "string",
// display: "flex",
// align: "left",
// headerAlign: "left",
// flex: 1,
// },
{
field: "actions",
headerName: "Действия",

5
src/store/StationStore.ts
View File

@ -3,6 +3,7 @@ import { makeAutoObservable } from "mobx";
class StationStore {
stationModalOpen: boolean = false;
selectedStationId: number | null = null;
selectedRouteId: number | null = null;
constructor() {
makeAutoObservable(this);
@ -12,6 +13,10 @@ class StationStore {
this.selectedStationId = id;
};
setRouteIdAction = (id: number) => {
this.selectedRouteId = id;
};
setStationModalOpenAction = (open: boolean) => {
this.stationModalOpen = open;
};