From dc7e04cc76bac9fcc99c403f94dba42088e781af Mon Sep 17 00:00:00 2001
From: jeffmer <jeffmer@users.noreply.github.com>
Date: Sun, 17 May 2020 11:57:09 +0100
Subject: [PATCH] Add waypoints editor

---
 apps/gpsnav/waypoints.html | 170 +++++++++++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 apps/gpsnav/waypoints.html
diff --git a/apps/gpsnav/waypoints.html b/apps/gpsnav/waypoints.html
new file mode 100644
index 000000000..483b933f4
--- /dev/null
+++ b/apps/gpsnav/waypoints.html
@@ -0,0 +1,170 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/spectre-icons.min.css">
+  </head>
+  <body>
+
+    <h4>List of waypoints</h4>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Lat.</th>
+          <th>Long.</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody id="waypoints">
+        
+      </tbody>
+    </table>
+    <br>
+    <h4>Add a new waypoint</h4>
+    <form id="add_waypoint_form">
+      <div class="columns">
+        <div class="column col-3 col-xs-8">
+          <input class="form-input input-sm" type="text" id="add_waypoint_name" placeholder="Name">
+        </div>
+        <div class="column col-3 col-xs-8">
+          <input class="form-input input-sm" value="0.0000" type="number" step="any" id="add_latitude" placeholder="Lat">
+        </div>
+        <div class="column col-3 col-xs-8">
+          <input class="form-input input-sm" value="0.0000" type="number" step="any" id="add_longtitude" placeholder="Long">
+        </div>
+      </div>
+      <div class="columns">
+        <div class="column col-3 col-xs-8">
+          <button id="add_name_button" class="btn btn-primary btn-sm">Add Name Only</button>
+        </div>
+        <div class="column col-3 col-xs-8">
+          <button id="add_waypoint_button" class="btn btn-primary btn-sm">Add Waypoint</button>
+        </div>
+      </div>
+    </form>
+    <br>
+    <button id="Download" class="btn btn-error">Reload</button> <button id="Upload" class="btn btn-primary">Upload</button>
+    
+    <script src="../../lib/interface.js"></script>
+
+    <script>
+
+      var waypoints = []
+
+      var $name = document.getElementById('add_waypoint_name')
+      var $form = document.getElementById('add_waypoint_form')
+      var $button = document.getElementById('add_waypoint_button')
+      var $name_button = document.getElementById('add_name_button')
+      var $latitude = document.getElementById('add_latitude')
+      var $longtitude = document.getElementById('add_longtitude')
+      var $list = document.getElementById('waypoints')
+
+      function compare(a, b){
+            var x = a.name.toLowerCase();
+            var y = b.name.toLowerCase();
+            if (x=="none") {return -1};
+            if (y=="none") {return 1};
+            if (x < y) {return -1;}
+            if (x > y) {return 1;}
+            return 0;
+        }
+
+      $button.addEventListener('click', event => {
+        event.preventDefault()       
+        var name = $name.value.trim()
+        if(!name) return;
+        var lat = parseFloat($latitude.value).toPrecision(5);
+        var lon = parseFloat($longtitude.value).toPrecision(5);
+
+        waypoints.push({
+          name, lat,lon,
+        });
+        
+        waypoints.sort(compare);
+
+        renderWaypoints()
+        $name.value = ''
+        $latitude.value = (0).toPrecision(5);
+        $longtitude.value = (0).toPrecision(5);
+      });
+
+      $name_button.addEventListener('click', event => {
+        event.preventDefault()       
+        var name = $name.value.trim()
+        if(!name) return;
+
+        waypoints.push({
+          name
+        });
+        waypoints.sort(compare);
+
+        renderWaypoints()
+        $name.value = ''
+        $latitude.value = 0.0000
+        $longtitude.value = 0.0000
+      });
+
+
+      function removeWaypoint(index){
+        $name.value = waypoints[index].name
+        $latitude.value = waypoints[index].lat
+        $longtitude.value = waypoints[index].lon
+        waypoints = waypoints.filter((p,i) => i!==index)
+        renderWaypoints()
+      }
+
+      function renderWaypoints(){
+        $list.innerHTML = ''
+        waypoints.forEach((waypoint,index) => {
+          var $waypoint = document.createElement('tr')  
+          if (index==0){
+              $waypoint.innerHTML = `<td>${waypoint.name}</td>`
+          } else if(waypoint.lat==undefined){
+          $waypoint.innerHTML = `<td>${waypoint.name}</td><td>------</td><td>-----</td><td><button class="btn btn-action btn-primary" onclick="removeWaypoint(${index})"><i class="icon icon-edit"></i></button></td>`
+          } else {
+          $waypoint.innerHTML = `<td>${waypoint.name}</td><td>${waypoint.lat}</td><td>${waypoint.lon}</td><td><button class="btn btn-action btn-primary" onclick="removeWaypoint(${index})"><i class="icon icon-edit"></i></button></td>`
+          }
+          $list.appendChild($waypoint)
+        })
+        $name.focus()    
+      }
+
+      function downloadJSONfile(fileid, callback) {
+        Puck.write(`\x10(function() {
+          var pts = require("Storage").readJSON("${fileid}")||[{name:"NONE"}];
+          Bluetooth.print(JSON.stringify(pts));
+         })()\n`,contents=>{
+              var storedpts = JSON.parse(contents);
+              callback(storedpts);
+        });
+      }
+
+      function uploadFile(fileid, contents) {      
+        Puck.write(`\x10(function() {
+          require("Storage").write("${fileid}",'${contents}');
+          Bluetooth.print("OK");
+         })()\n`,ret=>{
+            console.log("uploadFile",ret);
+        });
+      }
+
+      function gotStored(pts){
+          waypoints = pts;
+          renderWaypoints();
+      }
+
+      function onInit() {
+         downloadJSONfile("waypoints.json", gotStored);
+      }
+
+      document.getElementById("Download").addEventListener("click", function() {
+        downloadJSONfile("waypoints.json", gotStored);
+      });
+
+      document.getElementById("Upload").addEventListener("click", function() {
+        var data =  JSON.stringify(waypoints);
+        uploadFile("waypoints.json",data); 
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
