From e4e8d2e1f39e408ecf4d31e7a0744b37ed923d09 Mon Sep 17 00:00:00 2001 From: faace Date: Sun, 14 Jun 2020 13:59:39 -0400 Subject: [PATCH 1/5] download and upload multi locations --- pages/location/index.html | 19 +++++++- pages/location/location.css | 13 +++++ pages/location/location.js | 62 ++++++++++++++++++++++++ pages/location/multiLocationsTemplate.js | 26 ++++++++++ 4 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 pages/location/location.css create mode 100644 pages/location/multiLocationsTemplate.js diff --git a/pages/location/index.html b/pages/location/index.html index 3a4b064..feff7f0 100644 --- a/pages/location/index.html +++ b/pages/location/index.html @@ -9,6 +9,7 @@ + + @@ -66,7 +68,20 @@

1. Pick the location

Click to drop a pin on the map or enter exact GPS coordinates. You may enter up to 10 locations. - You can retrieve latitude and longitude from an address using this tool. + You can retrieve latitude and longitude from an address using this tool. +

+

+ + + If you want to place your creation in more than 10 locations, you may upload your own JSON file by + clicking + here.
+ If you don't know hwo to set up your own JSON file, you can follow this + template. +

+

@@ -115,4 +130,4 @@ - + \ No newline at end of file diff --git a/pages/location/location.css b/pages/location/location.css new file mode 100644 index 0000000..5b7bbc3 --- /dev/null +++ b/pages/location/location.css @@ -0,0 +1,13 @@ +.clickable { + color : blue; + cursor: pointer; +} + +#uploadTpl { + position: fixed; + left : -100px; + filter : alpha(opacity=0); + opacity : 0; + width : 0; + height : 0; +} \ No newline at end of file diff --git a/pages/location/location.js b/pages/location/location.js index 4242957..43b72dc 100644 --- a/pages/location/location.js +++ b/pages/location/location.js @@ -1,5 +1,67 @@ const { Package } = ARjsStudioBackend; +function checkTpl(tpl) { + tpl.showDistance = !!tpl.showDistance; + tpl.showName = !!tpl.showName; + tpl.heightFromGround = parseFloat(tpl.heightFromGround) || 0; + if (tpl.places && tpl.places.length > 0) { + for (let places = tpl.places, i = places.length - 1; i >= 0; i--) { + let one = places[i]; + // one.id ?? + one.name = (one.name || '').trim(); + + one.latitude = parseFloat(one.latitude); + if (isNaN(one.latitude) || one.latitude < -90 || one.latitude > 90) return `The ${i + 1} latitude shoulde be in range of -90 ~ 90`; + + one.longitude = parseFloat(one.longitude); + if (isNaN(one.longitude) || one.longitude < -180 || one.longitude > 180) return `The ${i + 1} longitude shoulde be in range of -90 ~ 90`; + } + } + if (!tpl.places || tpl.places.length < 1) return 'No valid places'; +}; + +function getTplFile(self) { + const tplError = document.getElementById("tpl-error"); + tplError.innerHTML = ''; + + const file = self.files[0]; + const reader = new FileReader(); + reader.readAsText(file); + reader.onloadend = function () { + try { + eval('var tpl=' + reader.result); + let error = checkTpl(tpl); + if (error) { + tplError.innerHTML = '* Your uploaded JSON file is error:
' + error; + } else { + // TODO use this tpl + console.log(tpl); + } + + } catch (error) { + tplError.innerHTML = '* Your uploaded JSON file is error:
' + error.toString(); + } + }; + + + self.value = ''; // Reset required for re-upload +}; + +function uploadLocations() { + var uploadTpl = document.getElementById('uploadTpl'); + uploadTpl.click(); +}; + +function downloadJsonTpl() { + // var tpl = 'aaaa'; + var base64 = btoa(multiLocationsTemplate); + var link = document.createElement('a'); + link.href = `data:application/json;base64,${base64}`; + link.download = "template.json"; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +}; var githubButton = document.querySelector('page-footer').shadowRoot.querySelector('#github-publish'); var zipButton = document.querySelector('page-footer').shadowRoot.querySelector('#zip-publish'); diff --git a/pages/location/multiLocationsTemplate.js b/pages/location/multiLocationsTemplate.js new file mode 100644 index 0000000..ff70490 --- /dev/null +++ b/pages/location/multiLocationsTemplate.js @@ -0,0 +1,26 @@ +window.multiLocationsTemplate = `{ + "showDistance": true, // true/false, if true, show distance from origin (distanceMsg property) for every place + "showName": true, // true/false, if true, show place name for every place + "heightFromGround": 0, // if true, change Y position for every place + "places": [ + { + "id": 0, + "name": "Colosseum", + "latitude": 0.0000, + "longitude": 0.000 + }, + { + "id": 1, + "name": "Arco di Traiano", + "latitude": 0.0000, + "longitude": 0.000 + }, + { + "id": 2, + "name": "Stadio Olimpico", + "latitude": 0.0000, + "longitude": 0.000 + } + // .... + ] +}`; \ No newline at end of file From 247293cc79c156d9cd2ab4e426092c5c03314ec9 Mon Sep 17 00:00:00 2001 From: "nicolo.carpignoli" Date: Mon, 15 Jun 2020 10:01:53 +0200 Subject: [PATCH 2/5] wip automatically add location json --- components/map/map-pick-location.js | 59 ++++++++++++++++++++++++++++- pages/location/index.html | 14 +------ pages/location/location.js | 12 +++--- 3 files changed, 66 insertions(+), 19 deletions(-) diff --git a/components/map/map-pick-location.js b/components/map/map-pick-location.js index bc09f68..9d8cbe0 100644 --- a/components/map/map-pick-location.js +++ b/components/map/map-pick-location.js @@ -192,7 +192,7 @@ class MapPickLocation extends HTMLElement { this.addLatLngInputs(); let addLocation = document.getElementsByClassName('add-location-container'); - addLocation[0].addEventListener('click', function () { + addLocation[0].addEventListener('click', function() { updateLatLngInputs(); }) } @@ -213,11 +213,66 @@ class MapPickLocation extends HTMLElement { updateLocationParam(); }; + window.addEventListener('location-tpl', (ev) => { + const tpl = ev.detail.tpl; + const coordsParent = document.querySelector('.coordinates-input-container'); + + [...coordsParent.childNodes].forEach((a) => a.remove()); + const numTags = document.createElement('div'); + numTags.className = 'input-number-tags'; + + const latElems = document.createElement('div'); + latElems.className = 'latitude-elements'; + + const lngElems = document.createElement('div'); + lngElems.className = 'longitude-elements'; + + coordsParent.append(numTags); // static + coordsParent.append(latElems); // static + coordsParent.append(lngElems); // static + + tpl.places.forEach((place) => { + const numTags = document.querySelector('.input-number-tags'); + const latElems = document.querySelector('.latitude-elements'); + const lngElems = document.querySelector('.longitude-elements'); + + const latElemLabel = document.createElement('label'); + latElemLabel.for = 'latitude'; + latElemLabel.innerHTML = 'Latitude:'; + + const lngElemLabel = document.createElement('label'); + lngElemLabel.for = 'longitude'; + lngElemLabel.innerHTML = 'Longitude:' + + latElems.append(latElemLabel); // static + lngElems.append(lngElemLabel); // static + coordsParent.append(numTags); // static + coordsParent.append(latElems); // static + coordsParent.append(lngElems); // static + + latElems.value = place.latitude; + lngElems.value = place.longitude; + + [...latElems.querySelectorAll('input')].forEach((elem) => elem.setAttribute('name', place.id + 1)); + [...lngElems.querySelectorAll('input')].forEach((elem) => elem.setAttribute('name', place.id + 1)); + + let numTag = document.createElement('p'); + numTag.innerHTML = place.id + 1 + '.'; + numTag.className = "num-tags"; + + numTags.append(numTag); + latElems.append(createInput('latitude', 1)) + lngElems.append(createInput('longitude', 1)) + + updateLocationParam(); + }); + }); + map = L.map(this.mapRoot).setView(this.mapConfig.center, this.mapConfig.onLoad_zoom); layerGroup = L.layerGroup().addTo(map); L.tileLayer(tile_url, this.mapConfig.attribution_opts).addTo(map); window.locationNumber = 1; - map.on('click', function (e) { // => {} that contains the coordinates + map.on('click', function(e) { // => {} that contains the coordinates array.push({ id: 'mapclick_' + window.locationNumber, coords: [e.latlng.lat, e.latlng.lng], diff --git a/pages/location/index.html b/pages/location/index.html index feff7f0..c21f914 100644 --- a/pages/location/index.html +++ b/pages/location/index.html @@ -68,7 +68,7 @@

1. Pick the location

Click to drop a pin on the map or enter exact GPS coordinates. You may enter up to 10 locations. - You can retrieve latitude and longitude from an address using this tool.

@@ -84,16 +84,6 @@

-
- -
@@ -130,4 +120,4 @@ - \ No newline at end of file + diff --git a/pages/location/location.js b/pages/location/location.js index 43b72dc..b952ce8 100644 --- a/pages/location/location.js +++ b/pages/location/location.js @@ -32,14 +32,17 @@ function getTplFile(self) { eval('var tpl=' + reader.result); let error = checkTpl(tpl); if (error) { - tplError.innerHTML = '* Your uploaded JSON file is error:
' + error; + tplError.innerHTML = '* Your uploaded JSON file got a problem:
' + error; } else { - // TODO use this tpl - console.log(tpl); + window.dispatchEvent(new CustomEvent('location-tpl', { + detail: { + tpl, + } + })); } } catch (error) { - tplError.innerHTML = '* Your uploaded JSON file is error:
' + error.toString(); + tplError.innerHTML = '* Your uploaded JSON file has got a problem:
' + error.toString(); } }; @@ -53,7 +56,6 @@ function uploadLocations() { }; function downloadJsonTpl() { - // var tpl = 'aaaa'; var base64 = btoa(multiLocationsTemplate); var link = document.createElement('a'); link.href = `data:application/json;base64,${base64}`; From 1ce4bdf590045c7145a49924651dd6104bd846c6 Mon Sep 17 00:00:00 2001 From: "nicolo.carpignoli" Date: Tue, 8 Sep 2020 09:28:51 +0200 Subject: [PATCH 3/5] added disclaimers for filename whitespaces and chrome on mac --- pages/location/index.html | 3 +++ pages/marker/index.html | 3 +++ pages/publish-confirm/publish-confirm.js | 5 +++++ pages/publish/publish.css | 4 ---- style.css | 5 +++++ 5 files changed, 16 insertions(+), 4 deletions(-) diff --git a/pages/location/index.html b/pages/location/index.html index 4890650..0fc9044 100644 --- a/pages/location/index.html +++ b/pages/location/index.html @@ -95,6 +95,9 @@

Select the type of content you would like to link to your marker and then upload the file from your computer.

+

+ Please check the file name and remove whitepaces. +