Merge pull request #92 from mbpictures/hotfix/minor-issues

hotfix/minor-issues
mbpictures · Dec 24, 2023 · e0c141b · e0c141b
2 parents 5478924 + a4035b9
commit e0c141b
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 11 deletions.
diff --git a/locale/de/common.json b/locale/de/common.json
@@ -23,5 +23,6 @@
     "time-until": "{{minutes}}:{{seconds}}",
     "number-of-tickets-unavailable": "{{ticketAmount}} Tickets sind nicht mehr verfügbare",
     "view-occupied-tickets": "Nicht verfügbare Tickets anzeigen",
-    "impress": "Impressum"
+    "impress": "Impressum",
+    "choose-continue": "Bitte Event auswählen und weiter (rechts unten) klicken"
 }
diff --git a/locale/en/common.json b/locale/en/common.json
@@ -23,5 +23,6 @@
     "time-until": "{{minutes}}:{{seconds}}",
     "number-of-tickets-unavailable": "{{ticketAmount}} tickets of your order are unavailable",
     "view-occupied-tickets": "Show unavailable tickets",
-    "impress": "Impress"
+    "impress": "Impress",
+    "choose-continue": "Please select an event and press continue (lower right corner)"
 }
diff --git a/src/components/admin/SeatMapEditor/SeatMapTemplateEditor.tsx b/src/components/admin/SeatMapEditor/SeatMapTemplateEditor.tsx
@@ -74,7 +74,7 @@ const countingGenerators = {
             for (let row of newDefinition) {
                 for (let col = 0; col < templateData.blockWidth; col++) {
                     const rowIndex = col + (templateData.blockWidth + 1) * block;
-                    if (row[rowIndex].type !== "seat" || row.length <= rowIndex) continue;
+                    if (row.length <= rowIndex || row[rowIndex].type !== "seat") continue;
                     index++;
                     row[rowIndex].id = index;
                 }

diff --git a/src/components/seatselection/seatmap/SeatSelectionMap.tsx b/src/components/seatselection/seatmap/SeatSelectionMap.tsx
@@ -1,12 +1,12 @@
 import { SeatRow, SeatSelectionRow } from "./SeatSelectionRow";
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
 import { Card, Grid, IconButton, useMediaQuery } from "@mui/material";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks";
 import {
     OrderState,
     selectOrder, setTickets
 } from "../../../store/reducers/orderReducer";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Seat } from "./SeatMapSeat";
 import { PaymentOverview } from "../../PaymentOverview";
 import { useTheme } from "@mui/system";
@@ -53,24 +53,30 @@ export const SeatSelectionMap = ({
     const [previewOpen, setPreviewOpen] = useState(false);
     const theme = useTheme();
     const isLgDown = useMediaQuery(theme.breakpoints.down("lg"));
+    const ref = useRef<ReactZoomPanPinchRef>(null);
 
-    const rescale = () => {
+    const rescale = useCallback(() => {
         if (!content.current || !container.current) return;
         const {width: maxWidth, height: maxHeight} = getDimensions(container.current);
         const {width, height} = getDimensions(content.current);
         setScale(Math.min(maxWidth / width, maxHeight / height));
-    };
+    }, [content, container]);
+
+    useEffect(() => {
+        if (!ref.current) return;
+        ref.current.centerView(scale);
+    }, [scale, ref]);
 
     useEffect(() => {
         rescale();
     }, [container, content]);
 
     useEffect(() => {
-        document.addEventListener("resize", rescale);
+        window.addEventListener("resize", rescale);
         return () => {
-            document.removeEventListener("resize", rescale);
+            window.removeEventListener("resize", rescale);
         };
-    }, []);
+    }, [rescale]);
 
     const createNewOrder = (): OrderState => {
         return {
@@ -126,7 +132,7 @@ export const SeatSelectionMap = ({
                     }}
                     ref={container}
                 >
-                    <TransformWrapper centerOnInit centerZoomedOut minScale={scale} limitToBounds>
+                    <TransformWrapper centerOnInit centerZoomedOut minScale={scale} limitToBounds ref={ref}>
                         <TransformComponent wrapperStyle={{ width: "100%", height: isLgDown ? "500px" : "100%" }}>
                             <div
                                 style={{ display: "flex", flexDirection: "column" }}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,8 +12,10 @@ import loadNamespaces from "next-translate/loadNamespaces";
 import { resetOrder } from "../store/reducers/orderReducer";
 import { eventDateIsBookable } from "../constants/util";
 import { resetPayment } from "../store/reducers/paymentReducer";
+import useTranslation from "next-translate/useTranslation";
 
 export default function Home({ events, direction, title, subtitle }) {
+    const {t} = useTranslation("common");
     const dispatch = useAppDispatch();
 
     useEffect(() => {
@@ -45,6 +47,9 @@ export default function Home({ events, direction, title, subtitle }) {
                     </Typography>
                 )
             }
+            <Typography component={"div"} align={"center"} variant={"caption"}>
+                {t("choose-continue")}
+            </Typography>
             {
                 gallery ? (
                     <GalleryEventSelection events={events} onChange={handleChange} />