From 49ffcba2c3c4a19d147dd792d7f6c99b7545a491 Mon Sep 17 00:00:00 2001
From: Horus3
Date: Wed, 25 Feb 2015 16:41:52 +0100
Subject: UX on front end.

---
 views/admin.html        | 60 +++++++++++++++++++++++++++++++++++++++++++++++
 views/admin.html.copy   | 45 +++++++++++++++++++++++++++++++++++
 views/footer.html       | 20 ++++++++++++----
 views/footer_admin.html | 26 +++++++++++++++++++++
 views/header.html       |  2 ++
 views/index.html        | 29 ++++++++++++++++++++---
 views/jobs_modal.html   | 43 ++++++++++++++++++++++++++++++++++
 views/login.html        | 62 +++++++++++++++++++++++++++++++++++++++++++++++++
 views/navbar.html       |  6 -----
 views/navbar_admin.html | 23 ++++++++++++++++++
 10 files changed, 303 insertions(+), 13 deletions(-)
 create mode 100644 views/admin.html.copy
 create mode 100644 views/footer_admin.html
 create mode 100644 views/jobs_modal.html
 create mode 100644 views/navbar_admin.html

(limited to 'views')

diff --git a/views/admin.html b/views/admin.html
index e69de29..f80c541 100644
--- a/views/admin.html
+++ b/views/admin.html
@@ -0,0 +1,60 @@
+{{template "header.html"}}
+{{template "navbar.html"}}
+
+{{if .Error}}
+<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}}
+	</div>
+</div>
+{{end}}
+{{if .Success}}
+<div class="container">
+	<div class="row">
+{{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}}
+	</div>
+</div>
+{{end}}
+<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 class="btn btn-primary btn-raised" data-toggle="modal" data-target="#jobs-modal"><span class="glyphicon glyphicon-plus-sign"></span> Add new host</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>
+				<th>Delete</th>
+			</thead>
+			<tbody>
+{{range $index, $results := .Hosts}}
+		<tr class="{{.Class}}">
+				<td>{{add $index 1}}</td>
+				<td>{{.Host}}</td>
+				<td>{{.Url}}</td>
+				<td>{{.Status}}</td>
+				<!--td>{{.StatusCode}}</td-->
+				<td>{{.Reason}}</td>
+				<!--td><span class="glyphicon glyphicon-pencil"></span></td-->
+				<td>&times;</td>
+			</tr>
+{{end}}
+			</tbody>
+		</table>
+	</div>
+</div>
+{{template "jobs_modal.html"}}
+{{template "footer.html"}}
diff --git a/views/admin.html.copy b/views/admin.html.copy
new file mode 100644
index 0000000..17f5c87
--- /dev/null
+++ b/views/admin.html.copy
@@ -0,0 +1,45 @@
+{{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 7cc4a34..ae8f370 100644
--- a/views/footer.html
+++ b/views/footer.html
@@ -1,11 +1,9 @@
-  {{range .moreScripts}}
-	<script src='/static/js/{{.}}' type='text/javascript' charset='utf-8'></script>
-  {{end}}
 <div class='footer'>
 	<div class='container'>
 		<div class='row'>
 		<footer>
-			<p id='copyright-text' align='right'> Copyright 2015 <a class='footer-a' href='//www.iamfabulous.de' title='Maximilian Möhring'>Maximilian M&ouml;hring</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>
@@ -13,5 +11,19 @@
 <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();	
+	});
+	$("#btn-reload").click(function(){
+		location.reload();
+	});
+</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
new file mode 100644
index 0000000..3918f3e
--- /dev/null
+++ b/views/footer_admin.html
@@ -0,0 +1,26 @@
+<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 694da63..3af93d8 100644
--- a/views/header.html
+++ b/views/header.html
@@ -7,6 +7,8 @@
     <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' type='text/css' href='/static/css/ripples.min.css'>
+    <link rel='stylesheet' type='text/css' href='/static/css/material-wfont.min.css'>
     <link rel='shortcut icon' type='image/png' href='/static/img/favicon.ico'>
     {{range .moreStyles}}
       <link rel='stylesheet' type='text/css' href='/public/{{.}}'>
diff --git a/views/index.html b/views/index.html
index 31ef3f2..88f8e2e 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,8 +1,31 @@
 {{template "header.html"}}
 {{template "navbar.html"}}
-Hello World!
 
-{{range .}}
-Hier steht die Url: {{.Url}}
+<div class="container">
+	<div class="row">
+		<button id="btn-reload" class="btn btn-primary btn-raised"><span class="glyphicon glyphicon-refresh"></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 "footer.html"}}
diff --git a/views/jobs_modal.html b/views/jobs_modal.html
new file mode 100644
index 0000000..4d6f159
--- /dev/null
+++ b/views/jobs_modal.html
@@ -0,0 +1,43 @@
+<div id="jobs-modal" class="modal fade" tabindex="-1">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-body">
+<form class="form-horizontal" method='post' action='/new'>
+	<fieldset>
+
+		<!-- Form Name -->
+		<div class="text-center">
+		<legend>Add a new host!</legend>
+		</div>
+
+		<!-- 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="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">     
+			        </span>
+				</div>
+				<span class="help-block">Check to mark this host as private.</span>  
+			</div>
+		</div>
+
+		<!-- Button -->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="submit"></label>
+			<div class="col-md-4">
+				<button class="btn btn-primary">Submit</button>
+			</div>
+		</div>
+
+	</fieldset>
+</form>
+			</div>
+			<div class="modal-footer">
+				<button class="btn btn-danger" data-dismiss="modal">Dismiss</button>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/views/login.html b/views/login.html
index e69de29..8e4963e 100644
--- a/views/login.html
+++ b/views/login.html
@@ -0,0 +1,62 @@
+{{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}}
+	</div>
+</div>
+<div class="container">
+	<div class="row">
+	</div>
+</div>
+<div class="container">
+	<div class="row">
+<form class="form-horizontal" method='post' action='/login'>
+	<fieldset>
+
+		<!-- Form Name -->
+		<div class="text-center">
+		<legend>Login!</legend>
+		</div>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="Name">Name:</label>  
+			<div class="col-md-4">
+				<input id="Name" name="Name" placeholder="Your Name" class="form-control input-md" required="" type="text">
+			</div>
+		</div>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="Password">Password:</label>  
+			<div class="col-md-4">
+				<input id="Password" name="Password" placeholder="Your Password" class="form-control input-md" required="" type="password">
+			</div>
+		</div>
+
+		<!-- Button -->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="submit"></label>
+			<div class="col-md-4">
+				<button class="btn btn-primary">Submit</button>
+			</div>
+		</div>
+
+	</fieldset>
+</form>
+
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/navbar.html b/views/navbar.html
index 317b564..94e6010 100644
--- a/views/navbar.html
+++ b/views/navbar.html
@@ -11,12 +11,6 @@
 		</div>
 		<div class='collapse navbar-collapse' id='navbarCollapse'>
 			<ul class='nav navbar-nav navbar-bar-left'>
-				<li>
-					<a href='#' >About</a>
-				</li>
-				<li>
-					<a href='#' >Something</a>
-				</li>
 			</ul>
 		</div>
 	</div>
diff --git a/views/navbar_admin.html b/views/navbar_admin.html
new file mode 100644
index 0000000..c143c60
--- /dev/null
+++ b/views/navbar_admin.html
@@ -0,0 +1,23 @@
+<nav class='navbar navbar-default navbar-custom' 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'>
+				<li>
+					<a href='/new' >Add new Job</a>
+				</li>
+				<li>
+					<a href='/logout' >Logout</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</nav>
-- 
cgit v1.2.3