Skip to content

Instantly share code, notes, and snippets.

@stevedonovan

stevedonovan/mockup.ltp

Created October 11, 2012 05:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevedonovan/3870487 to your computer and use it in GitHub Desktop.
Save stevedonovan/3870487 to your computer and use it in GitHub Desktop.
Download ZIP
Penlight-style Lua template for HTML with JavaScript; note @ used as escape!
Raw
mockup.ltp
<!DOCTYPE HTML>
<html>
<head>
<script src="/flot/jquery.min.js" type="text/javascript"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/media/flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.navigate.js"></script>
<style type="text/css">
.center { text-align:center; }
.highlight {
text-align:center;
color: #FFFFFF;
background-color: #538ed5;
}
table.c2 {
color: #FFF;
background-color: #000;
font-weight: bold;
}
table.c2 td {
padding-right: 1em;
}
td.grey {
color: #000;
background-color: #DDD;
font-weight: normal;
}
table.Sensor {
color: #FFFFFF;
background-color: #538ed5;
border: 3px solid black;
border-collapse:collapse;
margin-left: 100px;
}
table.Sensor td {
border-top: solid 3px #000;
border-bottom: solid 3px #000;
padding-right: 1em;
}
td.bloo {
color: #000;
background-color: #c5d9f1;
}
.bold {
font-weight:bold;
}
.bad {
background-color: #FFEEAA;
}
.button {
position: absolute;
cursor: pointer;
border: solid #888 1px;
background-color: #EEE;
padding: 2px 2px 2px 2px;
}
</style>
</head>
<body>
<h2>Aggregators</h2>
<p><a href="/?refresh=1">refresh</a></p>
<div style="float:left">
# for i,aggr in ipairs(aggregators) do
<table class="c2">
<tr>
<th colspan="4" class="@(which==i and 'highlight' or 'center')" onClick="location.href='/?idx=@(i)'">@(aggr.address)</th>
</tr>
<tr>
<td>Name</td>
<td class="grey">@(aggr.name)</td>
<td>PWR</td>
<td class="grey">@(aggr.status)</td>
</tr>
<tr>
<td>Joined</td>
<td class="grey">@(aggr.joined)</td>
<td>Status</td>
<td class="grey"><a href="@('/?idx='..i)">has @(#aggr.sensors) sensors</a></td>
</tr>
</table>
<br/>
# end
</div>
<div style="float:left;margin-left: 3em">
# for sid,sensor in ipairs(sensors) do
<table class="Sensor">
<tr><th colspan="4" class="center">@(sensor.device) @(sensor.id)</th></tr>
<tr>
<td>Name</td>
<td class="bloo">@(sensor.name)</td>
<td>Status</td>
<td class="bloo">12.56v</td>
</tr>
<tr>
<td>Joined</td>
<td class="bloo">@(sensor.joined)</td>
<td>Uptime</td>
<td class="bloo">@(sensor.joined_elapsed)</td>
<tr>
# if #sensor.detectors > 0 then
<tr>
<td>Last</td>
<td class="bloo"><a href="/?idx=@(which)&sidh=@(sid)">@(sensor.last)</a></td>
<td>Uptime</td>
<td class="bloo">@(sensor.last_elapsed)</td>
<tr>
# for id,d in ipairs(sensor.detectors) do
<tr>
<td class="bloo">@(d.did)</td>
<td class="bloo bold">@(d.name)</td>
<td class="bloo bold" colspan="2"><a href="/?idx=@(which)&sid=@(sid)&did=@(d.did)">@(fmt(d.value)) @(d.units)</a></td>
<tr>
# end end
</table>
<br/>
# if sensor_history and sensor_history.sid == sid then -- showing sensor history
<table class="Sensor">
# for _,h in ipairs(sensor_history) do
<tr>
<td>Joined</td>
<td class="bloo">@(h.joined)</td>
<td>Uptime</td>
<td class="bloo">@(h.joined_elapsed)</td>
<tr>
# end
</table>
<br />
# end
# if sidx and sidx == sid then -- plotting sensor data
<form name="date_range" action="/" method="get">
Start Date <input type="text" name="start" id="start" value="@(range.start)" class="@(range.start_status)"/>
End Date <input type="text" name="finish" id="finish" value="@(range.finish)" class="@(range.finish_status)" />
<!-- there must be an easier way! Pass the other values on .. -->
<input type="hidden" name="idx" value="@(which)"/>
<input type="hidden" name="sid" value="@(sid)"/>
<input type="hidden" name="did" value="@(did)"/>
<input type="submit" value="Submit" />
</form>
<div id="placeholder" style="width:550px;height:270px;margin-bottom: 5px" ></div>
<script type="text/javascript">
$(function () {
var d1 = @(plot_data);
var placeholder = $("#placeholder");
var options = {
xaxis: { mode: "time" },
yaxis: { zoomRange: false, panRange: false },
zoom: { interactive: true, },
pan: { interactive: true },
grid: { backgroundColor: { colors: ["#fff", "#eee"] } }
}
var plot;
function make_plot() {
plot = $.plot(placeholder, [d1.data], options);
// add zoom out button
$('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
e.preventDefault();
make_plot();
});
}
function p2(s) {
return s < 10 ? "0"+s : s;
}
function time_as_str(t) {
t = new Date(t)
return t.getFullYear()+"-"+p2(t.getMonth()+1)+"-"+p2(t.getDate())+" "+
p2(t.getHours())+":"+p2(t.getMinutes())+":"+p2(t.getSeconds())
}
function report_time_value() {
var xaxis = plot.getAxes().xaxis;
$("#start").val(time_as_str(xaxis.min))
$("#finish").val(time_as_str(xaxis.max))
}
make_plot();
placeholder.bind("plotpan",report_time_value)
placeholder.bind("plotzoom",report_time_value)
})
</script>
# end
# end
</div>
<p style="clear:both"><a href="/anthony.lua">code</a> and <a href="/mockup.ltp">template</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment