docs

strukturart · Mar 26, 2022 · f80930c · f80930c
1 parent 1e6196f
commit f80930c
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 135 deletions.
diff --git a/application/assets/js/settings.js b/application/assets/js/settings.js
@@ -14,6 +14,8 @@ const settings = ((_) => {
       document.getElementById("export-path").value
     );
 
+    localStorage.setItem("osm-tag", document.getElementById("osm-tag").value);
+
     helper.toaster("saved successfully", 2000);
   };
 
@@ -40,6 +42,7 @@ const settings = ((_) => {
     document.getElementById("cache-time").value = setting.cache_time;
     document.getElementById("cache-zoom").value = setting.cache_zoom;
     document.getElementById("export-path").value = setting.export_path;
+    document.getElementById("osm-tag").value = setting.osm_tag;
 
     setting.tracking_screenlock
       ? (document.getElementById("screenlock-ckb").checked = true)

diff --git a/application/assets/js/wikilocation.js b/application/assets/js/wikilocation.js
@@ -4,16 +4,16 @@
 const wikilocation = (() => {
   let load = function () {
     let source_url =
-      'https://wikipedia.org/w/api.php?action=query&format=json&list=geosearch&gscoord=' +
+      "https://wikipedia.org/w/api.php?action=query&format=json&list=geosearch&gscoord=" +
       mainmarker.current_lat +
-      '|' +
+      "|" +
       mainmarker.current_lng +
-      '&gsradius=10000&gslimit=5';
+      "&gsradius=10000&gslimit=5";
     let xhttp = new XMLHttpRequest({
       mozSystem: true,
     });
 
-    xhttp.open('GET', source_url, true);
+    xhttp.open("GET", source_url, true);
     xhttp.timeout = 5000;
     xhttp.onload = function () {
       if (xhttp.readyState === xhttp.DONE && xhttp.status === 200) {
@@ -33,10 +33,17 @@ const wikilocation = (() => {
       write_error();
     };
 
-    xhttp.send();
-    let el = document.querySelector('div#wikilocation');
+    xhttp.setRequestHeader(
+      "Access-Control-Allow-Origin",
+      "https://strukturart.github.io/o.map/"
+    );
+    xhttp.setRequestHeader("Access-Control-Allow-Credentials", true);
+    xhttp.setRequestHeader("Content-Type", "application/json");
+    xhttp.send(null);
+
+    let el = document.querySelector("div#wikilocation");
     let write_error = function () {
-      el.insertAdjacentHTML('afterbegin', '<div>nothing to show</div>');
+      el.insertAdjacentHTML("afterbegin", "<div>nothing to show</div>");
     };
 
     let write_data = function (json) {
@@ -45,12 +52,12 @@ const wikilocation = (() => {
       }
       json.query.geosearch.forEach(function (element) {
         el.insertAdjacentHTML(
-          'afterbegin',
+          "afterbegin",
           "<button class='link item button' data-href='https://en.m.wikipedia.org/?curid=" +
             element.pageid +
             "'>" +
             element.title +
-            '</button>'
+            "</button>"
         );
       });
     };

diff --git a/application/index.html b/application/index.html
@@ -263,9 +263,17 @@ <h2>Cache</h2>
             </div>
 
             <button  class="item" id="clear-cache" tabindex="8">clear offline cache</button>
-            <h2>connect with openstreetmap</h2>
-            <button class="item" id="oauth" tabindex="8">oauth</button>
-            <button class="item" id="list-osm-gpx" tabindex="8">list</button>
+
+            <h2>openstreetmap.org</h2>
+            <h2>connect with openstreetmap.org</h2>
+            <button class="item" id="oauth" tabindex="8">connect</button>
+
+
+            <div class="item input-parent" tabindex="9">
+                <label for="osm-tag">if you don't want to display all your files from openstreetmap, you can set a tag name which you also use in your files
+                in openstreetmap.</label>
+                <input type="text" id="osm-tag" />
+            </div>
 
 
             <h2>Export</h2>

diff --git a/application/index.js b/application/index.js
@@ -41,6 +41,8 @@ let setting = {
     localStorage.getItem("export-path") != null
       ? localStorage.getItem("export-path")
       : "",
+  osm_tag: localStorage.getItem("osm-tag"),
+
   cache_time: localStorage.getItem("cache-time"),
   cache_zoom: localStorage.getItem("cache-zoom"),
   openweather_api: localStorage.getItem("owm-key"),
@@ -339,8 +341,6 @@ document.addEventListener("DOMContentLoaded", function () {
 
   let osm_server_list_gpx = function () {
     let n = "Bearer " + localStorage.getItem("openstreetmap_token");
-    //let token = "C_6istcvv43Lu6mQqfA0HqVQJ4jC6b_4L7mL6JSsXZs";
-    //n = "Bearer " + token;
 
     const myHeaders = new Headers({
       Authorization: n,
@@ -353,34 +353,55 @@ document.addEventListener("DOMContentLoaded", function () {
       .then((response) => response.text())
       .then((data) => {
         document.querySelector("div#osm-server-gpx").innerHTML = "";
-        //alert(data);
         const parser = new DOMParser();
         const xml = parser.parseFromString(data, "application/xml");
         let s = xml.getElementsByTagName("gpx_file");
+        //filter by tag
         for (let i = 0; i < s.length; i++) {
-          let m = {
-            name: s[i].getAttribute("name"),
-            id: s[i].getAttribute("id"),
-            tag: s[i].childNodes[0].innerText,
-          };
-
-          // alert(m.tag);
-          document
-            .querySelector("div#osm-server-gpx")
-            .insertAdjacentHTML(
-              "afterend",
-              '<div class="item" data-id=' +
-                m.id +
-                ' data-map="gpx-osm">' +
-                m.name +
-                "</div>"
-            );
-          //alert(s[i].getAttribute('name'));
+          if (setting.osm_tag == null || setting.osm_tag == "") {
+            let m = {
+              name: s[i].getAttribute("name"),
+              id: s[i].getAttribute("id"),
+            };
+
+            document
+              .querySelector("div#osm-server-gpx")
+              .insertAdjacentHTML(
+                "afterend",
+                '<div class="item" data-id=' +
+                  m.id +
+                  ' data-map="gpx-osm">' +
+                  m.name +
+                  "</div>"
+              );
+          } else {
+            for (let n = 0; n < s[i].childNodes.length; n++) {
+              if (s[i].childNodes[n].tagName == "tag") {
+                if (s[i].childNodes[n].textContent == setting.osm_tag) {
+                  let m = {
+                    name: s[i].getAttribute("name"),
+                    id: s[i].getAttribute("id"),
+                  };
+
+                  document
+                    .querySelector("div#osm-server-gpx")
+                    .insertAdjacentHTML(
+                      "afterend",
+                      '<div class="item" data-id=' +
+                        m.id +
+                        ' data-map="gpx-osm">' +
+                        m.name +
+                        "</div>"
+                    );
+                }
+              }
+            }
+          }
         }
       })
 
       .catch((error) => {
-        alert(error);
+        console.log(error);
       });
   };
 
@@ -392,42 +413,35 @@ document.addEventListener("DOMContentLoaded", function () {
   }
 
   let osm_server_load_gpx = function (id) {
-    let token = localStorage.getItem("openstreetmap_token");
-    console.log(token);
-    //token = "C_6istcvv43Lu6mQqfA0HqVQJ4jC6b_4L7mL6JSsXZs ";
-    let nn = "Bearer " + token;
-    let url = "https://api.openstreetmap.org/api/0.6/gpx/" + id + "/data";
-    let xmlhttp = new XMLHttpRequest();
-
-    helper.toaster(id, 1000);
-
-    xmlhttp.onreadystatechange = function () {
-      console.log(xmlhttp.getResponseHeader("Location"));
-    };
-
-    xmlhttp.onloadend = function () {
-      console.log(xmlhttp.getResponseHeader("Location"));
-    };
-
-    xmlhttp.onload = function () {
-      console.log(xmlhttp.getResponseHeader("Location"));
-    };
-
-    xmlhttp.onerror = function () {
-      console.log(xmlhttp.getResponseHeader("Location"));
-    };
+    let n = "Bearer " + localStorage.getItem("openstreetmap_token");
 
-    console.log(xmlhttp.status);
+    const myHeaders = new Headers({
+      Authorization: n,
+      Accept: "application/gpx+xml",
+    });
 
-    xmlhttp.open("GET", url, true);
+    return fetch("https://api.openstreetmap.org/api/0.6/gpx/" + id + "/data", {
+      method: "GET",
+      headers: myHeaders,
+    })
+      .then((response) => response.text())
+      .then((data) => {
+        var gpx = data;
+        new L.GPX(gpx, {
+          async: true,
+        })
+          .on("loaded", function (e) {
+            map.fitBounds(e.target.getBounds());
+          })
+          .addTo(map);
 
-    xmlhttp.setRequestHeader("Authorization", nn);
-    xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-    xmlhttp.setRequestHeader("Access-Control-Request-Method", "GET");
-    xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET");
+        document.querySelector("div#finder").style.display = "none";
+        status.windowOpen = "map";
+      })
 
-    xmlhttp.send(null);
-    helper.toaster("done", 1000);
+      .catch((error) => {
+        console.log(error);
+      });
   };
 
   let OAuth_osm = function () {
@@ -440,12 +454,12 @@ document.addEventListener("DOMContentLoaded", function () {
     );
     url.searchParams.append(
       "redirect_uri",
-      "https://strukturart.github.io/o.map/"
+      "https://strukturart.github.io/o.map/oauth.html"
     );
     url.searchParams.append("scope", "read_gpx");
     const windowRef = window.open(url.toString());
 
-    windowRef.addEventListener("tokens", (ev) => alert("got tokens", ev));
+    windowRef.addEventListener("tokens", (ev) => osm_server_list_gpx());
   };
 
   //////////////////////////////////

diff --git a/application/oauth.js b/application/oauth.js
@@ -7,7 +7,10 @@ function getToken() {
   var urlencoded = new URLSearchParams();
   urlencoded.append("code", code);
   urlencoded.append("grant_type", "authorization_code");
-  urlencoded.append("redirect_uri", "https://strukturart.github.io/o.map/");
+  urlencoded.append(
+    "redirect_uri",
+    "https://strukturart.github.io/o.map/oauth.html"
+  );
   urlencoded.append("client_id", "KEcqDV16BjfRr-kYuOyRGmiQcx6YCyRz8T21UjtQWy4");
 
   var requestOptions = {
@@ -25,8 +28,6 @@ function getToken() {
 
 getToken().then((result) => {
   localStorage.setItem("openstreetmap_token", result.access_token);
-  alert(result.access_token);
-
   document.getElementById("success").innerText =
     "you are now successfully connected to the osm service";
 

diff --git a/docs/assets/js/settings.js b/docs/assets/js/settings.js
@@ -14,6 +14,8 @@ const settings = ((_) => {
       document.getElementById("export-path").value
     );
 
+    localStorage.setItem("osm-tag", document.getElementById("osm-tag").value);
+
     helper.toaster("saved successfully", 2000);
   };
 
@@ -40,6 +42,7 @@ const settings = ((_) => {
     document.getElementById("cache-time").value = setting.cache_time;
     document.getElementById("cache-zoom").value = setting.cache_zoom;
     document.getElementById("export-path").value = setting.export_path;
+    document.getElementById("osm-tag").value = setting.osm_tag;
 
     setting.tracking_screenlock
       ? (document.getElementById("screenlock-ckb").checked = true)

diff --git a/docs/assets/js/wikilocation.js b/docs/assets/js/wikilocation.js
@@ -4,16 +4,16 @@
 const wikilocation = (() => {
   let load = function () {
     let source_url =
-      'https://wikipedia.org/w/api.php?action=query&format=json&list=geosearch&gscoord=' +
+      "https://wikipedia.org/w/api.php?action=query&format=json&list=geosearch&gscoord=" +
       mainmarker.current_lat +
-      '|' +
+      "|" +
       mainmarker.current_lng +
-      '&gsradius=10000&gslimit=5';
+      "&gsradius=10000&gslimit=5";
     let xhttp = new XMLHttpRequest({
       mozSystem: true,
     });
 
-    xhttp.open('GET', source_url, true);
+    xhttp.open("GET", source_url, true);
     xhttp.timeout = 5000;
     xhttp.onload = function () {
       if (xhttp.readyState === xhttp.DONE && xhttp.status === 200) {
@@ -33,10 +33,17 @@ const wikilocation = (() => {
       write_error();
     };
 
-    xhttp.send();
-    let el = document.querySelector('div#wikilocation');
+    xhttp.setRequestHeader(
+      "Access-Control-Allow-Origin",
+      "https://strukturart.github.io/o.map/"
+    );
+    xhttp.setRequestHeader("Access-Control-Allow-Credentials", true);
+    xhttp.setRequestHeader("Content-Type", "application/json");
+    xhttp.send(null);
+
+    let el = document.querySelector("div#wikilocation");
     let write_error = function () {
-      el.insertAdjacentHTML('afterbegin', '<div>nothing to show</div>');
+      el.insertAdjacentHTML("afterbegin", "<div>nothing to show</div>");
     };
 
     let write_data = function (json) {
@@ -45,12 +52,12 @@ const wikilocation = (() => {
       }
       json.query.geosearch.forEach(function (element) {
         el.insertAdjacentHTML(
-          'afterbegin',
+          "afterbegin",
           "<button class='link item button' data-href='https://en.m.wikipedia.org/?curid=" +
             element.pageid +
             "'>" +
             element.title +
-            '</button>'
+            "</button>"
         );
       });
     };

diff --git a/docs/index.html b/docs/index.html
@@ -263,9 +263,17 @@ <h2>Cache</h2>
             </div>
 
             <button  class="item" id="clear-cache" tabindex="8">clear offline cache</button>
-            <h2>connect with openstreetmap</h2>
-            <button class="item" id="oauth" tabindex="8">oauth</button>
-            <button class="item" id="list-osm-gpx" tabindex="8">list</button>
+
+            <h2>openstreetmap.org</h2>
+            <h2>connect with openstreetmap.org</h2>
+            <button class="item" id="oauth" tabindex="8">connect</button>
+
+
+            <div class="item input-parent" tabindex="9">
+                <label for="osm-tag">if you don't want to display all your files from openstreetmap, you can set a tag name which you also use in your files
+                in openstreetmap.</label>
+                <input type="text" id="osm-tag" />
+            </div>
 
 
             <h2>Export</h2>