From e699a8003f11a9b6cf4b09b9959fb94152c7c370 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Sat, 11 Apr 2026 22:58:25 +0200 Subject: [PATCH] feat: implement kiosk mode functionality and update UI elements accordingly --- public/assets/images/cutlings2.avif | Bin 0 -> 4309 bytes src/components/MainPageLayout.js | 18 ++++++++++++++++-- src/components/header/CategoryList.js | 12 ++++++------ src/services/SocketManager.js | 6 ++++++ 4 files changed, 28 insertions(+), 8 deletions(-) create mode 100644 public/assets/images/cutlings2.avif diff --git a/public/assets/images/cutlings2.avif b/public/assets/images/cutlings2.avif new file mode 100644 index 0000000000000000000000000000000000000000..f53dc6da68446e64a08a7bef6956c67db66e4e90 GIT binary patch literal 4309 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 Mu=b@Msl9^vKfcW%ivR!s literal 0 HcmV?d00001 diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js index 33a982b..796b75d 100644 --- a/src/components/MainPageLayout.js +++ b/src/components/MainPageLayout.js @@ -291,8 +291,22 @@ const MainPageLayout = () => { const currentPath = location.pathname; const { t } = useTranslation(); const [starHovered, setStarHovered] = React.useState(false); + + // State to track kiosk mode + const [isKiosk, setIsKiosk] = React.useState(() => window.growheadskiosk === true); + + // Listen for the custom event + React.useEffect(() => { + const handleKioskChange = () => { + setIsKiosk(window.growheadskiosk === true); + }; + + window.addEventListener('growheadskiosk-change', handleKioskChange); + return () => window.removeEventListener('growheadskiosk-change', handleKioskChange); + }, []); + const translatedContent = { - buildYourSet: t('sections.buildYourSet'), + buildYourSet: isKiosk ? 'Schau in den Stecklingskatalog' : t('sections.buildYourSet'), selectSeedRate: t('sections.selectSeedRate'), outdoorSeason: t('sections.outdoorSeason') }; @@ -317,7 +331,7 @@ const MainPageLayout = () => { const allContentBoxes = { home: [ { title: t('sections.seeds'), image: "/assets/images/seeds.avif", bgcolor: "#e1f0d3", link: "/Kategorie/Seeds" }, - { title: t('sections.konfigurator'), image: "/assets/images/konfigurator.avif", bgcolor: "#e8f5d6", link: "/Konfigurator" } + { title: isKiosk ? 'Stecklingskatalog' : t('sections.konfigurator'), image: isKiosk ? "/assets/images/cutlings2.avif" : "/assets/images/konfigurator.avif", bgcolor: "#e8f5d6", link: isKiosk ? "https://cloneheads.de" : "/Konfigurator" } ], aktionen: [ { title: t('sections.oilPress'), image: "/assets/images/presse.jpg", bgcolor: "#e1f0d3", link: "/Artikel/Graveda-10t-presse-tagesmiete-inkl-prepress-vorpressform" }, diff --git a/src/components/header/CategoryList.js b/src/components/header/CategoryList.js index a0037de..edef62b 100644 --- a/src/components/header/CategoryList.js +++ b/src/components/header/CategoryList.js @@ -197,7 +197,7 @@ class CategoryList extends Component { aria-label="Zur Startseite" onClick={isMobile ? this.handleMobileCategoryClick : undefined} sx={{ - fontSize: "0.75rem", + fontSize: "0.85rem", textTransform: "none", whiteSpace: "nowrap", opacity: 0.9, @@ -275,7 +275,7 @@ class CategoryList extends Component { aria-label="Neuheiten" onClick={isMobile ? this.handleMobileCategoryClick : undefined} sx={{ - fontSize: "0.75rem", + fontSize: "0.85rem", textTransform: "none", whiteSpace: "nowrap", opacity: 0.9, @@ -353,7 +353,7 @@ class CategoryList extends Component { aria-label={this.props.t ? this.props.t('navigation.soon') : 'Demnächst'} onClick={isMobile ? this.handleMobileCategoryClick : undefined} sx={{ - fontSize: "0.75rem", + fontSize: "0.85rem", textTransform: "none", whiteSpace: "nowrap", opacity: 0.9, @@ -435,7 +435,7 @@ class CategoryList extends Component { size="small" onClick={isMobile ? this.handleMobileCategoryClick : undefined} sx={{ - fontSize: "0.75rem", + fontSize: "0.85rem", textTransform: "none", whiteSpace: "nowrap", opacity: 0.9, @@ -506,7 +506,7 @@ class CategoryList extends Component { alignItems: "center", height: "33px", // Match small button height px: 1, - fontSize: "0.75rem", + fontSize: "0.85rem", opacity: 0.9, }} > @@ -522,7 +522,7 @@ class CategoryList extends Component { aria-label={this.props.t ? this.props.t('navigation.konfiguratorAria') : 'Zum Konfigurator'} onClick={isMobile ? this.handleMobileCategoryClick : undefined} sx={{ - fontSize: "0.75rem", + fontSize: "0.85rem", textTransform: "none", whiteSpace: "nowrap", opacity: 0.9, diff --git a/src/services/SocketManager.js b/src/services/SocketManager.js index 53f9b44..7ed9e4c 100644 --- a/src/services/SocketManager.js +++ b/src/services/SocketManager.js @@ -153,6 +153,12 @@ class SocketManager { auth: this._buildSocketAuth() }); + this._socket.on('kiosk', () => { + window.growheadskiosk = true; + window.dispatchEvent(new Event('growheadskiosk-change')); + console.warn('Kiosk mode enabled via socket event'); + }); + // Always refresh auth data before reconnect attempts. if (this._socket.io && this._socket.io.on) { this._socket.io.on('reconnect_attempt', () => {