mirror of https://github.com/espruino/BangleApps
170 lines
5.5 KiB
HTML
170 lines
5.5 KiB
HTML
<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> |