From 3ed4b458a12694848569b8b6d0fc68c209b9914a Mon Sep 17 00:00:00 2001
From: phil <phil@systemausfall.org>
Date: Mon, 27 Apr 2015 12:59:45 +0000
Subject: [PATCH] simple javascript clock for frontend

remove table from administration backend, styling with bootstrap for mobile compability
---
 example-output-style/clock.js     | 19 ++++++++++
 templates/admin_show_entries.html | 63 ++++++++++++++++++++-----------
 templates/display.html            | 12 ++++--
 3 files changed, 68 insertions(+), 26 deletions(-)
 create mode 100644 example-output-style/clock.js

diff --git a/example-output-style/clock.js b/example-output-style/clock.js
new file mode 100644
index 0000000..7611c7b
--- /dev/null
+++ b/example-output-style/clock.js
@@ -0,0 +1,19 @@
+tday=new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
+tmonth=new Array("Januar","Februar","M%E4rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
+
+function GetClock(){
+var d=new Date();
+var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
+
+
+if(nyear<1000) nyear+=1900;
+if(nmin<=9) nmin="0"+nmin;
+if(nsec<=9) nsec="0"+nsec;
+
+document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+ndate+". "+tmonth[nmonth]+" "+nyear+" <br/>"+nhour+":"+nmin+":"+nsec+"";
+}
+
+window.onload=function(){
+GetClock();
+setInterval(GetClock,1000);
+}
diff --git a/templates/admin_show_entries.html b/templates/admin_show_entries.html
index d3c532d..bdbf10b 100644
--- a/templates/admin_show_entries.html
+++ b/templates/admin_show_entries.html
@@ -22,7 +22,6 @@
 
 <div class="page-header"></div>
 
-<div class="container">
 
 <p><a href="../../${static_url}" title="static website">Show frontpage of this tycker</a></p>
 
@@ -47,31 +46,49 @@
 
 <div id="timestamp">
   <form action="generate" method="GET">
-         <input type="submit" value="Generate current timestamp" />
+         <button type="submit" class="btn btn-default">Generate current timestamp</button>
   </form>
 </div>
 
-<table border="1">
-	<tr><th>Timestamp</th><th>Title</th><th>Content</th></tr>
-	<tr><form action="submit" method="GET">
-		<td><input type="text" size="20" name="date" value="${now.strftime(date_format)}" /></td>
-		<td><input type="text" size="25" name="title" value="" autofocus="autofocus" /></td>
-		<td><textarea name="content" rows="8" cols="80" /></td>
-		<td><input type="submit" value="Create" /></td>
-	</form></tr>
-	<tr py:for="entry in entries"><form action="submit" method="GET">
-			<td><input type="text" size="20" name="date" value="${entry['timestamp'].strftime(date_format)}" /></td>
-			<td><input type="text" size="25" name="title" value="${entry['title']}" /></td>
-			<td><textarea name="content" rows="8" cols="80">${entry['content']}</textarea></td>
-			<td><input type="hidden" name="entry_id" value="${entry.id}" /><input type="submit" value="Update" /></td>
-		</form>
-		<td><form action="delete" method="GET">
-			<input type="hidden" name="entry_id" value="${entry.id}" />
-			<input type="submit" value="Delete" />
-		</form></td>
-	</tr>
-</table>
-</div>
+<form action="submit" method="GET">
+  <div class="form-group">
+    <label for="Timestamp">Timestamp</label>
+    <input type="text" class="form-control" id="Timestamp" name="date" value="${now.strftime(date_format)}" />
+  </div>
+  <div class="form-group">
+    <label for="Title">Title</label>
+    <input type="text" class="form-control" id="Titel" name="title" value="" autofocus="autofocus" />
+  </div>
+  <div class="form-group">
+    <label for="Content">Content</label>
+    <textarea class="form-control" name="content" rows="8" cols="80" />
+  </div>
+  <button type="submit" class="btn btn-default">Create</button>
+</form>
+
+<hr/>
+
+<h3>Old entries</h3>
+<div class="well" py:for="entry in entries">
+  <form action="submit" method="GET" >
+    <div class="form-group">
+      <input type="text" class="form-control" name="date" value="${entry['timestamp'].strftime(date_format)}" />
+    </div>
+    <div class="form-group">
+      <input type="text" class="form-control" name="title" value="${entry['title']}" />
+    </div>
+    <div class="form-group">
+      <textarea name="content" class="form-control" rows="8" cols="80">${entry['content']}</textarea>
+    </div>
+     <input type="hidden" name="entry_id" value="${entry.id}" /><button type="submit" class="btn btn-default">Update</button>
+   </form>
+   <br/>
+   <form action="delete" method="GET">
+     <input type="hidden" name="entry_id" value="${entry.id}" />
+     <button type="submit" class="btn btn-default">Delete</button>
+   </form>
+ </div>
+
 </div>
 </body>
 </html>
diff --git a/templates/display.html b/templates/display.html
index bfd78ef..ec810da 100644
--- a/templates/display.html
+++ b/templates/display.html
@@ -10,6 +10,7 @@
 	<link type="text/css" rel="stylesheet" media="all" href="bootstrap/css/bootstrap-theme.min.css" />
 	<link type="text/css" rel="stylesheet" media="all" href="style.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<script type="text/javascript" src="clock.js"></script>
 </head>
 
 <?python from helpers import formatter, show_timestamp, nav_links ?>
@@ -22,7 +23,9 @@
   <h1 id="title" />
 </div>
 
-    <div class="container">
+<div class="container-fluid">
+<div class="row">
+  <div class="col-xs-12 col-md-8">
         ${nav_links(prev_link, next_link)}
 
             <div class="well" py:for="entry in entries">
@@ -31,11 +34,14 @@
                     ${formatter(entry['content'])}
                     <footer>${show_timestamp(entry['timestamp'])}</footer>
                 </blockquote>
-        </div>
+            </div>
 
         ${nav_links(prev_link, next_link)}
-    </div>
+</div>
 
+<div class="col-xs-6 col-md-4"><div id="clockbox"></div></div>
+</div>
+</div>
 <div id="footer" class="page-footer" />
 </div>