Mercurial > bus-service / file comparison
comparison: templates/stop.html
templates/stop.html
- changeset 127
- 2bc0529d44a5
- parent 109
- 88a5110b66ba
- child 133
- 091a48867bae
equal
deleted
inserted
replaced
| 126:369e242edc5d | 127:2bc0529d44a5 |
|---|---|
| 9 <style> | 9 <style> |
| 10 .sarake-määränpää | 10 .sarake-määränpää |
| 11 { | 11 { |
| 12 text-align: left; | 12 text-align: left; |
| 13 } | 13 } |
| 14 | |
| 15 .dataentry | |
| 16 { | |
| 17 display: none; | |
| 18 } | |
| 19 | |
| 20 .sarake-aika | |
| 21 { | |
| 22 width: 150pt; | |
| 23 } | |
| 24 | |
| 25 .gone | |
| 26 { | |
| 27 background-color: #666; | |
| 28 color: silver; | |
| 29 font-style: italic; | |
| 30 display: none; | |
| 31 } | |
| 32 | |
| 33 tbody tr:nth-child(even).gone | |
| 34 { | |
| 35 background-color: #585858; | |
| 36 } | |
| 14 </style> | 37 </style> |
| 38 <script> | |
| 39 var getJSON = function(url, callback) { | |
| 40 var xhr = new XMLHttpRequest(); | |
| 41 xhr.open('GET', url, true); | |
| 42 xhr.responseType = 'json'; | |
| 43 xhr.onload = function() { | |
| 44 var status = xhr.status; | |
| 45 if (status === 200) { | |
| 46 callback(xhr.response); | |
| 47 } | |
| 48 }; | |
| 49 xhr.send(); | |
| 50 }; | |
| 51 | |
| 52 var getUuid = function(blockref, originaimeddeparturetime, data, callback) { | |
| 53 var xhr = new XMLHttpRequest(); | |
| 54 var url = "../find_halt/{{ref}}/" + blockref + "/" + originaimeddeparturetime.toString(); | |
| 55 xhr.open('GET', url, true); | |
| 56 xhr.responseType = 'json'; | |
| 57 xhr.onload = function() { | |
| 58 var status = xhr.status; | |
| 59 if (status === 200) { | |
| 60 callback(xhr.response['id'], data); | |
| 61 } | |
| 62 }; | |
| 63 xhr.send(); | |
| 64 }; | |
| 65 | |
| 66 function timeConverter(UNIX_timestamp){ | |
| 67 var a = new Date(UNIX_timestamp * 1000); | |
| 68 var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; | |
| 69 var year = a.getFullYear(); | |
| 70 var month = months[a.getMonth()]; | |
| 71 var date = a.getDate(); | |
| 72 var hour = a.getHours(); | |
| 73 var min = a.getMinutes(); | |
| 74 var sec = a.getSeconds(); | |
| 75 var time = hour + ':' + (min < 10 ? '0' : '') + min; | |
| 76 return time; | |
| 77 } | |
| 78 | |
| 79 function updateTime(uuid, time) { | |
| 80 const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; | |
| 81 const d = new Date(); | |
| 82 const now = (d.getTime() + d.getTimezoneOffset()) / 1000; | |
| 83 row = document.getElementById(uuid); | |
| 84 timeCell = document.getElementById(uuid + '-time'); | |
| 85 t0 = parseInt(document.getElementById(uuid + '-stamp').innerHTML); | |
| 86 if (Math.abs(time - t0) > 90) { | |
| 87 oldTime = timeConverter(t0); | |
| 88 newTime = timeConverter(time); | |
| 89 timeCell.innerHTML = '<s style="color:gray">' + oldTime + '</s> ⟶ <b>' + newTime + '</b>'; | |
| 90 } | |
| 91 if (time + 15 > now) | |
| 92 row.classList.remove('gone'); | |
| 93 else | |
| 94 row.classList.add('gone'); | |
| 95 } | |
| 96 </script> | |
| 15 </head> | 97 </head> |
| 16 <body> | 98 <body> |
| 17 <table class='aikataulu service-{{service}}' cellspacing="0"> | 99 <table class='aikataulu service-{{service}}' cellspacing="0"> |
| 18 <thead> | 100 <thead> |
| 19 <tr> | 101 <tr> |
| 33 {% endif %} | 115 {% endif %} |
| 34 <a href='../stop_week/{{ref}}'>▤</a> | 116 <a href='../stop_week/{{ref}}'>▤</a> |
| 35 </th> | 117 </th> |
| 36 </tr> | 118 </tr> |
| 37 </thead> | 119 </thead> |
| 38 <tbody> | 120 <tbody id='departures-table'> |
| 39 {% for halt in schedule %} | 121 {% for halt in schedule %} |
| 40 <tr class="{% if halt['night'] %} yö {% endif %}"> | 122 <tr class="{% if halt['night'] %} yö {% endif %}{% if halt['gone'] %}gone{% endif %}" id="{{halt['id']}}"> |
| 41 <td class='sarake-aika'> | 123 <td class='sarake-aika'> |
| 124 <!-- | |
| 42 {% if halt['imminent'] %} | 125 {% if halt['imminent'] %} |
| 43 <span class='imminent-leave'>●</span> | 126 <span class='imminent-leave'>●</span> |
| 44 {% endif %} | 127 {% endif %} |
| 45 {{halt['time']}}</td> | 128 --> |
| 129 <span id="{{halt['id']}}-time"></span> | |
| 130 <span class='dataentry' id="{{halt['id']}}-stamp">{{halt['timestamp']}}</span> | |
| 131 <!--{{halt['time']}}--></td> | |
| 46 <td class='sarake-linja linja'> | 132 <td class='sarake-linja linja'> |
| 47 <a href="../trip/{{halt['trip']}}">{{route_rep(halt['route-splice'])}}</a> | 133 <a href="../trip/{{halt['trip']}}">{{route_rep(halt['route-splice'])}}</a> |
| 48 </td> | 134 </td> |
| 49 <td class='sarake-määränpää' colspan='2'> | 135 <td class='sarake-määränpää' colspan='2'> |
| 50 <a href="../trip/{{halt['trip']}}">{{halt['sign']}}</a> | 136 <a href="../trip/{{halt['trip']}}">{{halt['sign']}}</a> |
| 51 </td> | 137 </td> |
| 52 </tr> | 138 </tr> |
| 53 {% endfor %} | 139 {% endfor %} |
| 54 </tbody> | 140 </tbody> |
| 55 </table> | 141 </table> |
| 142 <script> | |
| 143 var list = document.getElementById('departures-table').children; | |
| 144 for (var i = 0; i < list.length; i += 1) { | |
| 145 id = list[i].id; | |
| 146 timestamp = parseInt(document.getElementById(id + '-stamp').innerHTML); | |
| 147 document.getElementById(id + '-time').innerHTML = timeConverter(timestamp); | |
| 148 } | |
| 149 //updateTime('fbf6f367-069c-4f8d-831b-bd36cd643f3b', 1544092500); | |
| 150 getJSON('http://data.foli.fi/siri/sm/{{ref}}', function(data){ | |
| 151 var arrayLength = data['result'].length; | |
| 152 for (var i = 0; i < arrayLength; i++) { | |
| 153 var blockref = data['result'][i]['blockref']; | |
| 154 var originaimeddeparturetime = data['result'][i]['originaimeddeparturetime']; | |
| 155 var expecteddeparturetime = data['result'][i]['expecteddeparturetime']; | |
| 156 getUuid(blockref, originaimeddeparturetime, expecteddeparturetime, function(id, expecteddeparturetime) { | |
| 157 updateTime(id, expecteddeparturetime); | |
| 158 }); | |
| 159 } | |
| 160 }); | |
| 161 </script> | |
| 56 </body> | 162 </body> |
| 57 </html> | 163 </html> |
