{% 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> <script src="{{ url_for('static', filename='assets/geolocation_utils.js') }}"></script> {% endblock %} {% block app_content %} <meta name="csrf-token" content="{{ csrf_token() }}"> <h1>{{ game.name }} Dashboard</h1> <a href="{{ url_for('game.change_game_settings', game_name=game.name) }}"> <button class="btn btn-primary">Change Game Settings</button> </a> {% if game.unreviewed_bunny_photos() %} <a href="{{ url_for('main.review_caught_bunny_photos', game_name=game.name) }}"> <button class="btn btn-primary">Review Bunny Photos</button> </a> {% endif %} <br><br> <p><b>Start Time: </b>{% if game.start_time %}{{ moment(game.start_time).format('DD-MM-YYYY, HH:mm') }}{% else %}None{% endif %}</p> <p><b>End Time: </b>{% if game.end_time %}{{ moment(game.end_time).format('DD-MM-YYYY, HH:mm') }}{% else %}None{% endif %}</p> <p><b>State: </b>{{ game.get_state().name.title() }}</p> <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, username = player.user.name) }}">{{ player.user.name }}</a></td> <td>{{ player.role.name }}</td> <td>{{ player.found_objectives | list | length }}</td> <td>{{ player.accepted_caught_players() | list | length }}</td> <td>{{ player.accepted_caught_by_players() | list | length }}</td> <td>{% with location = player.last_location() %} {% if location %}{{ moment(location.timestamp).fromNow()}} {% else %} {{ location }} {% endif %} {% endwith %}</td> <td><a href="{{ url_for('main.remove_player', game_name=game.name, username=player.user.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() }} <script src="{{ url_for('static', filename='assets/leaflet/utils.js') }}"></script> <script type="text/javascript", crossorigin="anonymous"> // Leaflet Map var map = getMap() var objectMarkers = [] var playerMarkers = [] var objectives = JSON.parse('{{ json.dumps(game.objectives, cls=objective_encoder)|safe }}') for (var i = 0; i < objectives.length; i++){ addObjectiveMarker(map, objectives[i]) objectMarkers.push([objectives[i].latitude, objectives[i].longitude]) } var players = JSON.parse('{{ json.dumps(game.last_player_locations(), cls=location_encoder)|safe }}') updatePlayerMarkers() if (objectMarkers.length + playerMarkers.length > 0) { map.fitBounds(objectMarkers.concat(playerMarkers)); } getPosition(updateMyLocation); function updatePlayerMarkers(){ if(playerMarkers != undefined){ playerMarkers.forEach(function(marker){ marker.remove() }); } playerMarkers = [] for (var i = 0; i < players.length; i++) { playerMarkers.push(addPlayerMarker(map, players[i], bluePlayerIcon)) } } // Poll Locations usernames = JSON.parse('{{ json.dumps(game.usernames())|safe }}').filter(name => name != '{{ current_user.name }}') setInterval(function() { pollLocations( "{{ url_for('main.poll_locations', game_name=game.name) }}", usernames, 'accumulative', players, handleResponse ) getPosition(updateMyLocation) }, 30 * 1000); function handleResponse(data){ data.forEach(function (location) { player = players.filter(function (player) { return player.username == location.username; })[0]; if (new Date(location.timestamp_utc) > new Date(player.timestamp_utc)){ //lastLocation = player[player.length-1] Not necesary because there is just one of each player if (player.latitude == location.latitude && player.longitude == location.longitude){ player.timestamp_utc = location.timestamp_utc } else{ players = players.filter(p => p !== player) players.push(location) } } }); updatePlayerMarkers() } </script> {% endblock %}