<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OVMS Simple Web API Client</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
form label { display:inline-block; min-width:7em; }
form input { display:inline-block; }
div.cmd { display:inline-block; min-width:14em; min-height:14ex; border:1px inset; padding:4px 8px; margin-right:2em; vertical-align:top; }
div.cmd h2 { margin-top:0; }
table.data th { text-align:left; padding:1px 2px; }
table.data td { font-size:80%; padding:1px 2px; }
</style>
<script type="text/javascript">
function loadtable(tableid, jsonstring){
// make object from json input:
if( jsonstring.startsWith("[") )
json = eval(jsonstring);
else
json = eval("["+jsonstring+"]");
// clear table:
var table = $(tableid);
table.empty();
// add table head:
var tr = table.append($("<thead></thead>").append("<tr></tr>"));
$.each(json[0], function(colname,colval){
tr.append("<th>"+colname+"</th>");
});
// add table body:
var tbody = table.append($("<tbody></tbody>"));
$.each(json, function(rownr,rowdata){
tr = $("<tr></tr>");
$.each(rowdata, function(colname,colval){
tr.append($("<td>"+colval+"</td>"));
});
tbody.append(tr);
});
}
</script>
</head>
<body>
<h1>OVMS Simple Web API Client</h1>
<div class="commands">
<div class="cmd" id="cmd-login">
<h2>Login</h2>
<form name="login" action="http://tmc.openvehicles.com:6868/api/cookie" target="output" method="get">
<div class="row"><label>Username:</label><input type="text" name="username"></div>
<div class="row"><label>Password:</label><input type="password" name="password"></div>
<div class="row"><label> </label><input type="submit" value="Login"></div>
</form>
<p>Note: you need to re-login after inactivity.</p>
</div>
<div class="cmd" id="cmd-status">
<h2>Status</h2>
<form name="status" action="#" target="output" method="get">
<div class="row"><label> </label><input type="button" value="Show vehicles"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/vehicles';"></div>
<div class="row"> </div>
<div class="row"><label>Vehicle:</label><input type="text" name="vehicle"></div>
<div class="row"><label> </label><input type="button" value="Status"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/status/' + document.forms.status.elements.vehicle.value;"></div>
<div class="row"><label> </label><input type="button" value="Location"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/location/' + document.forms.status.elements.vehicle.value;"></div>
<div class="row"><label> </label><input type="button" value="TPMS"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/tpms/' + document.forms.status.elements.vehicle.value;"></div>
<div class="row"><label> </label><input type="button" value="Protocol"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/protocol/' + document.forms.status.elements.vehicle.value;"></div>
<div class="row"><label> </label><input type="button" value="Charge"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/charge/' + document.forms.status.elements.vehicle.value;"></div>
</form>
</div>
<div class="cmd" id="cmd-historical">
<h2>Historical</h2>
<form name="historical" action="#" target="output" method="get">
<div class="row"><label> </label><input type="button" value="List"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/historical/' + document.forms.status.elements.vehicle.value;"></div>
<div class="row"> </div>
<div class="row"><label>Type:</label><input type="text" name="recordtype"></div>
<div class="row"><label> </label><input type="button" value="Fetch"
onclick="window.output.location.href='http://tmc.openvehicles.com:6868/api/historical/' + document.forms.status.elements.vehicle.value
+ '/' + document.forms.historical.elements.recordtype.value;"></div>
</form>
</div>
</div>
<div class="output">
<h2>JSON server response</h2>
<iframe id="output" name="output" width="100%" height="40">
</iframe>
<p>Note: due to javascript security you need to manually copy&paste this into the display input below.</p>
</div>
<div class="display">
<h2>Display</h2>
<form name="display" action="#" target="" method="get">
<div class="row"><label>JSON:</label><textarea name="json" cols="80" rows="2"></textarea></div>
<div class="row"><label> </label><input type="button" value="Display"
onclick="loadtable('#data-display', document.forms.display.elements.json.value)"></div>
</form>
<table class="data" id="data-display" border="1" rules="all"></table>
<p>Hint: for further processing, copy the table into a spreadsheet.</p>
</div>
</body>