WIP Location json

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],

pages/location/index.html

@@ -9,6 +9,7 @@
 
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="../../style.css" />
+    <link rel="stylesheet" href="./location.css" />
 
     <!-- import the leaflet css and script -->
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin=""
@@ -41,6 +42,7 @@
     <script src="../../utils/fileHelper.js"></script>
     <script src="../../utils/fileTemplate.js"></script>
     <script src="../../utils/fileHandler.js"></script>
+    <script src="./multiLocationsTemplate.js" defer></script>
     <script src="./location.js" defer></script>
 </head>
 
@@ -66,19 +68,22 @@
                 <p class="lead">1. Pick the location</p>
                 <p class="paragraph">
                     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 <a href="https://www.latlong.net/" class="link">this tool</a>.
+                    You can retrieve latitude and longitude from an address using <a target="_blank" href="https://www.latlong.net/"
+                        class="link">this tool</a>.
+                </p>
+                <p>
+                    <input type="file" id="uploadTpl" accept="application/JSON" hidden onchange="getTplFile(this)" />
+
+                    If you want to place your creation in more than 10 locations, you may upload your own JSON file by
+                    clicking
+                    <span class="clickable" onclick="uploadLocations()">here</span>.<br />
+                    If you don't know hwo to set up your own JSON file, you can follow <span class="clickable"
+                        onclick="downloadJsonTpl()">this
+                        template</span>.
+                </p>
+                <p id="tpl-error" class="error"></p>
                 </p>
                 <div class="coordinates-input-wrapper">
-                    <div class="coordinates-input-container">
-                        <!-- <div>
-                            <label for="latitude">Latitude:</label>
-                            <input class="text-input" type="text" id="latitude" onblur="check_lat_lon()" name="latitude" />
-                        </div>
-                        <div>
-                            <label for="longitude">Longitude:</label>
-                            <input class="text-input" type="text" id="longitude" onblur="check_lat_lon()" name="longitude" />
-                        </div> -->
-                    </div>
                 </div>
             </div>
         </div>

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;
+}

pages/location/location.js

@@ -1,5 +1,69 @@
 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 got a problem: <br/>' + error;
+            } else {
+                window.dispatchEvent(new CustomEvent('location-tpl', {
+                    detail: {
+                        tpl,
+                    }
+                }));
+            }
+
+        } catch (error) {
+            tplError.innerHTML = '* Your uploaded JSON file has got a problem: <br/>' + error.toString();
+        }
+    };
+
+
+    self.value = ''; // Reset required for re-upload
+};
+
+function uploadLocations() {
+    var uploadTpl = document.getElementById('uploadTpl');
+    uploadTpl.click();
+};
+
+function downloadJsonTpl() {
+    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');
 

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
+        }
+        // ....
+    ]
+}`;