Mirrors
/
aredn
mirror of https://github.com/aredn/aredn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

aredn: Load leaflet assets asynchronously on setup page. (#151)

This commit is contained in:
Phil Crump 2021-10-26 02:43:55 +01:00 committed by GitHub
parent a6669cc53e
commit 7d6dfcb37d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 95 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
files/www/cgi-bin/setup
View File

@ -543,24 +543,91 @@ my ($rc, $maptiles, $leafletcss, $leafletjs);
http_header() unless $debug == 2;
html_header(nvram_get("node") . " setup", 0);
if(($pingOk) || ($leafletcss =~ ".local.mesh")) {
print "<link rel='stylesheet' href='${leafletcss}' />\n";
}
if(($pingOk) || ($leafletjs =~ ".local.mesh")) {
print "<script src='${leafletjs}'></script>\n";
}
print "</head>";
print "<body><center>\n";
print "
print <<EOF;
<script>
function loadCSS(url, callback) {
var head = document.getElementsByTagName('head')[0];
var stylesheet = document.createElement('link');
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
stylesheet.href = url;
stylesheet.onload = callback;
head.appendChild(stylesheet);
}
function loadScript(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = callback;
head.appendChild(script);
}
var map;
var marker;
var leafletLoad = function() {
map = L.map('map').setView([0.0, 0.0], 1);
var dotIcon = L.icon({iconUrl: '/dot.png'});
EOF
print "L.tileLayer('$maptiles',";
print <<EOF;
{
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>, ' +
'Imagery &copy;<a href="http://stamen.com">Stamen Design</a>',
id: 'mapbox.streets'
}).addTo(map);
EOF
if($lat and $lon)
{
print "marker= new L.marker([$lat,$lon],{draggable: true, icon: dotIcon});";
print "map.addLayer(marker);";
print "map.setView([$lat,$lon],13);";
print "marker.on('drag', onMarkerDrag);";
} else {
print "map.on('click', onMapClick);";
}
print <<EOF;
}
function onMapClick(e) {
marker= new L.marker(e.latlng.wrap(),{draggable: true, icon: dotIcon});
map.addLayer(marker);
document.getElementsByName('latitude')[0].value=e.latlng.wrap().lat.toFixed(6).toString();
document.getElementsByName('longitude')[0].value=e.latlng.wrap().lng.toFixed(6).toString();
map.off('click', onMapClick);
marker.on('drag', onMarkerDrag);
}
function onMarkerDrag(e) {
var m = e.target;
var p = m.getLatLng().wrap();
document.getElementsByName('latitude')[0].value=p.lat.toFixed(6).toString();
document.getElementsByName('longitude')[0].value=p.lng.toFixed(6).toString();
}
EOF
# On page load, attempt loading of Leaflet CSS, then Leaflet JS if that works, and finally initialise the map if both have worked.
if(($pingOk) || ($leafletcss =~ ".local.mesh" && $leafletjs =~ ".local.mesh")) {
print "window.onload = function (event) { loadCSS('${leafletcss}',function () { loadScript('${leafletjs}', leafletLoad); }); };";
}
print <<EOF;
function findLocation() {
navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
}
function foundLocation(position)
{
function foundLocation(position) {
var jlat = position.coords.latitude;
var jlon = position.coords.longitude;
// update the fields
@ -575,10 +642,10 @@ function foundLocation(position)
}
}
function noLocation()
{
function noLocation() {
alert('Could not find location. Try pinning it on the map.');
}
function updDist(x) {
var dvs= calcDistance(x);
var xcm=dvs['miles'];
@ -596,7 +663,6 @@ function updDist(x) {
distBox.className = 'dist-norm';
}
function calcDistance(x) {
// x is in KILOMETERS
var dvs = new Object();
@ -604,9 +670,15 @@ function calcDistance(x) {
dvs['meters']=Math.ceil(x*1000);
dvs['kilometers']=x;
return dvs;
}";
}
function doSubmit() {
var desc_text = document.mainForm.description_node.value;
var singleLine = desc_text.replace(new RegExp( "\\n", "g" ), " ");
document.mainForm.description_node.value = singleLine;
return true;
}
print "
function toggleMap(toggleButton) {
var mapdiv=document.getElementById('map');
if(toggleButton.value=='hide') {
@ -621,11 +693,15 @@ function toggleMap(toggleButton) {
toggleButton.innerHTML='Hide Map';
}
// force the map to redraw
map.invalidateSize();
if(typeof map !== 'undefined') map.invalidateSize();
return false;
}";
}
print "</script>";
</script>
EOF
print "</head>";
print "<body><center>\n";
alert_banner();
print "<form onSubmit='doSubmit();' name='mainForm' method=post action=/cgi-bin/setup enctype='multipart/form-data'>\n" unless $debug == 2;
@ -1227,60 +1303,5 @@ show_parse_errors();
page_footer();
print <<EOF;
<script>
function doSubmit() {
var desc_text = document.mainForm.description_node.value;
var singleLine = desc_text.replace(new RegExp( "\\n", "g" ), " ");
document.mainForm.description_node.value = singleLine;
return true;
}
var map = L.map('map').setView([0.0, 0.0], 1);
var dotIcon = L.icon({iconUrl: '/dot.png'});
EOF
print "L.tileLayer('$maptiles',";
print <<EOF;
{
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>, ' +
'Imagery &copy;<a href="http://stamen.com">Stamen Design</a>',
id: 'mapbox.streets'
}).addTo(map);
var marker;
function onMapClick(e) {
marker= new L.marker(e.latlng.wrap(),{draggable: true, icon: dotIcon});
map.addLayer(marker);
document.getElementsByName('latitude')[0].value=e.latlng.wrap().lat.toFixed(6).toString();
document.getElementsByName('longitude')[0].value=e.latlng.wrap().lng.toFixed(6).toString();
map.off('click', onMapClick);
marker.on('drag', onMarkerDrag);
}
EOF
if($lat and $lon)
{
print "marker= new L.marker([$lat,$lon],{draggable: true, icon: dotIcon});";
print "map.addLayer(marker);";
print "map.setView([$lat,$lon],13);";
print "marker.on('drag', onMarkerDrag);";
} else {
print "map.on('click', onMapClick);";
}
print <<EOF;
function onMarkerDrag(e) {
var m = e.target;
var p = m.getLatLng().wrap();
document.getElementsByName('latitude')[0].value=p.lat.toFixed(6).toString();
document.getElementsByName('longitude')[0].value=p.lng.toFixed(6).toString();
}
</script>
EOF
#}
print "</body>\n";
print "</html>\n";