You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.8 KiB
80 lines
2.8 KiB
4 years ago
|
{% extends 'base.html' %}
|
||
|
|
|
||
|
|
{% 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>{{ game.name }} Dashboard</h1>
|
||
|
|
{% include '_game_player_info.html' %}
|
||
|
|
<h2>Bunnies:</h2>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th scope="col">Player Name</th>
|
||
|
|
<th scope="col">Times Caught</th>
|
||
|
|
<th scope="col">Last location</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% for player in game.bunnies() %}
|
||
|
|
<tr>
|
||
|
|
<td>{{ player.name }}</td>
|
||
|
|
<td>{{ player.caught_by_players | selectattr('game', '==', game)|list|length}}</td>
|
||
|
|
<td>{% with location = player.last_location(game) %}
|
||
|
|
{% if location %}{{ moment(location.timestamp).fromNow()}}: {% endif %}
|
||
|
|
{{ location }}
|
||
|
|
{% endwith %}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
{{ super() }}
|
||
|
|
{{ moment.include_moment() }}
|
||
|
|
<script type="text/javascript", crossorigin="anonymous">
|
||
|
|
// Leaflet Map
|
||
|
|
var map = L.map( 'map', {
|
||
|
|
center: [52.2, 5.3],
|
||
|
|
minZoom: 6,
|
||
|
|
maxZoom: 19,
|
||
|
|
bounds: [[50.5, 3.25], [54, 7.6]],
|
||
|
|
zoom: 8
|
||
|
|
});
|
||
|
|
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 players = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies()), cls=location_encoder)|safe }}')
|
||
|
|
for (var i = 0; i < players.length; i++){
|
||
|
|
var playerMarker = L.marker([
|
||
|
|
players[i]['latitude'],
|
||
|
|
players[i]['longitude']
|
||
|
|
], {icon: greenIcon}).addTo(map);
|
||
|
|
var timestamp_utc = moment.utc(players[i]['timestamp_utc']).toDate()
|
||
|
|
var timestamp_local = moment(timestamp_utc).local().format('YYYY-MM-DD HH:mm');
|
||
|
|
playerMarker.bindTooltip(`<b>${players[i]['player_name']}</b><br>
|
||
|
|
${timestamp_local}`).openPopup();
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|