{% 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> <h2>Players:</h2> <p><a href="{{ url_for('main.add_player', game_name = game.name) }}">Add player</a></p> <div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">Player Name</th> <th scope="col">Role</th> <th scope="col">Objectives found</th> <th scope="col">Bunnies Caught</th> <th scope="col">Been Caught</th> <th scope="col">Last location</th> <th scope="col"></th> </tr> </thead> <tbody> {% for player in game.players %} <tr> <td><a href="{{ url_for('main.game_player', game_name = game.name, player_name = player.name) }}">{{ player.name }}</a></td> {% for gameplayer in player.user_games if gameplayer.game == game %} <td>{{ gameplayer.role.name }}</td> {% endfor %} <td>{{ player.found_objectives | selectattr('game', '==', game)|list|length}}</td> <td>{{ player.caught_players | selectattr('game', '==', game)|list|length}}</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> <td><a href="{{ url_for('main.remove_player', game_name=game.name, player_name=player.name) }}"> <button class="btn btn-danger">Delete</button></a> </td> </tr> {% endfor %} </tbody> </table> </div> <h2>Objectives:</h2> <p><a href="{{ url_for('main.add_objective', game_name = game.name) }}">Add new objective</a></p> {% if game.objectives %} <div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">Objective Name</th> <th scope="col">Latitude</th> <th scope="col">Longitude</th> <th scope="col">Times found</th> <th scope="col">Hash</th> <th scope="col"></th> </tr> </thead> <tbody> {% for objective in game.objectives %} <tr> <td>{{ objective.name }}</td> <td>{{ objective.latitude }}</td> <td>{{ objective.longitude }}</td> <td>{{ objective.found_by|length }}</td> <td><a href="{{ url_for('main.objective', objective_hash = objective.hash) }}">{{ objective.hash }}</a></td> <td><a href="{{ url_for('main.delete_objective', objective_hash = objective.hash) }}"> <button class="btn btn-danger">Delete</button></a> </td> </tr> {% endfor %} </tbody> </table> </div> <div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div> {% endif %} {% 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="https://kadaster.nl">Kadaster</a>' }).addTo( map ); var objectives = JSON.parse('{{ json.dumps(game.objectives, cls=objective_encoder)|safe }}') for (var i = 0; i < objectives.length; i++){ var objectiveMarker = L.marker([ objectives[i]['latitude'], objectives[i]['longitude'] ]).addTo(map); objectiveMarker.bindTooltip(`<b>${objectives[i]['name']}</b><br> ${objectives[i]['hash']}`).openPopup(); } 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_player_locations(), 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]['username']}</b><br> ${timestamp_local}`).openPopup(); } </script> {% endblock %}