[%
USE Number.Format(DECIMAL_DIGITS=1);
cur = f.currently; today = f.daily.data.0;
today_start = f.hourly.data.0.time.clone
today_stop = f.hourly.data.0.time.clone.add('days'=>1);
hourly = f.hourly.slice('from', today_start, 'to', today_stop);
MACRO hours_length(span) BLOCK;
d=span.stop_time.subtract_datetime(span.start_time);
format_duration(
'pattern','%k',
'base',span.start_time,
'normalize',1).format_duration(d);
END;
MACRO time(d) BLOCK;
d.clone.set_time_zone('Europe/London').strftime('%H:%M');
END;
MACRO minsec_until(d) BLOCK;
dur=d.subtract_datetime(now);
format_duration(
'pattern','%M:%S',
'base',now,
'normalize',1).format_duration(dur);
END;
MACRO overground_bg(colour) BLOCK;
%]background: linear-gradient(to bottom, [% colour %] 0% 25%, #fff 25% 75%, [% colour %] 75% 100%);[%
END;
-%]
<html>
<head>
<title>Forecast</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body, table {
font-size: 3.2vw;
}
table { border-collapse: collapse; empty-cells: show }
table td { border: solid thin black; padding: 3px }
div.forecast dt { display: none }
div.forecast dd { display: inline; margin: 0; border: 0 }
.icon img {
height: 2em;
float: left; margin: 0 5px 5px 0;
}
div.currently, div.next-hour, div.next-day, div.next-week {
width: 24%;
position: absolute; top: 5px;
}
div.currently { left: 5px }
div.next-hour { left: 25% }
div.next-day { left: 50% }
div.next-week { right: 5px }
div.today {
position: absolute; top: 8em; left: 5px;
float: left; clear: none;
width: 40%;
margin-right: 5px;
}
dl.today dt.temperature, dl.today dd.temperature { display: inherit }
dl.today dt.sunrise, dl.today dt.sunset { display: inline }
td.line {
font-family: sans;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
div.bus {
position: absolute; right: 2em; top: 8em;
}
div.bus td.line { background-color: #DC241F; color: #fff }
div.bus td.destination { width: 5em }
div.tube {
position: absolute; left: 5px; top: 20em;
width: 75%; height: calc(100% - 20em);
overflow-y: scroll;
}
.bakerloo { background-color: #B26300; color: #fff; }
.central { background-color: #DC241F; color: #fff; }
.circle { background-color: #FFC80A; color: #fff; }
.district { background-color: #007D32; color: #fff; }
.dlr { background-color: #00AFAD; color: #fff; }
.elizabeth { background-color: #60399E; color: #fff; }
.hammersmith-city { background-color: #F589A6; color: #fff; }
.jubilee { background-color: #838D93; color: #fff; }
.london-overground { background-color: #FA7B05; color: #fff; }
.metropolitan { background-color: #9B0058; color: #fff; }
.northern { background-color: #000000; color: #fff; }
.piccadilly { background-color: #0019A8; color: #fff; }
.victoria { background-color: #039BE5; color: #fff; }
.waterloo-city { background-color: #76D0BD; color: #fff; }
.liberty { [% overground_bg('#5b5f63') %]; }
.lioness { [% overground_bg('#fab220') %]; }
.mildmay { [% overground_bg('#4a8cd2') %]; }
.suffragette { [% overground_bg('#42bb57') %]; }
.weaver { [% overground_bg('#cb3091') %]; }
.windrush { [% overground_bg('#ee252b') %]; }
div.tube table { font-size: 75% }
div.tube td.status { width: 8em }
div.tube td.details { width: 10em; font-size: 66% }
div.timeline { position: absolute; right: 5px; bottom: 5px; }
div.timeline table { font-size: 75% }
.stripes {
text-align: center;
border: solid thin black;
}
.stripes span {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="forecast">
<div class="currently">
<h2>Currently</h2>
<span class="icon"><img src="[% icon_for(cur.icon) %]" alt="[% cur.icon %]" /></span>
<dl class="currently">
<dt class="temperature">Temperature:</dt>
<dd class="temperature">[% (cur.temperature || 0) | round %]°</dd>
<dt class="summary">Summary:</dt>
<dd class="summary">[% cur.summary %]</dd>
</dl>
</div>
<div class="next-hour">
<h2>Hour</h2>
<span class="icon"><img src="[% icon_for(f.minutely.icon) %]" alt="[% f.minutely.icon %]" /></span>
<dl class="next-hour">
<dt class="summary">Summary:</dt>
<dd class="summary">[% f.minutely.summary %]</dd>
</dl>
</div>
<div class="next-day">
<h2>Day</h2>
<span class="icon"><img src="[% icon_for(hourly.icon) %]" alt="[% hourly.icon %]" /></span>
<dl class="next-day">
<dt class="summary">Summary:</dt>
<dd class="summary">[% hourly.summary %]</dd>
</dl>
</div>
<div class="next-week">
<h2>Week</h2>
<span class="icon"><img src="[% icon_for(f.daily.icon) %]" alt="[% f.daily.icon %]" /></span>
<dl class="next-week">
<dt class="summary">Summary:</dt>
<dd class="summary">[% f.daily.summary %]</dd>
</dl>
</div>
<div class="today">
<h2>Today</h2>
<span class="icon"><img src="[% icon_for(today.icon) %]" alt="[% today.icon %]" /></span>
<dl class="today">
<dt class="summary">Summary:</dt>
<dd class="summary">[% today.summary %]</dd>
<dt class="temperature min">Min temperature:</dt>
<dd class="temperature min">[% (today.temperatureMin || 0) | round %]° <span class="time">[% time(today.temperatureMinTime) %]</span></dd>
<dt class="temperature max">Max temperature:</dt>
<dd class="temperature max">[% (today.temperatureMax || 0) | round %]° <span class="time">[% time(today.temperatureMaxTime) %]</span></dd>
<dt class="sunrise">Sunrise:</dt>
<dd class="sunrise"><span class="time">[% time(today.sunriseTime) %]</span></dd>
<dt class="sunset">Sunset:</dt>
<dd class="sunset"><span class="time">[% time(today.sunsetTime) %]</span></dd>
</dl>
</div>
</div>
<div class="bus">
<table class="prediction">
<thead>
<tr><th>Line</th><th>Destination</th><th>When</th></tr>
</thead>
<tbody>
[% FOREACH p IN b.predictions %]
<tr>
<td class="line">[% p.lineName %]</td>
<td class="destination">[% p.destinationName %]</td>
<td class="eta">[% minsec_until(p.expectedArrival) %]</td>
</tr>
[% END %]
</tbody>
</table>
</div>
<div class="timeline">
<table class="timeline">
[% FOR h IN hourly.data; BREAK IF loop.last %]
<tr class="stripes">
<td class="summary"><span>[% h.summary %]</span></td>
<td class="hours"><span>[% time(h.time) %]</span></td>
<td class="temperature"><span>[% (h.temperature || 0) | round %]°</span></td>
</tr>
[% END %]
</table>
</div>
<div class="tube">
<table class="status">
<thead>
<tr><th>Line</th><th>Status</th><th>Details</th></tr>
</thead>
<tbody>
[% FOREACH line IN t.lines %]
<tr>
<td class="line [% line.id %]">[% line.name %]</td>
<td class="status">[% line.status.statusSeverityDescription %]</td>
<td class="details">[% line.status.reason %]</td>
</tr>
[% END %]
</tbody>
</table>
</div>
</body>
</html>
