Mercurial > bus-service / file comparison
comparison: templates/trip.html
templates/trip.html
- changeset 31
- 60045b362d71
- parent 29
- 2c78e68d7363
- child 32
- ca1a0ea81cf6
equal
deleted
inserted
replaced
| 30:a5bfd99bc2a3 | 31:60045b362d71 |
|---|---|
| 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 <style> | 6 <style> |
| 7 .sarake-pysäkki, .sarake-pysäkkiviite, .sarake-alue | 7 .sarake-alue |
| 8 { | 8 { |
| 9 text-align: left; | 9 text-align: left; |
| 10 } | 10 } |
| 11 td, th, body | 11 .sarake-aika |
| 12 { | 12 { |
| 13 font-size: 24pt; | 13 width: 0; |
| 14 }/* | 14 } |
| 15 body | 15 td.folded table |
| 16 { | 16 { |
| 17 background: url('/static/tausta-bussi.png') no-repeat center center fixed; | 17 display: none; |
| 18 background-size: cover; | 18 } |
| 19 }*/ | 19 td.unfolded a.region-name |
| 20 { | |
| 21 font-weight: bold; | |
| 22 } | |
| 23 .nested-schedule td | |
| 24 { | |
| 25 margin-left: 0; | |
| 26 margin-right: 0; | |
| 27 padding-left: 5px; | |
| 28 padding-right: 5px; | |
| 29 } | |
| 30 .nested-schedule | |
| 31 { | |
| 32 border-radius: 10px; | |
| 33 margin-top: 10px; | |
| 34 } | |
| 20 </style> | 35 </style> |
| 21 <script> | 36 <script> |
| 22 function openTab(event, category) | 37 function toggle_fold(id) |
| 23 { | 38 { |
| 24 var tabcontent = document.getElementsByClassName("tab"); | 39 element = document.getElementById(id); |
| 25 for (var i = 0; i < tabcontent.length; i++) | 40 if (element.className.indexOf(" folded") !== -1) |
| 26 tabcontent[i].style.display = "none"; | 41 element.className = element.className.replace(" folded", "") + " unfolded"; |
| 27 | 42 else |
| 28 var tablinks = document.getElementsByClassName("tab-button"); | 43 element.className = element.className.replace(" unfolded", "") + " folded"; |
| 29 for (var i = 0; i < tablinks.length; i++) | 44 } |
| 30 tablinks[i].className = tablinks[i].className.replace(" active", ""); | |
| 31 | |
| 32 document.getElementById(category).style.display = "block"; | |
| 33 event.currentTarget.className += " active"; | |
| 34 window.scrollTo(0, 0); | |
| 35 } | |
| 36 </script> | 45 </script> |
| 37 <title>{{route}} {{description}}</title> | 46 <title>{{route}} {{description}}</title> |
| 38 </head> | 47 </head> |
| 39 <body> | 48 <body> |
| 40 <h1> | 49 <h1> |
| 41 {% if night %} | 50 {% if night %} |
| 42 🌙 | 51 🌙 |
| 43 {% endif %} | 52 {% endif %} |
| 44 {{route}} {{description}}</h1> | 53 {{route}} {{description}}</h1> |
| 45 <nav> | |
| 46 <div class="tab-bar"> | |
| 47 <span></span> | |
| 48 <button class="tab-button active" onclick="openTab(event, 'tab-overview')">Reitti</button> | |
| 49 <button class="tab-button" onclick="openTab(event, 'tab-stops')">Pysäkit</button> | |
| 50 <span></span> | |
| 51 </div> | |
| 52 </nav> | |
| 53 <p style="text-align: center">Ajomatka: {{'%.1f' % length}}km</p> | 54 <p style="text-align: center">Ajomatka: {{'%.1f' % length}}km</p> |
| 54 <div id="tab-overview" class="tab"> | 55 <table class='aikataulu' cellspacing='0'> |
| 55 <table class='aikataulu' cellspacing='0'> | 56 <tr> |
| 56 <tr> | 57 <th class='sarake-aika'>Aika</th> |
| 57 <th class='sarake-aika'>Aika</th> | 58 <th class='sarake-alue'>Alue</th> |
| 58 <th class='sarake-alue'>Alue</th> | 59 </tr> |
| 59 </tr> | 60 {% for entry in schedule %} |
| 60 {% for entry in concise_schedule %} | 61 <tr> |
| 61 <tr> | 62 <td class='sarake-aika' style='vertical-align: top'>{{entry['time']}}</td> |
| 62 <td class='sarake-aika'>{{entry['time']}}</td> | 63 <td class='sarake-alue folded' id="region-schedule-{{entry['index']}}"> |
| 63 <td class='sarake-alue'>{{entry['region']}}</td> | 64 <a class="region-name" href="javascript:toggle_fold('region-schedule-{{entry['index']}}')">{{entry['name']}}</a> |
| 64 </tr> | 65 <table class="nested-schedule" cellspacing="0"> |
| 65 {% endfor %} | 66 {% for halt in entry['stops'] %} |
| 66 </table> | 67 <tr> |
| 67 </div> | 68 <td>{{halt['time']}}</td> |
| 68 <div id="tab-stops" class="tab" style="display: none"> | 69 <td><a href="/pysäkki/{{halt['id']}}"><img src='/static/pysäkki.png' height='24' /> {{halt['code']}}</a></td> |
| 69 <table class='aikataulu' cellspacing='0'> | 70 <td><a href="/pysäkki/{{halt['id']}}">{{halt['name']}}</a></td> |
| 70 <tr> | 71 </tr> |
| 71 <th class='sarake-aika'>Aika</th> | 72 {% endfor %} |
| 72 <th class='sarake-pysäkkiviite'>Pysäkki</th> | 73 </table> |
| 73 <th class='sarake-pysäkki'>Nimi</th> | 74 </td> |
| 74 </tr> | 75 </tr> |
| 75 {% for halt in schedule %} | 76 {% endfor %} |
| 76 <tr> | 77 </table> |
| 77 <td class='sarake-aika'>{{halt['time']}}</td> | |
| 78 <td class='sarake-pysäkkiviite'> | |
| 79 <a href="/pysäkki/{{halt['id']}}"><img src='/static/pysäkki.png' height='24' /> {{halt['code']}}</a> | |
| 80 </td> | |
| 81 <td class='sarake-pysäkki'> | |
| 82 <a href="/pysäkki/{{halt['id']}}">{{halt['name']}}</a> | |
| 83 </td> | |
| 84 </tr> | |
| 85 {% endfor %} | |
| 86 </table> | |
| 87 </div> | |
| 88 </body> | 78 </body> |
| 89 </html> | 79 </html> |
