octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-12-22 19:08:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

cmd/strelaypoolsrv: Use OpenStreetMap (fixes #6150) (#6459)

Browse Source
This commit is contained in:
Kevin Bushiri 2020-04-04 13:48:20 +02:00 committed by GitHub
parent b7b9476e5a
commit e1324a0e23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
cmd/strelaypoolsrv/gui/index.html
View File

@ -9,8 +9,15 @@
<meta name="author" content=""/> <meta name="author" content=""/>
<title>Relay stats</title> <title>Relay stats</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"/>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.13/css/all.css"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style> <style>
#map { #map {
@ -38,7 +45,7 @@
<div class="container"> <div class="container">
<h1>Relay Pool Data</h1> <h1>Relay Pool Data</h1>
<div ng-if="relays === undefined" class="text-center"> <div ng-if="relays === undefined" class="text-center">
<img src="//cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" alt=""/> <img src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" alt=""/>
<p>Please wait while we gather data</p> <p>Please wait while we gather data</p>
</div> </div>
<div> <div>
@ -184,10 +191,9 @@
</div> </div>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyDk5WJ8s7ueLKb99X5DbQ-vkWtPDAKqYs0"></script>
</body> </body>
<script> <script>
@ -228,11 +234,12 @@
numProxies: 0, numProxies: 0,
uptimeSeconds: 0, uptimeSeconds: 0,
}; };
$scope.map = new google.maps.Map(document.getElementById('map'), { $scope.map = L.map('map').setView([40.90296, 1.90925], 2);
zoom: 1, L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
mapTypeId: google.maps.MapTypeId.ROADMAP {
}); attribution: 'Leaflet',
$scope.mapBounds = new google.maps.LatLngBounds(); maxZoom: 17
}).addTo($scope.map);
$scope.tooltipTemplate = $('#infoTemplate').html(); $scope.tooltipTemplate = $('#infoTemplate').html();
$scope.usedLocations = {}; $scope.usedLocations = {};
$scope.sortType = 'stats.numActiveSessions'; $scope.sortType = 'stats.numActiveSessions';
@ -279,8 +286,9 @@
} }
}); });
$scope.map.fitBounds($scope.mapBounds);
if ($scope.relays.length == 1) { if ($scope.relays.length == 1) {
//Center to only relay with zoom
$scope.map.panTo(new L.LatLng(relays[0].location.latitude, relays[0].location.longitude));
$scope.map.setZoom(13); $scope.map.setZoom(13);
} }
}); });
@ -300,44 +308,50 @@
var locParts = loc.split(','); var locParts = loc.split(',');
relay.marker = new google.maps.Marker({ relay.marker = new L.Marker([relay.location.latitude, relay.location.longitude],{
map: $scope.map,
position: new google.maps.LatLng(locParts[0], locParts[1]),
title: relay.url, title: relay.url,
}); });
var scope = $rootScope.$new(true); var scope = $rootScope.$new(true);
scope.relay = relay; scope.relay = relay;
relay.marker.info = new google.maps.InfoWindow({ var icon = new L.Icon({
content: $compile($scope.tooltipTemplate)(scope)[0], iconSize: [18, 28], // size of the icon
iconAnchor: [9, 28], // point of the icon which will correspond to marker's location
shadowAnchor: [0, 0], // the same for the shadow
popupAnchor: [0, -27], // popup anchor
shadowSize: [0,0],
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
}); });
relay.marker = new L.marker(new L.latLng(locParts[0], locParts[1]),{icon})
.bindPopup($compile($scope.tooltipTemplate)(scope)[0],{})
.on('mouseover', function (e) {
this.openPopup();
}).on('mouseout', function (e) {
this.closePopup();
}).addTo($scope.map);
relay.showMarker = function() { relay.showMarker = function() {
relay.marker.info.open($scope.map, relay.marker); relay.marker.openPopup();
} }
relay.hideMarker = function() { relay.hideMarker = function() {
relay.marker.info.close(); relay.marker.closePopup();
} }
}
relay.marker.addListener('mouseover', relay.showMarker);
relay.marker.addListener('mouseout', relay.hideMarker);
$scope.mapBounds.extend(relay.marker.position);
}
function addCircleToMap(relay) { function addCircleToMap(relay) {
relay.marker.circle = new google.maps.Circle({ console.log(relay.location.latitude)
strokeColor: '#FF0000', L.circle([relay.location.latitude, relay.location.longitude],
strokeOpacity: 0.8, {
strokeWeight: 2, radius: ((relay.stats.bytesProxied * 100) / $scope.totals.bytesProxied) * 10000,
fillColor: '#FF0000', color: "FF0000",
fillOpacity: 0.35, fillColor: "#FF0000",
map: $scope.map, fillOpacity: 0.35,
center: relay.marker.position, }).addTo($scope.map);
radius: ((relay.stats.bytesProxied * 100) / $scope.totals.bytesProxied) * 10000
});
} }
function constructURI(url) { function constructURI(url) {