simple javascript clock for frontend

remove table from administration backend, styling with bootstrap for mobile compability
This commit is contained in:
phil 2015-04-27 12:59:45 +00:00
parent dfb84a4170
commit 3ed4b458a1
3 changed files with 68 additions and 26 deletions

View file

@ -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);
}

View file

@ -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>

View file

@ -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>