Commit 9a7b9b82 authored by zdc's avatar zdc

changed action list: now fully dynamic with JavaScript

you can add any command without edit template
parent e3ff9f3a
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<title>Looking Glass</title>
</head>
<body>
......@@ -18,7 +19,7 @@
<td>Router</td>
<td style="width: 50px;">&nbsp;</td>
<td>
<select name="router">
<select id="router" name="router">
{{range .RoutersList}}<option value="{{ .RouterId }}">{{ .RouterName }}</option>
{{else}}<option>no enabled routers</option>{{end}}
</select>
......@@ -28,10 +29,7 @@
<td>Action</td>
<td>&nbsp;</td>
<td>
<select name="action">
<option value="ping">ping</option>
<option value="traceroute">traceroute</option>
<option value="showroute">show route</option>
<select id="action" name="action">
</select>
</td>
</tr>
......@@ -59,5 +57,46 @@
</tr>
</tbody>
</table>
<script type="text/javascript">
// setting global variables
var jsondata;
var action = document.getElementById("action");
// get json data from server
$.getJSON( "json", function (jsonraw) {
jsondata = jsonraw;
// fill actions for selected router
FillInAction();
});
// action to do when router is selected
$( "#router" ).change ( function () {
// fill actions for selected router
FillInAction();
});
function addAction(OptionName, index, array) {
var option = document.createElement("option");
option.text = OptionName;
action.add(option);
}
function FillInAction() {
var router = document.getElementById('router');
var RouterId = router.value;
// clear action list
$(action).empty()
// add actions to list
$.each(jsondata, function(i, v) {
if (v.RouterId == RouterId) {
v.RouterCommands.forEach(addAction);
}
});
}
</script>
</body>
</html>
\ No newline at end of file
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment