\n
this.changeZoom(-1)} />\n
this.changeZoom(1)} />\n
\n
\n );\n }\n\n changeZoom (by) {\n const { map: { zoom }, updateMap } = this.props;\n if (zoom + by > MAX_ZOOM || zoom + by < MIN_ZOOM) return;\n updateMap({zoom: zoom + by})\n }\n}\n\n\n// TODO What was this?\nclass SubcatMarker extends React.Component {\n render () {\n return (\n
\n
\n \n
\n
\n );\n }\n}\n\n","import React from 'react';\nimport Isvg from 'react-inlinesvg';\nimport {trans} from './utils';\n\nlet GAMES_TRANS = {\n 'en': 'Games',\n 'hr': 'Igre',\n 'de': 'Spiele',\n 'it': 'I giochi',\n 'fr': 'Des jeux',\n 'cs': 'Hry',\n}\n\nexport default class Navigation extends React.Component {\n\n render () {\n let {categories, extra, lang, selected, selectedExtra} = this.props;\n\n let items = categories.map(cat => {\n let id = cat.poi_category_id,\n cls = id === selected ? 'selected' : '';\n\n let icon =
\n if (cat.svg_icon) icon =
\n\n return (\n
this.onChange(id)}>\n { icon }\n { trans(lang, cat.name) } \n \n );\n });\n\n let extraItems = extra.map(ex => {\n let id = ex.extra_content_id,\n cls = id === selectedExtra ? 'selected' : '';\n\n let icon =
\n if (ex.svg_icon) icon =
\n\n return (\n
this.props.onSelectExtra(id)}>\n { icon }\n { trans(lang, ex.name) } \n \n );\n });\n\n let games = null;\n if (this.props.games.length > 0) {\n let icon =
,\n icon_url = this.props.games_svg_icon,\n cls = this.props.gamesSelected ? 'selected' : '';\n\n if (icon_url) icon =
\n games = (\n
this.props.onGameSelect(null)}>\n { icon }\n { trans(lang, GAMES_TRANS) } \n \n );\n }\n\n let homeSelected = (\n selected == null && selectedExtra == null && !this.props.gamesSelected\n );\n\n return (\n
\n this.onChange(null)}>\n Home \n \n\n { items }\n { games }\n { extraItems }\n \n );\n }\n\n onChange(id) {\n this.props.onChange(id);\n window.TRACKING_EVENT.event = 'category';\n window.TRACKING_EVENT.source = 'menu';\n window.TRACKING_EVENT.target_id = id;\n }\n}\n\n","import React from 'react';\n\nexport default class Languages extends React.Component {\n\n render () {\n let {languages, selected} = this.props;\n\n let items = languages.map(({code, name}) => {\n let cls = code === selected ? 'selected' : '';\n\n return (\n
this.onChange(code)}>\n { name }\n \n );\n });\n\n return (\n
\n );\n }\n\n onChange (code) {\n this.props.onChange(code);\n window.TRACKING_EVENT.event = 'language';\n window.TRACKING_EVENT.language = code;\n window.TRACKING_EVENT.source = 'menu';\n }\n}\n\n","import React from 'react';\nimport Markdown from 'react-remarkable';\nimport {trans} from './utils';\n\n\nexport default class ExtraInfo extends React.Component {\n render () {\n let {extra, info} = this.props.poi;\n\n return (\n
\n
\n
\n
\n { extra.web &&
Web { extra.web }
}\n { extra.tel &&
Tel { extra.tel }
}\n
\n
\n );\n }\n}\n\n","import React from 'react';\nimport moment from 'moment';\nimport classNames from 'classnames';\nimport {trans} from './utils';\n\n\nexport default class ExtraInfo extends React.Component {\n\n constructor (props) {\n super(props);\n let selected = null;\n if (props.poi.extra.length > 0) {\n let today = props.poi.extra.find(\n day => equalDate(new Date(day.date*1000), new Date()));\n selected = today != null ? today.date : props.poi.extra[0].date;\n }\n this.state = {selected};\n }\n\n render () {\n let {name, extra} = this.props.poi;\n\n let nav = extra.map(day => {\n let fmt = moment(day.date*1000).format('dddd'),\n cls = classNames({selected: this.state.selected === day.date});\n return (\n
this.setState({selected: day.date}) }>\n {fmt} \n \n );\n });\n\n let day = extra.find(d => d.date === this.state.selected),\n schedule = null;\n\n let cnt = 0;\n if (day != null) schedule = day.events.map(event => {\n return (\n
\n \n {`${fmtTime(event.from)} - ${fmtTime(event.to)}`}\n \n \n { truncStr(event.name, 100) } \n { fmtSpeaker(event.speaker) } \n
\n \n );\n });\n\n\n return (\n
\n
{ trans(this.props.lang, name) } \n
\n
\n
\n );\n }\n}\n\nfunction fmtTime(t) {\n let hours = Math.floor(t / 60), minutes = (t % 60);\n if (hours < 10) {\n return t % 60 === 0 ? `0${hours}:00` : `0${hours}:${minutes}`;\n } else {\n return t % 60 === 0 ? `${hours}:00` : `${hours}:${minutes}`;\n }\n};\n\nfunction truncStr(str, maxLength) {\n if (str == null) return '';\n if (str.length > maxLength) {\n return `${str.substr(0, maxLength)}...`;\n } else {\n return str;\n }\n}\n\nfunction fmtSpeaker(speaker) {\n return speaker == null ? '' : speaker.split('\\\\');\n}\n\nfunction equalDate(d1, d2) {\n return d1.getYear() === d2.getYear() &&\n d1.getMonth() === d2.getMonth() &&\n d1.getDate() === d2.getDate();\n}\n\n","import React from 'react';\nimport classNames from 'classnames';\nimport Markdown from 'react-remarkable';\nimport {trans} from './utils';\nimport ExtraInfo from './ExtraInfo';\nimport ExtraInfoSchedule from './ExtraInfoSchedule';\n\n\nexport default class Legend extends React.Component {\n\n constructor (props) {\n super(props);\n this.prevPage = this.prevPage.bind(this);\n this.nextPage = this.nextPage.bind(this);\n this.pageSize = window.LANDSCAPE ? 11 : 8;\n }\n\n render () {\n let {poi, subcategories, legend_type, lang, selected} = this.props;\n\n let items = [];\n\n const pageSize = this.pageSize,\n page = this.props.page;\n\n let totalPages = Math.ceil(poi.length / pageSize);\n if (legend_type === 'subcategory') {\n totalPages = Math.ceil(subcategories.length / pageSize);\n }\n\n if (legend_type === 'detailed' || legend_type === 'extra') {\n for (let i=page*pageSize; i < Math.min((page+1)*pageSize, poi.length); i++) {\n let p = poi[i],\n isSelected = selected.poi != null && p.poi_id === selected.poi.poi_id;\n\n items.push(
);\n }\n } else if (legend_type === 'subcategory') {\n items = subcategories.map(cat => {\n let isSelected = (selected.subcategory != null &&\n selected.subcategory.poi_subcategory_id === cat.poi_subcategory_id);\n\n return
;\n });\n }\n\n let style = {\n flexBasis: this.props.info_height,\n }\n\n let itemsStyle = {};\n\n if (legend_type === 'subcategory' && subcategories.length <= 12) {\n itemsStyle['height'] = 80 * Math.ceil(subcategories.length / 2);\n }\n\n if (legend_type === 'detailed' && poi.length <= 12) {\n itemsStyle['height'] = 80 * Math.ceil(poi.length / 2);\n }\n\n let extraPanel = null;\n\n if (legend_type === 'extra') {\n if (selected.poi == null) {\n extraPanel = (\n
\n
\n );\n } else {\n if (Array.isArray(selected.poi.extra)) {\n extraPanel =
;\n } else {\n extraPanel =
;\n }\n }\n }\n\n return (\n
\n
\n
\n
{ trans(lang, this.props.legend_title) } \n
\n \n \n \n \n { `${page + 1} / ${ totalPages }` } \n \n \n \n \n
\n
\n
\n { items }\n
\n
\n\n { extraPanel }\n
\n );\n }\n\n nextPage () {\n let totalPages = Math.ceil(this.props.poi.length / this.pageSize);\n this.props.setPage((this.props.page+1) % totalPages);\n\n window.TRACKING_EVENT.event = 'page_next';\n window.TRACKING_EVENT.source = 'legend';\n }\n\n prevPage () {\n let totalPages = Math.ceil(this.props.poi.length / this.pageSize);\n this.props.setPage((totalPages+this.props.page-1) % totalPages);\n\n window.TRACKING_EVENT.event = 'page_prev';\n window.TRACKING_EVENT.source = 'legend';\n }\n}\n\n\nclass DetailedLegendItem extends React.Component {\n\n constructor (props) {\n super(props);\n this.handleClick = this.handleClick.bind(this);\n }\n\n render () {\n let {poi, lang} = this.props;\n\n let cls = classNames({\n DetailedLegendItem: true,\n selected: this.props.selected,\n });\n\n return (\n
\n { this.props.number } \n
{ trans(lang, poi.name) } \n { poi.address } \n \n );\n }\n\n handleClick () {\n if (this.props.onClick) this.props.onClick(this.props.poi);\n window.TRACKING_EVENT.event = 'poi';\n window.TRACKING_EVENT.source = 'legend';\n window.TRACKING_EVENT.target_id = this.props.poi.poi_id;\n }\n}\n\n\nclass SubcatLegendItem extends React.Component {\n\n constructor (props) {\n super(props);\n this.handleClick = this.handleClick.bind(this);\n }\n\n render () {\n let {subcategory, lang} = this.props;\n\n let css = {};\n if (subcategory.image) {\n let bg = subcategory.image;\n css['backgroundImage'] = `url(${bg})`;\n }\n\n let cls = classNames({\n SubcatLegendItem: true,\n selected: this.props.selected,\n });\n\n return (\n
\n
{ trans(lang, subcategory.name) } \n \n );\n }\n\n handleClick () {\n if (this.props.onClick) this.props.onClick(this.props.subcategory);\n window.TRACKING_EVENT.event = 'subcategory';\n window.TRACKING_EVENT.source = 'legend';\n window.TRACKING_EVENT.target_id = this.props.subcategory.poi_subcategory_id;\n }\n}\n\n","import React from 'react';\nimport moment from 'moment';\n\nconst ICONS = {\n clear: require('./img/weather/clear.png'),\n clouds: require('./img/weather/clouds.png'),\n fewclouds: require('./img/weather/fewclouds.png'),\n rain: require('./img/weather/rain.png'),\n snow: require('./img/weather/snow.png'),\n};\n\nfunction formatTemp (temp) {\n if (temp == null) return '-';\n return temp.toFixed(0);\n}\n\nexport default class Weather extends React.Component {\n\n render () {\n let weather = this.props.weather;\n if (weather == null || weather[0] == null) return null;\n let current = weather[0],\n day = moment(current.time).format('dddd'),\n date = moment(current.time).format('DD.MM.YYYY.');\n return (\n
\n
{ day } / { date }
\n
\n {formatTemp(current.temp)}°c \n
\n
\n \n
\n
\n );\n }\n}\n\nclass SmallWeather extends React.Component {\n\n render () {\n let w = this.props.weather;\n if (w == null) return
\n\n let day = moment(w.time).format('ddd'),\n date = moment(w.time).format('DD.MM.');\n return (\n
\n
{ day }
\n
{ date }
\n
\n
{formatTemp(w.temp)}°c
\n
\n );\n }\n}\n","import React from 'react';\nimport Markdown from 'react-remarkable';\nimport Weather from './Weather';\nimport {trans} from './utils';\n\n\nexport default class About extends React.Component {\n\n render () {\n let {lang, about, weather} = this.props;\n\n return (\n
\n );\n }\n}\n\n\n","import React from 'react';\n\n\nexport default class Advert extends React.Component {\n\n constructor (props) {\n super(props);\n this.state = {show: true};\n }\n\n static defaultProps = {\n loop: false,\n }\n\n componentDidMount () {\n let {video} = this.props.advert;\n if (video) {\n let v = this.refs.video.getDOMNode();\n v.addEventListener('ended', () => this.setState({show: false}));\n }\n }\n\n render () {\n if (!this.state.show) return null;\n\n let {image, video} = this.props.advert;\n let {id, loop} = this.props;\n\n if (image) {\n return (\n
\n
;\n
\n );\n } else if (video) {\n return (\n
\n
\n );\n } else {\n return null;\n }\n }\n}\n\n\n","import React from 'react';\nimport {trans} from './utils';\nimport Advert from './Advert';\n\nvar ADDRESS = {\n en: 'Address',\n hr: 'Adresa',\n}\n\nvar PHONE = {\n en: 'Phone',\n hr: 'Telefon',\n}\n\nvar WORKING_HOURS = {\n en: 'Working hours',\n hr: 'Radno vrijeme',\n}\n\nvar DAYS = ['%sun', '%mon', '%tue', '%wed', '%thu', '%fri', '%sat'];\n\nvar DAYS_SHORT = {\n hr: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'),\n en: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),\n de: 'So._Mo._Di._Mi._Do._Fr._Sa.'.split('_'),\n fr: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),\n it: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'),\n cs: 'ne_po_út_st_čt_pá_so'.split('_'),\n}\n\n\nclass PoiInfo extends React.Component {\n render() {\n let {poi, lang} = this.props;\n\n return (\n
\n
{trans(lang, poi.name)} \n
\n \n \n { trans(lang, ADDRESS) } \n { poi.address } \n \n { poi.phone === '' ? null :\n \n { trans(lang, PHONE) } \n { poi.phone } \n \n }\n { poi.web_address === '' ? null :\n \n Web \n { this.getWebAddress() } \n \n }\n { poi.working_hours === '' ? null :\n \n { trans(lang, WORKING_HOURS) } \n { this.getWorkingHours() } \n \n }\n \n
\n { this.getWalkingDuration() }\n { this.getDrivingDuration() }\n
\n )\n }\n\n getWalkingDuration() {\n let poi = this.props.poi;\n\n if (poi.directions == null || poi.directions.walking_duration == null) {\n return null;\n }\n let min = Math.ceil(poi.directions.walking_duration / 60) + ' min';\n return (\n
\n
\n { min }\n
\n )\n }\n\n getDrivingDuration() {\n let poi = this.props.poi;\n\n if (poi.directions == null || poi.directions.driving_duration == null) {\n return null;\n }\n\n if (poi.directions.walking_duration && poi.directions.walking_duration / 60 < 15) {\n return null;\n }\n\n let min = Math.ceil(poi.directions.driving_duration / 60) + ' min';\n\n return (\n
\n
\n { min }\n
\n )\n }\n\n getWorkingHours() {\n let hours = this.props.poi.working_hours;\n hours = hours.replace(/%[a-z]{3,3}/g, s => {\n let index = DAYS.indexOf(s);\n if (index === -1) return '';\n return DAYS_SHORT[this.props.lang][index];\n });\n return hours.split('//').map(s =>
{ s }
);\n }\n\n getWebAddress() {\n let web = this.props.poi.web_address;\n if (web == null) return '';\n if (web.startsWith('http://')) {\n web = web.substr(7);\n }\n if (web.startsWith('https://')) {\n web = web.substr(8);\n }\n if (web.endsWith('/')) {\n web = web.substr(0, web.length-1);\n }\n return web;\n }\n}\n\nexport default class Header extends React.Component {\n\n render () {\n let {lang, category, sponsor, poi} = this.props;\n\n if (sponsor && sponsor.header) {\n sponsor =
;\n } else {\n sponsor = null;\n }\n\n return (\n
\n {trans(lang, category.name)} \n { sponsor }\n { poi == null ? null : \n );\n }\n}\n\n","import React from 'react';\nimport Advert from './Advert';\n\n\nexport default class Homepage extends React.Component {\n\n render () {\n let {title, languages} = this.props;\n\n let items = languages.map(({code, name}) => {\n return (\n
this.onSelectLanguage(code)}>\n { name }\n \n );\n });\n\n let advert = null;\n if (this.props.advert) {\n advert = (\n
\n )\n }\n\n return (\n
\n
INFO \n
\n { advert }\n
\n );\n }\n\n onSelectLanguage(code) {\n this.props.onSelectLanguage(code);\n window.TRACKING_EVENT.event = 'language';\n window.TRACKING_EVENT.language = code;\n window.TRACKING_EVENT.source = 'home';\n }\n}\n\n","import React from 'react';\n\n\nexport default class Games extends React.Component {\n\n render() {\n let {games} = this.props;\n\n return (\n
\n {\n games.map(g => (\n
this.props.onSelectGame(g.kiosk_game_id)\n }>\n
\n
\n ))\n }\n
\n );\n }\n}\n","import React from 'react';\nimport classNames from 'classnames';\nimport Map from './Map';\nimport {MapControls} from './Map';\nimport Navigation from './Navigation';\nimport Languages from './Languages';\nimport Legend from './Legend';\nimport About from './About';\nimport Header from './Header';\nimport Homepage from './Homepage';\nimport Games from './Games';\n\nconst MAPBOX = 'pk.eyJ1Ijoiam9jYW1sIiwiYSI6Ijg2ZGZjNTY2MWQ3NjdlZmU3ODhiNzk1MTkwZDg2ZTQ2In0.DYFWbv_uv3DjGeKhmhfCng'\n\nexport default class Main extends React.Component {\n\n constructor (props) {\n super(props);\n this.getCategory = this.getCategory.bind(this);\n this.handleHomepageAdvertClick = this.handleHomepageAdvertClick.bind(this);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (this.props.home_banners.length > 0) {\n if (nextProps.lang != null && this.props.lang == null) {\n document.getElementById('homebanners').style.display = 'none';\n }\n\n if (nextProps.lang == null && this.props.lang != null) {\n document.getElementById('homebanners').style.display = 'inherit';\n }\n }\n\n if (nextProps.selectedExtra != null) {\n document.getElementById('iframes').style.display = 'inherit';\n document.getElementById('extra-iframe-' + nextProps.selectedExtra).style.display = 'inherit';\n }\n\n if (this.props.selectedExtra != null &&\n this.props.selectedExtra !== nextProps.selectedExtra) {\n document.getElementById('iframes').style.display = 'none';\n document.getElementById('extra-iframe-' + this.props.selectedExtra).style.display = 'none';\n }\n\n if (nextProps.selectedGame != null) {\n document.getElementById('iframes').style.display = 'inherit';\n document.getElementById('game-iframe-' + nextProps.selectedGame).style.display = 'inherit';\n }\n\n if (this.props.selectedGame != null &&\n this.props.selectedGame !== nextProps.selectedGame) {\n document.getElementById('iframes').style.display = 'none';\n document.getElementById('game-iframe-' + this.props.selectedGame).style.display = 'none';\n }\n }\n\n render () {\n let category = null, header = null, poi = [], legend = null;\n\n let {lang, weather, sponsor, selectedExtra, gamesSelected} = this.props;\n let about = this.props.kiosk_group.about;\n\n if (this.props.category) {\n category = this.getCategory(this.props.category);\n poi = category.poi;\n legend =
;\n header =
\n }\n\n let map =
;\n\n let main = null;\n if (lang == null) {\n return (\n
\n
\n );\n } else if (category == null && selectedExtra == null && !gamesSelected) {\n main = (\n
\n \n { map }\n
\n \n );\n } else if (selectedExtra != null) {\n main = (\n
\n { map }
\n \n )\n } else if (gamesSelected) {\n let games = null;\n if (this.props.selectedGame == null) {\n games =
;\n }\n main = (\n
\n { games }\n { map }
\n \n )\n } else {\n if (category.legend_type === 'iframe') {\n main = (\n
\n \n { header }\n
{ map }
\n
\n
\n );\n } else {\n main = (\n
\n \n { header }\n { map }\n
\n \n );\n }\n }\n\n const isCollapsed = category != null || selectedExtra != null || gamesSelected;\n let cls = {\n collapsed: isCollapsed,\n noncollapsed: !isCollapsed,\n };\n if (category != null) cls['category-' + category.css_class] = true;\n\n return (\n
\n \n { this.props.kiosk_group.name } \n \n { main }\n
\n );\n }\n\n handleHomepageAdvertClick() {\n const category_id = this.props.homepage_advert.open_poi_category_id;\n if (category_id != null) {\n this.props.selectLanguage('hr');\n this.props.selectCategory(category_id);\n }\n }\n\n getCategory(id) {\n return this.props.categories.find(cat => cat.poi_category_id === id);\n }\n\n getMapDimensions () {\n let props = this.props;\n if (window.LANDSCAPE) {\n let width = 1920, height = 1080, top = 0, left = 0;\n\n if (props.lang == null) {\n // pass\n } else if (props.category) {\n width = width - 1000;\n left = 1000;\n height = 1000;\n top = 80;\n if (props.sponsor && props.sponsor.footer_id) height = height - 360;\n } else {\n width = width - 400;\n left = 400;\n }\n\n return {width, height, top, left};\n } else {\n let width = 1080, height = 1920, top = 0, left = 0;\n\n if (props.lang == null) {\n // pass\n } else if (props.category) {\n let category = this.getCategory(props.category),\n infoHeight = category.info_height;\n width = width - 150;\n left = 150;\n height = height - infoHeight - 80;\n top = 80;\n if (props.sponsor && props.sponsor.footer_id) height = height - 360;\n } else {\n width = width - 400;\n left = 400;\n }\n\n return {width, height, top, left};\n }\n }\n}\n\n","import React from 'react';\nimport classNames from 'classnames';\nimport {setState} from './utils';\nimport {languages} from './langs';\nimport Main from './Main';\nimport Advert from './Advert';\nimport {track, notification, heartbeat} from './tracking';\nimport xr from './xr';\nimport moment from 'moment';\nimport 'moment/locale/hr';\nimport 'moment/locale/it';\nimport 'moment/locale/fr';\nimport 'moment/locale/de';\nimport 'moment/locale/cs';\n\nwindow.HEARTBEAT = heartbeat;\nwindow.LAST_ACTIVE = new Date();\nwindow.TRACKING_EVENT = {};\nwindow.FULL_SCREEN_ACTIVE = null;\n\nexport class App extends React.Component {\n\n constructor (props) {\n super(props);\n let [lng, lat] = props.location.coordinates;\n this.state = {\n lang: null,\n gamesSelected: false,\n selected: {\n category: null,\n subcategory: null,\n poi: null,\n extra: null,\n game: null,\n },\n page: 0,\n weather: null,\n map: {\n center: [lat, lng],\n zoom: 14,\n },\n };\n window.APP = this;\n this.initMap = this.state.map;\n this.select = this.select.bind(this);\n this.selectPOI = this.selectPOI.bind(this);\n this.selectCategory = this.selectCategory.bind(this);\n this.selectSubcategory = this.selectSubcategory.bind(this);\n this.selectExtra = this.selectExtra.bind(this);\n this.selectGame = this.selectGame.bind(this);\n this.updateWeather = this.updateWeather.bind(this);\n this.onBodyClick = this.onBodyClick.bind(this);\n }\n\n componentDidMount () {\n this.updateWeather();\n\n this.addHomeBannerListeners();\n\n this.weatherUpdater = setInterval(() => {\n this.updateWeather();\n }, 30*60*1000);\n\n this.activity = setInterval(() => {\n let now = new Date().getTime(),\n delta = now - window.LAST_ACTIVE.getTime();\n\n if (delta > 30*1000) { // 30s\n this.setState({\n lang: null,\n gamesSelected: false,\n selected: {\n category: null,\n subcategory: null,\n poi: null,\n extra: null,\n game: null,\n },\n map: this.initMap,\n });\n this.LAST_ACTIVE = new Date();\n }\n }, 5000);\n\n this.notificationInterval = setInterval(heartbeat, 2*60*1000);\n\n heartbeat();\n\n this.updateInterval = setInterval(() => {\n console.info('Check if kiosk should update...');\n\n xr.get(`/api/update/${this.props['kiosk_id']}/`, {}).then(({data}) => {\n let {time, should_reload} = data;\n if (time > this.props.time) {\n if (should_reload) {\n notification('reload');\n setTimeout(() => {window.location.reload(false)}, 2000);\n }\n }\n }, res => console.error('Failed update check', res));\n }, 2*60*1000);\n\n notification('load');\n }\n\n componentWillUnmount () {\n clearInterval(this.activity);\n clearInterval(this.weatherUpdater);\n clearInterval(this.notificationInterval);\n clearInterval(this.updateInterval);\n }\n\n render () {\n let sponsor = this.getCategorySponsor(), footer = null, splash = null;\n if (sponsor && sponsor.footer) {\n footer = ;\n }\n\n if (sponsor && sponsor.splash && sponsor.splash.video) {\n splash =
;\n }\n const cls = {App: true, footerAds: footer != null};\n\n if (this.state.lang != null) cls[`lang-${this.state.lang}`] = true;\n\n return (\n
\n { splash }\n
\n );\n }\n\n select (item, value) {\n let selected = Object.assign({}, this.state.selected);\n selected[item] = value;\n this.setState({selected});\n }\n\n selectLanguage (lang) {\n this.setState({lang});\n moment.locale(lang);\n\n // send message to extra iframe\n let extra = this.state.selected.extra\n if (extra != null) {\n document.getElementById('extra-iframe-' + extra).contentWindow.postMessage({\n type: 'SET_LANGUAGE',\n payload: lang,\n }, '*');\n }\n }\n\n selectCategory (category) {\n let selected = Object.assign({}, this.state.selected);\n selected.category = category;\n selected.poi = null;\n selected.subcategory = null;\n\n if (selected.extra != null) {\n document.getElementById('extra-iframe-' + selected.extra).contentWindow.postMessage({\n type: 'RESET',\n }, '*');\n }\n\n if (selected.game != null) {\n document.getElementById('game-iframe-' + selected.game).contentWindow.postMessage({\n type: 'RESET',\n }, '*');\n }\n\n selected.game = null;\n selected.extra = null;\n this.setState({gamesSelected: false, selected, page: 0});\n }\n\n selectExtra (extraId) {\n document.getElementById('extra-iframe-' + extraId).contentWindow.postMessage({\n type: 'SET_LANGUAGE',\n payload: this.state.lang,\n }, '*');\n\n if (this.state.selected.game != null) {\n document.getElementById('game-iframe-' + this.state.selected.game).contentWindow.postMessage({\n type: 'RESET',\n }, '*');\n }\n\n this.setState({gamesSelected: false, selected: {\n category: null,\n subcategory: null,\n poi: null,\n extra: extraId,\n game: null,\n }, page: 0});\n }\n\n selectGame (gameId) {\n if (gameId != null) {\n document.getElementById('game-iframe-' + gameId).contentWindow.postMessage({\n type: 'SET_LANGUAGE',\n payload: this.state.lang,\n }, '*');\n };\n\n if (this.state.selected.extra != null) {\n document.getElementById('extra-iframe-' + this.state.selected.extra).contentWindow.postMessage({\n type: 'RESET',\n }, '*');\n }\n\n this.setState({gamesSelected: true, selected: {\n category: null,\n subcategory: null,\n poi: null,\n extra: null,\n game: gameId,\n }, page: 0});\n }\n\n selectSubcategory (subcat) {\n let selected = Object.assign({}, this.state.selected);\n selected.subcategory = subcat;\n selected.poi = null;\n this.setState({selected});\n }\n\n selectPOI (poi) {\n this.select('poi', poi); \n this.updateMap({center: poi.location});\n }\n\n getCategorySponsor() {\n let id = this.state.selected.category;\n return this.props.category_sponsor.find(cat => cat.poi_category_id === id);\n }\n\n updateMap = map => {\n window.LAST_ACTIVE = new Date();\n map = {...this.state.map, ...map};\n this.setState({map});\n }\n\n updateWeather () {\n let q = this.props.kiosk_group.weather_query;\n if (q === '') return;\n\n const icons = {\n '01': 'clear',\n '02': 'fewclouds',\n '03': 'fewclouds',\n '04': 'clouds',\n '09': 'rain',\n '10': 'rain',\n '11': 'rain',\n '13': 'snow',\n '50': 'clear', // mist!\n }\n const BASE_URL = 'http://api.openweathermap.org/data/2.5/';\n const KEY = 'fb3f6801e71f2ca70a6ab4d773e2ad1f';\n\n xr.configure({\n headers: {\n 'Accept': 'application/json',\n //'Content-Type': 'application/json', // Weather API didn't allow Content-Type\n },\n });\n\n let now = xr.get('/proxy/', {url: `${BASE_URL}weather?q=${q}&mode=json&units=metric&APPID=${KEY}`}),\n next = xr.get('/proxy/', {url: `${BASE_URL}forecast/daily?q=${q}&mode=json&units=metric&cnt=4&APPID=${KEY}`}),\n all = Promise.all([now, next]);\n all.then(([now, next]) => {\n if (now == null || !now.weather || !now.main) return;\n\n let weather = [];\n weather.push({\n icon: icons[now.weather[0].icon.substr(0,2)],\n temp: now.main.temp,\n time: now.dt*1000,\n });\n\n if (!next.list) return;\n next.list.splice(1).forEach(w => {\n if (!w.weather) {\n weather.push(null);\n return;\n }\n weather.push({\n icon: icons[w.weather[0].icon.substr(0,2)],\n temp: w.temp.day,\n time: w.dt*1000,\n });\n });\n this.setState({weather});\n }).catch(reason => console.error('Cannot update weather', reason));\n }\n\n addHomeBannerListeners() {\n var homebanners = document.getElementsByClassName('homebanner');\n Array.prototype.forEach.call(homebanners, el => {\n const id = el.getAttribute('data-id'),\n fullscreen = el.getAttribute('data-fullscreen'),\n extra = el.getAttribute('data-extra');\n\n el.addEventListener('click', event => {\n if (extra) {\n let e = this.props.extra.find(e => e.code = extra);\n // TODO doesn't work yet!\n if (e != null) {\n this.setState({selected: Object.assign({}, this.state.selected, {\n extra: e.extra_content_id,\n })});\n }\n } else if (fullscreen) {\n track({\n event: 'home_banner',\n x: event.clientX,\n y: event.clientY,\n source: 'none',\n target_id: null,\n language: this.state.lang,\n });\n\n document.getElementById('fullscreen').style.display = 'inherit';\n let full = document.getElementById('full-iframe-' + id);\n full.style.display = 'inherit';\n full.contentWindow.postMessage({\n type: 'START',\n }, '*');\n window.FULL_SCREEN_ACTIVE = id;\n }\n });\n });\n\n\n setInterval(() => {\n // check if full screen is active and there is no activity for X seconds\n let now = new Date().getTime(),\n delta = now - window.LAST_ACTIVE.getTime();\n\n if (delta > 1*60*1000 && window.FULL_SCREEN_ACTIVE != null) { // 1 minute\n let full = document.getElementById('full-iframe-' + window.FULL_SCREEN_ACTIVE);\n full.contentWindow.postMessage({\n type: 'END',\n }, '*');\n document.getElementById('fullscreen').style.display = 'none';\n full.style.display = 'none';\n window.FULL_SCREEN_ACTIVE = null;\n track({\n event: 'fullscreen_timeout',\n source: 'none',\n });\n }\n }, 1000);\n }\n\n onBodyClick (e) {\n track({\n event: 'click',\n x: e.clientX,\n y: e.clientY,\n source: 'none',\n target_id: null,\n language: this.state.lang,\n selected_category_id: this.state.selected.category,\n });\n }\n}\n\nfunction iframeUrl(url) {\n if (url.startsWith('/') && process.env.NODE_ENV === 'development') {\n return 'https://interaktivno.go2digital.hr' + url;\n }\n return url;\n}\n\nexport function addIframes(extra, games, homepageIframes) {\n let iframes = document.getElementById('iframes');\n\n extra.forEach(ex => {\n let iframe = document.createElement('iframe');\n iframe.setAttribute('src', iframeUrl(ex.url));\n iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');\n iframe.setAttribute('id', 'extra-iframe-' + ex.extra_content_id);\n iframe.style.display = 'none';\n iframes.appendChild(iframe);\n });\n\n games.forEach(ex => {\n let iframe = document.createElement('iframe');\n iframe.setAttribute('src', iframeUrl(ex.url));\n iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');\n iframe.setAttribute('id', 'game-iframe-' + ex.kiosk_game_id);\n iframe.style.display = 'none';\n iframes.appendChild(iframe);\n });\n\n homepageIframes.forEach(banner => {\n let iframe = document.createElement('iframe'),\n iframeCover = document.createElement('div');\n\n iframe.setAttribute('src', iframeUrl(banner.iframe_url));\n iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');\n iframe.setAttribute('id', 'homepage-iframe-' + banner.home_banner_id);\n\n iframeCover.setAttribute('class', 'homebanner');\n iframeCover.setAttribute('data-id', banner.home_banner_id);\n iframeCover.setAttribute('data-name', banner.name);\n iframeCover.setAttribute('data-fullscreen', banner.full_screen_iframe_url);\n iframeCover.setAttribute('data-extra', banner.extra_content);\n\n iframe.style.height = iframeCover.style.height = banner.height + 'px';\n iframe.style.top = iframeCover.style.top = banner.top + 'px';\n iframe.style.position = iframeCover.style.position = 'absolute';\n iframe.style.width = iframeCover.style.width = '1080px';\n iframe.style.zIndex = '100';\n iframeCover.style.zIndex = '101';\n iframeCover.style.background = 'rgba(0,0,0,0)';\n\n document.getElementById('homebanners').appendChild(iframe);\n if (banner.full_screen_iframe_url || banner.extra_content) {\n // take over click if one of those attr is defined\n document.getElementById('homebanners').appendChild(iframeCover);\n }\n\n if (banner.full_screen_iframe_url) {\n let fullIframe = document.createElement('iframe');\n fullIframe.setAttribute('src', iframeUrl(banner.full_screen_iframe_url));\n fullIframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');\n fullIframe.setAttribute('id', 'full-iframe-' + banner.home_banner_id);\n fullIframe.style.top = '0';\n fullIframe.style.display = 'none';\n fullIframe.style.position = 'absolute';\n fullIframe.style.zIndex = '110';\n fullIframe.style.width = '1080px';\n fullIframe.style.height = '1920px';\n document.getElementById('fullscreen').appendChild(fullIframe);\n }\n });\n}\n\nexport function prepareProps (props) {\n // add category/subcategory to each poi\n props.categories.forEach(cat => {\n // map all subcategories\n let subcats = {};\n if (cat.subcategories) {\n cat.subcategories.forEach(subcat => {\n subcats[subcat.poi_subcategory_id] = subcat;\n subcat.poi_category = cat;\n });\n }\n\n cat.poi.forEach(poi => {\n poi.poi_category = cat;\n if (poi.poi_subcategory_id) {\n poi.poi_subcategory = subcats[poi.poi_subcategory_id];\n } else {\n poi.poi_subcategory = null;\n }\n });\n });\n\n props.languages = languages;\n return props;\n}\n\ndocument.body.addEventListener('mousedown', () => {\n window.LAST_ACTIVE = new Date();\n});\n\nwindow.addEventListener('message', function ({data}) {\n if (data.type === 'ACTIVITY') {\n window.LAST_ACTIVE = new Date();\n } else if (data.type === 'APP_END') {\n track({\n event: 'fullscreen_end',\n source: 'none',\n });\n document.getElementById('fullscreen').style.display = 'none';\n document.getElementById('full-iframe-' + window.FULL_SCREEN_ACTIVE).style.display = 'none';\n window.FULL_SCREEN_ACTIVE = null;\n }\n});\n\n\ndocument.addEventListener(\"visibilitychange\", function() {\n if (document.visibilityState === 'hidden') {\n notification('unfocus');\n }\n});\n\n","function debounce(func, wait, immediate) {\n var timeout;\n return function() {\n var context = this,\n args = arguments;\n var later = function() {\n timeout = null;\n if (!immediate) func.apply(context, args);\n };\n var callNow = immediate && !timeout;\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n if (callNow) func.apply(context, args);\n };\n}\n\nfunction getViewportDimensions() {\n return {\n windowWidth: Math.max(\n document.documentElement.clientWidth,\n window.innerWidth || 0\n ),\n windowHeight: Math.max(\n document.documentElement.clientHeight,\n window.innerHeight || 0\n ),\n };\n}\n\nexport function fit(el, width, height, onResize) {\n let render = dim => {\n let scale = 1;\n const { windowWidth, windowHeight } = dim;\n\n if (width !== windowWidth && height !== windowHeight) {\n let scaleX = windowWidth / width,\n scaleY = windowHeight / height;\n\n scale = windowWidth / windowHeight > width / height ? scaleY : scaleX;\n }\n\n el.style.transform = `scale(${scale})`;\n el.style.transformOrigin = '0 0';\n el.style.width = `${width}px`;\n el.style.height = `${height}px`;\n onResize(scale);\n };\n\n let handleWindowResize = debounce(() => {\n render(getViewportDimensions());\n }, 100);\n\n window.addEventListener('resize', handleWindowResize);\n\n render(getViewportDimensions());\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport xr from './xr';\nimport queryString from 'query-string';\nimport { App, addIframes, prepareProps } from './App';\nimport { fit } from './fitToWindow';\n\nfunction render() {\n const qs = queryString.parse(window.location.search);\n\n xr.get(`/api/kiosk/${qs['instance'] || '1'}/`).then(resp => {\n let props = prepareProps(resp.data);\n window.KIOSK = props['kiosk_id'];\n window.KIOSK_INSTANCE = props['kiosk_instance_id'];\n window.LANDSCAPE = props['is_landscape'];\n\n if (window.KIOSK_INSTANCE) {\n sendInit(qs['instance']);\n }\n\n if (!window.LANDSCAPE) {\n import('./css/kiosk.css');\n fit(document.getElementById('wrap'), 1080, 1920, ()=>{});\n } else {\n import('./css/kiosk.landscape.css');\n fit(document.getElementById('wrap'), 1920, 1080, ()=>{});\n }\n\n // if (process.env.NODE_ENV !== 'development') addCss(props.css);\n\n addIframes(props.extra, props.games, props.home_banners);\n ReactDOM.render(
, document.getElementById(\"app\"));\n });\n}\n\nrender();\n\nasync function sendInit(instance) {\n let internet = true;\n try {\n await timeout(5000, fetch('https://www.facebook.com/'));\n } catch (e) {\n internet = !e.isTimeout;\n }\n\n xr.post(`/api/kiosk/${instance}/`, {\n domain: window.location.host,\n internet,\n });\n}\n\nfunction timeout(ms, promise) {\n return new Promise(function(resolve, reject) {\n setTimeout(function() {\n let error = new Error(\"timeout\");\n error.isTimeout = true;\n reject(error)\n }, ms)\n promise.then(resolve, reject)\n })\n}\n\nfunction addCss(css) {\n let head = document.head || document.getElementsByTagName('head')[0],\n style = document.createElement('style');\n\n head.appendChild(style);\n\n style.type = 'text/css';\n style.appendChild(document.createTextNode(css));\n}\n\n","module.exports = __webpack_public_path__ + \"static/media/home_marker.9872528e.svg\";","module.exports = __webpack_public_path__ + \"static/media/home_icon.49c0cd1e.svg\";"],"sourceRoot":""}
})
\n }){kind=icon}
\n { min }\n }){kind=icon}
\n { min }\n