Mercurial > bus-service / file comparison

comparison: templates/stop_display.html

templates/stop_display.html

changeset 68
382dd85b83a2
child 76
5fd79554c3aa
equal deleted inserted replaced
67:336c750b7b5d 68:382dd85b83a2
1 <html>
2 <head>
3 <link rel="icon" type="image/png" href="../static/favicon.png" />
4 <link rel="stylesheet" type="text/css" href="../static/style.css" />
5 <meta charset='UTF-8' />
6 <title>{{name}}</title>
7 <meta http-equiv='refresh' content='30'>
8 <style>
9 .sarake-määränpää
10 {
11 text-align: left;
12 }
13
14 .next-leave
15 {
16 margin-left: 1vw;
17 margin-right: 1vw;
18 }
19
20 .next-leave td
21 {
22 height: 30vh;
23 vertical-align: middle;
24 }
25
26 .next-leave-table
27 {
28 width: 100%;
29 }
30
31 .next-leave-time, .next-leave-destination, .next-leave-route
32 {
33 font-weight: bold;
34 font-size: 10vmin;
35 }
36
37 .next-leave-time
38 {
39 width: 25%;
40 text-align: left
41 }
42
43 .next-leave-route
44 {
45 width: 25%;
46 }
47
48 .next-leave-destination
49 {
50 width: 50%;
51 }
52
53 .via
54 {
55 list-style: none;
56 font-size: 6vmin;
57 padding-top: 1vw;
58 font-weight: normal;
59 }
60
61 .next-leave-table
62 {
63 text-align: center;
64 }
65
66 #other-leaves
67 {
68 width: 100%;
69 position: absolute;
70 bottom: 0;
71 background: #ccc;
72 box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5), inset 0 0 2vw rgba(0, 0, 0, 0.5);
73 }
74
75 #other-leaves table
76 {
77 width: 80%;
78 margin: auto;
79 margin-bottom: 10pt;
80 margin-top: 10pt;
81 }
82
83 #other-leaves table td
84 {
85 font-size: 4vh;
86 height: 5vh;
87 text-align: center;
88 }
89
90 .other-leave-time
91 {
92 width: 30%;
93 }
94
95 .other-leave-route
96 {
97 width: 30%;
98 }
99
100 .other-leave-destination
101 {
102 width: 40%;
103 }
104
105 #stop-name
106 {
107 width: 100%;
108 text-align: center;
109 }
110
111 h1
112 {
113 background-color: #ffd90f;
114 margin: 0;
115 padding-top: 10pt;
116 background: #dc9e00;
117 background: linear-gradient(to bottom, #ffd90f 0%, #ffd90f 95%, #AA7700 100%);
118 color: black;
119 vertical-align: middle;
120 box-shadow: 0px 0px 1vw rgba(0, 0, 0, 0.5);
121 }
122
123 h1, h1 span
124 {
125 font-size: 5vw;
126 text-align: center;
127 font-weight: bold;
128 }
129
130 h1 span, h1 img
131 {
132 vertical-align: middle;
133 }
134
135 @media screen and (orientation:landscape)
136 {
137 h1
138 {
139 height: 12vh;
140 }
141
142 h1 img
143 {
144 height: 10vh;
145 float: left;
146 margin-left: 1%;
147 }
148
149 #stop-name
150 {
151 margin-top: 5pt;
152 font-size: 8vh;
153 }
154 }
155
156 @media screen and (orientation:portrait)
157 {
158 h1 img
159 {
160 height: 10vh;
161 display: block;
162 margin-left: auto;
163 margin-right: auto;
164 }
165
166 #stop-name
167 {
168 font-size: 6vw;
169 }
170 }
171 </style>
172
173 <script>
174 num_visible_leaves = 3;
175 num_imminent_leaves = {{num_imminent_leaves}};
176 var imminent_leave_cycle = [];
177 var other_leave_cycle = [];
178 var max_leaves;
179 var current_imminent_leave = 0;
180 var current_other_leave = 0;
181 var initialized = false;
182 function cycle_leaves()
183 {
184 if (initialized == false)
185 {
186 for (max_leaves = 0;; max_leaves += 1)
187 {
188 var i = max_leaves;
189 var tr = document.getElementById('leave-' + i);
190 if (tr)
191 {
192 if (i == 0 || i == num_imminent_leaves)
193 tr.style.display = 'table-row-group';
194 else if (i < num_imminent_leaves)
195 imminent_leave_cycle.push(tr);
196 else if (i >= num_imminent_leaves + 1)
197 other_leave_cycle.push(tr);
198 }
199 else
200 break;
201 }
202 initialized = true;
203 current_imminent_leave = imminent_leave_cycle.length - 1;
204 current_other_leave = other_leave_cycle.length - 1;
205 }
206 if (imminent_leave_cycle)
207 {
208 current_imminent_leave = (current_imminent_leave + 1) % imminent_leave_cycle.length;
209 for (var i = 0; i < imminent_leave_cycle.length; i += 1)
210 imminent_leave_cycle[i].style.display = (i == current_imminent_leave) ? 'table-row-group' : 'none';
211 }
212 if (other_leave_cycle)
213 {
214 current_other_leave = (current_other_leave + 1) % other_leave_cycle.length;
215 for (var i = 0; i < other_leave_cycle.length; i += 1)
216 other_leave_cycle[i].style.display = (i == current_other_leave) ? 'table-row-group' : 'none';
217 }
218 setTimeout(cycle_leaves, 6000);
219 }
220 </script>
221 </head>
222 <body onload='cycle_leaves()'>
223 <h1><img src="../static/pysäkki.png" height="128" /><span id='stop-name'>{{ref}} {{name}}</span></h1>
224 <div class='next-leave'>
225 <table class='next-leave-table'>
226 {% for schedule_entry in schedule[:num_imminent_leaves] %}
227 <tbody id="leave-{{schedule_entry['index']}}">
228 <tr>
229 <td class='next-leave-time'>
230 {% if schedule_entry['imminent'] %}
231 <span class='imminent-leave'>{{schedule_entry['time']}}</span>&#8203;
232 {% else %}
233 {{schedule_entry['time']}}&#8203;
234 {% endif %}
235 </td>
236 <td class='next-leave-route'>{{schedule_entry['route']}}</td>
237 <td class='next-leave-destination'>{{schedule_entry['sign']['destination']}}
238 <span class='via'><br />
239 {% if num_imminent_leaves > 1 and schedule_entry['sign']['via'][0] and schedule_entry['sign']['via'][1] %}
240 {{schedule_entry['sign']['via'][0]}} - {{schedule_entry['sign']['via'][1]}}
241 {% for entry in schedule_entry['sign']['via'][2:] %}<br />{{entry}}{% endfor %}</span>
242 {% else %}
243 {% for entry in schedule_entry['sign']['via'] %}{{entry}}<br />{% endfor %}</span>
244 {% endif %}
245 </th>
246 </tr>
247 </tbody>
248 {% endfor %}
249 </table>
250 </div>
251 {% if schedule[num_imminent_leaves] %}
252 <div id='other-leaves'>
253 <table cellspacing="0">
254 {% for halt in schedule[num_imminent_leaves:] %}
255 <tr id="leave-{{halt['index']}}" style='display: none'>
256 <td class='other-leave-time'>{{halt['time']}}</td>
257 <td class='other-leave-route'>{{halt['route']}}</td>
258 <td class='other-leave-destination'>{{halt['sign']['destination']}}</td>
259 </tr>
260 {% endfor %}
261 </table>
262 </div>
263 {% endif %}
264 </body>
265 </html>

Mercurial Repository: bus-service

mercurial