simple javascript clock for frontend
remove table from administration backend, styling with bootstrap for mobile compability
This commit is contained in:
parent
d68fa2c57e
commit
172437d378
3 changed files with 68 additions and 26 deletions
19
tycker/example-output-style/clock.js
Normal file
19
tycker/example-output-style/clock.js
Normal 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);
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue