', mounted: function(){ dataStorage.data.pois = this; }, data: function () { return { initialized: false, language: language, categories: {}, pois: [], markers: [], polylines: [], win: window, fetching: false, hashMap: {}, lastLatLng: undefined, frozen: false, } }, methods: { init: function() { var that = this; that.fetchCategories(function() { // that.filter(function() { // that.markers.forEach(marker => { // marker.remove(); // }); // delete that.markers; // that.markers = []; // that.showAll(); // }); }); }, showAll: function(callObjectWithName = 'poiModal', label = 'planner.pois.add') { const that = this; var i = 0; this.pois.forEach(poi => { i = i + 1; if (i <= 50) { if ('Point' == poi.geometry.type) { let marker = L.marker(new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0]), { draggable: false, }); marker.setIcon(L.icon({ iconUrl: poi.properties.markerUrl, iconSize: [30, 30], className: 'hover-darker poi-marker' })); marker.on('click', function() { const popup = that.buildPoiDetailPopup(poi, callObjectWithName, label); popup.addTo(that.win.mapboxMap); }); marker.addTo(that.win.mapboxMap); that.markers.push(marker); } else if ('LineString' == poi.geometry.type) { const coords = []; poi.geometry.coordinates.forEach(point => { coords.push(new L.latLng(point[1], point[0])); }); const line = L.polyline(coords, { color: poi.properties.strokeColor, weight: poi.properties.strokeWidth, opacity: poi.properties.strokeOpacity }); line.on('click', function() { const popup = that.buildPoiDetailPopup(poi, callObjectWithName, label); popup.addTo(that.win.mapboxMap); }); line.on('mouseover', function(e) { e.target.setStyle({ opacity: 1 }); }); line.on('mouseout', function(e) { e.target.setStyle({ opacity: poi.properties.strokeOpacity }); }); line.addTo(that.win.mapboxMap); that.polylines.push(line); } // end if-elseif } // end if }); }, refresh: function() { if (true == this.frozen) { return; } // end if var that = this; if ( ! this.initialized) { return this.init(); } // end if // const center = this.win.markers[0] ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter(); const center = this.win.mapboxMap.getCenter(); if (this.lastLatLng === center) { return; } else { if (center) this.lastLatLng = center; } // end if-else // this.clearMarkers(); // this.markers.forEach(marker => { // marker.remove(); // }); // delete that.markers; // that.markers = []; // this.clearPolylines(); // this.polylines.forEach(line => { // line.remove(); // }); // delete that.polylines; // that.polylines = []; that.filter(function() { that.clearMarkers(); that.clearPolylines(); that.showAll(); }); }, clearMarkers: function() { var that = this; this.markers.forEach(marker => { marker.remove(); }); delete that.markers; that.markers = []; }, clearPolylines: function() { var that = this; this.polylines.forEach(line => { line.remove(); }); delete that.polylines; that.polylines = []; }, fetchCategories: function(onDone) { var that = this; this.fetching = true; axios.get('/poi-categories/').then(function (res) { for (let i = 0; i < res.data.length; i++) { const cat = res.data[i]; that.categories[cat.id] = cat; } // end for that.fetching = false; that.initialized = true; if (onDone) onDone(); }); }, filter: function(onDone) { var that = this; // const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter(); const center = this.win.mapboxMap.getCenter(); let url = `/pois/?cats=${this.parseCategories().join(',')}&ll=${center.lng},${center.lat}`; this.fetching = true; axios.get(url).then(function(res) { res.data = that.sort(res.data); that.pois = res.data; that.fetching = false; if (onDone) onDone(); }); }, parseCategories: function() { let res = []; for (let [key, cat] of Object.entries(this.categories)) { if (cat.groupId == 'pois') { res.push(cat.id); } // end if } // end for return res; }, open: function(poi, isClose) { var that = this; poi.active = true; for (let i = 0; i < this.pois.length; i++) { if (this.pois[i].properties.id == poi.properties.id) { this.pois[i].active = (isClose ? undefined : true); } else { this.pois[i].active = undefined; } // end if-else } // end for if (isClose) { return; } // end if let url = `${parameters.api.poi.replace('{id}', poi.properties.id)}`; axios.get(url).then(function(res) { that.detail = res.data; that.detailPicked = false; that.$forceUpdate(); }); }, pick: function(poi) { dataStorage.data.journeyTypePois.pois.push({ lat: poi.geoJSONFeature.geometry.coordinates[1], lon: poi.geoJSONFeature.geometry.coordinates[0], name: poi.name, }); dataStorage.data.journeyTypePois.uniquePois(); dataStorage.data.journeyTypePois.refreshMarkers(); this.detailPicked = true; }, prettyDistance: function(poi) { const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter(); let distance = center.distanceTo(new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0])) / 1000; distance = distance.toFixed(distance < 1 ? 2 : 0); return distance; }, sort: function(pois) { // const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter(); const center = this.win.mapboxMap.getCenter(); pois.sort((a,b) => { let distanceToA = center.distanceTo(new L.latLng(a.geometry.coordinates[1], a.geometry.coordinates[0])); let distanceToB = center.distanceTo(new L.latLng(b.geometry.coordinates[1], b.geometry.coordinates[0])); if (distanceToA < distanceToB) return -1; if (distanceToA > distanceToB) return 1; return 0; }); return pois; }, buildPoiDetailPopup(poi, callObjectWithName, label) { const that = this; var center = null; if ('Point' == poi.geometry.type) { center = new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0]); } else { center = new L.latLng(poi.geometry.coordinates[0][1], poi.geometry.coordinates[0][0]); } // end if-else const popup = L.popup() .setLatLng(center) .setContent('

'+that.language['planner.just_a_sec']+'...

'); const detailUrl = `${parameters.api.poi.replace('{id}', poi.properties.id)}`; axios.get(detailUrl).then(res => { let randId = get_random_string(); that.hashMap[randId] = res.data; let o = ''; o += `

`; o += `

${res.data.name}

`; if (res.data.photoUrl) { o += ` ${res.data.name}

`; } // end if o += `

`; if (res.data.description) { o += res.data.description; } if (res.data.phone) { o += `
${res.data.phone}`; } // end if if (res.data.webUrl) { o += `
${res.data.webUrl}`; } // end if o += `

`; o += `

`; o += ` ${res.data.upvotes.length} ${language['planner.mapobject.likes']}`; o += ` ${res.data.downvotes.length} ${language['planner.mapobject.dislikes']}`; o += ` ${res.data.comments.length} ${language['planner.mapobject.comments']}`; o += `

`; if (res.data.comments.length > 0) { o += ``; } o += `

`; o += ` `; o += `

`; o += `

`; // Fetch html (detail) content // Add button which will add poi to pois list popup.setContent(o); }); return popup; } } });; /* File: poi-modal.vue*/ Vue.component('poi-modal', { template: ` `, mounted: function(){ dataStorage.data.poiModal = this; this.fetchCategories(); }, watch: { display: function(newVal) { if (newVal) { setTimeout(this.filter, 200); } // end if }, }, data: function () { return { language: language, display: false, groups: {}, categories: {}, pois: [], detail: null, win: window, fetching: false, detailPicked: false, } }, methods: { fetchCategories: function() { var that = this; this.fetching = true; axios.get('/poi-categories/').then(function (res) { for (let i = 0; i < res.data.length; i++) { const cat = res.data[i]; that.categories[cat.id] = cat; } // end for that.fetching = false; }); }, filter: function() { var that = this; const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter(); let url = `/pois/?q=${this.$refs.q.value}&cats=${this.parseCategories().join(',')}&ll=${center.lng},${center.lat}`; this.fetching = true; axios.get(url).then(function(res) { res.data = that.sort(res.data); that.pois = res.data; that.fetching = false; // if (undefined !== that.pois[0]) { // that.open(that.pois[0]); // } // end if }); }, toggleCategory: function(category) { for (let [key, cat] of Object.entries(this.categories)) { if (cat.id == category.id) { this.categories[key].active = (this.categories[key].active ? false : true); } // end if } // end for this.filter(); }, parseCategories: function() { let res = []; for (let [key, cat] of Object.entries(this.categories)) { if (cat.groupId == 'pois') { res.push(cat.id); } // end if } // end for return res; }, open: function(poi, isClose) { var that = this; poi.active = true; for (let i = 0; i < this.pois.length; i++) { if (this.pois[i].properties.id == poi.properties.id) { this.pois[i].active = (isClose ? undefined : true); } else { this.pois[i].active = undefined; } // end if-else } // end for if (isClose) { return; } // end if let url = `${parameters.api.poi.replace('{id}', poi.properties.id)}`; axios.get(url).then(function(res) { that.detail = res.data; that.detailPicked = false; that.$forceUpdate(); }); }, pick: function(poi) { dataStorage.data.journeyTypePois.pois.push({ lat: poi.geoJSONFeature.geometry.coordinates[1], lon: poi.geoJSONFeature.geometry.coordinates[0], name: poi.name, }); dataStorage.data.journeyTypePois.uniquePois(); dataStorage.data.journeyTypePois.refreshMarkers(); this.detailPicked = true; }, prettyDistance: function(poi) { const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter(); let distance = center.distanceTo(new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0])) / 1000; distance = distance.toFixed(distance < 1 ? 2 : 0); return distance; }, sort: function(pois) { const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter(); pois.sort((a,b) => { let distanceToA = center.distanceTo(new L.latLng(a.geometry.coordinates[1], a.geometry.coordinates[0])); let distanceToB = center.distanceTo(new L.latLng(b.geometry.coordinates[1], b.geometry.coordinates[0])); if (distanceToA < distanceToB) return -1; if (distanceToA > distanceToB) return 1; return 0; }); return pois; } } });; /* File: planner-ui.vue*/ Vue.component('planner-ui', { template: `

`, mounted: function(){ dataStorage.data.plannerUi = this; }, data: function () { return { language: language, compact: false, win: window, root: document.documentElement, } }, methods: { recalculateOffset: function() { let resultsPosX; if (dataStorage.data.panel.compact) { this.root.style.setProperty('--results-pos-x', '50px'); resultsPosX = 50; } else { this.root.style.setProperty('--results-pos-x', '360px'); resultsPosX = 360; } // end if this.root.style.setProperty('--trip-pos-x', (resultsPosX + 370).toFixed(0) + 'px'); // var(--results-pos-x) // root.style.setProperty('--mouse-x', e.clientX + "px"); // root.style.setProperty('--mouse-y', e.clientY + "px"); }, hideSearchPanelForSmallScreens: function() { if (this.win.innerWidth <= 1280) { dataStorage.data.panel.compact = true; dataStorage.data.results.compact = false; this.recalculateOffset(); } // end if }, } });; /* File: persona.vue*/ Vue.component('persona', { template: `

`, mounted: function(){ dataStorage.data.persona = this; }, data: function(){ let data = { mobileVisible: false, language: language, defaultPersona: 'first', personaConfig: { first: { img: '/img/intermodal/persona/studentka.png', title: 'Student', desc: 'Morbi iaculis magna nunc', config: [ 'train', 'metro', 'tram', 'bus', 'bike', 'shared_bike', 'lots_of_walk', 'cheap_price' ] }, second: { img: '/img/intermodal/persona/senior.png', title: 'Senior', desc: 'Aenean elementum enim', config: [ 'train', 'metro', 'tram', 'bus', 'taxi', 'less_walk', 'average_price' ] }, third: { img: '/img/intermodal/persona/pracujici.png', title: 'Office worker', desc: 'Nunc a est non turpis', config: [ 'train', 'metro', 'tram', 'bus', 'bike', 'shared_bike', 'car', 'average_walk', 'average_price' ] }, fourth: { img: '/img/intermodal/persona/businessman.png', title: 'Businessman', desc: 'Integer gravida scelerisque', config: [ 'train', 'metro', 'tram', 'bus', 'taxi', 'car', 'average_walk', 'max_price' ] }, }, models: [ 'train', 'metro', 'tram', 'bus', 'taxi', 'bike', 'shared_bike', 'car', 'less_walk', 'average_walk', 'lots_of_walk', 'cheap_price', 'average_price', 'max_price' ] }; data.activePersona = data.defaultPersona; return data; }, watch: { activePersona: function(alias) { let config = this.personaConfig[alias].config; this.models.forEach(function(model){ dataStorage.data.panel[model] = false; }); config.forEach(function(item){ dataStorage.data.panel[item] = true; }); } }, methods: { openModal: function(){ dataStorage.data.modals.showPersonaModal = true; } } });; /* File: panel.vue*/ Vue.component('panel', { template: `

`, mounted: function(){ dataStorage.data.panel = this; }, data: function () { return { language: language, minimized: false, compact: false, win: window, parameters: window.parameters, } }, methods: { toggleCompact: function() { this.compact = ! this.compact; dataStorage.data.plannerUi.recalculateOffset(); }, } });; /* File: pallete.vue*/ Vue.component('pallete', { template: `

`, mounted: function () { dataStorage.data.pallete = this; }, data: function () { return { pluginInstalled: false, doc: document, win: window, active: false, selected: null, tools: { point: { image: window.parameters.wwwroot + "/v2.5/img/point.svg", description: "Point" }, line: { image: window.parameters.wwwroot + "/v2.5/img/heart.svg?v=32", description: "Line" }, nogo: { image: window.parameters.wwwroot + "/v2.5/img/nogo.svg", description: "No-go" }, }, displayedLayer: null, displayedData: null, position: null, // Plugin instance } }, watch: { selected(picked) { if ("line" === picked || "nogo" === picked) { this.win.mapboxMap.dragging.disable(); } else { this.win.mapboxMap.dragging.enable(); } // end if-else this.doc.body.dataset.brush = picked; } }, methods: { isActive() { return this.active; }, toggle() { if (this.active) { this.close(); } else { this.open(); } // end if-else }, open() { if (!this.pluginInstalled) { this.installPlugin(); } // end if this.active = true; }, close() { this.active = false; this.selected = null; this.doc.body.dataset.painting = "no"; this.clear(); }, clear() { if (null !== this.displayedLayer) { this.displayedLayer.remove(); } // end if }, paint(using) { if (this.selected === using) { this.selected = null; } else { this.selected = using; this.doc.body.dataset.painting = "yes"; this.doc.body.dataset.brush = this.selected; this.clear(); if ("line" == using || "nogo" == using) { this.paintLine(using); } else { this.paintPoint(using); } // end if-else } // end if-else }, paintPoint(icon) { const self = this; this.win.mapboxMap.once("click", (ev) => { const marker = L.marker(ev.latlng, { icon: L.icon({ iconUrl: self.win.parameters.wwwroot + `/v2.5/img/${icon}.svg`, iconSize: [32, 32], iconAnchor: [16, 16] }) }); marker.addTo(self.win.mapboxMap); this.displayedLayer = marker; this.displayedData = ev.latlng; self.selected = null; }); }, paintLine(icon) { const self = this; const coords = []; const paint = function() { self.clear(); const line = L.polyline(coords, { color: ("line" == icon ? "#00F" : "#F00" ), weight: ("line" == icon ? 8 : 10 ), className: "painted-line" }).addTo(self.win.mapboxMap); self.displayedLayer = line; this.displayedData = coords; }; // end function const recorder = function(ev) { let lat = Math.round(ev.latlng.lat * 100000) / 100000; let lng = Math.round(ev.latlng.lng * 100000) / 100000; coords.push(L.latLng(lat, lng)); paint(); }; // end function this.win.mapboxMap.once("mousedown", e => { self.win.mapboxMap.on('mousemove', recorder); }); this.win.mapboxMap.once("mouseup", e => { self.win.mapboxMap.off("mousemove", recorder); self.selected = null; }); }, installPlugin() { let Position = L.Control.extend({ _container: null, options: { position: 'bottomleft' }, onAdd: function (map) { var latlng = L.DomUtil.create('div', 'mouseposition'); this._latlng = latlng; return latlng; }, updateHTML: function (lat, lng) { var latlng = lat + " " + lng; //this._latlng.innerHTML = "Latitude: " + lat + " Longitiude: " + lng; this._latlng.innerHTML = "LatLng: " + latlng; } }); this.position = new Position(); this.win.mapboxMap.addControl(this.position); } } }); ; /* File: modals.vue*/ Vue.component('modals', { template: `

{{ language['transport.feedback_header'] }}

{{ language['transport.share_header'] }}

{{ language['persona.modal.title'] }}

`, mounted: function(){ dataStorage.data.modals = this; }, data: function(){ return { language: language, parameters: parameters, showFeedbackModal: false, sent: false, showShareModal: false, shareUrl: '', copySuccess: false, copyFailure: false, showPersonaModal: false, personas: [], dataStorage: dataStorage }; }, methods: { showFeedback: function(){ this.showFeedbackModal = true; if ( this.sent ) { this.sent = false; // this.$refs.msg.value = ''; } // end if }, submit: function(){ if ( this.$refs.msg.value.length > 0 ) { this.sent = true; $.ajax({ url: '/feedback/', method: 'POST', data: { who: this.$refs.who.value, email: this.$refs.email.value, msg: this.$refs.msg.value, } }); // end ajax } // end if }, fillShareModal: function(){ var that = this; this.shareUrl = window.location.toString(); setTimeout(function(){ that.$refs.shareUrl.select(); }, 250); }, copyToClipboard: function(){ var isIos = navigator.userAgent.match(/ipad|ipod|iphone/i); if ( isIos ) { this.$refs.shareUrl.readOnly = false; this.$refs.shareUrl.contentEditable = true; var range = document.createRange(); range.selectNodeContents(this.$refs.shareUrl); var s = window.getSelection(); s.removeAllRanges(); s.addRange(range); this.$refs.shareUrl.setSelectionRange(0, 9999); } else { this.$refs.shareUrl.select(); } // end if-else try { document.execCommand('copy'); this.copySuccess = true; } catch (e) { this.copyFailure = true; } // end try-catch if ( isIos ) { this.$refs.shareUrl.readOnly = true; this.$refs.shareUrl.contentEditable = false; } // end if }, pickPersona: function(alias){ dataStorage.data.persona.activePersona = alias; this.showPersonaModal = false; } } }); ; /* File: modal.vue*/ Vue.component('modal', { template: ` ` });; /* File: modal-ttfdetail.vue*/ Vue.component('modal-ttfdetail', { template: ` `, data: function () { return { language: language, userLevel: parameters.userLevel, parameters: parameters, lang: parameters.lang } }, });; /* File: modal-track-download.vue*/ Vue.component('modal-track-download', { template: ` `, mounted: function(){ dataStorage.data.downloadModal = this; }, data: function () { return { display: false, language: language, parameters: parameters, playstoreLink: unescape_lang(language['planner.download.playstore'].replace('{{ appName }}', language['app_name']).replace('{{ googlePlayId }}', parameters.identifiers.googleplay).replace('{{ appStoreId }}', parameters.identifiers.appstore)), qrcode: null, gpxDownloadLink: null, win: window, } }, methods: { show: function(planId){ let wwwroot = parameters.qr_base ? parameters.qr_base : `${parameters.wwwroot}/plan`; // HACK: Issue CC-3011 // wwwroot = wwwroot.replace('cyclers.app/plan', 'urbancyclers.com'); this.qrcode = `https://api.qrserver.com/v1/create-qr-code/?data=` + encodeURIComponent(`${wwwroot}/#responseId=${this.win.router.getLastResponseHash()}`); this.gpxDownloadLink = this.win.router.backendUrl + '/gpx/' + this.win.router.getLastResponseHash() + '/' + planId; this.localGpxDownloadLink = `/download/gpx/?src=${this.gpxDownloadLink}`; this.display = true; } } });; /* File: modal-proposed-changes.vue*/ Vue.component('modal-proposed-changes', { template: `

Map edits

	Current state (before)	Proposed change (after)
Surface	{{ feature.properties.surface }}
Slope	{{ feature.properties.slope }}
Traffic	{{ feature.properties.stress }}
Is Blocked	{{ feature.properties.blocker }}
Length	{{ feature.properties.length }}	{{ feature.properties.length }}

Submit proposed changes

`, mounted: function () { dataStorage.data.proposedChangesModal = this; }, data: function () { return { display: false, language: language, userLevel: parameters.userLevel, parameters: parameters, lang: parameters.lang, feature: null, win: window } }, methods: { show: function () { this.display = true; }, hide: function () { this.display = false; }, cancel() { this.hide(); }, submit() { let blocker = undefined; if ("true" === this.$refs.blocker.value) { blocker = true; } else if ("false" === this.$refs.blocker.value) { blocker = false; } else if ("wut" === this.$refs.blocker.value) { blocker = -1; } // end if-elseif-else const payload = { proposal: { feature: { properties: { from: this.feature.properties.from, to: this.feature.properties.to, surface: this.feature.properties.surface, stress: this.feature.properties.stress, slope: this.feature.properties.slope, blocker: this.feature.properties.blocker, }, }, proposedChanges: { properties: { surface: this.$refs.surface.value, stress: parseInt(this.$refs.stress.value), slope: parseFloat(this.$refs.slope.value), blocker: blocker, } }, proposedBy: dataStorage.data.userProfile.getUser().uid } }; console.log(payload); axios.post("/", payload).then(res => {}); alert("Successfully did nothing. Thanks bro!"); }, isAdmin() { return dataStorage.data.userProfile.isAdmin(); }, } });; /* File: modal-plan-feedback.vue*/ Vue.component('modal-plan-feedback', { template: ` `, mounted: function () { dataStorage.data.planFeedbackModal = this; }, data: function () { return { language: language, display: false, key: 'modal-plan-feedback', endpoint: 'http://uc1.umotional.net/cycle-now/v3/feedback', } }, methods: { submit: function () { let data = {}; let ratingId = document.querySelector('input[type=radio][name=rating]:checked').getAttribute('id'); data.rating = ratingId.substr(ratingId.length - 1); data.responseId = router.getLastResponseHash(); data.planId = painter.lastClickedPlan.order; data.textualFeedback = document.getElementById('textualFeedback').value; Array.from(document.querySelectorAll('form#planFeedback input[type="checkbox"]'), function (el) { data[el.getAttribute('name')] = el.checked; }); axios.post(this.endpoint, data, { headers: { 'Content-Type': 'application/json; charset=utf-8' }, }).then(res => { this.display = false; dataStorage.data.planFeedbackThanksModal.display = true; }).catch(res => { alert('Unexpected error while saving your response.'); }); }, } }); ; /* File: modal-plan-feedback-thx.vue*/ Vue.component('modal-plan-feedback-thx', { template: ` `, mounted: function () { dataStorage.data.planFeedbackThanksModal = this; }, data: function () { return { language: language, display: false, key: 'modal-plan-feedback-thx', } }, methods: { } }); ; /* File: modal-mode-selector.vue*/ Vue.component('modal-mode-selector', { template: ` `, mounted: function () { dataStorage.data.modeSelectorModal = this; }, data: function () { return { display: false, altHeading: false, language: language, parameters: parameters, win: window, vehicleType: 'bicycle', // bicycle | scooter | walk electric: false, walker: (parameters.components.walker !== undefined && true === parameters.components.walker), vehicle: 'CITY_BIKE', vehicles: [ { id: 'ELECTRIC_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_CITY_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_ROAD_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_HYBRID_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_FOLDING_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_GRAVEL_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_CARGO_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_FIXIE_BIKE', isElectric: true, type: 'bicycle' }, { id: 'ELECTRIC_RECUMBENT_BIKE', isElectric: true, type: 'bicycle' }, { id: 'CITY_BIKE', isElectric: false, type: 'bicycle' }, { id: 'ROAD_BIKE', isElectric: false, type: 'bicycle' }, { id: 'MOUNTAIN_BIKE', isElectric: false, type: 'bicycle' }, { id: 'HYBRID_BIKE', isElectric: false, type: 'bicycle' }, { id: 'FOLDING_BIKE', isElectric: false, type: 'bicycle' }, { id: 'GRAVEL_BIKE', isElectric: false, type: 'bicycle' }, { id: 'CARGO_BIKE', isElectric: false, type: 'bicycle' }, { id: 'FIXIE_BIKE', isElectric: false, type: 'bicycle' }, { id: 'RECUMBENT_BIKE', isElectric: false, type: 'bicycle' }, { id: 'BIG_SCOOTER', isElectric: false, type: 'scooter' }, { id: 'SCOOTER', isElectric: false, type: 'scooter' }, { id: 'RUN', isElectric: false, type: 'walk' }, { id: 'WALK', isElectric: false, type: 'walk' }, { id: 'ELECTRIC_SCOOTER', isElectric: true, type: 'scooter' }, ], } }, methods: { show: function (altHeading = false) { this.altHeading = altHeading; this.display = true; }, pick() { this.win.router.setBikeType(this.vehicle); dataStorage.data.publicSettingsBikeType.pickedVehicleTxt = this.language[`planner.bikes.${this.vehicle}`]; this.pickSurface(); this.pickClimbs(); if (this.parameters.components.isochrones) { dataStorage.data.isochrones.getIsochrones(); } }, setVehicle(vehicleId) { const that = this; that.vehicle = vehicleId; this.vehicles.forEach(item => { if (vehicleId == item.id) { that.electric = item.isElectric; that.vehicleType = item.type; } // end if }); this.pick(); }, pickSurface() { let lvl = 3; // prefer paved if (['ELECTRIC_BIKE', 'MOUNTAIN_BIKE'].indexOf(this.vehicle) >= 0) { lvl = 2; // prefer unpaved } else if ([ 'ROAD_BIKE', 'ELECTRIC_ROAD_BIKE', 'CARGO_BIKE', 'ELECTRIC_CARGO_BIKE', 'SCOOTER', 'ELECTRIC_SCOOTER', 'RECUMBENT_BIKE', 'ELECTRIC_RECUMBENT_BIKE', 'FIXIE_BIKE', 'ELECTRIC_FIXIE_BIKE' ].indexOf(this.vehicle) >= 0) { lvl = 4; // require paved } // end if-elseif-else dataStorage.data.publicSettingsSmooth.pick(lvl); }, pickClimbs() { let lvl = 2; // avoid if reasonable if (this.vehicle.toLowerCase().indexOf('electric') >= 0) { lvl = 1; // ignore } else if (['CARGO_BIKE'].indexOf(this.vehicle) >= 0) { lvl = 3; // avoid if possible } // end if-elseif-else dataStorage.data.publicSettingsFlat.pick(lvl); } } });; /* File: modal-login.vue*/ Vue.component('modal-login', { template: ` `, data: function () { return { language: language, userLevel: parameters.userLevel, parameters: parameters, lang: parameters.lang } }, });; /* File: modal-feedback.vue*/ Vue.component('modal-feedback', { template: ` `, data: function () { return { language: language, userLevel: parameters.userLevel, parameters: parameters, lang: parameters.lang } }, });; /* File: modal-cities.vue*/ Vue.component('modal-cities', { template: ` `, data: function () { return { painter: painter, cities: dataStorage.data.cities, language: language, userLevel: parameters.userLevel, parameters: parameters, lang: parameters.lang } }, methods: { switchCity: function(citySlug){ window.painter.selectCity(citySlug); } } });; /* File: modal-app.vue*/ Vue.component('modal-app', { template: ` `, data: function () { return { language: language, userLevel: parameters.userLevel, parameters: parameters, lang: parameters.lang } }, });; /* File: middle-panel.vue*/ Vue.component('middle-panel', { template: `

{{ startTime }} - {{ endTime }}

{{ stats ? stats.discomfort : '-' }} discomfort, {{ stats ? stats.physicalEffortKj : '-' }} cal, {{ stats ? stats.activeDistance : '-' }}m active Discount

{{ endTime }} {{ destination }}

`, mounted: function(){ dataStorage.data.middlePanel = this; }, data: function(){ return { language: language, unitPrinter: new UnitPrinter(), time_diff: window.time_diff, formatTime: window.formatTime, date_obj: window.date_obj, visible: false, startTime: '--:--', endTime: '--:--', duration: '---', transfers: '---', journeyPreview: '', journey: null, journeyData: null, origin: '', destination: '', legs: [], stats: null, }; }, methods: { setVisible: function(visible){ this.visible = visible; if ( visible ) { dataStorage.data.map.$refs.map.classList.add('shrinked'); } else { dataStorage.data.map.$refs.map.classList.remove('shrinked'); } // end if-else window.mapboxMap.invalidateSize(); // dataStorage.data.map.shrinked = visible; }, update: function(){ this.startTime = this.journeyData.departure; this.endTime = formatTime(date_obj(this.journeyData.end.dateTime)); this.duration = unitPrinter.toReadableTime(this.journeyData.duration); this.transfers = getNumOfTransfers(this.journeyData); this.journeyPreview = generateJourneyPreview(this.journeyData, true); this.origin = markers[0].htmlInputBox.querySelector('input').value; this.destination = markers[markers.length-1].htmlInputBox.querySelector('input').value; this.legs = this.journeyData.legs; this.stats = this.journeyData.stats; // dataStorage.data.mapSwitch.show(); // console.log(this.legs); }, redraw: function(){ var that = this; if ( markers[0].getLatLng() && markers[markers.length-1].getLatLng() ) { var n = 0; var interval = setInterval(function(){ var activePlanIndex = get_active_plan_index(); if ( activePlanIndex !== undefined || n > 10 ) { clearInterval(interval); var activePlan = window.plansStorage[activePlanIndex]; that.journey = activePlan; that.journeyData = activePlan._data; that.update(); that.setVisible(true); recalculate(); } // end if }, 333); } else { that.setVisible(false); } // end if }, toggleExpanded: function(i, j){ this.legs[i].steps[j].expanded = this.legs[i].steps[j].expanded ? false : true; }, modeClass: function(leg){ return 'mode-' + leg.mode.toLowerCase(); }, closeMe: function(){ this.setVisible(false); // dataStorage.data.mapSwitch.hide(); }, showShareModal: function(){ dataStorage.data.modals.showShareModal = true; dataStorage.data.modals.fillShareModal(); } } });; /* File: markers-modal.vue*/ Vue.component('markers-modal', { template: ` `, mounted: function(){ var that = this; dataStorage.data.markersModal = this; this.fetchCategories(); }, watch: { display: function(newVal) { }, }, data: function () { return { language: language, display: false, showWarnings: true, // groups: {}, categories: {}, fetching: false, componentVersion: 0, win: window, doc: document, markers: [], } }, methods: { fetchCategories: function() { var that = this; this.fetching = true; axios.get('/poi-categories/').then(function (res) { const cats = {}; const list = []; Array.from(res.data).forEach(item => { if (!cats[item.groupId]) cats[item.groupId] = []; cats[item.groupId].push(item); }); for (let [key, categories] of Object.entries(cats)) { Array.from(categories).forEach(oneCategory => { if (oneCategory.name !== null) { list.push(oneCategory); } // end if }); } // end for for (let i = 0; i < list.length; i++) { const cat = list[i]; // that.categories[cat.id] = cat; that.categories[i] = cat; } // end for that.fetching = false; }); }, toggleCategory: function(category) { for (let [key, cat] of Object.entries(this.categories)) { // for (let [key, cat] of this.categories) { if (cat.id == category.id) { this.categories[key].active = (this.categories[key].active ? false : true); } // end if } // end for this.componentVersion = ++this.componentVersion; this.updateMarkers(); }, toggleWarnings: function() { if ( this.showWarnings ) { this.doc.body.classList.add('hide-warnings'); } else { this.doc.body.classList.remove('hide-warnings'); } // end if-else this.showWarnings = ! this.showWarnings; }, updateMarkers: function() { var that = this; const center = this.win.mapboxMap.getCenter(); let cats = []; for (let key in this.categories) { if (this.categories[key].active) { cats.push(this.categories[key].id); } // end if } // end for if (0 == cats.length) { // dataStorage.data.pois.clearMarkers(); // dataStorage.data.pois.clearPolylines(); dataStorage.data.pois.pois = []; return; } // end if let url = `/pois/?cats=${cats.join(',')}&ll=${center.lng},${center.lat}`; this.fetching = true; axios.get(url).then(function(res) { dataStorage.data.pois.clearMarkers(); dataStorage.data.pois.clearPolylines(); dataStorage.data.pois.pois = res.data; dataStorage.data.pois.showAll('markersModal', 'planner.pois.destination'); }); }, pick: function(poi) { let coords = poi.geoJSONFeature.geometry.coordinates; dataStorage.data.journeyTypeSwitch.$refs.select.value = 'direct'; dataStorage.data.journeyTypeSwitch.changeType(); this.win.markers[this.win.markers.length - 1].setLatLng([coords[1], coords[0]]); } } }); ; /* File: map-switch.vue*/ Vue.component('map-switch', { template: `

`, mounted: function(){ dataStorage.data.mapSwitch = this; }, data: function(){ return { isMap: false, hidden: false, language: language, }; }, methods: { show: function(){ this.hidden = false; }, hide: function(){ this.hidden = true; }, toggle: function(){ this.isMap = ! this.isMap; dataStorage.data.map.mobileVisible = ! dataStorage.data.map.mobileVisible; dataStorage.data.mapSwitch.mobileVisible = dataStorage.data.map.mobileVisible; dataStorage.data.persona.mobileVisible = dataStorage.data.map.mobileVisible; } } });; /* File: map-spinner.vue*/ Vue.component('map-spinner', { template: `

`, mounted: function(){ dataStorage.data.mapSpinner = this; }, data: function(){ return { hidden: true }; }, methods: { show: function(){ this.hidden = false; }, hide: function(){ this.hidden = true; } } });; /* File: map-layers.vue*/ Vue.component('map-layers', { template: `

`, mounted: function(){ dataStorage.data.mapSwitch = this; }, data: function(){ return { language: language, bikesKey: 'bikeMarkers', parkingKey: 'parkingMarkers', parkingInterval: null, bikesInterval: null, mobileVisible: false, }; }, methods: { toggleBikes: function(){ if ( window[this.bikesKey].length ) { clearInterval(this.bikesInterval); hide_generic_marker_layer(this.bikesKey); } else { this.bikesInterval = setInterval(this.refreshBikes, 30000); this.refreshBikes(); } }, refreshBikes: function(){ var that = this; show_generic_marker_layer('https://jupiter.umotional.net:9003/intermodaljp/v1/layers/bikes', 'rekola.png', this.bikesKey, () => { hide_generic_marker_layer(that.bikesKey); }, (current) => { return ''+current.providerId+' ('+current.bikeName+')'; }); }, toggleVehicles: function(){ if ( window[this.parkingKey].length ) { clearInterval(this.parkingInterval); hide_generic_marker_layer(this.parkingKey); } else { this.bikesInterval = setInterval(this.refreshParkings, 30000); this.refreshParkings(); } }, refreshParkings: function(){ var that = this; show_generic_marker_layer('https://jupiter.umotional.net:9003/intermodaljp/v1/layers/parkings', 'p_plus_r.png', this.parkingKey, () => { hide_generic_marker_layer(that.parkingKey); }, (current) => { return ''+current.name+' ('+current.freeSlots+'/'+current.capacity+')'; }); } } });; /* File: main-menu.vue*/ Vue.component('main-menu', { template: ` ` });; /* File: main-menu-right.vue*/ Vue.component('main-menu-right', { template: ` `, data: function () { return { language: language, userLevel: parameters.userLevel, parameters: parameters, lang: parameters.lang } }, });; /* File: main-menu-left.vue*/ Vue.component('main-menu-left', { template: `

`, data: function(){ return { cityPicker: false, cities: dataStorage.data.cities, currentCity: dataStorage.data.defaultCity.name, language: language, parameters: parameters, userLevel: parameters.userLevel, win: window }; }, methods: { setCurrentCity: function(city){ this.currentCity = city; } }, mounted: function(){ dataStorage.data.menuLeft = this; } });; /* File: last-stops.vue*/ Vue.component('last-stops', { template: `

`, mounted: function(){ dataStorage.data.lastStops = this; }, data: function(){ return { language: language, stops: this.loadStops(), parameters: parameters, lang: parameters.lang, hidden: true, }; }, methods: { loadStops: function(){ var recents = this.fetch(); return Array.isArray(recents) ? recents.reverse() : []; }, init: function(stop){ dataStorage.data.panel.switchTab('stops'); dataStorage.data.panel.drawStopDetail(stop.key, stop.ll, stop.data); dataStorage.data.panel.scrollTop(); }, add: function(name, ll, key, data){ var recents = this.fetch(); if ( ! Array.isArray(recents) ) { recents = []; } // end if for (var i = 0; i < recents.length; i++) { if ( recents[i].name == name ) { recents.splice(i, 1); break; } // end if } // end for recents.push({ name: name, ll: ll, key: key, data: data, }); localStorage.setItem('last-stops', JSON.stringify(recents)); this.stops = this.loadStops(); }, fetch: function(){ try { var recents = JSON.parse(localStorage.getItem('last-stops')); } catch (ex) { var recents = null; } // end try-catch return recents; }, beautifyName: function(name){ return name; // return name.replace('→', '
→ '); } } });; /* File: last-searches.vue*/ Vue.component('last-searches', { template: `

`, mounted: function(){ dataStorage.data.lastSearches = this; }, data: function(){ return { language: language, // key: 'last-searches', searches: this.loadSearches(), parameters: parameters, lang: parameters.lang, hidden: false, }; }, methods: { loadSearches: function(){ var recents = this.fetch(); return Array.isArray(recents) ? recents.reverse() : []; }, init: function(search){ // dataStorage.data.spinner.spin(1000); markers[0].setLatLng([search.origin.lat, search.origin.lng], true); markers[markers.length-1].setLatLng([search.destination.lat, search.destination.lng], true); }, add: function(name, origin, destination){ var recents = this.fetch(); if ( ! Array.isArray(recents) ) { recents = []; } // end if for (var i = 0; i < recents.length; i++) { if ( recents[i].name == name ) { recents.splice(i, 1); break; } // end if } // end for recents.push({ name: name, origin: origin, destination: destination, }); localStorage.setItem('last-searches', JSON.stringify(recents)); this.searches = this.loadSearches(); }, fetch: function(){ try { var recents = JSON.parse(localStorage.getItem('last-searches')); } catch (ex) { var recents = null; } // end try-catch return recents; }, beautifyName: function(name){ return name; // return name.replace('→', '
→ '); } } });; /* File: lang-feedback.vue*/ Vue.component('lang-feedback', { template: `

`, mounted: function(){ dataStorage.data.langFeedback = this; }, data: function(){ return { language: language, parameters: parameters, lang: parameters.lang, }; }, methods: { showModal: function(){ dataStorage.data.modals.showFeedback(); }, switchLang: function(current){ var to = 'en' == current ? 'cs' : 'en'; var url = parameters.wwwroot + '/' + to + '/' + window.location.hash; window.location = url; } } });; /* File: journey-type-switch.vue*/ Vue.component('journey-type-switch', { template: `

`, mounted: function () { dataStorage.data.journeyTypeSwitch = this; }, data: function () { return { language: language, hidden: ! window.parameters.components.routeType, getPlans: window.getPlans, dataStorage: window.dataStorage, mode: 'direct', win: window, pois: [ ], markers: [], } }, methods: { uniquePois: function() { const used = []; const filtered = []; for (let i = 0; i < this.pois.length; i++) { let poi = this.pois[i]; if (!used.includes(poi.name)) { used.push(poi.name); filtered.push(poi); } // end if } // end for this.pois = filtered; }, changeType: function () { this.mode = this.$refs.select.value; if ('direct' == this.mode) { document.body.classList.remove('only-origin'); dataStorage.data.journeyTypeCircuit.length = 0; } else { dataStorage.data.journeyTypeCircuit.length = 20; document.body.classList.add('only-origin'); // if (!dataStorage.data.publicSettingsBikeType.ownBike) { // dataStorage.data.publicSettingsBikeType.toggle(); // } // end if // this.poiModal(); } // end if this.refreshMarkers(); if (window.parameters.components.trips) { dataStorage.data.tripBtn.hidden = 'direct' == this.mode; } // end if }, refreshMarkers: function () { var that = this; this.markers.forEach(marker => { that.win.mapboxMap.removeLayer(marker); }); if ('poi' == this.mode) { this.selectedPois().forEach(poi => { let marker = L.marker(poi, { icon: L.icon({ iconUrl: window.parameters.branding.images.markers.poi, iconSize: [25, 32], iconAnchor: [13, 32] }), draggable: false }); // marker.setLatLng(poi); marker.addTo(that.win.mapboxMap); that.markers.push(marker); }); } // end if }, selectedPois: function () { var pois = []; Array.from(document.querySelectorAll('[name^=pois\\[]')).forEach(el => { if (el.checked) { let loc = el.value.split(','); pois.push({ lat: loc[0], lon: loc[1] }); } // end if }); return pois; }, poiModal: function() { dataStorage.data.poiModal.display = true; } } }); ; /* File: journey-type-pois.vue*/ Vue.component('journey-type-pois', { template: `

`, mounted: function () { dataStorage.data.journeyTypePois = this; }, data: function () { return { language: language, hidden: ! window.parameters.components.pois, getPlans: window.getPlans, dataStorage: window.dataStorage, win: window, pois: [ ], markers: [], } }, methods: { uniquePois: function() { const used = []; const filtered = []; for (let i = 0; i < this.pois.length; i++) { let poi = this.pois[i]; if (!used.includes(poi.name)) { used.push(poi.name); filtered.push(poi); } // end if } // end for this.pois = filtered; }, changeType: function () { this.mode = this.$refs.select.value; if ('direct' == this.mode) { document.body.classList.remove('only-origin'); } else { document.body.classList.add('only-origin'); if (!dataStorage.data.publicSettingsBikeType.ownBike) { dataStorage.data.publicSettingsBikeType.toggle(); } // end if this.poiModal(); } // end if this.refreshMarkers(); }, refreshMarkers: function () { var that = this; this.markers.forEach(marker => { that.win.mapboxMap.removeLayer(marker); }); if ('poi' == this.mode) { this.selectedPois().forEach(poi => { let marker = L.marker(poi, { icon: L.icon({ iconUrl: '/v2.5/img/resources/marker_poi.svg', iconSize: [25, 32], iconAnchor: [13, 32] }), draggable: false }); // marker.setLatLng(poi); marker.addTo(that.win.mapboxMap); that.markers.push(marker); }); } // end if }, selectedPois: function () { var pois = []; Array.from(document.querySelectorAll('[name^=pois\\[]')).forEach(el => { if (el.checked) { let loc = el.value.split(','); pois.push({ lat: loc[0], lon: loc[1] }); } // end if }); return pois; }, poiModal: function() { dataStorage.data.poiModal.display = true; } } }); ; /* File: journey-type-circuit.vue*/ Vue.component('journey-type-circuit', { template: `

{{ language['planner.descriptors.circuit_length'] }} {{ length > 0 ? length + ' km' : language['planner.slider.zero'] }}

`, components: { 'vueSlider': window[ 'vue-slider-component' ], }, mounted: function () { dataStorage.data.journeyTypeCircuit = this; }, data: function () { return { language: language, hidden: ! window.parameters.components.desiredLength, length: 0, options: { dotSize: 14, width: 'auto', height: 4, contained: false, direction: 'ltr', data: null, min: 0, max: 100, interval: 1, disabled: false, clickable: true, duration: 0.5, adsorb: false, lazy: false, tooltip: 'active', tooltipPlacement: 'top', tooltipFormatter: void 0, useKeyboard: false, keydownHook: null, dragOnClick: false, enableCross: true, fixed: false, minRange: void 0, maxRange: void 0, order: true, marks: false, dotOptions: void 0, process: true, dotStyle: void 0, railStyle: void 0, processStyle: void 0, tooltipStyle: void 0, stepStyle: void 0, stepActiveStyle: void 0, labelStyle: void 0, labelActiveStyle: void 0, } } }, methods: { }, }); ; /* File: journey-traveler.vue*/ Vue.component('journey-traveler', { template: `

`, mounted: function () { dataStorage.data.journeyTraveler = this; }, data: function () { return { language: language, hidden: false, getPlans: window.getPlans, dataStorage: window.dataStorage, mode: 'direct', win: window, parameters: window.parameters } }, methods: { onChange: function() { if ('WITH_CHILDREN' == this.$refs.mode.value) { dataStorage.data.publicSettingsCarfree.lvl = 3; } // end if } } }); ; /* File: journey-bike-type.vue*/ Vue.component('journey-bike-type', { template: `

`, mounted: function () { dataStorage.data.journeyBikeType = this; }, data: function () { return { language: language, hidden: false, getPlans: window.getPlans, dataStorage: window.dataStorage, mode: 'direct', win: window, } }, methods: { updateSurface: function() { switch (this.$refs.type.value) { case 'MOUNTAIN_BIKE': dataStorage.data.publicSettingsSmooth.lvl = 2; break; case 'CITY_BIKE': case 'ROAD_BIKE': dataStorage.data.publicSettingsSmooth.lvl = 4; break; } // end switch }, // end func } }); ; /* File: isochrones.vue*/ Vue.component('isochrones', { template: `

`, mounted: function(){ dataStorage.data.isochrones = this; }, data: function () { return { parameters: parameters, language: language, win: window, map: null, isochrones: { url: window.parameters.api.isochrones, params: { client: 'WEB', key: window.parameters.api.key, lat: '', lon: '', rangesInMinutes: 10, climbs: '', traffic: '', contourSimplification: '', stairs: '', oneways: '', pavements: '', surface: '', }, layers: [], colors: [ // { color: '#A62CC4', fillColor: '#A62CC4', fillOpacity: .25 }, // { color: '#7934C5', fillColor: '#7934C5', fillOpacity: .25 }, // { color: '#6342D7', fillColor: '#6342D7', fillOpacity: .25 }, // { color: '#4D4BDA', fillColor: '#4D4BDA', fillOpacity: .25 }, // { color: '#2B65C2', fillColor: '#2B65C2', fillOpacity: .25 }, { color: '#3A84C3', fillColor: '#3A84C3', fillOpacity: .25 }, { color: '#4CA6B4', fillColor: '#4CA6B4', fillOpacity: .25 }, { color: '#4EAC89', fillColor: '#4EAC89', fillOpacity: .25 }, { color: '#55B96A', fillColor: '#55B96A', fillOpacity: .25 }, ] }, apiLimit: 0, // seconds lastCallTimestamp: window.localStorage.getItem('isochronesLastCallTimestamp') } }, watch: { lastCallTimestamp(newTs, oldTs) { this.win.localStorage.setItem('isochronesLastCallTimestamp', newTs); } }, methods: { setMap(map) { this.map = map; }, init() { const that = this; this.map.on('moveend', () => { if ( ! that.win.plansStorage.length) { this.getIsochrones(); } // end if }); }, buildIsochronesRequest(coordinates = null) { let url = ''; var params = {}; var center = null; if (coordinates) { center = coordinates; } else { center = this.win.mapboxMap.getCenter(); if (this.win.markers.length) { const markerA = this.win.markers[0].getLatLng(); if (null !== markerA) { center = markerA; } // end if } // end if } // end if-else params = this.isochrones.params; params.key = this.parameters.api.key; params.lat = center.lat; params.lon = center.lon ? center.lon : center.lng; if (dataStorage.data.modeSelectorModal && dataStorage.data.modeSelectorModal.vehicle) { if (['WALK', 'RUN'].indexOf(dataStorage.data.modeSelectorModal.vehicle) !== -1) { // WALK izochrona neni implementovana (18.10.2021) params.walkType = dataStorage.data.modeSelectorModal.vehicle; delete params.bikeType; } else { params.bikeType = dataStorage.data.modeSelectorModal.vehicle; } // end if-else } // end if // Auto-injected by Axios // delete params.key; let n = 0; for (key in params) { if (params[key].length !== 0) { let glue = (0 === n ? '?' : '&'); if ('object' == typeof params[key]) { params[key].forEach(val => { url += `${glue}${key}=${val}`; ++n; }); } else { url += `${glue}${key}=${params[key]}`; } // end if-else ++n; } // end if } // end for return url; }, getIsochrones(coordinates = null, onFinish = null) { const that = this; if ( ! parameters.components.isochrones || this.win._isEdit) { if (onFinish) onFinish(); return; } // end if if ( ! dataStorage.data.isochronesToggle.active) { if (onFinish) onFinish(); return; } // end if const timestamp = (new Date).getTime()/1000; console.log(`Last Isochrones API call was ${this.lastCallTimestamp ? Math.round(timestamp - this.lastCallTimestamp, 2) : '∞'}s ago`); if (this.lastCallTimestamp !== null && (timestamp - this.lastCallTimestamp) < this.apiLimit) { console.log('Skipped the Isochrones API call'); if (onFinish) onFinish(); return; } // end if this.lastCallTimestamp = timestamp; const endpoint = this.isochrones.url; const query = this.buildIsochronesRequest(coordinates); const url = endpoint + query; axios.get(url).then(res => { that.paintIsochrones(res.data, onFinish); }).catch(ex => { console.log('Could not load Isochrones'); that.paintIsochrones({}, onFinish); }); }, paintIsochrones(data = null, onFinish) { const that = this; for (key in this.isochrones.layers) { that.win.mapboxMap.removeLayer(this.isochrones.layers[key]); } // end for if (data && undefined !== data.features && data.features.length) { var i = 0; data.features.forEach(feature => { // Rotate colors if ('undefined' == typeof this.isochrones.colors[i]) { i = 0; } // end if const opts = this.isochrones.colors[i]; let coordinates = []; feature.geometry.coordinates[0].forEach(coords => { coordinates.push(L.latLng(coords[1], coords[0])); }); const polygon = L.polygon(coordinates, opts); // polygon._isochrone_id = `isochrone__${get_random_string()}`; that.isochrones.layers.push(polygon); that.win.mapboxMap.addLayer(polygon); polygon.bindTooltip(that.language['planner.isochrones.tooltip']); ++i; }); } // end if if (onFinish) onFinish(); }, } });; /* File: inspector.vue*/ Vue.component('inspector', { template: `

Plan ID

`, mounted: function () { dataStorage.data.inspector = this; }, data: function () { return { show: false, initialized: false, ids: { plan: null, ride: null, replannings: [] }, win: window, params: window.parameters, layers: { planBg: null, plan: null, planDecorator: null, rideBg: null, ride: null, rideDecorator: null, replanningBg: null, replanning: null, replanningDecorator: null, }, loading: false, selectedReplanning: 0, data: { plan: null, ride: null, replannings: [] }, transparency: { plan: true, ride: true, replanning: true }, fetchMode: "main", nextPrevTimeout: null, } }, watch: { loading(isLoading) { if (isLoading) { dataStorage.data.spinner.show(); } else { dataStorage.data.spinner.hide(); } } }, methods: { isActive() { return this.show; }, inspect(hash = null, mainBtn = false) { if (!is_logged_in()) { alert("Please log in first."); return; } // end if const params = { plan: null, ride: null, replanning: [], }; if (hash) { hash = hash.replace('#inspect=', ''); const items = hash.split(';'); items.forEach(item => { const parts = item.split(":"); if ("replanning" == parts[0]) { params.replanning = parts[1].split(','); } else { params[parts[0]] = parts[1]; } // end if-else }); mainBtn = true; } else { if (this.$refs.planId.value.length) { params.plan = this.$refs.planId.value.replace('/', '-'); } else { alert("No can do bro."); return; } // end if-else } // end if-else if (mainBtn) { this.selectedReplanning = 0; } // end if this.fetchMode = mainBtn ? 'main' : 'prevnext'; this.fetch(params); }, fetch(params) { const self = this; this.loading = true; const plan = params.plan.split('-'); firebase.auth().currentUser.getIdToken().then(token => { axios.all([ axios.get(this.params.api.inspector.history .replace('{originalResponseId}', plan[0]) .replace('{planId}', plan[1]), {timeout: 120000}), axios.get(this.params.api.inspector.trajectory .replace('{responseId}', plan[0]) .replace('{planId}', plan[1]), { headers: { "Authorization": token }, timeout: 120000 }), axios.get(this.params.api.inspector.plan .replace('{responseId}', plan[0]) .replace('{planId}', plan[1]), {timeout: 120000}) ]) .then(axios.spread((replanningData, rideData, planData) => { const onComplete = (replanningRes) => { params.replanning = replanningRes; self.ids.plan = null; self.ids.ride = null; self.ids.replannings = []; this.ids.plan = `${plan[0]}/${plan[1]}`; this.ids.ride = rideData.data.trackId; replanningData.data.replannings.forEach(replan => { self.ids.replannings.push(replan.responseId); }); self.open(); self.paint( rideData.data, planData.data, replanningRes.data, params ); }; if (replanningData.data.replannings.length) { axios.get(this.params.api.inspector.replan .replace('{replanningId}', replanningData.data.replannings[self.selectedReplanning].responseId)).then(replanningRes => { onComplete(replanningRes); }); } else { const replanningRes = { data: { plans: [{ stats: { // durationSeconds: 0, // distanceMeters: 0 }, labels: [], type: null, legs: [] }] } }; onComplete(replanningRes); } })).finally(() => { self.loading = false; }).catch(err => { if (window.parameters.debug) { throw err; } else { alert("Request failed."); } // end if-else }); }); }, paint(rideData, planData, replanningData, params) { const that = this; this.clear(); const arrowColor = "rgba(0,0,0, 0.33)"; // console.log(rideData, planData, replanningData); const plans = { // plan: new Plan((new TransportResponse(planData)).plans[params.plan.split('-')[1]]), plan: new Plan((new TransportResponse(planData)).plans[0]), trajectory: this.parseTrajectory(rideData), replanning: new Plan((new TransportResponse(replanningData)).plans[0]) }; const originalPlanStyle = Object.assign({}, BFRIENDLY_OPTIONS); this.layers.planBg = L.polyline(plans.plan.allLatLongs, HIGHLIGHT_OPTIONS); this.layers.plan = L.polyline(plans.plan.allLatLongs, originalPlanStyle); this.layers.planDecorator = L.polylineDecorator(plans.plan.allLatLongs, { patterns: [ { offset: 0, repeat: 20, symbol: L.Symbol.arrowHead({ pixelSize: 4, polygon: false, pathOptions: { stroke: true, weight: 2, color: arrowColor } }) } ] }); const rideStyle = Object.assign({}, FAST_OPTIONS); this.layers.rideBg = L.polyline(plans.trajectory.allLatLongs, HIGHLIGHT_OPTIONS); this.layers.ride = L.polyline(plans.trajectory.allLatLongs, rideStyle); this.layers.rideDecorator = L.polylineDecorator(plans.trajectory.allLatLongs, { patterns: [ { offset: 0, repeat: 20, symbol: L.Symbol.arrowHead({ pixelSize: 4, polygon: false, pathOptions: { stroke: true, weight: 2, color: arrowColor } }) } ] }); const replanningStyle = Object.assign({}, BS_BIKE_OPTIONS); replanningStyle.color = 'rgb(241,210,71)'; this.layers.replanningBg = L.polyline(plans.replanning.allLatLongs, HIGHLIGHT_OPTIONS); this.layers.replanning = L.polyline(plans.replanning.allLatLongs, replanningStyle); this.layers.replanningDecorator = L.polylineDecorator(plans.replanning.allLatLongs, { patterns: [ { offset: 0, repeat: 20, symbol: L.Symbol.arrowHead({ pixelSize: 4, polygon: false, pathOptions: { stroke: true, weight: 2, color: arrowColor } }) } ] }); for (key in this.layers) { if (null !== this.layers[key]) { that.win.mapboxMap.addLayer(this.layers[key]); } // end if } // end for if ("main" == that.fetchMode) { that.win.mapboxMap.fitBounds(this.layers.plan.getBounds(), { paddingTopLeft: [350, 0] }); } // end if this.applyOpacities(); }, parseTrajectory(trajectory) { trajectory.allLatLongs = []; trajectory.trajectory.features.forEach(feature => { feature.geometry.coordinates.forEach(coords => { coords.forEach(ll => { trajectory.allLatLongs.push(new L.latLng(ll[1], ll[0])); }); }); }); return trajectory; }, clear() { const that = this; for (key in this.layers) { if (null !== this.layers[key]) { that.win.mapboxMap.removeLayer(this.layers[key]); } // end if this.layers[key] = null; } // end for // this.transparency.plan = this.transparency.ride = this.transparency.replanning = true; }, open() { const self = this; self.show = true; router.semaphore = "RED"; while (markers.length > 2) { markers[0].remove(); } // end while // FIXME: lil hack setTimeout(() => { markers[0].remove(); markers[1].remove(); router.semaphore = "GREEN"; }, 100); if (!dataStorage.data.panel.compact) { dataStorage.data.panel.toggleCompact(); } // end if if (!dataStorage.data.results.compact) { dataStorage.data.results.toggleCompact(); } // end if if (window.plansStorage.length) { window.painter.dehighlightPlan(window.plansStorage[get_active_plan_id()]); dataStorage.data.routeOpts.routeOptsHidden = true; } // end if if (window.draggable) { window.draggable.disable(); } // end if if (dataStorage.data.isochrones) { parameters.components.isochrones = false; dataStorage.data.isochrones.paintIsochrones(null); } // end if if (dataStorage.data.pois && this.params.components.pois) { dataStorage.data.pois.clearMarkers(); dataStorage.data.pois.frozen = true; } // end if if ("object" == typeof self.win.segmentsPainter) { self.win.segmentsPainter.clean(); self.win.segmentsPainter.frozen = true; } // end if this.initialized = true; dataStorage.data.inspectorBtn.active = true; }, close() { const self = this; this.clear(); this.show = false; if (dataStorage.data.panel.compact) { dataStorage.data.panel.toggleCompact(); } // end if if (dataStorage.data.results.compact) { dataStorage.data.results.toggleCompact(); } // end if if (window.draggable) { window.draggable.enable(); } // end if if (dataStorage.data.pois && this.params.components.pois) { dataStorage.data.pois.frozen = false; } // end if if ("object" == typeof self.win.segmentsPainter) { self.win.segmentsPainter.frozen = false; } // end if this.win.painter.lastClickedPlan = null; dataStorage.data.inspectorBtn.active = false; }, toggleTransparency(what) { this.transparency[what] = !this.transparency[what]; this.applyOpacities(); }, applyOpacities() { for (key in this.transparency) { this.layers[key].setStyle({ opacity: (this.transparency[key] ? 1.00 : .1) }); this.layers[`${key}Bg`].setStyle({ opacity: (this.transparency[key] ? 1.00 : 0.00) }); this.layers[`${key}Decorator`].setStyle({ opacity: (this.transparency[key] ? 1.00 : 0.00) }); } // end for }, clearTimeout() { if (this.nextPrevTimeout) { clearTimeout(this.nextPrevTimeout); } // end if }, nextReplanning() { this.clearTimeout(); if ((this.selectedReplanning + 2) > this.ids.replannings.length) { this.selectedReplanning = 0; } else { this.selectedReplanning++; } // end if-else this.nextPrevTimeout = setTimeout(() => { this.inspect(); }, 300); }, prevReplanning() { this.clearTimeout(); if ((this.selectedReplanning - 1) < 0) { this.selectedReplanning = this.ids.replannings.length - 1; } else { this.selectedReplanning--; } // end if-else this.nextPrevTimeout = setTimeout(() => { this.inspect(); }, 300); }, setReplanningIndex() { let newValue = this.$refs.replanningIndex.value; this.selectedReplanning = newValue - 1; this.inspect(); } } }); ; /* File: info-modal.vue*/ Vue.component('info-modal', { template: ` `, mounted: function(){ dataStorage.data.infoModal = this; let now = parseInt(((new Date).getTime()/1000).toFixed(0)); let shown = localStorage.getItem(this.key); if ( ! shown || (shown && (now - parseInt(shown)) > 86400 ) ) { localStorage.setItem(this.key, now); if (this.win.innerWidth >= 1000) { this.display = true; } // end if } // end if }, data: function () { return { language: language, display: false, key: 'info-modal', win: window, parameters: window.parameters } }, methods: { } });; /* File: graph-detail-panel.vue*/ Vue.component('graph-detail-panel', { template: `

Edge {{ feature.properties.from }}/{{ feature.properties.to }} Graph editor

`, mounted: function(){ dataStorage.data.graphDetailPanel = this; }, data: function () { const data = { show: false, language: language, win: window, params: window.parameters, activeLayer: "default", feature: null, editing: null, expand: false, values: { blocker: { yes: { text: "[yes] Cras fermentum suscipit lectus, eu aliquam mauris vulputate in.", img: "https://picsum.photos/200?v=20" }, no: { text: "[no] Mauris suscipit, velit non elementum egestas.", img: "https://picsum.photos/200?v=21" }, }, stress: { 1: { text: "[1] Cras fermentum suscipit lectus, eu aliquam mauris vulputate in.", img: "https://picsum.photos/200?v=10" }, 2: { text: "[2] In est tortor, ornare in leo sit amet, congue pulvinar metus. Sed faucibus dapibus malesuada.", img: "https://picsum.photos/200?v=11" }, 3: { text: "[3] Mauris suscipit, velit non elementum egestas, est odio fermentum metus, eu faucibus lectus ligula sed neque.", img: "https://picsum.photos/200?v=12" }, 4: { text: "[4] Donec nec nibh at erat malesuada accumsan. Maecenas quis libero eget purus pretium commodo.", img: "https://picsum.photos/200?v=13" }, 5: { text: "[5] Sed sit amet tellus commodo, vestibulum mauris id, maximus nibh. Nulla mollis nibh elit, sed aliquet tellus auctor tempus.", img: "https://picsum.photos/200?v=14" }, }, surface: { EXCELLENT: { text: "[EXCELLENT] Lorem ipsum dolor sit amet, consectetur adipiscing elit.", img: "https://picsum.photos/200?v=1" }, GOOD: { text: "[GOOD] Aenean convallis ipsum nec nunc malesuada, a vestibulum ipsum facilisis.", img: "https://picsum.photos/200?v=2" }, INTERMEDIATE: { text: "[INTERMEDIATE] Vestibulum porta vitae dui quis feugiat. Ut vel vehicula metus.", img: "https://picsum.photos/200?v=3" }, BAD: { text: "[BAD] Etiam commodo ligula nec tincidunt imperdiet. Curabitur tempor lacus sed risus volutpat", img: "https://picsum.photos/200?v=4" }, HORRIBLE: { text: "[HORRIBLE] Praesent molestie porta pharetra. Vestibulum auctor feugiat quam eget tempus.", img: "https://picsum.photos/200?v=5" }, IMPASSABLE: { text: "[IMPASSABLE] Aliquam pharetra odio nibh, at tincidunt ex aliquam ac.", img: "https://picsum.photos/200?v=6" }, UNKNOWN: { text: "[UNKNOWN] Etiam molestie, dui at fermentum vestibulum, velit justo tincidunt eli.", img: "https://picsum.photos/200?v=8" }, }, slope: { lvl1: { interval: [-Infinity,4], text: "[0-3] Lorem ipsum dolor sit amet, consectetur adipiscing elit.", img: "https://picsum.photos/200?v=lvl1" }, lvl2: { interval: [4,6], text: "[3-5] Vestibulum porta vitae dui quis feugiat. Ut vel vehicula metus.", img: "https://picsum.photos/200?v=lvl2" }, lvl3: { interval: [6,9], text: "[6-8] Etiam commodo ligula nec tincidunt imperdiet. Curabitur tempor lacus sed risus volutpat.", img: "https://picsum.photos/200?v=lvl3" }, lvl4: { interval: [9,16], text: "[9-15] Praesent molestie porta pharetra. Vestibulum auctor feugiat quam eget tempus.", img: "https://picsum.photos/200?v=lvl4" }, lvl5: { interval: [16,30], text: "[16-29] Aliquam pharetra odio nibh, at tincidunt ex aliquam ac.", img: "https://picsum.photos/200?v=lvl5" }, lvl6: { interval: [30,Infinity], text: "[30+] Etiam molestie, dui at fermentum vestibulum, velit justo tincidunt eli.", img: "https://picsum.photos/200?v=lvl6" }, }, } } data.values.slopeEnum = data.values.slope; return data; }, watch: { show(newVal) { dataStorage.data.graphDetailPanelControls.show = newVal; }, activeLayer(newVal, oldVal) { this.win.graphEditor.toggleType(this.activeLayer); }, feature(newFeature) { this.expand = false; if (newFeature !== null) { this.editing = null; for (const [lvl, data] of Object.entries(this.values.slope)) { if (this.feature.properties.slope >= data.interval[0] && this.feature.properties.slope < data.interval[1]) { this.feature.properties.slopeEnum = lvl; } // end if } // end for } // end if } }, methods: { isOpen() { return null !== this.feature; }, enable() { this.show = true; if (16 === this.win.graphEditor.map.getZoom()) { this.win.graphEditor.fetch(this.activeLayer); dataStorage.data.mapEditBtn.active = true; } else { this.win.graphEditor.map.once('zoomend', () => { this.win.graphEditor.fetch(this.activeLayer); dataStorage.data.mapEditBtn.active = true; }) this.win.graphEditor.map.setZoom(16); } // end if-else }, close() { this.win.graphEditor.activeLayer.setStyle({weight: 3}); this.feature = null; }, disable() { this.show = false; if (dataStorage.data.panel.compact) { dataStorage.data.panel.toggleCompact(); } // end if if (dataStorage.data.results.compact) { dataStorage.data.results.toggleCompact(); } // end if if (window.draggable) { window.draggable.enable(); } // end if this.win.painter.lastClickedPlan = null; this.win.mapboxMap.removeLayer(window.graphEditor.bwLayer); window.mapStyleLayer.addTo(this.win.mapboxMap); this.win.mapboxMap.removeLayer(window.graphEditor.lines); dataStorage.data.mapEditBtn.active = false; this.feature = null; }, isAdmin() { return dataStorage.data.userProfile.isAdmin(); }, } });; /* File: graph-detail-panel-controls.vue*/ Vue.component('graph-detail-panel-controls', { template: `

`, mounted: function(){ dataStorage.data.graphDetailPanelControls = this; }, data: function () { return { show: false, language: language, opts: { default: true, stress: false, // surface: false, surfaceSmoothness: false, popularity: false, slope: false, // airQuality: false, }, win: window, params: window.parameters, } }, methods: { pick: function(which){ this.opts.default = this.opts.stress = this.opts.surfaceSmoothness = this.opts.slope = this.opts.popularity = false; this.opts[which] = true; dataStorage.data.graphDetailPanel.activeLayer = which; }, isAdmin() { return dataStorage.data.userProfile.isAdmin(); } } }); ; /* File: geolocator.vue*/ Vue.component('geolocator', { template: `

`, mounted: function () { dataStorage.data.geolocator = this; }, data: function () { return { city: null, cities: null, currentCity: null, initialized: false, win: window, hidden: true, }; }, methods: { geolocate: function(successCallback = null, failCallback = null) { var that = this; if (navigator.geolocation) { var opts = { timeout: 5000, enableHighAccuracy: true }; navigator.geolocation.getCurrentPosition(location => { let opts = {}; if (that.win.innerWidth <= 1500) { let offset = -1 * ((that.win.innerWidth - (2 * 350)) / 2); opts.paddingTopLeft = [offset, 0]; } // end if mapboxMap.setView([location.coords.latitude, location.coords.longitude], 14, opts); that.win.router.semaphore = 'RED'; while (that.win.markers.length > 2) { that.win.markers[0].remove(); } // end while // FIXME: lil hack setTimeout(() => { that.win.markers[0].remove(); that.win.markers[1].remove(); }, 100); that.win.router.semaphore = 'GREEN'; if (successCallback) successCallback(); }, function () { console.log("The page could not detect the location. Sorry."); if (failCallback) failCallback(); // alert("The page could not detect your location. Sorry."); }, opts); } else { // alert("Your browser does not support geolocation. Sorry."); console.log("This browser does not support geolocation. Sorry."); if (failCallback) failCallback(); } // end if-else } }, }); ; /* File: geolocation-modal.vue*/ Vue.component('geolocation-modal', { template: ` `, mounted: function(){ dataStorage.data.geoModal = this; let now = parseInt(((new Date).getTime()/1000).toFixed(0)); let shown = localStorage.getItem(this.key); if ( ! shown || (shown && (now - parseInt(shown)) > 86400*2 ) ) { // Every 2 days localStorage.setItem(this.key, now); if (this.win.innerWidth >= 1000) { this.display = true; } // end if } // end if }, data: function () { return { language: language, display: false, key: 'geolocation-modal', win: window, parameters: window.parameters } }, methods: { locateMe: function() { dataStorage.data.geolocator.geolocate(); } } });; /* File: firebase-panel.vue*/ Vue.component('firebase-panel', { template: `

UID:

`, data: function () { return { userLevel: parameters.userLevel } }, });; /* File: error-panel.vue*/ Vue.component('error-panel', { template: '' });; /* File: edge-edit-form.vue*/ Vue.component('edge-edit-form', { template: `

Current status

{{ $parent.values[editing][safeKey(feature.properties[editing])].text }}

Proposed value

`, mounted: function(){ dataStorage.data.edgeEditForm = this; }, data: function () { return { selected: null, map: { blocker: 'Is blocked', stress: 'Traffic', surface: 'Surface', slopeEnum: 'Slope' } } }, props: ["editing", "feature"], watch: { }, methods: { back() { this.$parent.editing = null; }, select(newValue) { this.selected = newValue; }, isActive(key, feature) { if (this.selected === null) { if ("blocker" == this.editing) { return feature.properties.blocker; } else { return key == feature.properties[this.editing]; } // end if-else } else { if ("blocker" == this.editing) { // return this.selected; if ("yes" == this.selected && "yes" == key) { return true; } else if ("no" == this.selected && "no" == key) { return true; } else { return false; } // end if-elself-else } else { return key == this.selected; } // end if-else } }, safeKey(key) { if (true === key) { return 'yes'; } else if (false === key) { return 'no'; } else { return key; } // end if-elseif-else } } });; /* File: dynamic-legend.vue*/ Vue.component('dynamic-legend', { template: `

`, mounted: function () { dataStorage.data.dynamicLegend = this; }, data: function () { return { language: language, mode: 'default', aqLevels: [ { color: '#0020f5', low: 0, high: 10, }, { color: '#3e99f7', low: 11, high: 15, }, { color: '#43962a', low: 16, high: 20, }, { color: '#75fa4c', low: 21, high: 25, }, { color: '#fffd54', low: 26, high: 30, }, { color: '#f6bd41', low: 31, high: 35, }, { color: '#ee6f2d', low: 36, high: 40, }, { color: '#eb3223', low: 41, high: 45, }, { color: '#8d1a10', low: 46, high: 50, }, { color: '#5d0d07', low: 50, high: null, }, ] } }, methods: { shouldDisplay: function () { return 'default' === this.mode ? false : true; }, setMode: function (mode) { this.mode = mode; }, content: function () { let o = ''; switch (this.mode) { case 'stress': o += '' + language['planner.legend.less_trafic'] + ''; for (var i = 1; i <= 5; i++) { o += ''; } // end for o += '' + language['planner.legend.heavy_traffic'] + ''; break; case 'popularity': const map = { 0: generate_geojson_color(1), 1: generate_geojson_color(.75), 2: generate_geojson_color(.5), 3: generate_geojson_color(.15), 4: generate_geojson_color(-.5), 5: '#0000ff' }; o += '' + language['planner.legend.unpopular'] + ''; for (var i = 0; i <= 5; i++) { o += ''; } // end for o += '' + language['planner.legend.popular'] + ''; break; case 'surface': o += ''; o += '' + language['planner.legend.paved_exl'] + ''; o += ''; o += '' + language['planner.legend.paved'] + ''; o += ''; o += '' + language['planner.legend.compacted'] + ''; o += ''; o += '' + language['planner.legend.unpaved'] + ''; o += ''; o += '' + language['planner.legend.bad'] + ''; o += ''; o += '' + language['planner.legend.very_bad'] + ''; o += ''; o += '' + language['planner.legend.unknown'] + ''; break; case 'surfaceSmoothness': o += ''; o += '' + language['planner.legend.PAVED_EXCELLENT'] + ''; o += ''; o += '' + language['planner.legend.PAVED_GOOD'] + ''; o += ''; o += '' + language['planner.legend.PAVED_BAD'] + ''; o += '
'; o += ''; o += '' + language['planner.legend.UNPAVED_INTERMEDIATE'] + ''; o += ''; o += '' + language['planner.legend.UNPAVED_BAD'] + ''; o += ''; o += '' + language['planner.legend.UNPAVED_HORRIBLE'] + ''; o += '
'; o += ''; o += '' + language['planner.legend.unknown'] + ''; break; case 'slope': o += '' + language['planner.legend.flat'] + ''; for (var i = 1; i <= 12; i++) { o += ''; } // end for o += '' + language['planner.legend.steep'] + ''; break; case 'airQuality': o += 'µg/m³'; var i = 0; this.aqLevels.forEach(aqLvl => { i++; if (5 == i) o += '
'; o += ``; if (aqLvl.high) { o += `${aqLvl.low} - ${aqLvl.high}`; } else { o += `${aqLvl.low}+`; } }); o += '
'; o += ''; o += '' + language['planner.legend.unknown'] + ''; break; } // end switch return o; } } });; /* File: destination.vue*/ Vue.component('destination', { template: '' });; /* File: debugger.vue*/ Vue.component('debugger', { template: `

Instructions

Endpoints

Routing API version Routing Rerouting Routing edit Key Bike sharing points Bike sharing zones

Will use
Routing
{{ overrides.generatedUrl }}
Bike sharing points
{{ overrides.bsPointsServerGeneratedUrl }}
Bike sharing zones
{{ overrides.bsZonesServerGeneratedUrl }}

Override request payload

Copy current request here ↓ Syntax: {{ request.syntaxValid ? 'OK': 'ERROR' }}

Last request
{{ lastRequest.method }}: {{ lastRequest.url }}

{{ lastRequest.payload }}

Isochrones

Endpoint URL Copy default request here ↓

SOIs

Enabled
Endpoint URL Copy default request here ↓

Open replanning import modal

`, mounted: function () { dataStorage.data.debugger = this; this.$refs.url.value = this.params.api.routing; this.$refs.urlRerouting.value = this.params.api.reRouting; this.$refs.urlEdit.value = this.params.api.routingEdit; this.$refs.urlBsPoints.value = this.params.api.bsPointsParams; this.$refs.urlBsZones.value = this.params.api.bsZonesParams; this.updateUrl(); }, data: function () { return { apiVersion: undefined !== window.parameters.api.version ? window.parameters.api.version : 'v5', win: window, params: window.parameters, originalKey: window.parameters.api.key, show: window.parameters.debug && window.parameters.components.debugger, maximized: false, overrides: { server: null, generatedUrl: null, serverUrlEdit: null, generatedUrlEdit: null, serverUrlRerouting: null, generatedUrlRerouting: null, bsPointsServer: null, bsPointsServerGeneratedUrl: null, bsZonesServer: null, bsZonesServerGeneratedUrl: null, }, request: { syntaxValid: null, payload: '', }, lastRequest: { url: null, method: null, payload: null, }, layers: { files: ['czech-poi.geojson', 'czech-popular.geojson'], enabled: [], colors: { 'czech-poi.geojson': '#00ff00', 'czech-popular.geojson': '#0000ff', }, layers: {} }, displayInstructions: null, isochrones: { url: window.parameters.api.isochrones, params: { client: 'WEB', key: window.parameters.api.key, lat: '', lon: '', rangesInMinutes: 15, climbs: '', traffic: '', contourSimplification: '', stairs: '', oneways: '', pavements: '', surface: '', }, layers: [], colors: [ { color: '#A62CC4', fillColor: '#F5E7F9', fillOpacity: .2 }, { color: '#7934C5', fillColor: '#EFE8F7', fillOpacity: .2 }, { color: '#6342D7', fillColor: '#ECEBFC', fillOpacity: .2 }, { color: '#4D4BDA', fillColor: '#E8E8F9', fillOpacity: .2 }, { color: '#2B65C2', fillColor: '#E6EEF7', fillOpacity: .2 }, { color: '#3A84C3', fillColor: '#E7F2F8', fillOpacity: .2 }, { color: '#4CA6B4', fillColor: '#E6F4F8', fillOpacity: .2 }, { color: '#4EAC89', fillColor: '#E7F5F2', fillOpacity: .2 }, { color: '#55B96A', fillColor: '#E7F8EE', fillOpacity: .2 }, ] }, sois: { url: window.parameters.api.segments, enabled: true } } }, watch: { displayInstructions: function (newVal) { this.win.displayInstructions(newVal); if (newVal) { this.win.document.body.dataset.showManoeuvres = "true"; } else { this.win.document.body.dataset.showManoeuvres = "false"; } // end if-else } }, methods: { changeApiVersion(ev) { this.apiVersion = ev.target.value; if (this.win.parameters) { } else { } }, updateUrl: function () { this.overrides.server = this.$refs.url.value; this.overrides.serverUrlRerouting = this.$refs.urlRerouting.value; this.overrides.serverUrlEdit = this.$refs.urlEdit.value; this.overrides.bsPointsServer = this.$refs.urlBsPoints.value; this.overrides.bsZonesServer = this.$refs.urlBsZones.value; this.generateOverrideUrls(); // this.overrides.generatedUrl = this.generateOverrideUrl(); // this.overrides.bsPointsServerGeneratedUrl = this.generateBsPointsOverrideUrl(); // this.overrides.bsZonesServerGeneratedUrl = this.generateBsZonesOverrideUrl(); }, updateKey: function () { let key = this.$refs.key.value; if (!key.length) { key = this.originalKey; } // end if this.params.api.key = key; axios.defaults.params['key'] = key; }, generateOverrideUrls: function () { const map = { generatedUrl: 'server', generatedUrlEdit: 'serverUrlEdit', generatedUrlRerouting: 'serverUrlRerouting', bsPointsServerGeneratedUrl: 'bsPointsServer', bsZonesServerGeneratedUrl: 'bsZonesServer', }; Array.from(Object.keys(map)).forEach(key => { let result = null; let val = map[key]; if (this.overrides[val]) { if (!this.overrides[val].match(/^https?:\/\//)) { result = 'http://' + this.overrides[val]; } else { result = this.overrides[val]; } // end if-else } else { result = this.params.api.routing; } // end if this.overrides[key] = result; }); }, updateRequest: function () { this.request.payload = this.$refs.request.value; try { JSON.parse(this.request.payload); this.request.syntaxValid = true; } catch (error) { this.request.syntaxValid = false; } }, getPlans: function () { router.semaphore = "RED"; const request = JSON.parse(this.request.payload); if (null == markers[0].getLatLng() && request.origin.point) { markers[0].setLatLng(request.origin.point); } // end if if (null == markers[markers.length - 1].getLatLng() && request.destination.point) { markers[markers.length - 1].setLatLng(request.destination.point); } // end if router.semaphore = "GREEN"; getPlans(); }, loadConfig: function () { const shell = {}; let latLngs = []; for (let i = 0; i < this.win.markers.length; i++) { try { let ll = this.win.markers[i].getLatLng(); latLngs[i] = ll ? ll : shell; } catch (e) { latLngs[i] = shell; } // end try-catch } this.$refs.request.value = JSON.stringify(router.buildPlanningRequest(latLngs, true), null, 4); this.updateRequest(); }, /** * @deprecated * @param {String} file */ toggleLayer(file) { var that = this; if (this.layers.enabled.includes(file)) { let index = this.layers.enabled.indexOf(file); this.layers.enabled.splice(index, 1); this.layers.layers[file].remove(); this.layers.layers[file] = undefined; } else { this.layers.enabled.push(file); // Actually show layer let url = `/custom/js/json/${file}`; axios.get(url).then(res => { const bounds = that.win.mapboxMap.getBounds(); let geojson = res.data; let geoJsonLayer = L.geoJson(geojson, { filter: function (el, layer) { return (el.geometry.coordinates[0] <= bounds._northEast.lng && el.geometry.coordinates[0] >= bounds._southWest.lng && el.geometry.coordinates[1] <= bounds._northEast.lat && el.geometry.coordinates[1] >= bounds._southWest.lat) }, onEachFeature: function (feature, layer) { var popupContent = `

${JSON.stringify(feature, null, 2)}

`; layer.bindPopup(popupContent); }, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: that.layers.colors[file], color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); } }).addTo(that.win.mapboxMap); this.layers.layers[file] = geoJsonLayer; }); } // end if-else }, buildsochronesRequest() { const center = this.win.mapboxMap.getCenter(); let params = {}; for (key in this.isochrones.params) { let val = this.isochrones.params[key]; if ('lat' == key) val = center.lat; if ('lon' == key) val = center.lng; params[key] = val; } // end for return params; }, prefillIsochronesRequest() { const params = this.buildsochronesRequest(); let o = ''; for (key in params) { const val = params[key]; if (o.length) o += "\n"; o += `${key}=${val}`; } // end for this.$refs.isochronesParams.value = o; }, prefillSoisRequest() { if (!window.segmentsPainter) { return alert("SegmentsPainter was not initialized."); } // end if const params = window.segmentsPainter.buildPayload(); let o = ''; for (key in params) { // if ("key" != key) { const val = params[key]; if (o.length) o += "\n"; o += `${key}=${val}`; // } // end if } // end for this.$refs.soisParams.value = o; }, buildIsochronesRequest() { let url = ''; var params = {}; if (this.$refs.isochronesParams.value.length > 0) { const rows = this.$refs.isochronesParams.value.split("\n"); for (let i = 0; i < rows.length; i++) { const row = rows[i].split('='); if (undefined === params[row[0]]) { params[row[0]] = row[1]; } else { params[row[0]] = [params[row[0]], row[1]] } } // end for } else { const center = this.win.mapboxMap.getCenter(); params = this.buildsochronesRequest(); params.key = this.params.api.key; params.lat = center.lat; params.lon = center.lng; } // end if-else // Auto-injected by Axios delete params.key; let n = 0; for (key in params) { if (params[key].length !== 0) { let glue = (0 === n ? '?' : '&'); if ('object' == typeof params[key]) { params[key].forEach(val => { url += `${glue}${key}=${val}`; ++n; }); } else { url += `${glue}${key}=${params[key]}`; } // end if-else ++n; } // end if } // end for return url; }, getSois() { if (!window.segmentsPainter) { return alert("SegmentsPainter was not initialized."); } // end if window.segmentsPainter.paint(); }, toggleSois() { this.sois.enabled = ! this.sois.enabled; this.getSois(); }, getIsochrones() { const that = this; var endpoint = ''; if (this.$refs.isochronesUrl.value.length) { endpoint = this.$refs.isochronesUrl.value; } else { endpoint = this.isochrones.url; } // end if-else const query = this.buildIsochronesRequest(); const url = endpoint + query; axios.get(url).then(res => { that.paintIsochrones(res.data); }).catch(ex => { throw ex; }); }, paintIsochrones(data = null) { const that = this; for (key in this.isochrones.layers) { that.win.mapboxMap.removeLayer(this.isochrones.layers[key]); } // end for if (data.features.length) { var i = 0; data.features.forEach(feature => { // Rotate colors if ('undefined' == typeof this.isochrones.colors[i]) { i = 0; } // end if const opts = this.isochrones.colors[i]; let coordinates = []; feature.geometry.coordinates[0].forEach(coords => { coordinates.push(L.latLng(coords[1], coords[0])); }); const polygon = L.polygon(coordinates, opts); // polygon._isochrone_id = `isochrone__${get_random_string()}`; that.isochrones.layers.push(polygon); that.win.mapboxMap.addLayer(polygon); ++i; }); } // end if }, replan() { dataStorage.data.replanner.openModal(); } } }); ; /* File: copyright.vue*/ Vue.component('copyright', { template: `

`, mounted: function(){ dataStorage.data.copyright = this; }, data: function(){ return { language: language, year: (new Date).getFullYear() }; }, });; /* File: cookies.vue*/ Vue.component('cookies', { template: `

Cookies: {{ language['planner.cookies.message'] }}

`, mounted: function(){ dataStorage.data.cookies = this; if ( 'localStorage' in window && ! window.localStorage.getItem(this.lsKey) ) { this.show = true; } // end if; }, data: function () { return { language: language, show: false, lsKey: 'planner_cookies_v290', } }, methods: { close: function(){ this.show = false; if ( 'localStorage' in window ) { window.localStorage.setItem(this.lsKey, 1); } // end if }, } });; /* File: city-picker.vue*/ Vue.component('city-picker', { template: `

`, mounted: function () { dataStorage.data.cityPicker = this; this.init(); }, methods: { getCityName: function() { if (null === this.city) { return parameters.cities[0].name; } else { return this.city.nameEN; } // end if-else }, onChange: function () { var that = this; let val = this.$refs.city.value; for (let city of this.cities) { if (city.id == val) { this.city = city; this.currentCity = city.id; let opts = {}; if (window.innerWidth <= 1500) { let offset = -1 * ((window.innerWidth - (2 * 350)) / 2); opts.paddingTopLeft = [offset, 0]; } // end if mapboxMap.setView([city.center.lat, city.center.lon], city.center.zoom, opts); that.win.router.semaphore = 'RED'; while (that.win.markers.length > 2) { that.win.markers[0].remove(); } // end while // FIXME: lil hack setTimeout(() => { that.win.markers[0].remove(); that.win.markers[1].remove(); }, 100); that.win.router.semaphore = 'GREEN'; break; } // end if } // end for }, init: function (callback = null) { let that = this; if ( that.cities && 'function' == typeof callback ) { callback(); } // end if axios.get('/v2.5/js/cities.json').then((res) => { that.cities = res.data; if ( that.currentCity ) { for (let city of that.cities) { if (city.id == that.currentCity) { dataStorage.data.journeyTypeSwitch.pois = city.pois; break; } // end if } // end for } // end if }).finally(() => { if ( 'function' == typeof callback ) { callback(); } // end if }); // $.get('/v2.5/js/cities.json?v=3', (res) => { // that.cities = res; // if ( that.currentCity ) { // for (let city of that.cities) { // if (city.id == that.currentCity) { // dataStorage.data.journeyTypeSwitch.pois = city.pois; // break; // } // end if // } // end for // } // end if // if ( 'function' == typeof callback ) { // callback(); // } // end if // }); let key = 'city--'; let city = null; for (let cls of Array.from(document.body.classList)) { if (cls.indexOf(key) >= 0) { city = cls.replace(key, ''); that.currentCity = city; break; } // end if } // end for } }, watch: { city: function (newVal, oldVal) { if (null !== newVal) { dataStorage.data.journeyTypeSwitch.pois = this.city.pois; } // end if } }, data: function () { return { city: null, cities: null, currentCity: null, initialized: false, win: window, hidden: true, }; } });; /* File: bounds-modal.vue*/ Vue.component('bounds-modal', { template: ` `, mounted: function(){ dataStorage.data.boundsModal = this; }, data: function () { return { language: language, display: false, } }, });; /* File: bg-map.vue*/ Vue.component('bg-map', { template: '

', created: function(){ }, mounted: function(){ dataStorage.data.map = this; }, data: function(){ return { mobileVisible: false, // shrinked: false, } } });; /* File: bg-map-toggle-warnings.vue*/ Vue.component('bg-map-toggle-warnings', { template: `

`, data: function () { return { language: language, active: false, doc: document, } }, methods: { openModal: function() { dataStorage.data.markersModal.display = true; }, toggle: function(){ this.active = ! this.active; if ( this.active ) { this.doc.body.classList.add('hide-warnings'); } else { this.doc.body.classList.remove('hide-warnings'); } // end if-else } } });; /* File: bg-map-toggle-isochrones.vue*/ Vue.component('bg-map-toggle-isochrones', { template: `

`, mounted() { dataStorage.data.isochronesToggle = this; }, data: function () { if (window.parameters.components.isochrones) { window.topMapControlSlotsUsed++; } // end if const top = 232 + (49 * (window.topMapControlSlotsUsed - 4)); const autoInit = (true === window.parameters.components.isochronesAutoinit ? true : false); return { enabled: window.parameters.components.isochrones, language: language, active: autoInit, doc: document, win: window, params: parameters, stylesheet: { top: `${top}px` } } }, methods: { toggle: function(){ this.active = ! this.active; if (this.active) { dataStorage.data.isochrones.getIsochrones(); } else { dataStorage.data.isochrones.paintIsochrones(false); } // end if } } });; /* File: bg-map-toggle-air-pollution.vue*/ Vue.component('bg-map-toggle-air-pollution', { template: `

`, mounted() { dataStorage.data.pollutionToggle = this; }, data: function () { if (window.parameters.components.airQuality) { window.topMapControlSlotsUsed++; } // end if const top = 232 + (49 * (window.topMapControlSlotsUsed - 4)); return { language: language, active: false, doc: document, win: window, params: parameters, stylesheet: { top: `${top}px` } } }, methods: { toggle: function(){ this.active = ! this.active; dataStorage.data.airPollution.showAirQuality = this.active; if (this.active) { if (this.win.mapboxMap.getZoom() > 14) { this.win.mapboxMap.setZoom(13); } // end if } else { // Nuffin to do } // end if-else } } });; /* File: bg-map-logger.vue*/ Vue.component('bg-map-logger', { template: `

`, mounted() { dataStorage.data.logger = this; }, data: function () { return { language: language, parameters: window.parameters, empty: true, msg: null, type: "error", timeout: null, delay: 5000 } }, methods: { log(msg, type = "error") { const self = this; this.msg = msg; this.type = type; this.empty = false; if (this.timeout) clearTimeout(this.timeout); this.timeout = setTimeout(() => { self.empty = true; setTimeout(() => { self.msg = null; }, 1000); }, this.delay); } } });; /* File: bg-map-legend.vue*/ Vue.component('bg-map-legend', { template: `

`, data: function () { return { language: language, parameters: window.parameters } }, });; /* File: bg-map-edit.vue*/ Vue.component('bg-map-edit', { template: `

`, mounted() { dataStorage.data.mapEditBtn = this; }, data: function () { if (window.parameters.components.graphEdit) { window.topMapControlSlotsUsed++; } // end if const top = 232 + (49 * (window.topMapControlSlotsUsed - 4)); return { params: parameters, language: language, active: false, doc: document, stylesheet: { top: `${top}px` } } }, methods: { toggleEdit: function() { if (this.active) { dataStorage.data.graphDetailPanel.disable(); } else { if (dataStorage.data.userProfile.hasUser()) { dataStorage.data.userProfile.graphEdit(); } else { dataStorage.data.userProfile.showModal(); } // end if-else } // end if-else } } });; /* File: bg-inspector.vue*/ Vue.component('bg-inspector', { template: `

`, mounted() { dataStorage.data.inspectorBtn = this; }, data: function () { return { params: parameters, language: language, active: false, doc: document, stylesheet: { bottom: `100px` } } }, methods: { toggle: function() { if (dataStorage.data.inspector.isActive()) { dataStorage.data.inspector.close(); } else { dataStorage.data.inspector.open(); } // end if-else // this.active = dataStorage.data.inspector.isActive(); } } });; /* File: bg-brush.vue*/ Vue.component('bg-brush', { template: `

`, mounted() { dataStorage.data.brush = this; }, data: function () { return { params: parameters, language: language, active: false, } }, methods: { toggle: function() { dataStorage.data.pallete.toggle(); this.active = dataStorage.data.pallete.isActive(); } } });; /* File: air-pollution.vue*/ Vue.component('air-pollution', { template: `

microgram/m³

{{ level.low }} - {{ level.high }}

> {{ level.low }}

`, mounted: function () { dataStorage.data.airPollution = this; }, data: function () { return { language: language, showAirQuality: false, airqLayer: null, win: window, aqLevels: [ { color: '#0020f5', low: 0, high: 10, }, { color: '#3e99f7', low: 11, high: 15, }, { color: '#43962a', low: 16, high: 20, }, { color: '#75fa4c', low: 21, high: 25, }, { color: '#fffd54', low: 26, high: 30, }, { color: '#f6bd41', low: 31, high: 35, }, { color: '#ee6f2d', low: 36, high: 40, }, { color: '#eb3223', low: 41, high: 45, }, { color: '#8d1a10', low: 46, high: 50, }, { color: '#5d0d07', low: 50, high: null, }, ] }; }, watch: { showAirQuality: function (newVal) { this.refreshAirQuality(); } }, methods: { refreshAirQuality: function () { this.removeAirqLayer(); if (this.showAirQuality) { let map = this.win.mapboxMap; let time = dataStorage.data.settingsDatetime.getDtFormatted(true); let h1 = time.replace(/\:.*/, ''); let h2 = parseInt(h1) + 1; if (h2 > 23) h2 = 0; let interval = `${h1}${pad_time(h2.toString())}`; // let season = dataStorage.data.settingsSeasons.getSeason(); season = 'spring'; let source = `umotionals.${season}${interval}UTC`; let layerConfig = { opacity: .7, zIndex: 10, }; let layer = L.mapbox.tileLayer(source, layerConfig); map.addLayer(layer); this.airqLayer = layer; } // end if-else }, removeAirqLayer: function(){ if ( this.airqLayer ) { this.win.mapboxMap.removeLayer(this.airqLayer); this.airqLayer = null; } // end if } } });; /* Custom file: modal-about.vue*/ Vue.component('modal-about', { template: `

About Cleanest Air Bicycle Route Planner

The main purpose of the Cleanest Air Bicycle Route Planner is to reduce your long-term exposure to air pollution and enabling you to choose for your home-work, home-school commute or your recreational jogging a route that has on average a lower concentration of air pollutants. These alternative cleaner routes have a similar distance and travel time.

The application uses seasonal-hourly high spatial resolution data of Nitrogen Dioxide maps (10x10m raster). Nitrogen Dioxide is correlated with Black Carbon, Ultrafine Particulate Matter and to a lesser extent Particulate Matter. Nitrogen dioxide is considered as a good proxy for traffic related air pollution.

Seasonal-hourly rasters imply for example the average concentration in the autumn between 2 pm and 3 pm. The choice for seasonal-hourly rasters of the ATMO-Street model was made based upon comprehensive scientific research. Because those static-seasonal-hourly rasters are static data from the year before, it is not a real-time application, implying rare events such as an house in fire or a driving-oldtimer-show (far higher concentrations) or car-free sundays (far lower concentrations) are not visible in the application.

The application uses the best-available air pollution model data in Belgium, integrated in the most-suitable format for routing. However, this doesn’t imply it is perfect. Inaccuracies are possible, for example due to errors or limited availability in traffic emission data. Also the routing algorithms can provide strange results in some cases, e.g. due to not-up-to-date information in Open Street Maps.

The model calculates the air pollutant concentrations near (not on) the roads and in street-canyons at the frontside of the houses. This implies that the concentrations on the road are sometimes underestimated (because steep gradients in air pollution concentrations away from the road).. However, despite some underestimations, the application is able to provide the route with the lowest concentrations.

As one of the data sources for routing, Cleanest Air Bicycle Route Planner uses OpenStreetMap, a collaborative project to create a free editable map of the world based on the Open Data Commons Open Database License. The application is developed by Umotional s.r.o.. You can contact us at info@urbancyclers.com.

This application is in development and testing phase. It is not a finished product. Therefore, the results should be interpreted carefully.

Routes have information purposes only. Due to road works, current traffic, weather, and other events the real conditions on the route can differ from those suggested by the application. Use your judgment, be careful and follow road signs and other warnings. It is completely your responsibility that you follow traffic rules and ride safe.

`, mounted: function(){ dataStorage.data.aboutModal = this; }, data: function () { return { display: false, language: language, parameters: parameters, } }, methods: { show: function(){ this.display = true; } } });;

Governing Law<\/h2>","pages.terms.parts.n1":"
\n These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"

Governing Law<\/h2>","pages.terms.parts.n1":"
\n These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"

${res.data.name}

{{ language['planner.selectCity.callForSelect'] }}

Is blocked

Traffic

Surface

Slope

Current status

Proposed value

Instructions

Endpoints

Override request payload

Isochrones

SOIs

Governing Law<\/h2>","pages.terms.parts.n1":"\n These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"

Governing Law<\/h2>","pages.terms.parts.n1":"\n These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"

${res.data.name}

Is blocked

Traffic

Surface

Slope

Current status

Proposed value

Instructions

Endpoints

Override request payload

Isochrones

SOIs

Governing Law<\/h2>","pages.terms.parts.n1":"
\n These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"

Governing Law<\/h2>","pages.terms.parts.n1":"
\n These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"