Mercurial > bus-service / file comparison
comparison: templates/trip.html
templates/trip.html
- changeset 114
- b736478416d4
- parent 93
- 53ee9e945673
- child 115
- 9452b9ac69e6
equal
deleted
inserted
replaced
| 113:b8467d51f1b8 | 114:b736478416d4 |
|---|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <link rel="icon" type="image/png" href="../static/favicon.png" /> | 3 <link rel="icon" type="image/png" href="../static/favicon.png" /> |
| 4 <link rel="stylesheet" type="text/css" href="../static/style.css" /> | 4 <link rel="stylesheet" type="text/css" href="../static/style.css" /> |
| 5 <meta charset='UTF-8' /> | 5 <meta charset='UTF-8' /> |
| 6 <meta http-equiv='refresh' content='60'> | 6 <!--<meta http-equiv='refresh' content='60'>--> |
| 7 <link | |
| 8 rel="stylesheet" | |
| 9 href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" | |
| 10 integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" | |
| 11 crossorigin="" | |
| 12 /> | |
| 13 <script | |
| 14 src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" | |
| 15 integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" | |
| 16 crossorigin="" | |
| 17 ></script> | |
| 7 <style> | 18 <style> |
| 8 .sarake-alue | 19 .sarake-alue |
| 9 { | 20 { |
| 10 text-align: left; | 21 text-align: left; |
| 11 } | 22 } |
| 40 | 51 |
| 41 .sarake-matkapituus | 52 .sarake-matkapituus |
| 42 { | 53 { |
| 43 text-align: right; | 54 text-align: right; |
| 44 } | 55 } |
| 56 .bus_stop_ref | |
| 57 { | |
| 58 padding: 2px; | |
| 59 border: 1px solid #888; | |
| 60 background-color: #e0e0e0; | |
| 61 border-radius: 3px; | |
| 62 } | |
| 63 #mapid { height: 50vh; } | |
| 45 </style> | 64 </style> |
| 46 <script> | 65 <script> |
| 47 function toggle_fold(id) | 66 function toggle_fold(id) |
| 48 { | 67 { |
| 49 element = document.getElementById(id); | 68 element = document.getElementById(id); |
| 78 <th class='sarake-alue'>Alue</th> | 97 <th class='sarake-alue'>Alue</th> |
| 79 <th class='sarake-matkapituus'>{{'%.1f' % length}}km</th> | 98 <th class='sarake-matkapituus'>{{'%.1f' % length}}km</th> |
| 80 </tr> | 99 </tr> |
| 81 </thead> | 100 </thead> |
| 82 <tbody> | 101 <tbody> |
| 102 <tr> | |
| 103 <td colspan="9100"> | |
| 104 <div id="mapid"></div> | |
| 105 </td> | |
| 106 </tr> | |
| 107 </tbody> | |
| 108 <tbody> | |
| 83 {% for entry in schedule %} | 109 {% for entry in schedule %} |
| 84 <tr> | 110 <tr> |
| 85 <td class='sarake-aika' style='vertical-align: top'>{{entry['time']}}</td> | 111 <td class='sarake-aika' style='vertical-align: top'>{{entry['time']}}</td> |
| 86 <td class='sarake-alue folded' id="region-schedule-{{entry['index']}}" colspan='2'> | 112 <td class='sarake-alue folded' id="region-schedule-{{entry['index']}}" colspan='2'> |
| 87 <a class="region-name" href="javascript:toggle_fold('region-schedule-{{entry['index']}}')">{{entry['name']}}</a> | 113 <a class="region-name" href="javascript:toggle_fold('region-schedule-{{entry['index']}}')">{{entry['name']}}</a> |
| 97 </td> | 123 </td> |
| 98 </tr> | 124 </tr> |
| 99 {% endfor %} | 125 {% endfor %} |
| 100 </tbody> | 126 </tbody> |
| 101 </table> | 127 </table> |
| 128 <script> | |
| 129 function openBusStop(event) { | |
| 130 window.open(this.options._my_bus_stop_url); | |
| 131 } | |
| 132 var route = [{{shape}}]; | |
| 133 var mymap = L.map('mapid').setView([60.45175, 22.26705], 13); | |
| 134 var myIcon = L.icon({ | |
| 135 iconUrl: '/static/favicon.png', | |
| 136 iconSize: [16, 16], | |
| 137 iconAnchor: [8, 8], | |
| 138 popupAnchor: [-3, -76], | |
| 139 }); | |
| 140 L.tileLayer( | |
| 141 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | |
| 142 //'http://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg', | |
| 143 { | |
| 144 attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', | |
| 145 maxZoom: 18, | |
| 146 } | |
| 147 ).addTo(mymap); | |
| 148 var polyline = L.polyline(route, { | |
| 149 color: 'black', | |
| 150 dashArray: [3, 5], | |
| 151 }).addTo(mymap); | |
| 152 // zoom the map to the polyline | |
| 153 mymap.fitBounds(polyline.getBounds()); | |
| 154 | |
| 155 {% for entry in schedule %} | |
| 156 {% for halt in entry['stops'] %} | |
| 157 marker = L.circleMarker([{{halt["location"]}}], { | |
| 158 radius: 6, | |
| 159 color: 'black', | |
| 160 fillColor: 'yellow', | |
| 161 fillOpacity: 1, | |
| 162 title: "{{halt['ref']}} {{halt['name']}}", | |
| 163 _my_bus_stop_url: "/stop/{{halt['ref']}}", | |
| 164 }).addTo(mymap); | |
| 165 popupmsg = "<h3><a href='/stop/{{halt['ref']}}'><span class='bus_stop_ref'>{{halt['ref']}}</span> {{halt['name']}}</a></h3>"; | |
| 166 | |
| 167 {% if halt['arrival_time'] != halt['departure_time'] %} | |
| 168 popupmsg += "<p><ul><li>Saapuu: {{halt['arrival_time']}}</li><li>Lähtee: {{halt['departure_time']}}</li></ul></p>"; | |
| 169 {% else %} | |
| 170 popupmsg += "<p><ul><li>Pysähtyy: {{halt['arrival_time']}}</li></ul></p>"; | |
| 171 {% endif %} | |
| 172 marker.bindPopup(popupmsg); | |
| 173 {% endfor %} | |
| 174 {% endfor %} | |
| 175 </script> | |
| 102 </body> | 176 </body> |
| 103 </html> | 177 </html> |
