trap.html (2142B) download
1{% extends "layout.html" %}
2{% block content %}
3<article class="media content-section">
4 <div class="media-body">
5 <div id="trap-map"></div>
6 </div>
7</article>
8{% for trap in traps %}
9<article class="media content-section">
10 <div class="media-body">
11 <h3><a class="article-title" href="{{ url_for('trap_update', trap_id=trap.mac) }}">
12 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="{{ trap.status_color() }}"
13 class="bi bi-circle-fill" viewBox="0 0 20 20">
14 <circle cx="10" cy="10" r="10" />
15 </svg>
16 -
17 {% if trap.name %}
18 {{ trap.name }}
19 {% else %}
20 <code>[{{ trap.pretty_mac() }}]</code>
21 {% endif %}
22 </a>
23 </h3>
24 {% if trap.name %}
25 <p>
26 <code>[{{ trap.pretty_mac() }}]</code>
27 </p>
28 {% endif %}
29 {% if trap.owner %}
30 <b>
31 van {{ trap.owner_class().name }}
32 </b>
33 {% endif %}
34 </div>
35
36 {#} <div class="media-body">
37 <h3>Naam: {{ trap.name }}</h3>
38 <p> Mac adres: {{ trap.mac }} </p>
39 {% if trap.caught %}
40 <p> Status: Gevangen! </p>
41 {% else %}
42 <p>Status: Leeg!</p>
43 {% endif %}
44 </div>{#}
45</article>
46{% endfor %}
47
48<script type="text/javascript">
49 socket.on('trap-change', function (data) {
50 if (data['user'] == current_user)
51 location.reload();
52 });
53
54 // var trap_macs = [
55 /* {% for trap in traps %} */
56 //"{{ trap.mac }}" }
57 /* {% endfor %} */
58 //];
59
60 var traps = {{ trap_json | tojson }};
61
62 var map = L.map('trap-map').setView([52.283333, 5.666667], 7);
63
64 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
65 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
66 }).addTo(map);
67
68// L.marker([51.5, -0.09]).addTo(map)
69 // .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
70 // .openPopup();
71</script>
72{% endblock content %}