\r\n {\" \"}\r\n
{\" \"}\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default LegendItem;\r\n","import React from \"react\";\r\nimport LegendItem from \"./LegendItem\";\r\nimport \"./Legend.css\";\r\n\r\n//availableFilters\r\nexport default function Legend(props) {\r\n return (\r\n {props.type}
\r\n\r\n {t(\"APARTMENT\")}
{props.type[1]} {props.type === \"T1\" ? t(\"PIECE\") : t(\"PIECES\")}\r\n
\r\n {props.availableFilters\r\n ? props.availableFilters.map((filter) => {\r\n return (\r\n
\r\n );\r\n}\r\n","\r\nclass ButtonActionHelper {\r\n\r\n /**\r\n * Takes an array of actions and excutes a handler for each action.\r\n * @param actions The actions of that particular button.\r\n * @param state2 The state passed from a state container used for global state.\r\n * @param eventType Type of event where the action is being called.\r\n */\r\n executeActions(actions, state2, eventType) {\r\n actions.forEach(action => {\r\n this.actionHandler(action, state2, eventType)\r\n })\r\n }\r\n\r\n /**\r\n * Executes an action depending on its properties and passed parameters.\r\n * @param action The action of that particular button.\r\n * @param state2 The state passed from a state container used for global state.\r\n * @param actionType Type of event where the action is being called.\r\n */\r\n actionHandler(action, state2, eventType) {\r\n if (eventType !== action.eventName) return\r\n\r\n //Handles change state actions\r\n if (action.element === \"stateView\" && action.functionName === \"showElement\") {\r\n state2.updateCurrentFloorByButton(action.parameter)\r\n return\r\n }\r\n\r\n //Goes to url passed as the action parameter\r\n if (action.functionName === \"goToUrl\") {\r\n window.location = action.parameter;\r\n\r\n }\r\n\r\n //handles pan actions\r\n if (action.functionName.substring(0, 3) === \"pan\") {\r\n state2[action.functionName]()\r\n }\r\n\r\n //handles toggling display of elements\r\n if (action.functionName === \"showElement\") {\r\n state2.handleShowElement(action.element, true)\r\n }\r\n if (action.functionName === \"hideElement\") {\r\n state2.handleShowElement(action.element, false)\r\n }\r\n\r\n if (action.functionName === \"toggleFullscreen\")\r\n state2.toggleFullscreen()\r\n\r\n return\r\n }\r\n}\r\n\r\nexport default new ButtonActionHelper()","import React, { Component } from \"react\";\r\nimport { Subscribe } from \"unstated\";\r\n\r\nimport buttonActionHelper from \"../../../utils/helpers/buttonActionHelper\";\r\nimport StateContainer from \"../../../state/StateContainer\";\r\nimport stringHelper from \"../../../utils/helpers/stringHelper\";\r\n\r\nclass NavbarButton extends Component {\r\n state = {\r\n isHovered: false,\r\n };\r\n\r\n render() {\r\n const button = this.props.buttonData;\r\n const { buttonContent } = this.props;\r\n\r\n const returnBackgroundColor = (className) => {\r\n if (className === \"navbar-button button button-navbar-active\" || this.state.isHovered) \r\n return stringHelper.removeAplhaFromColor(this.props.unstated.state.menuColorSecondary);\r\n \r\n return (\r\n this.props.unstated.state.menuColor\r\n );\r\n }\r\n\r\n return (\r\n \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{isMobile ? (\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t{t(\"MENU\").toUpperCase()}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\tawait this.props.unstated.increaseCurrentFloor();\r\n\t\t\t\t\t\t\t\tthis.updateButtonContainerScroll(\r\n\t\t\t\t\t\t\t\t\tthis.props.unstated.state.customButtons,\r\n\t\t\t\t\t\t\t\t\tthis.props.unstated.state.currentState,\r\n\t\t\t\t\t\t\t\t\tthis.props.unstated.state.jsonData.states\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n ![\"\"](\"/design/new-exports/360_icon.png\")
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n state2.toggleMapOff()}\r\n >\r\n {\r\n state2.state.googleMapView.defaultZoom !== undefined ?\r\n\r\n
\r\n )}\r\n \r\n\t\t\t {\r\n\t\t\t\t\tprops.removeFavourite(props.id);\r\n\t\t\t\t}}\r\n\t\t\t\talt=\"\"\r\n\t\t\t/>\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default Apartment;\r\n","import React, { useState } from \"react\";\r\nimport { useDrop } from \"react-dnd\";\r\n\r\nimport { ItemTypes } from \"../../utils/items\";\r\n\r\nimport \"./Compare.css\";\r\n\r\nconst ApartmentViewerBox = (props) => {\r\n const [apartmentViewed, setApartment] = useState(null);\r\n const [name, setName] = useState(\"\");\r\n const [image, setImage] = useState(\"\");\r\n const [type, setType] = useState(\"\");\r\n const [quadrature, setQuadrature] = useState(\"\");\r\n const [pageNumber, setPageNumber] = useState(1);\r\n\r\n const [{ isOver }, drop] = useDrop({\r\n accept: ItemTypes.APARTMENT,\r\n drop: (item, monitor) => {\r\n setApartment(item.id);\r\n setImage(item.twoDimensionalPlan);\r\n setType(item.apartmentType);\r\n setQuadrature(item.quadrature);\r\n setName(item.name);\r\n props.setApartmentViewed(item.id, props.number);\r\n },\r\n collect: (monitor) => ({ isOver: !!monitor.isOver() }),\r\n });\r\n\r\n\r\n return (\r\n \r\n\t\t\t\t\t{\" \"}\r\n\t\t\t\t\t{t(\"APARTMENT\")}{\" \"}\r\n\t\t\t\t
\r\n\t\t\t\t{props.name}
\r\n\t\t\t\t{props.type}
\r\n\t\t\t\t\r\n\t\t\t\t\t{\" \"}\r\n\t\t\t\t\t{props.quadrature} m2{\" \"}\r\n\t\t\t\t
\r\n\t\t\t\r\n {props.isSet ? (\r\n \r\n {\r\n props.removeViewedApartment(props.number);\r\n setApartment(null);\r\n setImage(null);\r\n setType(null);\r\n }}\r\n >\r\n X\r\n \r\n \r\n
\r\n }\r\n \r\n );\r\n};\r\n\r\nexport default ApartmentViewerBox;\r\n","import React, { Component } from \"react\";\r\nimport { Subscribe } from \"unstated\";\r\nimport StateContainer from \"../../../state/StateContainer\";\r\n\r\nimport \"./CompareToggleView.css\";\r\n\r\nclass CompareToggleView extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n buttonTypes: {\r\n D2: \"2d\",\r\n D3: \"3d\",\r\n },\r\n activeButton: \"2d\",\r\n };\r\n }\r\n\r\n handleButtonClicked = (buttonType) => {\r\n this.setState({ activeButton: buttonType });\r\n };\r\n\r\n handle2dButtonClicked = () => {\r\n this.handleButtonClicked(this.state.buttonTypes.D2);\r\n this.hideViewContainer(\"D3\");\r\n };\r\n\r\n handle3dButtonClicked = () => {\r\n this.handleButtonClicked(this.state.buttonTypes.D3);\r\n this.hideViewContainer(\"D2\");\r\n };\r\n\r\n /**\r\n * Hides active compare container\r\n * @param containerType type of container to hide\r\n */\r\n hideViewContainer = (containerType) => {\r\n const containers = {\r\n leftContainer: () => {\r\n this.props.unstated.setState({\r\n leftApartmentStyles: {\r\n ...this.props.unstated.leftApartmentStyles,\r\n [containerType]: { display: \"none\" },\r\n },\r\n });\r\n\r\n if (containerType === \"D2\") {\r\n this.setActive3DViewContainer(\"left\");\r\n }\r\n },\r\n rightContainer: () => {\r\n this.props.unstated.setState({\r\n rightApartmentStyles: {\r\n ...this.props.unstated.rightApartmentStyles,\r\n [containerType]: { display: \"none\" },\r\n },\r\n });\r\n\r\n if (containerType === \"D2\") {\r\n this.setActive3DViewContainer(\"right\");\r\n }\r\n },\r\n };\r\n\r\n if (containers[this.props.activeContainer])\r\n return containers[this.props.activeContainer]();\r\n };\r\n\r\n /**\r\n * Set the state with which we will know that the 3d container is active in order to create scene\r\n * @param containerType type of container to hide\r\n */\r\n setActive3DViewContainer = (container3DType) => {\r\n if (container3DType === \"left\") {\r\n this.props.unstated.setState({\r\n leftCompare3DContainerActive: true,\r\n });\r\n }\r\n\r\n if (container3DType === \"right\") {\r\n this.props.unstated.setState({\r\n rightCompare3DContainerActive: true,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n Appartement\r\n {props.apartmentInfo.name}\r\n {props.apartmentInfo.type}\r\n \r\n {props.apartmentInfo.quadrature} m2\r\n \r\n
\r\n ) : null}\r\n\r\n {\r\n \r\n
\r\n \r\n 2D\r\n PLAN\r\n
\r\n \r\n
\r\n 3D\r\n PLAN\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst CompareToggleViewWithUnstated = (props) => {\r\n return (\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n this.props.unstated.attachDragEvents();\r\n this.props.unstated.toggleCompareShownOff();\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n {this.props.clientLogo ? (\r\n \r\n ) : null}\r\n \r\n \r\n {this.props.unstated.state.favouriteApartmentsDetails\r\n ? this.props.unstated.state.favouriteApartmentsDetails\r\n .filter((apartment) => {\r\n return (\r\n apartment.key !==\r\n this.state.firstApartmentViewerKey &&\r\n apartment.key !==\r\n this.state.secondApartmentViewerKey\r\n );\r\n })\r\n .map((apartment) => (\r\n \r\n ))\r\n : null}\r\n \r\n
\r\n \r\n \r\n {/* ======================= Draging section ======================= */}\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n {/* Compared Apartment 1 */}\r\n
\r\n \r\n {/* Compared Apartment 2 */}\r\n
\r\n \r\n\r\n
\r\n )}\r\n \r\n \r\n {\r\n await this.setState({ cameraDistance: e.target.value });\r\n state2.updateSceneSettings(\r\n this.state.cameraDistance,\r\n this.state.hotspotScale\r\n )\r\n\r\n }}\r\n type=\"number\"\r\n />\r\n\r\n
\r\n \r\n \r\n {\r\n await this.setState({ hotspotScale: e.target.value });\r\n state2.updateSceneSettings(\r\n this.state.cameraDistance,\r\n this.state.hotspotScale\r\n )\r\n }}\r\n type=\"number\"\r\n />\r\n\r\n
\r\n \r\n {state2.state.customButtons\r\n ?.filter((button) => !button.isDefault) //TODO: namestiti da se filtrira po tome da je prva akcija state i default = true\r\n .map((button) => {\r\n return (\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nfunction BackButtonIconWithUnstated(props) {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nfunction BackButtonWithUnstated(props) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {t(\"STAGE\").toUpperCase()}
\r\n \r\n {stringHelper.parseStateNumber(\r\n props.unstated.state.jsonData.states[\r\n props.unstated.state.currentState\r\n ].name\r\n )}\r\n {\" \"}\r\n \r\n\r\n {t(\"RETURN\").toUpperCase()} {\" \"}\r\n
\r\n\r\n \r\n {props.unstated.state.apartmentClickedInfo.highResUrls.length > 0 ? (\r\n \r\n
\r\n );\r\n}\r\n\r\nfunction ToggleApartmentViewWithUnstated(props) {\r\n return (\r\n \r\n {props.unstated.state.button2DHeader || \"2D\"}\r\n {props.unstated.state.button2DBody && \r\n\t\t\t{props.unstated.state.button2DBody}\r\n\t\t}\r\n\r\n \r\n \r\n
\r\n \r\n 0\r\n ? \"button3D opacity button_opacity\"\r\n : \"button3D opacity\"\r\n }\r\n backgroundImage={props.unstated.state.button3DImageUrl || \"/design/new-exports/3D_button.png\"}\r\n />\r\n\r\n {isMobile ? (\r\n <>\r\n {props.unstated.state.button3DBody && \r\n\t\t\t\t\t{props.unstated.state.button3DBody}}\r\n {props.unstated.state.button3DHeader || \"3D\"}\r\n \r\n ) : (\r\n <>\r\n {props.unstated.state.button3DHeader || \"3D\"}\r\n {props.unstated.state.button3DBody && \r\n\t\t\t\t\t{props.unstated.state.button3DBody}}\r\n \r\n )}\r\n
\r\n ) : null}\r\n \r\n {this.state.isMobile && (\r\n <>\r\n {\r\n this.handleFavouriteClick(\r\n this.props.unstated.state.favouriteApartments,\r\n this.props.unstated.state.apartmentClickedInfo\r\n );\r\n }}\r\n />\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"APARTMENT\")}\r\n \r\n {this.props.unstated.state.apartmentClickedInfo.name}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t(type)}\r\n {t(\"APARTMENT\").toLowerCase()}\r\n \r\n {this.props.unstated.state.apartmentClickedInfo.type[1]}{\" \"}\r\n {this.props.unstated.state.apartmentClickedInfo.type[1] === \"1\" ? t(\"PIECE\") : t(\"PIECES\")}\r\n \r\n
\r\n \r\n
\r\n {this.props.unstated.state.apartmentClickedInfo\r\n .terraceQuadrature ? (\r\n \r\n {t(\"SURFACE\")}\r\n {t(\"HABITABLE\").toLowerCase()}\r\n
\r\n \r\n \r\n \r\n {this.props.unstated.state.apartmentClickedInfo.quadrature}{\" \"}\r\n ㎡\r\n \r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n {t(\"TERRACE\")}\r\n
\r\n \r\n \r\n \r\n {\r\n this.props.unstated.state.apartmentClickedInfo\r\n .terraceQuadrature\r\n }{\" \"}\r\n ㎡\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"ORITENTATION\")}\r\n
\r\n \r\n {t(facingSide)}\r\n
\r\n \r\n
\r\n {this.props.unstated.state.apartmentClickedInfo\r\n .showApartmentPrice ? (\r\n {t(\"BATHROOM\")}
\r\n \r\n \r\n \r\n {this.props.unstated.state.apartmentClickedInfo.bathrooms}\r\n \r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n\r\n Prix
\r\n \r\n \r\n \r\n {this.props.unstated.state.apartmentClickedInfo.price +\r\n this.props.unstated.state.apartmentClickedInfo\r\n .currencySymbol}\r\n \r\n \r\n
\r\n \r\n \r\n {\r\n this.handleFavouriteClick(\r\n this.props.unstated.state.favouriteApartments,\r\n this.props.unstated.state.apartmentClickedInfo\r\n );\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n {t(\"STAGE\").toUpperCase()}\r\n
\r\n
\r\n
\r\n \r\n )}\r\n \r\n
\r\n\r\n \r\n
\r\n {!this.state.isMobile && (\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n
\r\n {this.download3DImageOrPdf(state2)}\r\n \r\n {state2.state.isClickedOn3D ? null : state2.state\r\n .apartmentClickedInfo !== undefined ? (\r\n \r\n {\r\n
\r\n ) : null}\r\n \r\n {!this.state.isMobile ? (\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ProgressBar;","import React from 'react';\r\n\r\nimport ProgressBar from \"../../components/ProgressBar/ProgressBar\"\r\n\r\nimport \"./LoadingOverlay.css\"\r\n\r\n\r\nfunction LoadingOverlay(props) {\r\n\r\n return (\r\n \r\n
\r\n {done}%
\r\n \r\n\r\n {/* setIsButtonHovered(true)}\r\n onMouseLeave={() => setIsButtonHovered(false)}\r\n style={{ backgroundColor }}\r\n >\r\n {id}\r\n \r\n );\r\n}\r\n\r\nfunction OrbViewButtonWithUnstated(props) {\r\n return (\r\n \r\n {(unstated) => \r\n );\r\n}\r\n\r\nexport default OrbViewButtonWithUnstated;\r\n","import React from \"react\";\r\nimport OrbViewButton from \"../OrbViewButton/OrbViewButton\";\r\nimport { Subscribe } from \"unstated\";\r\nimport StateContainer from \"../../state/StateContainer\";\r\nimport stringHelper from \"../../utils/helpers/stringHelper\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport \"./OrbViewSidebar.css\";\r\n\r\nfunction OrbViewSidebar(props) {\r\n const { t } = useTranslation();\r\n\r\n return (\r\n
\r\n */}\r\n
\r\n\r\n );\r\n}\r\nexport default LoadingOverlay;","import {\r\n AmbientLight,\r\n BackSide,\r\n FlatShading,\r\n Mesh,\r\n MeshPhongMaterial,\r\n PerspectiveCamera,\r\n Scene,\r\n SphereBufferGeometry,\r\n TextureLoader,\r\n WebGLRenderer,\r\n} from \"three\";\r\nimport { OrbitControls } from \"three/examples/jsm/controls/OrbitControls\";\r\n\r\nclass OrbViewScene {\r\n constructor() {\r\n this.canvas = null;\r\n this.scene = null;\r\n this.camera = null;\r\n this.renderer = null;\r\n this.textureLoader = null;\r\n this.controls = null;\r\n this.sizes = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n };\r\n this.skyboxMaterial = null;\r\n this.skyboxGeometry = null;\r\n this.skyboxMesh = null;\r\n }\r\n\r\n init = () => {\r\n this.canvas = document.getElementById(\"orb-view-canvas\");\r\n this.scene = new Scene();\r\n this.textureLoader = new TextureLoader();\r\n\r\n this.scene.rotation.y = Math.PI;\r\n\r\n this.initCamera();\r\n this.initRenderer();\r\n this.initControls();\r\n this.initLight();\r\n this.createSkybox();\r\n\r\n window.addEventListener(\"resize\", this.handleWindowResize);\r\n\r\n this.onAnimationFrameHandler();\r\n };\r\n\r\n createSkybox = () => {\r\n const mapUrl = \"./design/panorama/petrovaradin.jpg\";\r\n const map = this.textureLoader.load(mapUrl);\r\n\r\n this.skyboxGeometry = new SphereBufferGeometry(200, 25, 25);\r\n this.skyboxMaterial = new MeshPhongMaterial({\r\n map: map,\r\n shading: FlatShading,\r\n });\r\n this.skyboxMaterial.side = BackSide;\r\n this.skyboxMesh = new Mesh(this.skyboxGeometry, this.skyboxMaterial);\r\n this.scene.add(this.skyboxMesh);\r\n };\r\n\r\n changeSkyboxBackground = (textureUrl, onComplete) => {\r\n this.textureLoader.load(textureUrl, (texture) => {\r\n this.skyboxMesh.material.map = texture;\r\n if(onComplete)\r\n onComplete()\r\n })\r\n }\r\n\r\n initCamera = () => {\r\n this.camera = new PerspectiveCamera(\r\n 65,\r\n this.sizes.width / this.sizes.height,\r\n 0.1,\r\n 1000\r\n );\r\n this.camera.position.z = 2;\r\n };\r\n\r\n initRenderer = () => {\r\n this.renderer = new WebGLRenderer({\r\n antialias: true,\r\n canvas: this.canvas,\r\n });\r\n this.renderer.setSize(this.sizes.width, this.sizes.height);\r\n\r\n this.renderer.setClearColor(0x000000);\r\n this.renderer.domElement.style.cursor = \"move\";\r\n };\r\n\r\n initControls = () => {\r\n this.controls = new OrbitControls(this.camera, this.canvas);\r\n this.controls.enableDamping = true;\r\n this.controls.enableZoom = false;\r\n };\r\n\r\n initLight = () => {\r\n const light = new AmbientLight(0xffffff);\r\n this.scene.add(light);\r\n };\r\n\r\n onAnimationFrameHandler = () => {\r\n this.renderer.render(this.scene, this.camera);\r\n\r\n window.requestAnimationFrame(() => this.onAnimationFrameHandler());\r\n };\r\n\r\n handleWindowResize = () => {\r\n this.sizes.width = window.innerWidth;\r\n this.sizes.height = window.innerHeight;\r\n\r\n this.camera.aspect = this.sizes.width / this.sizes.height;\r\n this.camera.updateProjectionMatrix();\r\n\r\n this.renderer.setSize(this.sizes.width, this.sizes.height);\r\n this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n };\r\n}\r\n\r\nexport default new OrbViewScene();\r\n","import React, { useState } from \"react\";\r\nimport { Subscribe } from \"unstated\";\r\nimport StateContainer from \"../../state/StateContainer\";\r\nimport stringHelper from \"../../utils/helpers/stringHelper\";\r\n\r\nimport \"./OrbViewButton.css\";\r\nimport OrbViewScene from \"../../utils/OrbViewScene\";\r\n\r\nfunction OrbViewButton(props) {\r\n const [isButtonHovered, setIsButtonHovered] = useState(false);\r\n const { image, id } = props;\r\n\r\n const backgroundColor = isButtonHovered\r\n ? stringHelper.removeAplhaFromColor(\r\n props.unstated.state.menuColorSecondary\r\n )\r\n : props.unstated.state.menuColor;\r\n\r\n function ShowScene() {\r\n props.unstated.handleShowElement(\"orbViewScene\", true);\r\n }\r\n\r\n function ClickHandler() {\r\n OrbViewScene.changeSkyboxBackground(image, ShowScene);\r\n }\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n 360 °
{t(\"VIEW\")} \r\n
\r\n {props.unstated.state.orbViews?.map((orbView) =>
\r\n \r\n );\r\n}\r\n\r\nfunction OrbViewSidebarWithUnstated(props) {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default LandscapeNotification;\r\n","import React, { Component } from \"react\";\r\nimport Fullscreen from \"react-full-screen\";\r\nimport { Provider, Subscribe } from \"unstated\";\r\nimport { DndProvider } from \"react-dnd-multi-backend\";\r\nimport HTML5toTouch from \"react-dnd-multi-backend/dist/esm/HTML5toTouch\";\r\n\r\nimport StateContainer from \"./state/StateContainer\";\r\nimport ObjectWindow from \"./components/ObjectWindow/ObjectWindow\";\r\nimport Navbar from \"./components/Navbar/Navbar\";\r\nimport DirectionControls from \"./components/DirectionControls/DirectionControls\";\r\nimport MapView from \"./components/MapView/MapView\";\r\nimport Compass from \"./components/Compass/Compass\";\r\nimport Compare from \"./pages/Compare/Compare\";\r\nimport DisplayWrapper from \"./components/DisplayWrapper/DisplayWrapper\";\r\nimport DefaultButton from \"./components/Buttons/DefaultButton/DefaultButton\";\r\nimport CalibrationHelper from \"./components/CalibrationHelper/CalibrationHelper\";\r\nimport CustomButtonArray from \"./components/Buttons/CustomButtonArray/CustomButtonArray\";\r\nimport ShowApartment from \"./pages/ShowApartment/ShowApartment\";\r\nimport LoadingOverlay from \"./pages/LoadingOverlay/LoadingOverlay\";\r\nimport OrbViewSidebar from \"./components/OrbViewSidebar/OrbViewSidebar\";\r\nimport OrbView from \"./components/OrbView/OrbView\";\r\nimport LandscapeNotification from \"./components/LandscapeNotification/LandscapeNotification\";\r\nimport useScreenOrientation from \"./hooks/useScreenOrientation\";\r\n\r\nimport \"./style/Label.css\";\r\nimport \"./style/App.css\";\r\n\r\n\r\nclass App extends Component {\r\n /**\r\n * Used as a callback to get loading progress from a child component.\r\n * @param loadingValue Loading progress value\r\n */\r\n getLoadingProgress(loadingValue) {\r\n let canvas = document.getElementById(\"root\");\r\n let event = new CustomEvent(\"updateLoadingProgress\", {\r\n detail: {\r\n newValue: loadingValue,\r\n },\r\n });\r\n canvas.dispatchEvent(event);\r\n }\r\n\r\n shouldShowCanvas(state) {\r\n if (state.isApartmentInfoShown || state.isCompareShown) return 0;\r\n return 1;\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n {t(\"LANDSCAPE_VIEW\")}
\r\n {t(\"ROTATE_PHONE\")}\r\n
\r\n
\r\n \r\n {this.props.unstated.state.loadingProgress === 100 ? null : (\r\n \r\n \r\n\r\n {this.props.unstated.state.orbViews.length > 0 && \r\n \r\n\r\n {this.props.unstated.state.loadingProgress !== 100 ? null : (\r\n
\r\n\r\n \r\n \r\n \r\n {this.props.unstated.state.calibratorEnabled ? (\r\n
\r\n )}\r\n