From 15182de590f8251b807d43b9709b6ec1c995ed36 Mon Sep 17 00:00:00 2001 From: strukturart Date: Sun, 14 Jan 2024 23:03:53 +0100 Subject: [PATCH] upload file --- application/assets/js/helper.js | 20 +++--- application/assets/js/module.js | 65 +++++++++++------- application/assets/js/osm.js | 22 +++--- application/assets/js/overpass.js | 3 +- application/index.html | 2 +- application/index.js | 22 ++++-- application/manifest.webapp | 2 +- application/manifest.webmanifest | 2 +- application/oauth.js | 3 +- docs/assets/js/helper.js | 20 +++--- docs/assets/js/module.js | 75 ++++++++++++++------- docs/assets/js/osm.js | 22 +++--- docs/assets/js/overpass.js | 107 +++++++++++++++++++----------- docs/index.html | 2 +- docs/index.js | 24 +++++-- docs/manifest.webapp | 2 +- docs/manifest.webmanifest | 2 +- docs/oauth.js | 3 +- 18 files changed, 250 insertions(+), 148 deletions(-) diff --git a/application/assets/js/helper.js b/application/assets/js/helper.js index 8a14c170..7edcdfca 100644 --- a/application/assets/js/helper.js +++ b/application/assets/js/helper.js @@ -383,17 +383,17 @@ const helper = (() => { document.querySelector("div#top-bar").style.display = "block"; } } + function wakeLock(param, lock_type) { + if ("requestWakeLock" in navigator) { + let lock; - function screenWakeLock(param, lock_type) { - let lock; - if (window.navigator.requestWakeLock == "is not a function") return false; - if (param == "lock") { - lock = window.navigator.requestWakeLock(lock_type); - return false; - } + if (param === "lock") { + lock = window.navigator.requestWakeLock(lock_type); - if (param == "unlock") { - if (lock.topic == lock_type) { + if ("b2g" in Navigator) { + lock = navigator.b2g.requestWakeLock(lock_type); + } + } else if (param === "unlock" && lock && lock.topic === lock_type) { lock.unlock(); } } @@ -404,7 +404,7 @@ const helper = (() => { return { bottom_bar, top_bar, - screenWakeLock, + wakeLock, calculateDatabaseSizeInMB, getManifest, toaster, diff --git a/application/assets/js/module.js b/application/assets/js/module.js index cfa75a44..19ae0400 100644 --- a/application/assets/js/module.js +++ b/application/assets/js/module.js @@ -138,7 +138,7 @@ const module = (() => { ///////////////////////// /////Load GPX/////////// /////////////////////// - function loadGPX(filename, url) { + function loadGPX(filename, url, move_to = true) { if (url) { new L.GPX(url, { async: true, @@ -152,8 +152,10 @@ const module = (() => { }) .addTo(gpx_group); - document.querySelector("div#finder").style.display = "none"; - status.windowOpen = "map"; + if (move_to) { + document.querySelector("div#finder").style.display = "none"; + status.windowOpen = "map"; + } } if (filename) { @@ -205,8 +207,10 @@ const module = (() => { }) .addTo(gpx_group); - document.querySelector("div#finder").style.display = "none"; - status.windowOpen = "map"; + if (move_to) { + document.querySelector("div#finder").style.display = "none"; + status.windowOpen = "map"; + } }; reader.readAsText(r); @@ -265,7 +269,7 @@ const module = (() => { ///////////////////////// /////Load GeoJSON/////////// /////////////////////// - let loadGeoJSON = function (filename, callback) { + let loadGeoJSON = function (filename, callback, move_to = true) { //file reader try { let sdcard = navigator.getDeviceStorage("sdcard"); @@ -364,9 +368,10 @@ const module = (() => { // Popup }).addTo(geoJSON_group); - - document.querySelector("div#finder").style.display = "none"; - status.windowOpen = "map"; + if (move_to) { + document.querySelector("div#finder").style.display = "none"; + status.windowOpen = "map"; + } }; reader.readAsText(r); @@ -546,6 +551,24 @@ const module = (() => { map.fitBounds(gpx_selection[gpx_selection_count].getBounds()); let m = gpx_selection[gpx_selection_count].getLayers(); + var parser = new DOMParser(); + var xmlDoc = parser.parseFromString( + gpx_selection[gpx_selection_count]._gpx, + "text/xml" + ); + + var eleElements = xmlDoc.getElementsByTagName("ele"); + + let altitudes = []; + for (var i = 0; i < eleElements.length; i++) { + var currentElement = eleElements[i]; + altitudes.push(currentElement.textContent); + } + + const { gain, loss } = calculateGainAndLoss(altitudes); + + console.log(gain, loss); + const keys = Object.keys(m[0]._layers); const firstKey = keys[0]; general.gpx_selection_latlng = m[0]._layers[firstKey]._latlngs; @@ -553,14 +576,9 @@ const module = (() => { //store info in object gpx_selection_info.duration = gpx_selection[gpx_selection_count]._info.duration.total; - gpx_selection_info.elevation_gain = - gpx_selection[gpx_selection_count]._info.elevation.gain; - - gpx_selection_info.elevation_loss = - gpx_selection[gpx_selection_count]._info.elevation.loss; + gpx_selection_info.elevation_gain = gain; - gpx_selection_info.elevation_loss = - gpx_selection[gpx_selection_count]._info.elevation.loss; + gpx_selection_info.elevation_loss = loss; gpx_selection_info.distance = gpx_selection[gpx_selection_count]._info.length; @@ -799,7 +817,6 @@ const module = (() => { let tracking_cache = []; //let gps_lock; let tracking_altitude = []; - let calc = 0; let tracking = { duration: "" }; let polyline = L.polyline(latlngs, path_option).addTo(measure_group_path); let polyline_tracking = L.polyline(tracking_latlngs, path_option).addTo( @@ -900,10 +917,7 @@ const module = (() => { if (action == "tracking") { status.tracking_running = true; - if ("requestWakeLock" in navigator) { - if (setting.tracking_screenlock) - helper.screenWakeLock("lock", "screen"); - } + if (setting.tracking_screenlock) helper.wakeLock("lock", "screen"); if (localStorage.getItem("tracking_cache") !== null) { if ( @@ -1098,7 +1112,11 @@ const module = (() => { //Upload gpx file every 5min, unfortunately the update function doesn't work, so I have to combine create/delete if (status.live_track) { if (status.live_track_file_created == false) { - osm.osm_server_upload_gpx("live_track.gpx", toGPX(), false); + const currentDate = new Date(); + const isoString = currentDate.toISOString(); + const a = isoString.substring(0, 10); + + osm.osm_server_upload_gpx("live_track.gpx-" + a, toGPX(), false); status.live_track_file_created = true; } else { let calc_dif = @@ -1110,7 +1128,8 @@ const module = (() => { osm.osm_delete_gpx(e, false); }); - osm.osm_server_upload_gpx("live_track.gpx", toGPX(), false); + osm.osm_server_upload_gpx("live_track.gpx-" + a, toGPX(), false); + status.tracking_backupup_at = new Date().getTime() / 1000; } } diff --git a/application/assets/js/osm.js b/application/assets/js/osm.js index 3b0f82ca..779d1f2b 100644 --- a/application/assets/js/osm.js +++ b/application/assets/js/osm.js @@ -17,7 +17,7 @@ const osm = (() => { type: "application/gpx", }); - if (notify) helper.side_toaster("try uploading file", 5000); + //if (notify) helper.side_toaster("try uploading file", 5000); let formData = new FormData(); formData.append("description", "uploaded from o.map"); @@ -31,8 +31,8 @@ const osm = (() => { }) .then((response) => response.text()) .then((data) => { + if (notify) helper.side_toaster("file uploaded", 4000); status.live_track_id.push(data); - if (notify == true) helper.side_toaster("file uploaded", 4000); }) .catch((error) => { @@ -110,9 +110,10 @@ const osm = (() => { xhr.setRequestHeader("Authorization", n); xhr.onload = function () { + helper.side_toaster("file uploaded", 5000); + if (xhr.status === 200) { const data = xhr.responseText; - helper.side_toaster("file updated", 2000); } else { const error = "Error: " + xhr.status; helper.side_toaster(error, 4000); @@ -272,12 +273,15 @@ const osm = (() => { id: s[i].getAttribute("id"), }; - files.push({ - name: "_" + m.name, - path: m.id, - id: m.id, - type: "osm_sever", - }); + if (!files.some((file) => file.id === m.id)) { + // If not present, add it to the array + files.push({ + name: m.name, + path: m.id, + id: m.id, + type: "osm_sever", + }); + } files.sort((a, b) => { return b.name.localeCompare(a.name); diff --git a/application/assets/js/overpass.js b/application/assets/js/overpass.js index 40bf357b..07a0830f 100644 --- a/application/assets/js/overpass.js +++ b/application/assets/js/overpass.js @@ -124,6 +124,7 @@ const overpass = (() => { fetchDataWithXHR( resultUrl, function (data) { + console.log(data); if (data.elements.length === 0) { helper.side_toaster("no data", 4000); document.querySelector(".loading-spinner").style.display = "none"; @@ -131,7 +132,7 @@ const overpass = (() => { return false; } - if (data.elements.length > 80000) { + if (data.elements.length > 50000) { helper.side_toaster( "There is too much data to process, please use a different zoom level", 6000 diff --git a/application/index.html b/application/index.html index 62be4f94..5123e49a 100644 --- a/application/index.html +++ b/application/index.html @@ -288,7 +288,7 @@

Unit of measurement

Tracking

The screen should not be switched off during tracking ? { document.querySelector("div#top-bar").style.display = "block"; } } + function wakeLock(param, lock_type) { + if ("requestWakeLock" in navigator) { + let lock; - function screenWakeLock(param, lock_type) { - let lock; - if (window.navigator.requestWakeLock == "is not a function") return false; - if (param == "lock") { - lock = window.navigator.requestWakeLock(lock_type); - return false; - } + if (param === "lock") { + lock = window.navigator.requestWakeLock(lock_type); - if (param == "unlock") { - if (lock.topic == lock_type) { + if ("b2g" in Navigator) { + lock = navigator.b2g.requestWakeLock(lock_type); + } + } else if (param === "unlock" && lock && lock.topic === lock_type) { lock.unlock(); } } @@ -404,7 +404,7 @@ const helper = (() => { return { bottom_bar, top_bar, - screenWakeLock, + wakeLock, calculateDatabaseSizeInMB, getManifest, toaster, diff --git a/docs/assets/js/module.js b/docs/assets/js/module.js index 70c6d501..19ae0400 100644 --- a/docs/assets/js/module.js +++ b/docs/assets/js/module.js @@ -138,7 +138,7 @@ const module = (() => { ///////////////////////// /////Load GPX/////////// /////////////////////// - function loadGPX(filename, url) { + function loadGPX(filename, url, move_to = true) { if (url) { new L.GPX(url, { async: true, @@ -152,8 +152,10 @@ const module = (() => { }) .addTo(gpx_group); - document.querySelector("div#finder").style.display = "none"; - status.windowOpen = "map"; + if (move_to) { + document.querySelector("div#finder").style.display = "none"; + status.windowOpen = "map"; + } } if (filename) { @@ -205,8 +207,10 @@ const module = (() => { }) .addTo(gpx_group); - document.querySelector("div#finder").style.display = "none"; - status.windowOpen = "map"; + if (move_to) { + document.querySelector("div#finder").style.display = "none"; + status.windowOpen = "map"; + } }; reader.readAsText(r); @@ -265,7 +269,7 @@ const module = (() => { ///////////////////////// /////Load GeoJSON/////////// /////////////////////// - let loadGeoJSON = function (filename, callback) { + let loadGeoJSON = function (filename, callback, move_to = true) { //file reader try { let sdcard = navigator.getDeviceStorage("sdcard"); @@ -364,9 +368,10 @@ const module = (() => { // Popup }).addTo(geoJSON_group); - - document.querySelector("div#finder").style.display = "none"; - status.windowOpen = "map"; + if (move_to) { + document.querySelector("div#finder").style.display = "none"; + status.windowOpen = "map"; + } }; reader.readAsText(r); @@ -386,7 +391,6 @@ const module = (() => { let select_marker = function () { index++; let markers_collection = []; //makers in map boundingbox - let polyline_collection = []; // Reset contained list overpass_group.eachLayer(function (l) { @@ -420,6 +424,7 @@ const module = (() => { //show selected marker map.setView(markers_collection[index].getLatLng()); + console.log(markers_collection[index]); //popup document.querySelector("input#popup").value = ""; @@ -492,10 +497,18 @@ const module = (() => { map.setView(polyline_collection[index_polyline].getCenter()); + // console.log(polyline_collection[index_polyline].markers); + /* hh.getLatLngs().forEach((e) => { L.marker(e) .addTo(selected_polyline_markers_group) .setIcon(maps.public_transport); + });*/ + + polyline_collection[index_polyline].markers.forEach((e) => { + L.marker(e.latlng) + .addTo(selected_polyline_markers_group) + .setIcon(maps.public_transport); }); } catch (e) {} @@ -538,6 +551,24 @@ const module = (() => { map.fitBounds(gpx_selection[gpx_selection_count].getBounds()); let m = gpx_selection[gpx_selection_count].getLayers(); + var parser = new DOMParser(); + var xmlDoc = parser.parseFromString( + gpx_selection[gpx_selection_count]._gpx, + "text/xml" + ); + + var eleElements = xmlDoc.getElementsByTagName("ele"); + + let altitudes = []; + for (var i = 0; i < eleElements.length; i++) { + var currentElement = eleElements[i]; + altitudes.push(currentElement.textContent); + } + + const { gain, loss } = calculateGainAndLoss(altitudes); + + console.log(gain, loss); + const keys = Object.keys(m[0]._layers); const firstKey = keys[0]; general.gpx_selection_latlng = m[0]._layers[firstKey]._latlngs; @@ -545,14 +576,9 @@ const module = (() => { //store info in object gpx_selection_info.duration = gpx_selection[gpx_selection_count]._info.duration.total; - gpx_selection_info.elevation_gain = - gpx_selection[gpx_selection_count]._info.elevation.gain; - - gpx_selection_info.elevation_loss = - gpx_selection[gpx_selection_count]._info.elevation.loss; + gpx_selection_info.elevation_gain = gain; - gpx_selection_info.elevation_loss = - gpx_selection[gpx_selection_count]._info.elevation.loss; + gpx_selection_info.elevation_loss = loss; gpx_selection_info.distance = gpx_selection[gpx_selection_count]._info.length; @@ -791,7 +817,6 @@ const module = (() => { let tracking_cache = []; //let gps_lock; let tracking_altitude = []; - let calc = 0; let tracking = { duration: "" }; let polyline = L.polyline(latlngs, path_option).addTo(measure_group_path); let polyline_tracking = L.polyline(tracking_latlngs, path_option).addTo( @@ -892,10 +917,7 @@ const module = (() => { if (action == "tracking") { status.tracking_running = true; - if ("requestWakeLock" in navigator) { - if (setting.tracking_screenlock) - helper.screenWakeLock("lock", "screen"); - } + if (setting.tracking_screenlock) helper.wakeLock("lock", "screen"); if (localStorage.getItem("tracking_cache") !== null) { if ( @@ -1090,7 +1112,11 @@ const module = (() => { //Upload gpx file every 5min, unfortunately the update function doesn't work, so I have to combine create/delete if (status.live_track) { if (status.live_track_file_created == false) { - osm.osm_server_upload_gpx("live_track.gpx", toGPX(), false); + const currentDate = new Date(); + const isoString = currentDate.toISOString(); + const a = isoString.substring(0, 10); + + osm.osm_server_upload_gpx("live_track.gpx-" + a, toGPX(), false); status.live_track_file_created = true; } else { let calc_dif = @@ -1102,7 +1128,8 @@ const module = (() => { osm.osm_delete_gpx(e, false); }); - osm.osm_server_upload_gpx("live_track.gpx", toGPX(), false); + osm.osm_server_upload_gpx("live_track.gpx-" + a, toGPX(), false); + status.tracking_backupup_at = new Date().getTime() / 1000; } } diff --git a/docs/assets/js/osm.js b/docs/assets/js/osm.js index 3b0f82ca..779d1f2b 100644 --- a/docs/assets/js/osm.js +++ b/docs/assets/js/osm.js @@ -17,7 +17,7 @@ const osm = (() => { type: "application/gpx", }); - if (notify) helper.side_toaster("try uploading file", 5000); + //if (notify) helper.side_toaster("try uploading file", 5000); let formData = new FormData(); formData.append("description", "uploaded from o.map"); @@ -31,8 +31,8 @@ const osm = (() => { }) .then((response) => response.text()) .then((data) => { + if (notify) helper.side_toaster("file uploaded", 4000); status.live_track_id.push(data); - if (notify == true) helper.side_toaster("file uploaded", 4000); }) .catch((error) => { @@ -110,9 +110,10 @@ const osm = (() => { xhr.setRequestHeader("Authorization", n); xhr.onload = function () { + helper.side_toaster("file uploaded", 5000); + if (xhr.status === 200) { const data = xhr.responseText; - helper.side_toaster("file updated", 2000); } else { const error = "Error: " + xhr.status; helper.side_toaster(error, 4000); @@ -272,12 +273,15 @@ const osm = (() => { id: s[i].getAttribute("id"), }; - files.push({ - name: "_" + m.name, - path: m.id, - id: m.id, - type: "osm_sever", - }); + if (!files.some((file) => file.id === m.id)) { + // If not present, add it to the array + files.push({ + name: m.name, + path: m.id, + id: m.id, + type: "osm_sever", + }); + } files.sort((a, b) => { return b.name.localeCompare(a.name); diff --git a/docs/assets/js/overpass.js b/docs/assets/js/overpass.js index 6d005abd..07a0830f 100644 --- a/docs/assets/js/overpass.js +++ b/docs/assets/js/overpass.js @@ -24,10 +24,12 @@ const overpass = (() => { let public_transport = false; let relation_query = "[" + overpassQuery + "]"; - let way_query = overpassQuery; + let way_query = "[" + overpassQuery + "]"; + let node_query = "[" + overpassQuery + "]"; if (overpassQuery.indexOf("public_transport") > -1) { + node_query = "['public_transport'='stop_position']['bus'='yes']"; relation_query = "['type'='route']['route'='bus']"; - way_query = "public_transport=platform"; + way_query = "['public_transport'='stop_platform']['bus'='yes']"; public_transport = true; } @@ -37,7 +39,6 @@ const overpass = (() => { overpass_group.eachLayer(function (layer) { if (layer.tag === overpassQuery) { - console.log("try"); overpass_group.removeLayer(layer._leaflet_id); } }); @@ -57,20 +58,20 @@ const overpass = (() => { let s = map.getBounds().getSouth(); var bounds = s + "," + w + "," + n + "," + e; - var nodeQuery = "(node[" + overpassQuery + "](" + bounds + ");"; - var wayQuery = "way[" + way_query + "](" + bounds + ");"; + var nodeQuery = "(node" + node_query + "(" + bounds + ");"; + var wayQuery = "way" + way_query + "(" + bounds + ");"; var relationQuery = "relation" + relation_query + "(" + bounds + ");)"; var query = "?data=[out:json][timeout:25];" + nodeQuery + wayQuery + relationQuery + - ";out;>;out skel%3b"; + ";out body;>;out skel%3b"; var baseUrl = "https://overpass-api.de/api/interpreter"; var resultUrl = baseUrl + query; let segmentCoords = []; - let history = ""; + let segmentCoordsMarker = []; function fetchDataWithXHR(resultUrl, callback, errorCallback) { var xhr = new XMLHttpRequest(); xhr.open("GET", resultUrl, true); @@ -123,6 +124,7 @@ const overpass = (() => { fetchDataWithXHR( resultUrl, function (data) { + console.log(data); if (data.elements.length === 0) { helper.side_toaster("no data", 4000); document.querySelector(".loading-spinner").style.display = "none"; @@ -130,17 +132,18 @@ const overpass = (() => { return false; } - if (data.elements.length > 80000) { + if (data.elements.length > 50000) { helper.side_toaster( "There is too much data to process, please use a different zoom level", 6000 ); document.querySelector(".loading-spinner").style.display = "none"; } else { + // console.log(data); + for (let i = 0; i < data.elements.length; i++) { const element = data.elements[i]; - // Your existing logic here if (element.type === "node" && !public_transport) { let k = L.marker([element.lat, element.lon]) .addTo(overpass_group) @@ -156,50 +159,72 @@ const overpass = (() => { // Your logic for ways } + if (element.type === "way" && public_transport) { + // if (element.tags.name) console.log(element); + } + + //public transport if (element.type === "relation" && public_transport) { let f = element; - element.members.forEach((e) => { + //relation name + let relation_name = + f.tags.name !== undefined && f.tags.name !== null + ? f.tags.name + : ""; + //color + let color = + f.tags.colour !== undefined && f.tags.colour !== null + ? f.tags.colour + : generateRandomColor(); + + element.members.forEach((e, index) => { let m = data.elements.find((m) => m.id === e.ref); - let hh = ""; - try { - hh = m.tags.name; - } catch (e) {} + if (m && m.type === "node") { + if (e.role == "stop") { + segmentCoordsMarker.push({ + id: m.id, + latlng: [m.lat, m.lon], + }); + } + } if (m && m.type === "way") { + m.nodes.forEach((e) => { + let m = data.elements.find((m) => m.id === e); + + segmentCoords.push({ + id: m.id, + latlng: [m.lat, m.lon], + color: color, + name: relation_name, + }); + }); } - if (m && m.type === "node") { - //todo add tags.name as popoup - segmentCoords.push({ - latlng: [m.lat, m.lon], - popup: hh, + if (index === element.members.length - 1) { + let h = L.polyline( + segmentCoords.map((coord) => coord.latlng), + { + color: color, + weight: 4, + } + ); + + var popup = L.popup({ + maxWidth: "80%", }); - if (f.id !== history) { - segmentCoords.pop(); - let h = L.polyline( - segmentCoords.map((coord) => coord.latlng), - { - color: generateRandomColor(), - } - ); - - var popup = L.popup({ - maxWidth: "80%", - }); - - popup.setContent(f.tags.name); + popup.setContent(relation_name); - h.bindPopup(popup); - h.tag = overpassQuery; + h.bindPopup(popup); + h.tag = overpassQuery; + h.markers = segmentCoordsMarker; - h.addTo(overpass_group); - segmentCoords = []; - } - - history = f.id; + h.addTo(overpass_group); + segmentCoords = []; + segmentCoordsMarker = []; } }); } @@ -212,6 +237,8 @@ const overpass = (() => { } }, function (err) { + document.querySelector(".loading-spinner").style.display = "none"; + helper.side_toaster("something went wrong, try again" + err, 6000); } ); diff --git a/docs/index.html b/docs/index.html index 62be4f94..5123e49a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -288,7 +288,7 @@

Unit of measurement

Tracking

The screen should not be switched off during tracking ? { if (e.type == "gpx") { document.getElementById("gpx-title").style.display = "block"; @@ -475,7 +477,11 @@ document.addEventListener("DOMContentLoaded", function () { // Load gpx file on start if (e.name.substring(0, 1) == "_") { - module.loadGPX(e.path); + if (status.windowOpen == "map") { + module.loadGPX(e.path, false, true); + } else { + module.loadGPX(e.path, false, false); + } } } @@ -497,7 +503,11 @@ document.addEventListener("DOMContentLoaded", function () { // Load startup item if (e.name.substring(0, 1) == "_") { - module.loadGeoJSON(e.path, false); + if (status.windowOpen == "map") { + module.loadGeoJSON(e.path, false, true); + } else { + module.loadGeoJSON(e.path, false, false); + } } } diff --git a/docs/manifest.webapp b/docs/manifest.webapp index b4c46c19..9df520eb 100644 --- a/docs/manifest.webapp +++ b/docs/manifest.webapp @@ -1,5 +1,5 @@ { - "version": "1.9.782", + "version": "1.9.791", "version_name": "hotline", "name": "o.map", "description": "O.map, your ultimate navigation companion for KaiOS-powered devices. O.map is a lightweight and feature-rich map application designed specifically for KaiOS, enabling you to explore and navigate the world with ease. Whether you're a local resident, a tourist, or an adventurer, O.map is here to enhance your journey and keep you on the right track.", diff --git a/docs/manifest.webmanifest b/docs/manifest.webmanifest index b2ffc351..d47957d1 100644 --- a/docs/manifest.webmanifest +++ b/docs/manifest.webmanifest @@ -21,7 +21,7 @@ ], "b2g_features": { - "version": "2.0.87", + "version": "2.0.95", "id": "o.map", "core": true, "categories": ["utilities"], diff --git a/docs/oauth.js b/docs/oauth.js index 6d836bca..a9f725d7 100644 --- a/docs/oauth.js +++ b/docs/oauth.js @@ -1,10 +1,11 @@ function getToken() { - const code = location.search.split("?code=")[1]; + let code = location.search.split("?code=")[1]; var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/x-www-form-urlencoded"); var urlencoded = new URLSearchParams(); + urlencoded.append("code", code); urlencoded.append("grant_type", "authorization_code"); urlencoded.append(