Add user interface for monitor, #44

themes/bootstrap/templates/_base.html

@@ -48,7 +48,8 @@
               </ul>
             </li>
             {{end}}
-            <li id="nav-status"><a href="/status" accesskey="2">Status</a></li>
+            <li id="nav-monitor"><a href="/monitor" accesskey="2">Monitor</a></li>
+            <li id="nav-status"><a href="/status" accesskey="3">Status</a></li>
           </ul>
           <form class="navbar-form navbar-right" action="{{reverse "MailboxIndex"}}" method="GET">
             <div class="form-group">

themes/bootstrap/templates/root/monitor.html

@@ -0,0 +1,51 @@
+{{define "title"}}Inbucket Monitor{{end}}
+
+{{define "script"}}
+<script src="/public/monitor.js" type="text/javascript" charset="utf-8"></script>
+<script>
+$(document).ready(function () {
+  $('#nav-monitor').addClass('active');
+  startMonitor();
+});
+</script>
+<script type="text/html" id="message-template">
+  <tr data-href="href" onclick="messageClick(this);">
+    <td data-content="date" data-format="date"/>
+    <td data-content-text="from"/>
+    <td data-content-text="mailbox"/>
+    <td data-content-text="subject" data-format="subject"/>
+  </tr>
+</script>
+{{end}}
+
+{{define "menu"}}
+<div id="logo">
+  <h1><a href="/">inbucket</a></h1>
+  <h2>email testing service</h2>
+</div>
+{{end}}
+
+{{define "content"}}
+<h2>Inbucket Monitor</h2>
+
+<div class="pull-right">
+  <button class="btn btn-primary" onclick="clearClick();">Clear</button>
+</div>
+
+<p class="small">Messages will be listed here shortly after delivery.</p>
+
+<div class="table-responsive clearfix">
+  <table class="table table-condensed table-hover">
+    <thead>
+      <tr>
+        <th>Date</th>
+        <th>From</th>
+        <th>Mailbox</th>
+        <th>Subject</th>
+      </tr>
+    </thead>
+    <tbody id="monitor-message-list"></tbody>
+  </table>
+</div>
+{{end}}
+