web: hosts: Add HTML UI for host list

master
Dustin 2016-01-03 17:37:08 -06:00
parent cee2f6cba3
commit 96658f2f38
3 changed files with 72 additions and 1 deletions

View File

@ -33,7 +33,7 @@ class HostListController(controllers.BaseController):
if criteria is not None:
hosts = hosts.filter(criteria)
response = request.ResponseClass()
response.set_payload(None, {
response.set_payload('index.html.j2', {
'hosts': hosts.all(),
})
return response

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
{% block head -%}
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" value="ie=edge" />
<meta name="viewport" value="width=device-width" />
<title>{% block title %}{{ page_title }}{% endblock %}</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.1/foundation.min.css" />
{% endblock -%}
</head>
<body>
{% block body -%}
<header>
<section id="top" class="row">
<div class="column">
<h1>{{ page_title }}</h1>
</div>
</section>
</header>
{% block main -%}
{% endblock -%}
{% endblock -%}
</body>
</html>

View File

@ -0,0 +1,42 @@
{% set page_title = 'Hosts' %}
{% extends "base.html.j2" -%}
{% block head -%}
{{ super() }} <style type="text/css">
/* <![CDATA[ */
#host-list table .button {
margin: 0;
}
/* ]]> */
</style>
{% endblock -%}
{% block main -%}
<main>
<section id="host-list" class="row">
<table style="width: 100%;">
<thead>
<tr>
<th scope="col">Host ID</th>
<th scope="col"><abbr title="Media Access Control">MAC</abbr> Address</th>
<th scope="col"><abbr title="Internet Protocol">IP</abbr> Address</th>
<th scope="col">Hostname</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{% for host in hosts -%}
<tr>
<td>{{ host.id }}</td>
<td>{{ host.macaddr }}</td>
<td>{{ host.ipaddr or ''}}</td>
<td>{{ host.hostname or ''}}</td>
<td><form class="wake-host" method="post"
action="{{ url('/{}/wake'.format(host.id)) }}">
<button class="button" type="submit">Wake</button>
</form></td>
</tr>
{% endfor -%}
</tbody>
</table>
</section>
</main>
{% endblock -%}