Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

migrate luci-mod-freifunk to js #54

Merged
merged 5 commits into from
Dec 15, 2021
Merged

migrate luci-mod-freifunk to js #54

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef0acbd
first steps to js
andibraeu Nov 2, 2021
0e774e7
luci-mod-freifunk: migrate all frontend pages
andibraeu Nov 4, 2021
acdb7b0
luci-mod-freifunk: add map to select location
andibraeu Nov 7, 2021
b73dc5a
luci-mod-freifunk: fix some errors in frontend pages
andibraeu Nov 7, 2021
7eb0703
drop package "luci-app-freifunk-widgets"
SvenRoederer Dec 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions modules/luci-mod-freifunk/htdocs/luci-static/resources/OSMLatLon.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>OpenStreetMap</title>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script type="text/javascript" src="osm.js"></script>
</head>
<body onload="init();drawmap();" style="padding:0px; margin:0px">
<div id="map"></div>
<div style="position:absolute; bottom:0%; width:100%; background:url('cbi/black_60.png'); font-size:10px; color:#fff;z-index:1000">
Map by <a href="http://www.openstreetmap.org" title="www.openstreetmap.org" style="color:#fff;" >openstreetmap.org</a>, License CC-BY-SA
&#160;&#160;&#160;&#160;
<span id="osm">
Latitude: <input id="osmlat" name="osmlat" type="text" size="20" style="font-size:10px;">
Longitude: <input id="osmlon" name="osmlon" type="text" size="20" style="font-size:10px;">
</span>
</div>
</body>

<body onload="init();" style="padding:0px; margin:0px">
<div id="ffmap" style="position:relative; width:100%; height:400px;"></div>
<span id="osm" style="display: none;">
Latitude: <input id="osmlat" name="osmlat" type="text" size="20" style="font-size:10px;">
Longitude: <input id="osmlon" name="osmlon" type="text" size="20" style="font-size:10px;">
</span>
<script type="text/javascript">

</script>
</body>

</html>
Binary file removed modules/luci-mod-freifunk/htdocs/luci-static/resources/freifunk-map/hna.gif
View file
Open in desktop
Binary file not shown.
113 changes: 113 additions & 0 deletions modules/luci-mod-freifunk/htdocs/luci-static/resources/freifunk-map/map.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<title>Map</title>
</head>

<body style="margin:0">
<div id="ffmap" style="position:relative; width:100%; height:640px;"></div>
<script type="text/javascript">

var INFINITE = 99.99;

var map = L.map('ffmap').setView([52.48, 12], 13);

var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
map.addLayer(osm);

var alias = new Array;
var points = new Array;
var unkpos = new Array;
var lineid = 0;
onload = new Function("if(null!=window.ffmapinit)ffmapinit();");

function Mid(mainip, aliasip) {
alias[aliasip] = mainip;
}

function Node(mainip, lat, lon, ishna, hnaip, name) {
points[mainip] = [lat, lon];
var marker = L.circleMarker([lat, lon]).addTo(map);
marker.bindPopup(
'Node: ' + name
+
'<br>IP: ' + mainip
+ '<br>DefGW: ' + hnaip
);
}

function Self(mainip, lat, lon, ishna, hnaip, name) {
Node(mainip, lat, lon, ishna, hnaip, name);
map.setView([lat, lon], 13)
}

function Link(fromip, toip, lq, nlq, etx) {
if (0 == lineid && null != window.ffmapstatic) ffmapstatic();
if (null != alias[toip]) toip = alias[toip];
if (null != alias[fromip]) fromip = alias[fromip];
if (null != points[fromip] && null != points[toip]) {
var color;
var red = 240;
var green = 0;
var blue = 0;
var w = 1

if (etx < 100) { red = 252; green = 102; blue = 0; w = 2 };
if (etx < 10) { red = 255; green = 203; blue = 5; w = 3 };
if (etx < 4) { red = 240; green = 255; blue = 0; w = 4 };
if (etx < 2) { red = 0; green = 204; blue = 0; w = 5 };
if (etx < 1) { red = 80; green = 0; blue = 0; w = 1 };
var polyline = L.polyline([points[fromip], points[toip]], {
color:
'rgb(' + red + ', ' + green + ', ' + blue + ')'
})
.addTo(map);
polyline.bindPopup(
fromip + " - " + toip + "<br>"
+ "ETX: " + etx + "<br>"
+ "LQ: " + lq + "<br>"
+ "NLQ: " + nlq + "<br>"
);


}
else {
if (null == points[toip]) unkpos[toip] = '';
if (null == points[fromip]) unkpos[fromip] = '';
}
lineid++;
}

function PLink(fromip, toip, lq, nlq, etx, lata, lona, ishnaa, latb, lonb, ishnab) {
Link(fromip, toip, lq, nlq, etx);
}

function ffmapinit() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/ubus/?" + Date.now(), true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.onload = () => {
if (xhttp.status >= 200 && xhttp.status < 300) {
// parse JSON and
const response = JSON.parse(xhttp.responseText);
response[0].result[1].data.split(/\n/).forEach((line) => {
eval(line);
})
} else {
console.log("error getting latlon data from router")
}

};
var data = [{ "jsonrpc": "2.0", "id": 1, "method": "call", "params": ["00000000000000000000000000000000", "ffmap", "getdata", {}] }];
xhttp.send(JSON.stringify(data));
}

</script>
</body>

</html>
Binary file removed modules/luci-mod-freifunk/htdocs/luci-static/resources/freifunk-map/node.gif
View file
Open in desktop
Binary file not shown.
126 changes: 26 additions & 100 deletions modules/luci-mod-freifunk/htdocs/luci-static/resources/osm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
var map;
var layer_mapnik;
var layer_tah;
var layer_markers;
var PI = Math.PI;
var latfield = '';
var lonfield = '';
var latfield_id='';
Expand All @@ -11,66 +6,7 @@ var centerlon = 10;
var centerlat = 52;
var zoom = 6;

function lon2merc(lon) {
return 20037508.34 * lon / 180;
}

function lat2merc(lat) {
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / PI;
return 20037508.34 * lat;
}

function merc2lon(lon) {
return lon*180/20037508.34;
};

function merc2lat(lat) {
return Math.atan(Math.exp(lat*PI/20037508.34))*360/PI-90;
};

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},

initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},

trigger: function(e) {
var lonlat = map.getLonLatFromViewPortPx(e.xy);
var lat=merc2lat(lonlat.lat);
var lon=merc2lon(lonlat.lon);
if(parent.document.getElementById(latfield_id)==null){
latfield=document.getElementById('osmlat');
}else{
latfield=parent.document.getElementById(latfield_id);
}
if(parent.document.getElementById(lonfield_id)==null){
lonfield=document.getElementById('osmlon');
}else{
lonfield=parent.document.getElementById(lonfield_id);
}
latfield.value = lat;
lonfield.value = lon;
}
});

function init(){
function init(){
var field = window.name.substring(0, window.name.lastIndexOf("."));
if(parent.document.getElementById(field+".latfield")!=null){
latfield_id = parent.document.getElementById(field+".latfield").value;
Expand All @@ -88,43 +24,33 @@ function init(){
if(parent.document.getElementById(field+".zoom")!=null){
zoom = parseFloat(parent.document.getElementById(field+".zoom").value);
}
drawmap();
}

function drawmap() {
OpenLayers.Lang.setCode('de');
var mapdiv=document.getElementById('map');
mapdiv.style.height=window.innerHeight+"px";
mapdiv.style.width=window.innerWidth+"px";
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()],
maxExtent:
new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34),
numZoomLevels: 18,
maxResolution: 156543,
units: 'meters'
});

layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");

map.addLayers([layer_mapnik]);
var y =lat2merc(centerlat);
var x =lon2merc(centerlon);
map.setCenter(new OpenLayers.LonLat(x, y), zoom);

// Check for geolocation support
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var y =lat2merc(position.coords.latitude);
var x =lon2merc(position.coords.longitude);
map.setCenter(new OpenLayers.LonLat(x, y), '17');
});
}
var map = L.map('ffmap').setView([centerlat, centerlon], zoom);

var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
map.addLayer(osm);
var marker = L.marker([centerlat, centerlon], {'draggable': true}).addTo(map);
marker.on('move', (event) => {
if(parent.document.getElementById(latfield_id)==null){
latfield=document.getElementById('osmlat');
}else{
latfield=parent.document.getElementById(latfield_id);
}
if(parent.document.getElementById(lonfield_id)==null){
lonfield=document.getElementById('osmlon');
}else{
lonfield=parent.document.getElementById(lonfield_id);
}
latfield.value = event.target.getLatLng().lat;
lonfield.value = event.target.getLatLng().lng;

var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
});
map.on('click', (event) => {
marker.setLatLng(event.latlng);
});
}
Loading