Burathar
4 years ago
3 changed files with 104 additions and 16 deletions
@ -1,18 +1,88 @@
@@ -1,18 +1,88 @@
|
||||
{% extends "base.html" %} |
||||
{% import 'bootstrap/wtf.html' as wtf %} |
||||
|
||||
{% block head %} |
||||
{{ super() }} |
||||
<link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" /> |
||||
<script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script> |
||||
{% endblock %} |
||||
|
||||
{% block app_content %} |
||||
<h1>Player: {{ player.name }}</h1> |
||||
<hr> |
||||
<div class="row"> |
||||
<div class="col-md-4 col-sm-6 col-xs-8"> |
||||
<form action="" method="post" class="form" role="form"> |
||||
{{ form.hidden_tag() }} |
||||
{% for gameplayer in player.player_games if gameplayer.game == game %} |
||||
{{ wtf.form_field(form.role, class='form-control') }} |
||||
{% endfor %} |
||||
{{ wtf.form_field(form.submit, class='btn btn-primary', value='Update') }} |
||||
</form> |
||||
<div class="row"> |
||||
<form action="" method="post" class="form" role="form"> |
||||
{{ form.hidden_tag() }} |
||||
{% for gameplayer in player.player_games if gameplayer.game == game %} |
||||
{{ wtf.form_field(form.role, class='form-control') }} |
||||
{% endfor %} |
||||
{{ wtf.form_field(form.submit, class='btn btn-primary', value='Update') }} |
||||
</form> |
||||
</div> |
||||
{% if player.auth_hash %} |
||||
<div class="row"> |
||||
<img src="{{ url_for('player_qrcode', auth_hash=player.auth_hash) }}" alt="qr_code_failed", width="100%"> |
||||
</div> |
||||
{% endif %} |
||||
</div> |
||||
<div id="map" style=" height: 600px; border-radius: 10px; " class="col-md-6 col-xs-12"></div> |
||||
</div> |
||||
{% endblock %} |
||||
|
||||
|
||||
{% block scripts %} |
||||
{{ super() }} |
||||
{{ moment.include_moment() }} |
||||
<script type="text/javascript", crossorigin="anonymous"> |
||||
// Leaflet Map |
||||
'{% set last_location = player.last_location(game) %}' |
||||
var map = L.map( 'map', { |
||||
center: ['{{ last_location.latitude or 52.2 }}', '{{ last_location.longitude or 5.3 }}'], |
||||
minZoom: 6, |
||||
maxZoom: 19, |
||||
bounds: [[50.5, 3.25], [54, 7.6]], |
||||
zoom: 9 |
||||
}); |
||||
L.control.scale().addTo(map); |
||||
|
||||
L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', { |
||||
attribution: 'Kaartgegevens © <a href="kadaster.nl">Kadaster</a>' |
||||
}).addTo( map ); |
||||
|
||||
var greenIcon = new L.Icon({ |
||||
iconUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-icon-2x-green.png') }}", |
||||
shadowUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-shadow.png') }}", |
||||
iconSize: [25, 41], |
||||
iconAnchor: [12, 41], |
||||
popupAnchor: [1, -34], |
||||
shadowSize: [41, 41] |
||||
}); |
||||
|
||||
var locations = JSON.parse('{{ json.dumps(player.locations, cls=location_encoder)|safe }}') |
||||
for (var i = 0; i < locations.length; i++){ |
||||
var playerMarker = L.marker([ |
||||
locations[i]['latitude'], |
||||
locations[i]['longitude'] |
||||
], {icon: greenIcon}).addTo(map); |
||||
var timestamp_utc = moment.utc(locations[i]['timestamp_utc']).toDate() |
||||
var timestamp_local = moment(timestamp_utc).local().format('YYYY-MM-DD HH:mm'); |
||||
playerMarker.bindTooltip(`<b>${locations[i]['player_name']}</b><br> |
||||
${timestamp_local}`).openPopup(); |
||||
} |
||||
|
||||
var latlngs = [ |
||||
[[45.51, -122.68], |
||||
[37.77, -122.43], |
||||
[34.04, -118.2]], |
||||
[[40.78, -73.91], |
||||
[41.83, -87.62], |
||||
[32.76, -96.72]] |
||||
]; |
||||
var polyline = L.polyline(locations.map(l => [l.latitude, l.longitude]), {color: 'red'}).addTo(map); |
||||
// zoom the map to the polyline |
||||
map.fitBounds(polyline.getBounds()); |
||||
|
||||
</script> |
||||
{% endblock %} |
Loading…
Reference in new issue