mirror of https://github.com/espruino/BangleApps
199 lines
6.8 KiB
HTML
199 lines
6.8 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
|
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
|
|
<link href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css" rel="stylesheet">
|
|
</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_longitude" placeholder="Long">
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<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>
|
|
<br>
|
|
<div id="map" class="map" style="width:100%; height:400px"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>
|
|
<script src="../../core/lib/interface.js"></script>
|
|
|
|
<script>
|
|
var map = new ol.Map({
|
|
target: 'map',
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.OSM()
|
|
})
|
|
],
|
|
view: new ol.View({
|
|
center: ol.proj.fromLonLat([37.41, 8.82]),
|
|
zoom: 4
|
|
})
|
|
});
|
|
|
|
var geocoder = new Geocoder('nominatim', {
|
|
provider: 'osm',
|
|
lang: 'en-GB',
|
|
placeholder: 'Search...',
|
|
targetType: 'text-input',
|
|
});
|
|
map.addControl(geocoder);
|
|
geocoder.on('addresschosen', function(e) {
|
|
map.getView().animate({
|
|
center: e.coordinate,
|
|
zoom: Math.max(map.getView().getZoom(),16)
|
|
});
|
|
|
|
var lonlat = ol.proj.toLonLat(e.coordinate);
|
|
$longitude.value = lonlat[0];
|
|
$latitude.value = lonlat[1];
|
|
});
|
|
|
|
var waypoints = []
|
|
|
|
var $name = document.getElementById('add_waypoint_name')
|
|
var $form = document.getElementById('add_waypoint_form')
|
|
var $button = document.getElementById('add_waypoint_button')
|
|
var $latitude = document.getElementById('add_latitude')
|
|
var $longitude = document.getElementById('add_longitude')
|
|
var $list = document.getElementById('waypoints')
|
|
|
|
map.on('click', function(e) {
|
|
var lonlat = ol.proj.toLonLat(e.coordinate);
|
|
$longitude.value = lonlat[0];
|
|
$latitude.value = lonlat[1];
|
|
});
|
|
|
|
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(8);
|
|
var lon = parseFloat($longitude.value).toPrecision(8);
|
|
|
|
waypoints.push({
|
|
name, lat,lon,
|
|
});
|
|
|
|
waypoints.sort(compare);
|
|
|
|
renderWaypoints()
|
|
$name.value = ''
|
|
$latitude.value = (0).toPrecision(8);
|
|
$longitude.value = (0).toPrecision(8);
|
|
});
|
|
|
|
function removeWaypoint(index){
|
|
$name.value = waypoints[index].name
|
|
if (waypoints[index].lat !== undefined && waypoints[index].lon !== undefined
|
|
&& !isNaN(waypoints[index].lat) && !isNaN(waypoints[index].lon)) {
|
|
$latitude.value = waypoints[index].lat
|
|
$longitude.value = waypoints[index].lon
|
|
map.getView().animate({
|
|
center: ol.proj.fromLonLat([waypoints[index].lon, waypoints[index].lat]),
|
|
zoom: Math.max(map.getView().getZoom(),16)
|
|
});
|
|
}
|
|
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>
|