some major improvements
- filter by station type - sort by distance (WIP) - detect old data structure and clear localStorage if not compatible - add substitue coordinates for stations without valid osm node - improve responsive styles
This commit is contained in:
parent
af50e0f04d
commit
14a514e3e4
5 changed files with 726 additions and 128 deletions
377
elevators.js
377
elevators.js
|
|
@ -3,8 +3,64 @@ const internalData = {
|
|||
stations: [],
|
||||
};
|
||||
let geolocationPermission = false;
|
||||
let geolocation = [null, null];
|
||||
let geolocation = null;
|
||||
const openStations = new Set();
|
||||
let sortByDistance = false;
|
||||
|
||||
const substituteCoordinates = [
|
||||
{
|
||||
name: 'Borgweg (Stadtpark)',
|
||||
coordinates: [53.5907696, 10.0147719],
|
||||
},
|
||||
{
|
||||
name: 'Emilienstraße',
|
||||
coordinates: [53.5716862, 9.9525424],
|
||||
},
|
||||
{
|
||||
name: 'Garstedt',
|
||||
coordinates: [53.6844739, 9.9860415],
|
||||
},
|
||||
{
|
||||
name: 'Hagenbecks Tierpark',
|
||||
coordinates: [53.5925874, 9.9440359],
|
||||
},
|
||||
{
|
||||
name: 'Hauptbahnhof Nord',
|
||||
coordinates: [53.5541197, 10.0061270],
|
||||
},
|
||||
{
|
||||
name: 'Hoheneichen',
|
||||
coordinates: [53.6355141, 10.0677176],
|
||||
},
|
||||
{
|
||||
name: 'Kornweg (Klein Borstel)',
|
||||
coordinates: [53.6324430, 10.0541722],
|
||||
},
|
||||
{
|
||||
name: 'Lauenbrück',
|
||||
coordinates: [53.1971209, 9.5640765],
|
||||
},
|
||||
{
|
||||
name: 'Lutterothstraße',
|
||||
coordinates: [53.5819938, 9.9476215],
|
||||
},
|
||||
{
|
||||
name: 'Meckelfeld',
|
||||
coordinates: [53.4248897, 10.0291223],
|
||||
},
|
||||
{
|
||||
name: 'Sengelmannstraße (City Nord)',
|
||||
coordinates: [53.6093953, 10.0220004],
|
||||
},
|
||||
{
|
||||
name: 'St.Pauli',
|
||||
coordinates: [53.5507957, 9.9700752],
|
||||
},
|
||||
{
|
||||
name: 'Winsen(Luhe)',
|
||||
coordinates: [53.3534304, 10.2086841],
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
Object.defineProperty(String.prototype, 'capitalize', {
|
||||
|
|
@ -15,12 +71,17 @@ Object.defineProperty(String.prototype, 'capitalize', {
|
|||
});
|
||||
|
||||
async function loadElevators() {
|
||||
const res = await fetch('https://www.hvv.de/elevators', {referrer: ""});
|
||||
document.querySelector('#errorMessage').classList.add('hidden');
|
||||
const res = await fetch('https://www.hvv.de/elevators', {
|
||||
referrer: "",
|
||||
}).catch(e => {
|
||||
document.querySelector('#errorMessage').classList.remove('hidden');
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
const stations = data['stations'];
|
||||
stations.sort(sortStations)
|
||||
stations.sort(sortStations);
|
||||
internalData.lastUpdate = new Date(data['lastUpdate']);
|
||||
|
||||
let stationIndex = 0;
|
||||
|
|
@ -102,7 +163,10 @@ async function loadElevators() {
|
|||
}
|
||||
}
|
||||
|
||||
localStorage.setItem("internal_data", JSON.stringify(internalData));
|
||||
localStorage.setItem("internal_data", JSON.stringify({
|
||||
api: 'v1',
|
||||
...internalData
|
||||
}));
|
||||
}
|
||||
|
||||
const dateTimeStyle = new Intl.DateTimeFormat('de-DE', {
|
||||
|
|
@ -119,12 +183,55 @@ async function loadOsmData() {
|
|||
}
|
||||
}
|
||||
|
||||
const osmData = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {});
|
||||
const osmJson = await osmData.json();
|
||||
const osmResponse = await fetch(`https://overpass-api.de/api/interpreter?data=[out:json];node(id:${nodeIdList.join(',')});out%20body;`, {});
|
||||
const osmJson = await osmResponse.json();
|
||||
|
||||
if (!osmJson.hasOwnProperty('elements')) return;
|
||||
|
||||
localStorage.setItem("osm_data", JSON.stringify(osmJson));
|
||||
const osmNodes = {};
|
||||
for await (const node of osmJson.elements) {
|
||||
if (node.hasOwnProperty('tags')) {
|
||||
const tags = node['tags'];
|
||||
if (tags['highway'] === 'elevator') {
|
||||
osmNodes[node['id']] = node;
|
||||
} else {
|
||||
console.warn(`OSM Node is not an elevator. (NodeID: ${node['id']})`);
|
||||
}
|
||||
} else {
|
||||
console.warn(`OSM Node has no Tags. (NodeID: ${node['id']})`);
|
||||
}
|
||||
}
|
||||
|
||||
//update coordinates in stations
|
||||
for (const stationIndex in internalData.stations) {
|
||||
const station = internalData.stations[stationIndex];
|
||||
for (const elevator of station.elevators) {
|
||||
const node = osmNodes[elevator.osmNodeId]
|
||||
if (node) {
|
||||
internalData.stations[stationIndex]['coordinates'] = [
|
||||
node['lat'],
|
||||
node['lon'],
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
if (!internalData.stations[stationIndex].hasOwnProperty('coordinates')) {
|
||||
const substitute = substituteCoordinates.filter(subs => subs.name === internalData.stations[stationIndex].name)
|
||||
if (substitute.length) {
|
||||
internalData.stations[stationIndex]['coordinates'] = substitute[0].coordinates;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem("osm_data", JSON.stringify({
|
||||
api: 'v1',
|
||||
lastUpdate: new Date(),
|
||||
nodes: osmNodes
|
||||
}));
|
||||
localStorage.setItem("internal_data", JSON.stringify({
|
||||
api: 'v1',
|
||||
...internalData
|
||||
}));
|
||||
}
|
||||
|
||||
function distance([lat1, lon1], [lat2, lon2]) {
|
||||
|
|
@ -145,9 +252,12 @@ function distance([lat1, lon1], [lat2, lon2]) {
|
|||
|
||||
function registerGeolocationWatcher() {
|
||||
navigator.geolocation.watchPosition((pos) => {
|
||||
geolocation = [pos.coords.latitude, pos.coords.longitude]
|
||||
if (geolocation === null) {
|
||||
geolocation = [pos.coords.latitude, pos.coords.longitude];
|
||||
renderData(geolocation);
|
||||
}
|
||||
}, (e) => {
|
||||
console.log(e)
|
||||
console.warn(e)
|
||||
}, {
|
||||
enableHighAccuracy: true,
|
||||
timeout: 5000,
|
||||
|
|
@ -177,8 +287,6 @@ function allowGeolocation() {
|
|||
|
||||
checkGeolocationPermission()
|
||||
|
||||
document.querySelector('#stationsNearMe').addEventListener('click', allowGeolocation)
|
||||
|
||||
function sortStations(stationA, stationB) {
|
||||
const nameA = stationA.mainSubStation.stationName.toUpperCase(); // ignore upper and lowercase
|
||||
const nameB = stationB.mainSubStation.stationName.toUpperCase(); // ignore upper and lowercase
|
||||
|
|
@ -193,6 +301,20 @@ function sortStations(stationA, stationB) {
|
|||
return 0;
|
||||
}
|
||||
|
||||
function sortStationsByDistance(stationA, stationB) {
|
||||
const distanceA = stationA.distance; // ignore upper and lowercase
|
||||
const distanceB = stationB.distance; // ignore upper and lowercase
|
||||
if (distanceA < distanceB) {
|
||||
return -1;
|
||||
}
|
||||
if (distanceA > distanceB) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
// names must be equal
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getType(line) {
|
||||
const type = line.replace(/[^A-z]/g, "");
|
||||
switch (type) {
|
||||
|
|
@ -218,7 +340,7 @@ function getTypes(lines) {
|
|||
return types;
|
||||
}
|
||||
|
||||
function renderData() {
|
||||
function renderData(location = null) {
|
||||
const ls = JSON.parse(localStorage.getItem("internal_data"));
|
||||
if (!ls) return;
|
||||
internalData.lastUpdate = ls['lastUpdate'];
|
||||
|
|
@ -230,6 +352,18 @@ function renderData() {
|
|||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
location !== null
|
||||
&& (
|
||||
location.length !== 2
|
||||
|| typeof location[0] !== 'number'
|
||||
|| typeof location[1] !== 'number'
|
||||
)
|
||||
) {
|
||||
console.error('No valid location provided')
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelector('#updateInfo').classList.remove('hidden');
|
||||
document.querySelector('#loadElevators').classList.remove('hidden');
|
||||
document.querySelector('#filters').classList.remove('hidden');
|
||||
|
|
@ -241,18 +375,57 @@ function renderData() {
|
|||
//clear list before update
|
||||
listContainer.innerHTML = '';
|
||||
|
||||
const stations = internalData['stations'];
|
||||
let stations = [...internalData['stations']];
|
||||
|
||||
for (const stationIndex in stations) {
|
||||
const station = stations[stationIndex];
|
||||
station.id = stationIndex;
|
||||
|
||||
if (location !== null) {
|
||||
if (station.hasOwnProperty('coordinates')) {
|
||||
station.distance = distance(location, station.coordinates);
|
||||
} else {
|
||||
console.log('station has no position:', station.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
stations = stations.sort(sortStationsByDistance);
|
||||
|
||||
for (const stationIndex in stations) {
|
||||
const station = stations[stationIndex];
|
||||
|
||||
if (location !== null) {
|
||||
if (station.hasOwnProperty('coordinates')) {
|
||||
station.distance = distance(location, station.coordinates);
|
||||
} else {
|
||||
console.log('station has no position:', station.name);
|
||||
}
|
||||
}
|
||||
|
||||
let elevatorsTemplate = '';
|
||||
let previewTemplate = '';
|
||||
|
||||
for (const elevator of station.elevators) {
|
||||
let linesTemplate = '<div class="lineList">Linien: ';
|
||||
for (const line of elevator.lines) {
|
||||
linesTemplate += `<span data-type="${line.type}" data-line="${line.line}" class="lineChip">${line.line}</span>`;
|
||||
const stateTemplate = `<span data-icon="${elevator.working || elevator.stateUnavailable ? 'elevator' : 'elevator-slash'}"
|
||||
class="stateIcon size-xl ${elevator.working ? 'text-green' : elevator.stateUnavailable ? 'text-orange' : 'text-red'}"
|
||||
role="img"
|
||||
aria-label="${elevator.stateUnavailable
|
||||
? 'Status nicht verfügbar.'
|
||||
: elevator.working
|
||||
? 'Funktionsfähig'
|
||||
: 'Außer Betrieb'}">
|
||||
</span>`;
|
||||
|
||||
let linesTemplate = '';
|
||||
linesTemplate = `<div class="firstRow hiddenOnDesktop">${stateTemplate}`;
|
||||
if (elevator.lines.length) {
|
||||
linesTemplate = `<div class="firstRow">${stateTemplate}`;
|
||||
linesTemplate += `<div class="lineList">Linien: `;
|
||||
for (const line of elevator.lines) {
|
||||
linesTemplate += `<span data-type="${line.type}" data-line="${line.line}" class="lineChip">${line.line}</span>`;
|
||||
}
|
||||
linesTemplate += '</div>';
|
||||
}
|
||||
linesTemplate += '</div>';
|
||||
|
||||
|
|
@ -264,41 +437,32 @@ function renderData() {
|
|||
|
||||
let osmTemplate = '';
|
||||
if (osmData) {
|
||||
const nodes = osmData.elements.filter(node => node.id === elevator.osmNodeId)
|
||||
if (nodes.length) {
|
||||
const nodeInfo = nodes[0];
|
||||
if (nodeInfo.hasOwnProperty('tags')) {
|
||||
const tags = nodeInfo['tags'];
|
||||
if (tags['highway'] === 'elevator') {
|
||||
osmTemplate = '<dl>';
|
||||
osmTemplate += `<div>
|
||||
<dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt>
|
||||
<dd>
|
||||
<a href="https://www.openstreetmap.org/node/${elevator.osmNodeId}" target="_blank">
|
||||
Auf Karte anzeigen
|
||||
</a>
|
||||
</dd>
|
||||
</div>`;
|
||||
if (tags.hasOwnProperty('description')) {
|
||||
osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${tags['description']}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('level')) {
|
||||
osmTemplate += `<div><dt><span data-icon="up-down" class="size-l"></span>Ebenen</dt><dd>${tags['level'].split(';').sort().join(', ')}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('wheelchair')) {
|
||||
osmTemplate += `<div><dt><span data-icon="wheelchair" class="size-l"></span>Rollstühle</dt><dd>${tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
if (tags.hasOwnProperty('bicycle')) {
|
||||
osmTemplate += `<div><dt><span data-icon="bicycle" class="size-l"></span>Fahrräder</dt><dd>${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
const node = osmData.nodes[elevator.osmNodeId]
|
||||
if (node) {
|
||||
|
||||
osmTemplate += '</dl>';
|
||||
} else {
|
||||
console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
|
||||
}
|
||||
} else {
|
||||
console.warn(`OSM Node has no Tags. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
|
||||
osmTemplate = '<dl>';
|
||||
osmTemplate += `<div>
|
||||
<dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt>
|
||||
<dd>
|
||||
<a href="https://www.openstreetmap.org/node/${elevator.osmNodeId}" target="_blank">
|
||||
Auf Karte anzeigen
|
||||
</a>
|
||||
</dd>
|
||||
</div>`;
|
||||
if (node.tags.hasOwnProperty('description')) {
|
||||
osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${node.tags['description']}</dd></div>`;
|
||||
}
|
||||
if (node.tags.hasOwnProperty('level')) {
|
||||
osmTemplate += `<div><dt><span data-icon="up-down" class="size-l"></span>Ebenen</dt><dd>${node.tags['level'].split(';').sort().join(', ')}</dd></div>`;
|
||||
}
|
||||
if (node.tags.hasOwnProperty('wheelchair')) {
|
||||
osmTemplate += `<div><dt><span data-icon="wheelchair" class="size-l"></span>Rollstühle</dt><dd>${node.tags['wheelchair'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
if (node.tags.hasOwnProperty('bicycle')) {
|
||||
osmTemplate += `<div><dt><span data-icon="bicycle" class="size-l"></span>Fahrräder</dt><dd>${node.tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
|
||||
osmTemplate += '</dl>';
|
||||
} else {
|
||||
console.warn(`OSM Node not found (deleted). At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
|
||||
}
|
||||
|
|
@ -310,19 +474,10 @@ function renderData() {
|
|||
previewTemplate += `<span data-icon="${elevator.working || elevator.stateUnavailable ? 'elevator' : 'elevator-slash'}"
|
||||
class="size-l ${elevator.working ? 'text-green' : elevator.stateUnavailable ? 'text-orange' : 'text-red'}"></span>`
|
||||
|
||||
|
||||
elevatorsTemplate += `<li class="elevator">
|
||||
<span data-icon="${elevator.working || elevator.stateUnavailable ? 'elevator' : 'elevator-slash'}"
|
||||
class="size-xl ${elevator.working ? 'text-green' : elevator.stateUnavailable ? 'text-orange' : 'text-red'}"
|
||||
role="img"
|
||||
aria-label="${elevator.stateUnavailable
|
||||
? 'Status nicht verfügbar.'
|
||||
: elevator.working
|
||||
? 'Funktionsfähig'
|
||||
: 'Außer Betrieb'}">
|
||||
</span>
|
||||
${stateTemplate}
|
||||
<div class="elevatorData">
|
||||
${elevator.lines.length ? `${linesTemplate}` : ''}
|
||||
${linesTemplate}
|
||||
${elevator.instCause !== '' ? `<div class="elevatorInfo">${elevator.instCause}</div>` : ''}
|
||||
${elevator.levels.length ? levelsTemplate : elevator.description}
|
||||
<dl>
|
||||
|
|
@ -365,11 +520,14 @@ function renderData() {
|
|||
</li>`;
|
||||
}
|
||||
|
||||
const template = `<li class="station" id="station_${stationIndex}">
|
||||
const template = `<li class="station" id="station_${station.id}">
|
||||
<div class="stationSummary">
|
||||
<div class="symbol">
|
||||
<div class="typeList">
|
||||
${station.types.sort().map(t => `<span class="typeChip" data-type="${t}">${t}</span>`).join('')}
|
||||
</div>
|
||||
${typeof station.distance !== 'undefined' ? `<div class="distance"><b>${Math.round(station.distance / 100) / 10}</b><br>km</div>` : ''}
|
||||
</div>
|
||||
<div class="stationTitle">
|
||||
<h3>${station.name}</h3>
|
||||
<div class="elevator-preview" role="img"
|
||||
|
|
@ -380,11 +538,11 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<details data-stationid="${stationIndex}" ${openStations.has(stationIndex) ? 'open' : ''}>
|
||||
<details data-stationid="${station.id}" ${openStations.has(station.id) ? 'open' : ''}>
|
||||
<summary>
|
||||
Aufzüge anzeigen
|
||||
</summary>
|
||||
<ul class="elevatorList collapsed" aria-expanded="false" id="station_${stationIndex}_elevatorList">
|
||||
<ul class="elevatorList collapsed" aria-expanded="false" id="station_${station.id}_elevatorList">
|
||||
${elevatorsTemplate}
|
||||
</ul>
|
||||
</details>
|
||||
|
|
@ -393,7 +551,7 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
|
|||
|
||||
//immediate invocation
|
||||
(function () {
|
||||
listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => {
|
||||
listContainer.querySelectorAll(`#station_${station.id} .loadOSM`).forEach(e => {
|
||||
e.addEventListener('click', (ev) => {
|
||||
ev.target.querySelector('.spinner').classList.remove('hidden');
|
||||
loadOsmData().then(() => {
|
||||
|
|
@ -416,6 +574,8 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
|
|||
}
|
||||
});
|
||||
})
|
||||
|
||||
filterData();
|
||||
}
|
||||
|
||||
document.querySelector('#loadElevators')
|
||||
|
|
@ -424,7 +584,6 @@ document.querySelector('#loadElevators')
|
|||
loadElevators().then(() => {
|
||||
e.target.querySelector('.spinner').classList.add('hidden');
|
||||
renderData();
|
||||
filterData();
|
||||
});
|
||||
})
|
||||
|
||||
|
|
@ -434,19 +593,65 @@ document.querySelector('#initialLoad')
|
|||
loadElevators().then(() => {
|
||||
e.target.classList.add('hidden');
|
||||
renderData();
|
||||
filterData();
|
||||
});
|
||||
})
|
||||
|
||||
renderData();
|
||||
document.querySelector('#loadOsm')
|
||||
.addEventListener('click', (e) => {
|
||||
e.target.querySelector('.spinner').classList.remove('hidden');
|
||||
loadOsmData().then(() => {
|
||||
e.target.querySelector('.spinner').classList.add('hidden');
|
||||
renderData();
|
||||
closeDialog('#dialog_osm');
|
||||
});
|
||||
})
|
||||
|
||||
document.querySelector('#stationsNearMe')
|
||||
.addEventListener('click', async (e) => {
|
||||
e.target.querySelector('.spinner').classList.remove('hidden');
|
||||
if (!sortByDistance) {
|
||||
if (JSON.parse(localStorage.getItem("osm_data")) === null) {
|
||||
openDialog('#dialog_osm');
|
||||
} else {
|
||||
if (geolocationPermission !== 'granted') {
|
||||
allowGeolocation();
|
||||
} else {
|
||||
// If geolocation is already set.
|
||||
// If not the location watcher will re-render our data.
|
||||
if (geolocation !== null) {
|
||||
renderData(geolocation)
|
||||
}
|
||||
sortByDistance = e.target.ariaPressed = true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
sortByDistance = e.target.ariaPressed = false;
|
||||
|
||||
renderData();
|
||||
}
|
||||
e.target.querySelector('.spinner').classList.add('hidden');
|
||||
})
|
||||
|
||||
|
||||
function filterData() {
|
||||
const searchString = document.querySelector('#searchStation').value;
|
||||
const typeU = document.querySelector('button.typeChip[data-type="U"]');
|
||||
const typeS = document.querySelector('button.typeChip[data-type="S"]');
|
||||
const typeA = document.querySelector('button.typeChip[data-type="A"]');
|
||||
const typeR = document.querySelector('button.typeChip[data-type="R"]');
|
||||
const activeTypes = [];
|
||||
if(typeU.ariaPressed === 'true') activeTypes.push('U');
|
||||
if(typeS.ariaPressed === 'true') activeTypes.push('S');
|
||||
if(typeA.ariaPressed === 'true') activeTypes.push('A');
|
||||
if(typeR.ariaPressed === 'true') activeTypes.push('R');
|
||||
if (internalData) {
|
||||
for (const stationIndex in internalData.stations) {
|
||||
const matches = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0;
|
||||
document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !matches);
|
||||
const matchesSearch = internalData.stations[stationIndex].name.toLowerCase().search(searchString.toLowerCase()) >= 0;
|
||||
let matchesType = false;
|
||||
internalData.stations[stationIndex].types.forEach(type => {
|
||||
if(activeTypes.includes(type)) matchesType = true;
|
||||
})
|
||||
document.querySelector(`#station_${stationIndex}`).classList.toggle('hidden', !(matchesSearch && matchesType));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -455,4 +660,36 @@ document.querySelector('#searchStation').addEventListener('input', (e) => {
|
|||
filterData();
|
||||
})
|
||||
|
||||
filterData()
|
||||
document.querySelectorAll('button.typeChip').forEach(e => {
|
||||
e.addEventListener('click', (event) => {
|
||||
e.ariaPressed = e.ariaPressed === 'true' ? 'false' : 'true';
|
||||
filterData();
|
||||
})
|
||||
})
|
||||
|
||||
function openDialog(selector) {
|
||||
document.querySelector('body').classList.add('has-dialog')
|
||||
document.querySelector('#dialog_layer').classList.add('active')
|
||||
document.querySelector(selector).classList.remove('hidden')
|
||||
}
|
||||
|
||||
function closeDialog(selector) {
|
||||
document.querySelector('body').classList.remove('has-dialog')
|
||||
document.querySelector('#dialog_layer').classList.remove('active')
|
||||
document.querySelector(selector).classList.add('hidden')
|
||||
}
|
||||
|
||||
// data api version check
|
||||
const check_internal = JSON.parse(localStorage.getItem("internal_data"));
|
||||
const check_osm = JSON.parse(localStorage.getItem("osm_data"));
|
||||
if (check_internal === null || check_internal.hasOwnProperty('api') && check_internal.api === 'v1') {
|
||||
if (check_osm === null || check_osm.hasOwnProperty('api') && check_osm.api === 'v1') {
|
||||
renderData();
|
||||
} else {
|
||||
console.log('osm_data: version mismatch')
|
||||
localStorage.removeItem('osm_data');
|
||||
}
|
||||
} else {
|
||||
console.log('internal_data: version mismatch')
|
||||
localStorage.removeItem('internal_data');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue