--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/stop_display.html Mon Sep 25 10:46:23 2017 +0300
@@ -0,0 +1,265 @@
+<html>
+<head>
+ <link rel="icon" type="image/png" href="../static/favicon.png" />
+ <link rel="stylesheet" type="text/css" href="../static/style.css" />
+ <meta charset='UTF-8' />
+ <title>{{name}}</title>
+ <meta http-equiv='refresh' content='30'>
+ <style>
+ .sarake-määränpää
+ {
+ text-align: left;
+ }
+
+ .next-leave
+ {
+ margin-left: 1vw;
+ margin-right: 1vw;
+ }
+
+ .next-leave td
+ {
+ height: 30vh;
+ vertical-align: middle;
+ }
+
+ .next-leave-table
+ {
+ width: 100%;
+ }
+
+ .next-leave-time, .next-leave-destination, .next-leave-route
+ {
+ font-weight: bold;
+ font-size: 10vmin;
+ }
+
+ .next-leave-time
+ {
+ width: 25%;
+ text-align: left
+ }
+
+ .next-leave-route
+ {
+ width: 25%;
+ }
+
+ .next-leave-destination
+ {
+ width: 50%;
+ }
+
+ .via
+ {
+ list-style: none;
+ font-size: 6vmin;
+ padding-top: 1vw;
+ font-weight: normal;
+ }
+
+ .next-leave-table
+ {
+ text-align: center;
+ }
+
+ #other-leaves
+ {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ background: #ccc;
+ box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5), inset 0 0 2vw rgba(0, 0, 0, 0.5);
+ }
+
+ #other-leaves table
+ {
+ width: 80%;
+ margin: auto;
+ margin-bottom: 10pt;
+ margin-top: 10pt;
+ }
+
+ #other-leaves table td
+ {
+ font-size: 4vh;
+ height: 5vh;
+ text-align: center;
+ }
+
+ .other-leave-time
+ {
+ width: 30%;
+ }
+
+ .other-leave-route
+ {
+ width: 30%;
+ }
+
+ .other-leave-destination
+ {
+ width: 40%;
+ }
+
+ #stop-name
+ {
+ width: 100%;
+ text-align: center;
+ }
+
+ h1
+ {
+ background-color: #ffd90f;
+ margin: 0;
+ padding-top: 10pt;
+ background: #dc9e00;
+ background: linear-gradient(to bottom, #ffd90f 0%, #ffd90f 95%, #AA7700 100%);
+ color: black;
+ vertical-align: middle;
+ box-shadow: 0px 0px 1vw rgba(0, 0, 0, 0.5);
+ }
+
+ h1, h1 span
+ {
+ font-size: 5vw;
+ text-align: center;
+ font-weight: bold;
+ }
+
+ h1 span, h1 img
+ {
+ vertical-align: middle;
+ }
+
+ @media screen and (orientation:landscape)
+ {
+ h1
+ {
+ height: 12vh;
+ }
+
+ h1 img
+ {
+ height: 10vh;
+ float: left;
+ margin-left: 1%;
+ }
+
+ #stop-name
+ {
+ margin-top: 5pt;
+ font-size: 8vh;
+ }
+ }
+
+ @media screen and (orientation:portrait)
+ {
+ h1 img
+ {
+ height: 10vh;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ #stop-name
+ {
+ font-size: 6vw;
+ }
+ }
+ </style>
+
+ <script>
+ num_visible_leaves = 3;
+ num_imminent_leaves = {{num_imminent_leaves}};
+ var imminent_leave_cycle = [];
+ var other_leave_cycle = [];
+ var max_leaves;
+ var current_imminent_leave = 0;
+ var current_other_leave = 0;
+ var initialized = false;
+ function cycle_leaves()
+ {
+ if (initialized == false)
+ {
+ for (max_leaves = 0;; max_leaves += 1)
+ {
+ var i = max_leaves;
+ var tr = document.getElementById('leave-' + i);
+ if (tr)
+ {
+ if (i == 0 || i == num_imminent_leaves)
+ tr.style.display = 'table-row-group';
+ else if (i < num_imminent_leaves)
+ imminent_leave_cycle.push(tr);
+ else if (i >= num_imminent_leaves + 1)
+ other_leave_cycle.push(tr);
+ }
+ else
+ break;
+ }
+ initialized = true;
+ current_imminent_leave = imminent_leave_cycle.length - 1;
+ current_other_leave = other_leave_cycle.length - 1;
+ }
+ if (imminent_leave_cycle)
+ {
+ current_imminent_leave = (current_imminent_leave + 1) % imminent_leave_cycle.length;
+ for (var i = 0; i < imminent_leave_cycle.length; i += 1)
+ imminent_leave_cycle[i].style.display = (i == current_imminent_leave) ? 'table-row-group' : 'none';
+ }
+ if (other_leave_cycle)
+ {
+ current_other_leave = (current_other_leave + 1) % other_leave_cycle.length;
+ for (var i = 0; i < other_leave_cycle.length; i += 1)
+ other_leave_cycle[i].style.display = (i == current_other_leave) ? 'table-row-group' : 'none';
+ }
+ setTimeout(cycle_leaves, 6000);
+ }
+ </script>
+</head>
+<body onload='cycle_leaves()'>
+ <h1><img src="../static/pysäkki.png" height="128" /><span id='stop-name'>{{ref}} {{name}}</span></h1>
+ <div class='next-leave'>
+ <table class='next-leave-table'>
+ {% for schedule_entry in schedule[:num_imminent_leaves] %}
+ <tbody id="leave-{{schedule_entry['index']}}">
+ <tr>
+ <td class='next-leave-time'>
+ {% if schedule_entry['imminent'] %}
+ <span class='imminent-leave'>{{schedule_entry['time']}}</span>​
+ {% else %}
+ {{schedule_entry['time']}}​
+ {% endif %}
+ </td>
+ <td class='next-leave-route'>{{schedule_entry['route']}}</td>
+ <td class='next-leave-destination'>{{schedule_entry['sign']['destination']}}
+ <span class='via'><br />
+ {% if num_imminent_leaves > 1 and schedule_entry['sign']['via'][0] and schedule_entry['sign']['via'][1] %}
+ {{schedule_entry['sign']['via'][0]}} - {{schedule_entry['sign']['via'][1]}}
+ {% for entry in schedule_entry['sign']['via'][2:] %}<br />{{entry}}{% endfor %}</span>
+ {% else %}
+ {% for entry in schedule_entry['sign']['via'] %}{{entry}}<br />{% endfor %}</span>
+ {% endif %}
+ </th>
+ </tr>
+ </tbody>
+ {% endfor %}
+ </table>
+ </div>
+ {% if schedule[num_imminent_leaves] %}
+ <div id='other-leaves'>
+ <table cellspacing="0">
+ {% for halt in schedule[num_imminent_leaves:] %}
+ <tr id="leave-{{halt['index']}}" style='display: none'>
+ <td class='other-leave-time'>{{halt['time']}}</td>
+ <td class='other-leave-route'>{{halt['route']}}</td>
+ <td class='other-leave-destination'>{{halt['sign']['destination']}}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+ {% endif %}
+</body>
+</html>