Split game_dashboard into separate files per player type

app/templates/_game_player_info.html

@@ -0,0 +1,18 @@
+<h2>Game Info</h2>
+<div class="table-responsive">
+    <table class="table">
+        <tr>
+            <th>My Role</th>
+            <td>{{ current_user.}}</td>
+        </tr>
+        <tr>
+            <th>Start Time</th>
+            <td>10:00</td>
+        </tr>
+        <tr>
+            <th>End Time</th>
+            <td>18:00</td>
+        </tr>
+        
+    </table>
+</div>

app/templates/game_hunter_dashboard.html

@@ -0,0 +1,80 @@
+{% 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 &copy; <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 %}

app/templates/game_owner_dashboard.html

@@ -0,0 +1,137 @@
+{% 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.player_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 &copy; <a href="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]['player_name']}</b><br>
+                                    ${timestamp_local}`).openPopup();
+    }
+
+</script>
+{% endblock %}