Clean up. More backend code. Better UX and design.

8 files changed, 43 insertions, 107 deletions

diff --git a/views/admin.html b/views/admin.html
index f80c541..ebec09c 100644
--- a/views/admin.html
+++ b/views/admin.html
@@ -5,10 +5,10 @@
 <div class="container">
 	<div class="row">
 {{range .Error}}
-<h4 class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible" role="alert">
+<p class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible shadow-z-2" role="alert">
 	<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
 	{{.}}
-</h4>
+</p>
 {{end}}
 	</div>
 </div>
@@ -17,18 +17,25 @@
 <div class="container">
 	<div class="row">
 {{range .Success}}
-<h4 class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible" role="alert">
+<p class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible shadow-z-2" role="alert">
 	<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
 	{{.}}
-</h4>
+</p>
 {{end}}
 	</div>
 </div>
 {{end}}
 <div class="container">
 	<div class="row">
+		<div class="pull-left">
 		<button id="btn-reload" class="btn btn-primary btn-raised"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
 		<button class="btn btn-primary btn-raised" data-toggle="modal" data-target="#jobs-modal"><span class="glyphicon glyphicon-plus-sign"></span> Add new host</button>
+		</div>
+		<div class="pull-right">
+			<form action="/logout">
+			<button class="btn btn-danger btn-raised" href="/logout"><span class="glyphicon glyphicon-minus-sign"></span> Logout</button>
+			</form>
+		</div>
 		<table class="table table-striped table-hover ">
 			<thead>
 				<th>#</th>
@@ -36,7 +43,7 @@
 				<th>Url</th>
 				<th>Status</th>
 				<!--th>Status Code</th-->
-				<th>Failure Reason</th>
+				<th class="hide">Failure Reason</th>
 				<th>Delete</th>
 			</thead>
 			<tbody>
@@ -47,13 +54,18 @@
 				<td>{{.Url}}</td>
 				<td>{{.Status}}</td>
 				<!--td>{{.StatusCode}}</td-->
-				<td>{{.Reason}}</td>
+				<td class="hide">{{.Reason}}</td>
 				<!--td><span class="glyphicon glyphicon-pencil"></span></td-->
-				<td>&times;</td>
+				<td><a href="#" data-toggle="modal" data-target="delete-modal">&times;</a></td>
 			</tr>
 {{end}}
 			</tbody>
 		</table>
+		<div class="pull-left">
+			<form action="/refresh" method="POST">
+			<button class="btn btn-primary btn-raised"><span class="glyphicon glyphicon-refresh"></span> Update all</button>
+			</form>
+		</div>
 	</div>
 </div>
 {{template "jobs_modal.html"}}
diff --git a/views/admin.html.copy b/views/admin.html.copy
deleted file mode 100644
index 17f5c87..0000000
--- a/views/admin.html.copy
+++ /dev/null
@@ -1,45 +0,0 @@
-{{template "header.html"}}
-{{template "navbar.html"}}
-
-<div class="container">
-	<div class="row">
-{{range .Error}}
-<h4 class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible" role="alert">
-	<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
-	{{.}}
-</h4>
-{{end}}
-{{range .Success}}
-<h4 class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible" role="alert">
-	<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
-	{{.}}
-</h4>
-{{end}}
-		<button class="btn btn-primary btn-raised"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
-		<button class="btn btn-primary btn-raised" data-toggle="modal" data-target="#jobs_modal"><span class="glyphicon glyphicon-plus-sign"></span> Reload</button>
-		<table class="table table-striped table-hover ">
-			<thead>
-				<th>#</th>
-				<th>Host</th>
-				<th>Url</th>
-				<th>Status</th>
-				<!--th>Status Code</th-->
-				<th>Failure Reason</th>
-			</thead>
-			<tbody>
-{{range $index, $results := .}}
-		<tr class="{{.Class}}">
-				<td>{{add $index 1}}</td>
-				<td>{{.Host}}</td>
-				<td>{{.Url}}</td>
-				<td>{{.Status}}</td>
-				<!--td>{{.StatusCode}}</td-->
-				<td>{{.Reason}}</td>
-			</tr>
-{{end}}
-			</tbody>
-		</table>
-	</div>
-</div>
-{{template "jobs_modal.html"}}
-{{template "footer.html"}}
diff --git a/views/footer.html b/views/footer.html
index ae8f370..7fb9d2d 100644
--- a/views/footer.html
+++ b/views/footer.html
@@ -2,28 +2,24 @@
 	<div class='container'>
 		<div class='row'>
 		<footer>
-			<p class="pull-left"><a class="footer-a" href="/admin" title="admin"><span class="glyphicon glyphicon-cog"></span> Admin</a></p>
+			<!--p class="pull-left"><a class="footer-a" href="/admin" title="admin"><span class="glyphicon glyphicon-cog"></span> Admin</a></p-->
 			<p class="pull-right"> Copyright 2015 <a class='footer-a' href='//www.iamfabulous.de' title='Maximilian Möhring'>Maximilian M&ouml;hring</a></p>
 		</footer>
 		</div>
 	</div>
 </div>
-<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
-<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
-<!--script src='/static/js/bootstrap.js'></script-->
+<!--script src='//code.jquery.com/jquery-1.11.2.min.js'></script-->
+<script src='/static/js/jquery-1.11.2.min.js'></script>
+<!--script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script-->
+<script src='/static/bootstrap/js/bootstrap.js'></script>
 <script src='/static/js/ripples.min.js'></script>
 <script src='/static/js/material.min.js'></script>
 <script>
 	$(document).ready(function() {
 		$.material.init();	
 	});
-	$("#btn-reload").click(function(){
-		location.reload();
-	});
 </script>
+<script src='/static/js/app.js' type='text/javascript' charset='utf-8'></script>
 
-  {{range .moreScripts}}
-	<script src='/static/js/{{.}}' type='text/javascript' charset='utf-8'></script>
-  {{end}}
   </body>
 </html>
diff --git a/views/footer_admin.html b/views/footer_admin.html
deleted file mode 100644
index 3918f3e..0000000
--- a/views/footer_admin.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class='footer'>
-	<div class='container'>
-		<div class='row'>
-		<footer>
-			<p class="pull-left"><a class="footer-a" href="/admin" title="admin"><span class="glyphicon glyphicon-cog"></span> Admin</a></p>
-			<p class="pull-right"> Copyright 2015 <a class='footer-a' href='//www.iamfabulous.de' title='Maximilian Möhring'>Maximilian M&ouml;hring</a></p>
-		</footer>
-		</div>
-	</div>
-</div>
-<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
-<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
-<!--script src='/static/js/bootstrap.js'></script-->
-<script src='/static/js/ripples.min.js'></script>
-<script src='/static/js/material.min.js'></script>
-<script>
-	$(document).ready(function() {
-		$.material.init();	
-	})
-</script>
-
-  {{range .moreScripts}}
-	<script src='/static/js/{{.}}' type='text/javascript' charset='utf-8'></script>
-  {{end}}
-  </body>
-</html>
diff --git a/views/header.html b/views/header.html
index 3af93d8..bd1a3b0 100644
--- a/views/header.html
+++ b/views/header.html
@@ -3,17 +3,18 @@
 <html>
   <head>
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>{{.title}}</title>
-    <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
-    <!--link rel='stylesheet' type='text/css' href='/static/css/bootstrap.css'-->
-    <link rel='stylesheet' type='text/css' href='/static/css/style.css'>
+    <!--link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'-->
+    <link rel='stylesheet' type='text/css' href='/static/bootstrap/css/bootstrap.min.css'>
     <link rel='stylesheet' type='text/css' href='/static/css/ripples.min.css'>
     <link rel='stylesheet' type='text/css' href='/static/css/material-wfont.min.css'>
+    <link rel='stylesheet' type='text/css' href='/static/css/style.css'>
     <link rel='shortcut icon' type='image/png' href='/static/img/favicon.ico'>
     {{range .moreStyles}}
       <link rel='stylesheet' type='text/css' href='/public/{{.}}'>
     {{end}}
-    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <noscript>
 	<style>.navbar{margin-bottom:0;}</style>
      </noscript>
diff --git a/views/index.html b/views/index.html
index 88f8e2e..61c8597 100644
--- a/views/index.html
+++ b/views/index.html
@@ -3,7 +3,8 @@
 
 <div class="container">
 	<div class="row">
-		<button id="btn-reload" class="btn btn-primary btn-raised"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
+		<button id="btn-reload" class="btn btn-success btn-raised"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
+		<a id="" class="btn btn-success btn-raised toggle"><span class="glyphicon glyphicon-refresh"></span> Show failure reasons</a>
 		<table class="table table-striped table-hover ">
 			<thead>
 				<th>#</th>
@@ -11,7 +12,7 @@
 				<th>Url</th>
 				<th>Status</th>
 				<!--th>Status Code</th-->
-				<th>Failure Reason</th>
+				<th class="hide">Failure Reason</th>
 			</thead>
 			<tbody>
 {{range $index, $results := .}}
@@ -21,7 +22,7 @@
 				<td>{{.Url}}</td>
 				<td>{{.Status}}</td>
 				<!--td>{{.StatusCode}}</td-->
-				<td>{{.Reason}}</td>
+				<td class="hide">{{.Reason}}</td>
 			</tr>
 {{end}}
 			</tbody>
diff --git a/views/jobs_modal.html b/views/jobs_modal.html
index 4d6f159..9a85a59 100644
--- a/views/jobs_modal.html
+++ b/views/jobs_modal.html
@@ -1,5 +1,5 @@
 <div id="jobs-modal" class="modal fade" tabindex="-1">
-	<div class="modal-dialog">
+	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 			<div class="modal-body">
 <form class="form-horizontal" method='post' action='/new'>
@@ -13,11 +13,11 @@
 		<!-- Text input-->
 		<div class="form-group">
 			<label class="col-md-4 control-label" for="Url">Job Url:</label>  
-			<div class="col-md-4">
+			<div class="col-md-6">
 		        	<div class="input-group">
 				<input id="Url" name="Url" placeholder="Url to monitor." class="form-control input-md" required="" type="text">
 			      	<span class="input-group-addon">     
-					<input name="Private" type="checkbox">     
+					<input name="Private" type="checkbox"> Check as private.    
 			        </span>
 				</div>
 				<span class="help-block">Check to mark this host as private.</span>  
diff --git a/views/navbar.html b/views/navbar.html
index 94e6010..a8a2fe8 100644
--- a/views/navbar.html
+++ b/views/navbar.html
@@ -1,16 +1,13 @@
-<nav class='navbar navbar-default navbar-custom' role='navigation'>
+<nav class='navbar navbar-default navbar-custom shadow-z-2' role='navigation'>
 	<div class='container'>
 		<div class='navbar-header'>
-			<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#navbarCollapse'>
-				<span class='sr-only'>Toggle navigation</span>
-				<span class='icon-bar'></span>
-				<span class='icon-bar'></span>
-				<span class='icon-bar'></span>
-			</button>
 			<a class='navbar-brand' href='/'><span class='glyphicon glyphicon-home'></span> Home</a>
 		</div>
-		<div class='collapse navbar-collapse' id='navbarCollapse'>
-			<ul class='nav navbar-nav navbar-bar-left'>
+		<div class="collapse navbar-collapse" id="navbarCollapse">
+			<ul class="nav navbar-nav navbar-right">
+				<li>
+				<a class="" href="/admin" title="admin"><span class="glyphicon glyphicon-cog"></span> Admin</a>
+				</li>
 			</ul>
 		</div>
 	</div>