\n \n {!isIndividualTour &&\n handleOpen('tour')}\n style={{cursor: 'pointer'}}\n >\n handleOpen('place')}\n style={{cursor: 'pointer'}}\n >\n \n \n \n {!isIndividualTour &&\n handleOpen('where')}\n style={{cursor: 'pointer'}}\n >\n \n \n \n }\n handleOpen('highlights')}\n style={{cursor: 'pointer'}}\n >\n \n \n \n \n
\n \n \n \n
\n \n }\n \n \n {(stateKey === 'abb' || stateKey === 'striebel') && (\n <>\n {Object.keys(navigation).map(key => {\n if (\n navigation[key].find(el => el.label === tour?.context?.szene)\n ) {\n return null\n }\n\n const isVisited = visited.reduce((value, item) => {\n if (!value) {\n return navigation[key].find(el => el.label === item) ? true : false\n }\n return value\n }, false)\n\n return (\n \n handleNavigatePanorama(navigation[key][0]?.label)\n }\n >\n handleOpen(key)}\n >\n
\n \n \n \n \n {messages[`${place}${key}`]\n ? intl.formatMessage(messages[`${place}${key}`])\n : ''}\n \n \n \n {isVisited && \n \n \n
\n \n )\n })}\n \n )}\n {stateKey.includes('bje') && (\n <>\n {luedenscheidTouren.map((key, index) => {\n return (\n \n \n {messages[key]\n ? intl.formatMessage(messages[key])\n : ''}\n \n
\n \n )\n })}\n \n )}\n \n \n \n \n
\n \n )\n}\n","import React, {useState, useEffect} from 'react'\nimport {FormattedMessage} from 'react-intl'\nimport {useSelector, useDispatch} from 'react-redux'\nimport {useUpdateAtom} from 'jotai/utils'\nimport Typography from '@mui/material/Typography'\nimport IconButton from '@mui/material/IconButton'\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack'\nimport Grid from '@mui/material/Grid'\nimport Box from '@mui/material/Box'\nimport useConfig from 'components/Chatbot/useConfig'\nimport {setOpen} from 'components/TourControls/duck'\n\nimport {stepsChatbotAtom} from 'components/jotai'\nimport {getCalculatedFontSize} from 'components/TourControls/duck'\nimport ErrorBoundary from 'components/ErrorBoundary'\nimport {getNavigationContext} from 'components/xstate/NavigationMachine'\n\nexport const PlaceBack = ({exit}) => {\n const setStepsChatbot = useUpdateAtom(stepsChatbotAtom)\n const fontSize = useSelector(getCalculatedFontSize)\n const defaultStep = useConfig('default')\n const exitStep = useConfig('exit')\n\n const handleBack = () => {\n if (!exit) {\n setStepsChatbot(defaultStep)\n } else {\n setStepsChatbot(exitStep)\n }\n }\n\n return (\n \n \n {stateKey !== 'abb' && (\n handleOpen('heidelberg')}\n style={{cursor: 'pointer'}}\n >\n handleOpen('luedenscheid')}\n style={{cursor: 'pointer'}}\n >\n handleOpen('sasbach')}\n style={{cursor: 'pointer'}}\n >\n
\n \n \n \n
\n \n )}\n {!stateKey.includes('bje') && (\n \n \n \n
\n \n )}\n {stateKey !== 'striebel' && (\n \n \n \n
\n \n )}\n \n \n \n \n \n
\n )\n}\n","import {FormattedMessage} from 'react-intl'\nimport Typography from '@mui/material/Typography'\nimport {useSelector} from 'react-redux'\nimport {getCalculatedFontSize} from 'components/TourControls/duck'\n\nconst Message = ({message}) => {\n const fontSize = useSelector(getCalculatedFontSize)\n return (\n \n
\n \n \n
\n \n \n \n
\n )\n}\n\nexport default Message","import {useMemo} from 'react'\n\nexport default function useIsPoi() {\n const isPoi = useMemo(() => {\n if (window?.blazeIT?.getComponent('Popup Viewer').get('inView')) {\n return true\n } else if (window?.blazeIT?.getComponent('WebFramePopup').get('inView') && window?.blazeIT?.getComponent('WebFramePopup').get('url').includes('.pdf')) {\n return true\n } else {\n return false\n }\n }, [window?.blazeIT?.getComponent('Popup Viewer').get('inView'), window?.blazeIT?.getComponent('WebFramePopup').get('inView')])\n\n return isPoi\n}\n","import React from 'react'\nimport {FormattedMessage} from 'react-intl'\nimport {useDispatch, useSelector} from 'react-redux'\n\nimport {useAtom} from 'jotai'\nimport {useAtomValue, useUpdateAtom} from 'jotai/utils'\nimport {\n tourMachineAtom,\n shouldPlaySoundAtom,\n shouldPlaySoundPoiAtom,\n isEndVideoAtom,\n audioControlsAtom,\n audioControlsPoiAtom,\n stepsChatbotAtom,\n} from 'components/jotai'\nimport {useActor} from '@xstate/react'\nimport Typography from '@mui/material/Typography'\nimport IconButton from '@mui/material/IconButton'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\nimport Grid from '@mui/material/Grid'\nimport Box from '@mui/material/Box'\nimport useIsPoi from 'components/Hooks/useIsPoi'\nimport {setOpen} from 'components/TourControls/duck'\nimport useConfig from 'components/Chatbot/useConfig'\nimport {getCalculatedFontSize} from 'components/TourControls/duck'\n\nexport const PlaySoundNext = () => {\n const setStepsChatbot = useUpdateAtom(stepsChatbotAtom)\n const defaultStep = useConfig('default')\n const handleForward = () => {\n setStepsChatbot(defaultStep)\n }\n return (\n \n \n \n
\n \n \n \n \n
\n )\n}\n","import {Initial, InitialBack} from 'components/Chatbot/components/Initial'\nimport {\n TourBack,\n SelectTour,\n PlaceOption,\n} from 'components/Chatbot/components/SelectTour'\nimport {PlaceBack, SelectPlace} from 'components/Chatbot/components/SelectPlace'\nimport {WhereBack, SelectWhere} from 'components/Chatbot/components/SelectWhere'\nimport {\n HighlightsBack,\n SelectHighlights,\n} from 'components/Chatbot/components/SelectHighlights'\nimport StartTour from 'components/Chatbot/components/StartTour'\nimport Message from 'components/Chatbot/components/Message'\nimport {PlaySound, PlaySoundNext} from 'components/Chatbot/components/PlaySound'\nimport {useIntl, defineMessages} from 'react-intl'\nimport {useSelector} from 'react-redux'\nimport {\n getNavigationContext,\n} from 'components/xstate/NavigationMachine'\n\nconst useConfig = id => {\n const messages = defineMessages({\n initialTitle: {\n id: 'chatbot.tour.initial.title',\n defaultMessage: 'Was möchten Sie tun?',\n },\n placeTitle: {\n id: 'chatbot.tour.place.title',\n defaultMessage: 'Zu welchem Standort möchten Sie wechseln?',\n },\n tourTitle: {\n id: 'chatbot.tour.tour.title',\n defaultMessage: 'Welche Tour möchten Sie sich ansehen?',\n },\n whereMessage: {\n id: 'chatbot.tour.where.message',\n defaultMessage: 'Ich habe ihre Position im Plan markiert.',\n },\n highlightsMessage: {\n id: 'chatbot.tour.highlights.message',\n defaultMessage: 'Schauen Sie mal in die Liste der Stationen',\n },\n enableSoundMessage: {\n id: 'chatbot.tour.sound.message',\n defaultMessage: 'Möchten Sie die Sprachausgabe aktivieren?',\n },\n playSoundMessage: {\n id: 'chatbot.sound.play.message',\n defaultMessage: 'Möchten Sie meine Erläuterungen zu dieser Station noch einmal hören?',\n },\n })\n\n const naviContext = useSelector(getNavigationContext)\n const intl = useIntl()\n\n\n switch (id) {\n case 'enableGlobalSounding':\n return [\n {\n id: 'StartTour',\n component: \n \n \n
\n \n \n \n \n
\n \n \n \n
\n )}\n \n )\n}\n","import SvgIcon from '@mui/material/SvgIcon'\n\nexport default function PlayPureIcon(props) {\n return (\n \n \n \n {!isEndVideo && (\n \n {isPaused && \n \n <>\n \n {`${Math.floor((currentTime / 1000 / 60) << 0)}:${(\n '0' + Math.floor((currentTime / 1000) % 60)\n ).slice(-2)}`}{' '}\n /{' '}\n {`${Math.floor((duration / 1000 / 60) << 0)}:${(\n '0' + Math.floor((duration / 1000) % 60)\n ).slice(-2)}`}\n
\n \n \n \n \n )}\n {tour.context.videoFilePoi && (\n \n
\n \n
\n )}\n \n )\n}\n","import SvgIcon from '@mui/material/SvgIcon'\n\nexport default function PreviousIcon(props) {\n return (\n -\n \n
\n 
\n
\n )}\n {item?.label}\n \n )\n}\n","import React, {useRef} from 'react'\nimport {useAtom} from 'jotai'\nimport {useAtomValue} from 'jotai/utils'\nimport Tippy from '@tippyjs/react'\nimport {useActor} from '@xstate/react'\nimport {useSelector} from 'react-redux'\nimport {useClickAway} from 'react-use'\nimport ErrorBoundary from 'components/ErrorBoundary'\nimport {showSitePlanAtom, tourMachineAtom, sidebarAtom} from 'components/jotai'\nimport {getFilteredVisited} from 'components/visited/duck'\nimport IconButton from '@mui/material/IconButton'\nimport TooltipContent from 'components/PlanTooltipContent'\nimport {CloseIcon} from 'components/Icons'\n\nexport default function SasbachPlan({onClose}) {\n const [showSitePlan, setShowSitePlan] = useAtom(showSitePlanAtom)\n const sidebarOpen = useAtomValue(sidebarAtom)\n const tourService = useAtomValue(tourMachineAtom)\n const [tour] = useActor(tourService)\n const visited = useSelector(getFilteredVisited)\n\n const ref = useRef(null)\n useClickAway(ref, () => {\n setShowSitePlan(false)\n })\n\n const handleOpen = e => {\n setShowSitePlan(false)\n if (e?.target?.id) {\n const playlistItem = window?.blazeIT?.getPlayListItemByMediaName(\n e.target.id,\n )\n\n if (playlistItem) {\n window?.blazeIT?.navigateToPlayListItem(playlistItem)\n }\n }\n }\n\n const handleClose = () => {\n setShowSitePlan(false)\n }\n\n const primaryColor = '#046927'\n const activeStyle = {fill: primaryColor, cursor: 'pointer'}\n const visitedStyle = {border: `1 px solid ${primaryColor}`, cursor: 'pointer'}\n const defaultStyle = {cursor: 'pointer'}\n\n if (!showSitePlan) {\n return null\n }\n\n return (\n \n \n \n \n \n \n \n el === 'E02')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E03')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E01')\n ? visitedStyle\n : null\n }\n />\n \n el === 'E04')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E05')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E06')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E07')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E08')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E09')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E10')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'E11')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL06')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL05')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL04')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL03')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL02')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL01')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL08')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL11')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL12')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL13')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'CL14')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL01')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL02')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL03')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL04')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL05')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL06')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL07')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'TL08')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'TL09')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'TL10')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'TL11')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'TL12')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'TL13')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'UK01')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'UK02')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'UK03')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'UK04')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'UK05')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n el === 'UK06')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n el === '404')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '403')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '400')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '405')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '208')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '205')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '107')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '106')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '314')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '303')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '304')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '306')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '315')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '317')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '201')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '202')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '209')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '101')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '102')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '105')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '103')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n \n \n \n \n \n \n \n el === 'L009')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '316')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n \n el === '104.1')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '104')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '206')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '207')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '204')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '203')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '402')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '401')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n el === '301')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '307')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '308a')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '308')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '311')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '310')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '309')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === '302')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n {' '}\n
\n \n )\n \n \n \n \n \n \n \n \n \n \n {\"Empfang\"}\n \n \n \n {\"01\"}\n \n \n {\" Empfang\"}\n \n \n {\"02\"}\n \n \n {\" Park\"}\n \n \n \n \n \n \n \n \n \n \n \n {\"02\"}\n \n \n {\"01\"}\n \n el === 'BE02')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'BE03')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'BE01')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n {\"Au\\xDFengel\\xE4mde\"}\n \n \n \n {\"01\"}\n \n \n {\" Parkplatz\"}\n \n \n {\"02\"}\n \n \n {\" Empfang\"}\n \n \n {\"03\"}\n \n \n {\" Park\"}\n \n \n \n \n \n {\"03\"}\n \n \n {\"01\"}\n \n \n {\"02\"}\n \n \n el === 'AG01')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG02')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG11')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG12')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG13')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG14')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG15')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG16')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG17')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AG18')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n \n
\n \n \n \n \n \n \n \n \n \n {/* \n {/* el === 'LO09')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'LO14')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO10')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'LO16')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'LO15')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO04')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO02')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO02b')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO11')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO11a')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO12')\n ? visitedStyle\n : null\n }\n />\n \n \n \n \n \n \n el === 'LO03')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO05')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO09')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO06')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO12a')\n ? visitedStyle\n : null\n }\n />\n \n el === 'LO01')\n ? visitedStyle\n : null\n }\n />\n \n \n \n
\n \n \n \n \n \n \n \n \n {' '}\n \n \n {' '}\n el === 'P203 zu P201')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P207 zu P204')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P204 zu P203')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P102 zu P104')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P104 zu P107')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P316 zu P102')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P310 zu P311')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P207 zu P204')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P308 zu P309')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P309 zu P310')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P306 zu P314')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P301 zu P303')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P305 zu P316')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P305 zu P308')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'P207 zu P204')\n ? visitedStyle\n : defaultStyle\n }\n />\n el === 'P314 zu P207')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\"Schulungszentrum\"}\n \n \n \n {\"01\"}\n \n \n {\" Eingangsbereich\"}\n \n \n {\"02\"}\n \n \n {\" Experience Center\"}\n \n \n {\"03\"}\n \n \n {\" Besprechungsraum\"}\n \n \n {\"04\"}\n \n \n {\" Foyer\"}\n \n \n {\"05\"}\n \n \n {\" Gro\\xDFer Schulungsraum\"}\n \n \n {\"06\"}\n \n \n {\" KNX Schulungsraum\"}\n \n \n {\"07\"}\n \n \n {\" Casino\"}\n \n \n \n \n \n \n \n \n \n \n \n {\"03\"}\n \n \n {\"01\"}\n \n \n {\"02\"}\n \n \n {\"05\"}\n \n \n {\"04\"}\n \n el === 'SZ11')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ01')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ03')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ02')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ07')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ10')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ09')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ08')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'LO09')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ05')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ04a')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'SZ04')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n {\"06\"}\n \n \n {\"07\"}\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {'0'}\n \n \n {'3'}\n \n \n \n \n {'0'}\n \n \n {'4'}\n \n \n el === 'AT002')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AT001')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AT003')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'AT004')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1001')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1005')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1006')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1007')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1008')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1009')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1015')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1016')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H1018')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'MS001')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'MS002')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n \n {'0'}\n \n \n {'1'}\n \n \n \n \n {'0'}\n \n \n {'5'}\n \n \n \n \n {'02'}\n \n \n el === 'PL001')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4011')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4010')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4009')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4008')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4006')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4005')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4004')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4001')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4003')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4002')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'H4007')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'MS00101')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n el === 'A001')\n ? visitedStyle\n : defaultStyle\n }\n />\n \n \n \n {'0'}\n \n \n {'1'}\n \n \n {' Anmeldung '}\n \n \n {'02'}\n \n \n {' Musem und Schulungs'}\n \n \n {'z'}\n \n \n {'entrum'}\n \n \n {'0'}\n \n \n {'3'}\n \n \n {' P'}\n \n \n {'r'}\n \n \n {'oduk'}\n \n \n {'t'}\n \n \n {'ion Halle 3'}\n \n \n {'0'}\n \n \n {'4'}\n \n \n {' P'}\n \n \n {'r'}\n \n \n {'oduk'}\n \n \n {'t'}\n \n \n {'ion Halle 4'}\n \n \n {'0'}\n \n \n {'5 '}\n \n \n {'Pr\\xFCflabor'}\n \n \n \n \n {'P'}\n \n \n {'r'}\n \n \n {'oduk'}\n \n \n {'t'}\n \n \n {'ion'}\n \n \n \n \n \n \n {'S'}\n \n \n {'TO'}\n \n \n {'T'}\n \n \n {'Z'}\n \n \n {'-'}\n \n \n {'K'}\n \n \n {'ON'}\n \n \n {'T'}\n \n \n {'A'}\n \n \n {'K'}\n \n \n {'T'}\n \n \n \n
\n \n \n {startFormatted}\n {end ? ` - ${endFormatted}` : undefined}\n
\n );\n});","import React, {memo, Fragment} from 'react'\nimport parse from 'html-react-parser'\nimport Typography from '@mui/material/Typography'\n\nexport default memo(function time({text}) {\n return (\n \n {text.split('\\n').map((item, index, array) => {\n return (\n \n {parse(item)} \n \n )\n })}\n
\n )\n})\n","import React, { memo } from \"react\";\nimport CaptionText from \"components/Caption/components/Text\";\n\nexport default memo(function Caption({ startTime, endTime = undefined, format, text}) {\n return (\n \n \n \n \n \n {place === 'Lüdenscheid' && (\n \n {subPlace !== 'Empfang' && (\n <>\n \n handleNavigate('LUEDENSCHEID_EMPFANG')\n }\n >\n {intl.formatMessage(messages['Empfang'])}\n \n \n )}\n {subPlace !== 'Produktion' && (\n <>\n {subPlace !== 'Empfang' && (\n \n |\n \n )}\n \n handleNavigate('LUEDENSCHEID_PRODUKTION')\n }\n >\n {intl.formatMessage(messages['Produktion'])}\n \n \n )}\n\n {subPlace !== 'Logistik' && (\n <>\n \n |\n \n \n handleNavigate('LUEDENSCHEID_LOGISTIK')\n }\n >\n {intl.formatMessage(messages['Logistik'])}\n \n \n )}\n {subPlace !== 'Schulungszentrum' && (\n <>\n \n |\n \n \n handleNavigate('LUEDENSCHEID_SCHULUNGSZENTRUM')\n }\n >\n {intl.formatMessage(messages['Schulungszentrum'])}\n \n \n )}\n {subPlace !== 'Aussengelaende' && (\n <>\n \n |\n \n \n handleNavigate('LUEDENSCHEID_AUSSENGELAENDE')\n }\n >\n {intl.formatMessage(messages['Aussengelaende'])}\n \n \n )}\n \n )}\n \n \n \n \n \n \n \n \n \n {messages[`${place}${subPlace || ''}`]\n ? intl.formatMessage(messages[`${place}${subPlace || ''}`])\n : ''}\n
\n- \n \n \n {/*keys.length > 1 && (\n \n \n {keys.map((key, index) => {\n return (\n <>\n {index > 0 && (\n \n |\n \n )}\n {\n if (tourData[key][0]?.label) {\n const el = document.getElementById(\n tourData[key][0]?.label,\n )\n if (el) {\n el.scrollIntoView()\n }\n }\n }}\n >\n {intl.formatMessage(\n messages[`${place}${subPlace}${key}`],\n )}\n \n \n )\n })}\n \n \n )*/}\n \n \n \n {keys.map((key, index) => {\n const TitleComponent = index === 0 ? FirstTitle : Title\n\n return (\n \n \n {keys.length > 1 && (\n \n \n \n {messages[`${place}${subPlace}${key}`]\n ? intl.formatMessage(\n messages[`${place}${subPlace}${key}`],\n )\n : ''}\n \n \n \n )}\n {tourData[key].map((el, subIndex) => {\n const PaperComponent =\n index === 0 ? FirstPaper : Paper\n const isActive = el.label === tour?.context?.szene\n const isVisited = visited?.find(\n c => c === el.label,\n )\n const splits = el.subtitle?.split('##')\n const label =\n Array.isArray(splits) && splits.length > 0\n ? splits[0]\n : el.label\n\n /*const toggleFavorite = e => {\n e.stopPropagation()\n e.preventDefault()\n if (el?.label) {\n if (el.isFavorite) {\n dispatch(\n removeFavorite({\n id: tourKey,\n label: el.label,\n }),\n )\n } else {\n dispatch(\n addFavorite({\n id: tourKey,\n label: el.label,\n }),\n )\n }\n }\n }*/\n\n const navigateToPanorama = e => {\n e.stopPropagation()\n e.preventDefault()\n if (!disableControls) {\n navigateToPlaylistItem(el.label)\n onClose()\n }\n }\n\n index++\n\n return (\n 1 && subIndex === 0\n ? 0\n : 32,\n }}\n >\n \n \n \n \n \n \n {label}\n \n \n \n {isVisited && \n {/*\n {el?.isFavorite && (\n */}\n \n \n \n )\n })}\n \n \n )\n })}\n \n \n \n \n
\n \n \n \n
${language === 'en' ? 'Cookie-Settings': 'Cookie-Einstellungen'}
`\n\n return (\n\n
\n \n
\n \n
\n \n {isLoggedIn && (\n
*/}\n \n \n {/* \n
\n \n \n \n \n \n {title}\n \n \n {subtitle && \n \n {subtitle}\n \n }\n \n
\n \n {e.titel ?
\n {e.titel}
: null}\n {e.text ?{e.text}
: null}\n {e.img ? (\n\n Firmengründer: Franz Striebel\n \n ),\n img: FranzStriebelPortrait,\n },\n {\n year: 1959,\n text:\n \"Striebel & John liefert fabrikfertige Stromkreisverteiler mit geschlossenem Putzkasten und herausnehmbarem Geräteträger\",\n },\n {\n year: 1963,\n text:\n \"Entwicklung der Berührungsschutzkappe für E27 E33 Elemente - Bau einer 400 qm großen Halle\",\n },\n {\n year: 1965,\n text:\n \"Der Vertrieb wird erstmals über die Landesgrenzen Baden-Württembergs ausgedehnt\",\n },\n {\n year: 1966,\n text: \"Entwicklung des wegweisenden Normfeldprogramms\",\n },\n {\n year: 1968,\n text: \"Striebel & John stellt zum ersten Mal auf der Hannover Messe aus\",\n img: HannoverMesse,\n },\n {\n year: 1969,\n text: \"Bau des ersten Gebäudes, im Klammsbosch\",\n },\n {\n year: 1973,\n text: (\n <>\n Einführung des UK Stromverteilers für zwei Einbautiefen\n
\n (1970 - 1980 Markführer)\n
\n
\n Am Standort Sasbach wird die Oberflächentechnik in Betrieb genommen\n \n ),\n },\n {\n year: 1974,\n text:\n \"Das Polyrastsystem, ein stabiles Polyestergehäuseprogramm, ergänzt die Striebel & John Produktpalette\",\n img: Polyrastsystem,\n },\n {\n year: 1977,\n text:\n \"Reihenschaltschrankprogramm RSN-System wird in die Fertigung aufgenommen\",\n },\n {\n year: 1983,\n titel: \"25 Jahre Striebel & John\",\n text: \"230 Mitarbeiter\",\n img: Jubilaeum25,\n },\n {\n year: 1984,\n text:\n \"Wand- und Standverteilerreihe FS, C und G werden auf dem Markt angeboten\",\n img: WandUndStandverteiler,\n },\n {\n year: 1985,\n text: (\n <>\n Vorstellung der neuen Stromkreisverteiler\n
\n Reihe UK200\n \n ),\n },\n {\n year: 1986,\n text:\n \"Der Anreihverteiler erhält eine Auszeichnung für gutes Design – das IF-Zeichen\",\n },\n {\n text:\n \"Entwicklung des Reihenschrank-Programms XA geerdet und XS schutzisoliert\",\n img: ReihenschalterschrankProgramm,\n },\n {\n year: 1988,\n text: \"Erster Hersteller von EDF-Schnellmontagesystemen\",\n img: Schnellmontagesystem,\n },\n {\n text:\n \"Vorstellung der ersten Planungs- und Projektierungssoftware – Plano\",\n img: PlanoDiskette,\n },\n {\n year: 1990,\n text: \"Vorstellung der neuen Stromkreisverteiler Reihe UK400\",\n },\n {\n year: 1992,\n text: (\n <>\n Der Produktionsstandort wurde um 2500 qm erweitert und weitere\n flexible Fertigungseinrichtungen angeschafft\n
\n
\n Gründung eines modernen Kunststoffspritzbetriebs\n \n ),\n },\n {\n year: 1993,\n text: \"Striebel & John wird in die ABB Firmengruppe aufgenommen\",\n },\n {\n year: 1995,\n text: (\n <>\n Das hochmoderne Lager und Versandzentrum wird in Betrieb genommen\n
\n
\n Zertifizierung gemäß internationaler Maßstäbe nach DIN EN ISO 9001\n \n ),\n img: Versandtzentrum,\n },\n {\n year: 1996,\n text:\n \"Gründung der ASJ, ABB STOTZ-KONTAKT / Striebel & John Vertriebsgesellschaft mbH (ASJ)\",\n },\n {\n year: 1998,\n text:\n \"Vorstellung der neuen Stromkreisverteiler der Reihe UK500 zur Hannover Messe\",\n },\n {\n year: 1999,\n text: \"Vorstellung des neuen Haubenverteilers A300\",\n },\n {\n year: 2000,\n text: \"Markteinführung der neuen Kleinverteiler und TSK-Verteilersysteme\",\n },\n {\n year: 2001,\n text: \"Bezug des neuen Schulungs- und Verwaltungszentrums am Fuchsgraben\",\n },\n {\n year: 2002,\n text:\n \"Markteinführung der N/PE Quick-Steckschiene zur Light+Building, Frankfurt\",\n },\n {\n year: 2003,\n text: \"Markteinführung des TriLine-R Reihen-Schaltschranksystems\",\n img: TrilineRSchaltSchranksystem,\n },\n {\n year: 2004,\n text:\n \"Brandschutzverteiler als Wand- und Standverteiler werden im Produktsortiment vorgestellt\",\n },\n {\n year: 2005,\n text: (\n <>\n StriePlan 3.0 Planungs- und Kalkulationssoftware\n
\n Neu: mit Stromlaufplan SLP\n \n ),\n img: CD,\n },\n {\n year: 2006,\n text:\n \"Typgeprüfte Reihenschaltschränke bis 4000 A (TSK) und die neuen eHZ-Zählerschränke werden auf der Light+Building vorgestellt\",\n },\n {\n year: 2008,\n titel: (\n <>\n 50 Jahre\n
\n Striebel & John\n \n ),\n img: Jubilaeum50,\n },\n ];\n */\n\n const handleShow = (e) => {\n setOpenImageBox(true);\n setImage(e.target.src);\n };\n const handleClose = (e) => {\n e.preventDefault();\n e.stopPropagation();\n setOpenImageBox(false);\n };\n\n const updateLineHeight = (e) => {\n const realScrollPercentage = (\n ((100 - toStart) * main.current.scrollTop) /\n (main.current.scrollHeight - main.current.clientHeight) +\n toStart\n ).toFixed(2);\n const scrollPercentage = realScrollPercentage * 1.2;\n\n if (scrollPercentage > 0 && scrollPercentage < 50)\n setScrollPos(scrollPercentage);\n else if (realScrollPercentage > 80)\n setScrollPos(\n realScrollPercentage - 30 + (realScrollPercentage - 80) * 1.5\n );\n };\n\n return (\n <>\n
- \n {elements.map((e, i) => {\n return (\n <>\n
\n = 2} onClick={zoomIn}>\n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 
\n
\n \n \n \n \n \n \n \n \n \n \n {isLoggedIn && !matches &&\n \n {intl.formatMessage(messages.logout)}\n \n \n }\n \n \n \n \n \n {places.map(place => {\n const handleSelect = () => {\n if (place.id === 'abb' || place.id === 'striebel') {\n setCurrentTour(place.id)\n } else if (place.id === 'bje') {\n setCurrentTour(place.subPlaces[0]?.id)\n }\n }\n const active = place.id === currentTour || place.id === 'bje' && currentTour?.includes('bje')\n return (\n \n \n {place.name}\n \n \n )\n })} \n \n \n {\n currentTour?.includes('bje') &&\n \n \n {places.find(el => el.id === 'bje').subPlaces.map(place => {\n const handleSelect = () => {\n setCurrentTour(place.id)\n }\n const active = place.id === currentTour\n return (\n \n \n {place.name}\n \n \n )\n })} \n \n \n }\n \n \n \n \n {visibleKeys.map(id => {\n const playlistItem = mappedPlaylistItems[id]\n return (\n \n \n )\n })}\n \n \n \n \n {intl.formatMessage(messages.alreadyUsed)}\n \n \n \n \n {usedKeys.map(id => {\n const playlistItem = mappedPlaylistItems[id]\n return (\n \n \n )\n })}\n \n \n \n \n \n \n setShareUrl(null)}\n />\n
\n )\n}\n\nexport default IndividuelleTour","import React from \"react\";\nimport Button from \"@mui/material/Button\";\nimport Dialog from \"@mui/material/Dialog\";\nimport DialogActions from \"@mui/material/DialogActions\";\nimport DialogContent from \"@mui/material/DialogContent\";\nimport DialogTitle from \"@mui/material/DialogTitle\";\nimport { FormattedMessage } from \"react-intl\";\n\nconst ConfirmDialog = (props) => {\n const { title, children, open, setOpen, onConfirm, onCancel } = props;\n \n const handleConfirm = (e) => {\n setOpen(false);\n if (onConfirm) {\n onConfirm()\n }\n }\n\n const handleCancel = (e) => {\n setOpen(false);\n if (onCancel) {\n onCancel()\n }\n }\n \n return (\n \n \n \n \n \n {isLoggedIn && matches &&\n \n {intl.formatMessage(messages.logout)}\n \n \n }\n \n \n \n {intl.formatMessage(messages.back)}\n \n \n \n \n {id && \n \n {intl.formatMessage(messages.share)}\n \n \n }\n \n \n {id && \n \n {intl.formatMessage(messages.view)}\n \n \n }\n \n \n \n {intl.formatMessage(id ? messages.save : messages.create)}\n \n \n \n \n {!editName &&\n <>\n \n {name} \n \n \n \n \n \n }\n {editName &&\n <>\n {\n setName(event.target.value);\n }}\n onKeyDown={(event) => {\n if(event.keyCode == 13){\n setEditName(false)\n }\n }}\n InputProps={{\n sx: {fontSize: '3.75rem'},\n endAdornment: \n setEditName(false)}>\n \n ,\n }}\n variant=\"standard\"\n />\n {/* {\n setName(event.target.value);\n }}\n \n inputProps={{\n sx: {fontSize: '3.75rem'},\n endAdornment: setEditName(false)}>\n \n \n \n \n \n \n \n {activeId && \n \n \n \n \n 
\n \n \n {activePlaylistItem?.name}\n \n \n \n \n }\n \n \n \n
\n {intl.formatMessage(messages.overview)}
\n{info.getValue()?.length || 0}
,\n maxSize: 120\n }),\n columnHelper.accessor(row => row.tour, {\n id: 'place',\n header: intl.formatMessage(messages.places),\n cell: info => {\n return info.getValue()?.reduce((acc, id) => {\n const item = playlistItemsProps.data[id]\n if (item) {\n const place = item.tourId.includes('bje')\n ? 'Lüdenscheid'\n : item.tourId === 'striebel'\n ? 'Sasbach'\n : 'Heidelberg'\n\n if (!acc.includes(place)) {\n if (acc === \"\") {\n acc = place\n } else {\n acc = `${acc}, ${place}`\n }\n }\n }\n return acc\n }, \"\") || \"\"\n },\n size: 'auto'\n }),\n columnHelper.accessor(row => row, {\n id: \"control\",\n header: () => null,\n cell: info => {\n const handleEdit = (e) => {\n e.stopPropagation();\n e.preventDefault();\n navigate(`/backend/${info.getValue()?.id}`)\n }\n\n const handleDelete = (e) => {\n e.stopPropagation();\n e.preventDefault();\n setConfirmOpen(info.getValue()?.id)\n }\n\n const handleChangeVisibility = (e) => {\n e.stopPropagation();\n e.preventDefault();\n enabledMutation.mutate({\n id: info.getValue()?.id,\n value: !info.getValue()?.enabled\n })\n }\n\n const handleShare = (e) => {\n e.stopPropagation();\n e.preventDefault();\n const url = `${window.origin}/#/tour/individuelleTour/${info.getValue()?.id}`\n let shareData = {\n title: \"Factory-Tour Individuelle Tour\",\n text: info.getValue()?.name,\n url: url,\n };\n\n if (!navigator.canShare) {\n setShareUrl(url)\n } else if (navigator.canShare(shareData)) {\n navigator.share(shareData)\n } else {\n setShareUrl(url)\n }\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n )\n}\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport 'style/index.css'\n\nimport 'style/index.css'\n//Toastify\nimport 'react-toastify/dist/ReactToastify.css'\nimport {App} from './App'\n\nconst container = document.getElementById('root')\nReactDOM.render(