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

feat: fix sight edit

Browse Source
This commit is contained in:
Илья Куприец
2025-06-07 15:16:29 +03:00
parent 1104e94ba8
commit 0fe4683683
17 changed files with 438 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/widgets/SightTabs/CreateInformationTab/index.tsx
View File

@@ -48,6 +48,9 @@ export const CreateInformationTab = observer(
"thumbnail" | "watermark_lu" | "watermark_rd" | null
>(null);
const [isAddMediaOpen, setIsAddMediaOpen] = useState(false);
const [hardcodeType, setHardcodeType] = useState<
"thumbnail" | "watermark_lu" | "watermark_rd" | null
>(null);
// const handleMenuOpen = (
// event: React.MouseEvent<HTMLElement>,
@@ -260,10 +263,15 @@ export const CreateInformationTab = observer(
setIsUploadMediaOpen(true);
setActiveMenuType("thumbnail");
}}
setHardcodeType={(type) => {
setHardcodeType(
type as "thumbnail" | "watermark_lu" | "watermark_rd"
);
}}
/>
<ImageUploadCard
title="Водяной знак (л.в)"
title="Водяной знак (леввый верхний)"
imageKey="watermark_lu"
imageUrl={sight.watermark_lu}
onImageClick={() => {
@@ -284,10 +292,15 @@ export const CreateInformationTab = observer(
setIsUploadMediaOpen(true);
setActiveMenuType("watermark_lu");
}}
setHardcodeType={(type) => {
setHardcodeType(
type as "thumbnail" | "watermark_lu" | "watermark_rd"
);
}}
/>
<ImageUploadCard
title="Водяной знак (п.в)"
title="Водяной знак (правый нижний)"
imageKey="watermark_rd"
imageUrl={sight.watermark_rd}
onImageClick={() => {
@@ -308,6 +321,11 @@ export const CreateInformationTab = observer(
setIsUploadMediaOpen(true);
setActiveMenuType("watermark_rd");
}}
setHardcodeType={(type) => {
setHardcodeType(
type as "thumbnail" | "watermark_lu" | "watermark_rd"
);
}}
/>
</Box>
</Box>
@@ -397,6 +415,7 @@ export const CreateInformationTab = observer(
setActiveMenuType(null);
setIsUploadMediaOpen(false);
}}
hardcodeType={hardcodeType}
/>
</>
);

113
src/widgets/SightTabs/CreateLeftTab/index.tsx
View File

@@ -9,6 +9,7 @@ import {
createSightStore,
SelectArticleModal,
UploadMediaDialog,
Language,
} from "@shared";
import {
LanguageSwitcher,
@@ -308,8 +309,8 @@ export const CreateLeftTab = observer(
flex: 1,
display: "flex",
flexDirection: "column",
gap: 1.5,
maxWidth: "320px",
gap: 0.5,
}}
>
<Paper
@@ -317,49 +318,32 @@ export const CreateLeftTab = observer(
sx={{
width: "100%",
minWidth: 320,
maxWidth: 400,
height: "auto",
minHeight: 500,
backgroundColor: "#877361",
background:
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
overflowY: "auto",
padding: 0,
display: "flex",
flexDirection: "column",
}}
>
{/* {data.left.media?.filename ? (
<Box
sx={{
width: "100%",
height: 200,
backgroundColor: "grey.300",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<img
src={data.left.media?.filename ?? ""}
alt="Превью медиа"
style={{
objectFit: "cover",
width: "100%",
height: "100%",
}}
/>
</Box>
) : (
)} */}
flexDirection: "column",
borderRadius: "10px",
}}
>
<Box
sx={{
overflow: "hidden",
width: "100%",
height: 200,
backgroundColor: "grey.300",
minHeight: 100,
padding: "3px",
display: "flex",
alignItems: "center",
justifyContent: "center",
"& img": {
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
width: "100%",
height: "auto",
objectFit: "contain",
},
}}
>
{sight[language].left.media.length > 0 ? (
@@ -370,40 +354,67 @@ export const CreateLeftTab = observer(
sight[language].left.media[0].media_type,
filename: sight[language].left.media[0].filename,
}}
fullWidth
/>
) : (
<ImagePlus size={48} color="grey" />
<ImagePlus size={48} color="white" />
)}
</Box>
{/* Заголовок в превью */}
<Box
sx={{
backgroundColor: "#877361",
background:
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
color: "white",
padding: 1.5,
margin: "5px 0px 5px 0px",
display: "flex",
flexDirection: "column",
gap: 1,
padding: 1,
}}
>
<Typography
variant="h5"
component="h2"
sx={{ wordBreak: "break-word" }}
sx={{
wordBreak: "break-word",
fontSize: "24px",
fontWeight: 700,
lineHeight: "120%",
}}
>
{sight[language].left.heading || "Название информации"}
</Typography>
<Typography
variant="h6"
component="h2"
sx={{
wordBreak: "break-word",
fontSize: "18px",
lineHeight: "120%",
}}
>
{sight[language as Language].address}
</Typography>
</Box>
{/* Текст статьи в превью */}
<Box
sx={{
padding: 2,
flexGrow: 1,
}}
>
<ReactMarkdownComponent
value={sight[language].left.body}
/>
</Box>
{sight[language].left.body && (
<Box
sx={{
padding: 1,
maxHeight: "300px",
overflowY: "scroll",
background:
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
flexGrow: 1,
}}
>
<ReactMarkdownComponent
value={sight[language].left.body}
/>
</Box>
)}
</Paper>
</Box>
</Box>

19
src/widgets/SightTabs/CreateRightTab/index.tsx
View File

@@ -239,7 +239,7 @@ export const CreateRightTab = observer(
// 4. Update the store with the new order:
// This will typically trigger a re-render of the component with the updated list.
updateRightArticles(newRightArticles, language);
updateRightArticles(newRightArticles);
};
return (
@@ -511,7 +511,7 @@ export const CreateRightTab = observer(
<Paper
className="flex-1 flex flex-col max-w-[500px]"
sx={{
borderRadius: "16px",
borderRadius: "10px",
overflow: "hidden",
}}
elevation={2}
@@ -531,13 +531,17 @@ export const CreateRightTab = observer(
0 ? (
<Box
sx={{
overflow: "hidden",
width: "100%",
maxHeight: "290px",
flexShrink: 0,
padding: "2px 2px 0px 2px",
display: "flex",
alignItems: "center",
justifyContent: "center",
"& img": {
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
width: "100%",
height: "auto",
objectFit: "contain",
},
}}
>
<MediaViewer
@@ -571,6 +575,7 @@ export const CreateRightTab = observer(
fontWeight: 700,
lineHeight: "120%",
backdropFilter: "blur(12px)",
borderBottom: "1px solid #A89F90",
boxShadow:
"inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
background:

24
src/widgets/SightTabs/InformationTab/index.tsx
View File

@@ -50,7 +50,9 @@ export const InformationTab = observer(
"thumbnail" | "watermark_lu" | "watermark_rd" | null
>(null);
const [isAddMediaOpen, setIsAddMediaOpen] = useState(false);
const [hardcodeType, setHardcodeType] = useState<
"thumbnail" | "watermark_lu" | "watermark_rd" | null
>(null);
useEffect(() => {
// Показывать только при инициализации (не менять при ошибках пользователя)
if (sight.common.latitude !== 0 || sight.common.longitude !== 0) {
@@ -260,9 +262,14 @@ export const InformationTab = observer(
setIsUploadMediaOpen(true);
setActiveMenuType("thumbnail");
}}
setHardcodeType={(type) => {
setHardcodeType(
type as "thumbnail" | "watermark_lu" | "watermark_rd"
);
}}
/>
<ImageUploadCard
title="Водяной знак (л.в)"
title="Водяной знак (левый верхний)"
imageKey="watermark_lu"
imageUrl={sight.common.watermark_lu}
onImageClick={() => {
@@ -287,9 +294,14 @@ export const InformationTab = observer(
setIsUploadMediaOpen(true);
setActiveMenuType("watermark_lu");
}}
setHardcodeType={(type) => {
setHardcodeType(
type as "thumbnail" | "watermark_lu" | "watermark_rd"
);
}}
/>
<ImageUploadCard
title="Водяной знак (п.в)"
title="Водяной знак (правый нижний)"
imageKey="watermark_rd"
imageUrl={sight.common.watermark_rd}
onImageClick={() => {
@@ -314,6 +326,11 @@ export const InformationTab = observer(
setIsUploadMediaOpen(true);
setActiveMenuType("watermark_rd");
}}
setHardcodeType={(type) => {
setHardcodeType(
type as "thumbnail" | "watermark_lu" | "watermark_rd"
);
}}
/>
</Box>
</Box>
@@ -399,6 +416,7 @@ export const InformationTab = observer(
setActiveMenuType(null);
setIsUploadMediaOpen(false);
}}
hardcodeType={hardcodeType}
/>
<PreviewMediaDialog
open={isPreviewMediaOpen}

21
src/widgets/SightTabs/LeftWidgetTab/index.tsx
View File

@@ -260,22 +260,32 @@ export const LeftWidgetTab = observer(
sx={{
width: "100%",
minWidth: 320,
background:
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
overflowY: "auto",
padding: 0,
display: "flex",
flexDirection: "column",
borderRadius: "10px",
}}
>
<Box
sx={{
overflow: "hidden",
width: "100%",
height: 175,
minHeight: 100,
padding: "3px",
display: "flex",
alignItems: "center",
padding: "3px",
justifyContent: "center",
"& img": {
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
width: "100%",
height: "auto",
objectFit: "contain",
},
}}
>
{data.left.media.length > 0 ? (
@@ -285,9 +295,10 @@ export const LeftWidgetTab = observer(
media_type: data.left.media[0].media_type,
filename: data.left.media[0].filename,
}}
fullWidth
/>
) : (
<ImagePlus size={48} color="grey" />
<ImagePlus size={48} color="white" />
)}
</Box>

27
src/widgets/SightTabs/RightWidgetTab/index.tsx
View File

@@ -182,7 +182,7 @@ export const RightWidgetTab = observer(
// 4. Update the store with the new order:
// This will typically trigger a re-render of the component with the updated list.
updateRightArticles(newRightArticles, language);
updateRightArticles(newRightArticles);
};
return (
@@ -347,7 +347,7 @@ export const RightWidgetTab = observer(
value={
sight[language].right[activeArticleIndex].body
}
onChange={(value) =>
onChange={(value: any) =>
updateRightArticleInfo(
activeArticleIndex,
language,
@@ -381,11 +381,11 @@ export const RightWidgetTab = observer(
</Box>
)}
{type === "media" && (
<Box className="w-[80%] border border-gray-300 rounded-2xl relative">
<Box className="w-[80%] border border-gray-300 rounded-2xl relative flex justify-center items-center">
{sight.common.preview_media && (
<>
{type === "media" && (
<Box className="w-[80%] h-full rounded-2xl relative flex items-center justify-center">
<Box className="w-full h-full rounded-2xl relative flex items-center justify-center">
{previewMedia && (
<>
<Box className="absolute top-4 right-4 z-10">
@@ -397,7 +397,7 @@ export const RightWidgetTab = observer(
</button>
</Box>
<Box className="w-1/2 h-1/2">
<Box className="w-1/2 h-1/2 flex justify-center items-center">
<MediaViewer
media={{
id: previewMedia.id || "",
@@ -453,7 +453,7 @@ export const RightWidgetTab = observer(
<Paper
className="flex-1 flex flex-col max-w-[500px]"
sx={{
borderRadius: "16px",
borderRadius: "10px",
overflow: "hidden",
}}
elevation={2}
@@ -473,13 +473,17 @@ export const RightWidgetTab = observer(
0 ? (
<Box
sx={{
overflow: "hidden",
width: "100%",
maxHeight: "290px",
flexShrink: 0,
padding: "2px 2px 0px 2px",
display: "flex",
alignItems: "center",
justifyContent: "center",
"& img": {
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
width: "100%",
height: "auto",
objectFit: "contain",
},
}}
>
<MediaViewer
@@ -513,6 +517,7 @@ export const RightWidgetTab = observer(
fontWeight: 700,
lineHeight: "120%",
backdropFilter: "blur(12px)",
borderBottom: "1px solid #A89F90",
boxShadow:
"inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
background: