diff options
author | Filipp Lepalaan <f@0x00.co> | 2013-01-31 20:08:20 +0200 |
---|---|---|
committer | Filipp Lepalaan <f@0x00.co> | 2013-01-31 20:08:20 +0200 |
commit | c0121b9b7f5041f6434a2e2dd24d3c68ed84b582 (patch) | |
tree | e3e8d0a05c45dabcc2a0399f902c6a59c92a9f4f /timer/templates | |
parent | e613dc2b8b17e6f58a9666bee03578bb7ffc4067 (diff) | |
download | opus-c0121b9b7f5041f6434a2e2dd24d3c68ed84b582.tar.gz opus-c0121b9b7f5041f6434a2e2dd24d3c68ed84b582.tar.bz2 opus-c0121b9b7f5041f6434a2e2dd24d3c68ed84b582.zip |
Initial commit
Diffstat (limited to 'timer/templates')
-rw-r--r-- | timer/templates/alarm.html | 68 | ||||
-rw-r--r-- | timer/templates/default.html | 62 | ||||
-rw-r--r-- | timer/templates/event_detail.html | 13 | ||||
-rw-r--r-- | timer/templates/event_grid.html | 30 | ||||
-rw-r--r-- | timer/templates/event_list.html | 5 | ||||
-rw-r--r-- | timer/templates/label_list.html | 3 | ||||
-rw-r--r-- | timer/templates/labels.html | 31 | ||||
-rw-r--r-- | timer/templates/timer.html | 59 |
8 files changed, 271 insertions, 0 deletions
diff --git a/timer/templates/alarm.html b/timer/templates/alarm.html new file mode 100644 index 0000000..a9a6b54 --- /dev/null +++ b/timer/templates/alarm.html @@ -0,0 +1,68 @@ +{% extends "default.html" %} + +{% block js %} + <script type="text/template" id="startViewTemplate"> + <input type="text" value="<%= minutes %>" placeholder="M" id="minutes"/>:<input type="text" id="seconds" value="<%= seconds %>"/> + <a href="#runningView" data-role="button">Start</a> + </script> + <script type="text/template" id="runningViewTemplate"> + <h1><%= minutes_remaining %>:<%= seconds_remaining %></h1> + <a href="#" data-role="button">Stop</a> + </script> + <script type="text/javascript"> + var Alarm = Backbone.Model.extend({ + start: function() { + var elapsed = 0; + var interval = parseInt(this.get('minutes'))*60 + parseInt(this.get('seconds')); + window.setInterval(function() { + elapsed += 1; + if(elapsed < interval) { + console.log(interval - elapsed, ' seconds to go'); + } + }, 1000); + }, + stop: function() { + + }, + pause: function() { + + } + }); + + var RunningView = Backbone.View.extend({ + initialize: function() { + this.template = _.template($('#runningViewTemplate').html()); + this.modal.on('change', this.render); + }, + render: function() { + console.log('render!!!'); + return this; + } + }); + + var AppView = Backbone.View.extend({ + initialize: function() { + var tpl = _.template($('#startViewTemplate').html()); + alarm = new Alarm({minutes: 0, seconds: 15}); + $('#startView').append(tpl(alarm.toJSON())); + //alarm.start(); + //$('#startView a').button('refresh'); + //$('#startView input').textinput('enable'); + } + }); + + $(function() { + new AppView; + }); + + </script> +{% endblock js %} + +{% block content %} + <div data-role="page"> + <div data-role="content" id="startView"></div> + </div> + <div data-role="page"> + <div data-role="content" id="runningView"></div> + </div> +{% endblock content %} diff --git a/timer/templates/default.html b/timer/templates/default.html new file mode 100644 index 0000000..ec91d78 --- /dev/null +++ b/timer/templates/default.html @@ -0,0 +1,62 @@ +{% load staticfiles %} +<!DOCTYPE html> +<html> +<head> + <title>opus v0.01</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" /> + <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> + <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script> + <script type="text/javascript"> + function getDate(field) { + // 2013-01-30 08:36:48 + var splitRex = /^(\d{4})\-(\d{2})\-(\d{2})\s(\d{2}):(\d{2}):(\d{2})$/; + var s = $(field).val().match(splitRex); + return new Date(s[1], parseInt(s[2])-1, s[3], s[4], s[5], s[6], 0); + } + + function toDateTime(date) { + function pad(n){return n<10 ? '0'+n : n} + return date.getFullYear()+'-' + +pad(date.getMonth()+1)+'-' + +pad(date.getDate())+' ' + +pad(date.getHours())+':' + +pad(date.getMinutes())+':' + +pad(date.getSeconds()); + } + + $(function(){ + $('#duration').blur(function(){ + if($('#id_started_at').val() == '') return; + + started_at = getDate('#id_started_at'); + var d = $(this).val().split(':'); + // H:M:S + var seconds = 0; + if (d[0]) seconds += parseInt(d[0]*3600); + if (d[1]) seconds += parseInt(d[1]*60); + if (d[2]) seconds += parseInt(d[2]); + finished_at = new Date(started_at.getTime() + (seconds*1000)); + $('#id_finished_at').val(toDateTime(finished_at)); + $('#id_duration').val(seconds); + + }); + + $('#id_finished_at').blur(function(){ + if($('#id_duration').val() == '') return; + finished_at = getDate('#id_finished_at'); + started_at = getDate('#id_started_at'); + seconds = (finished_at - started_at)/1000; + $('#id_duration').val(seconds); + hours = seconds/3600; + $('#duration').val(hours); + }); + }); + </script> +</head> + <body id="app"> + {% block content %} + + {% endblock content %} + </body> +</html> diff --git a/timer/templates/event_detail.html b/timer/templates/event_detail.html new file mode 100644 index 0000000..8f32759 --- /dev/null +++ b/timer/templates/event_detail.html @@ -0,0 +1,13 @@ +{% extends "timer.html" %} + +{% block content %} + <div data-role="page"> + <div data-role="header" data-position="fixed"> + <a href="#" data-icon="back" data-rel="back">Back</a> + <h1></h1> + </div> + <div data-role="content"> + <a href="{{ event.get_absolute_url }}delete/" data-role="button">Delete</a> + </div> + </div> +{% endblock content %} diff --git a/timer/templates/event_grid.html b/timer/templates/event_grid.html new file mode 100644 index 0000000..efc8a39 --- /dev/null +++ b/timer/templates/event_grid.html @@ -0,0 +1,30 @@ +{% extends "timer.html" %} + +{% block main_content %} +<table style="width:100%;border:1px; solid #ccc"> + <thead> + <tr> + <th>Date</th> + <th>Started</th> + <th>Finished</th> + <th>Total</th> + <th>Week Total</th> + </tr> + </thead> + <tbody> + {% for e in events %} + <tr> + <td>{{ started_at|date:"SHORT_DATE_FORMAT" }}</td> + </tr> + {% endfor %} + </tbody> + <tfoot> + <tr> + <td>Normal Hours:</td> + <td>{{ normal_hours }}</td> + <td>Over Time:</td> + <td>{{ over_time }}</td> + </tr> + </tfoot> +</table> +{% endblock main_content %} diff --git a/timer/templates/event_list.html b/timer/templates/event_list.html new file mode 100644 index 0000000..033f004 --- /dev/null +++ b/timer/templates/event_list.html @@ -0,0 +1,5 @@ +{% for i in events %} + <li> + <a href="{{ i.get_absolute_url }}">{{ i.hours }}h @ {{ i.started_at|date:"SHORT_DATE_FORMAT" }} {{ i.started_at|date:"H:i" }} {{ i.notes }}</a> + </li> +{% endfor %} diff --git a/timer/templates/label_list.html b/timer/templates/label_list.html new file mode 100644 index 0000000..2f044be --- /dev/null +++ b/timer/templates/label_list.html @@ -0,0 +1,3 @@ +{% for l in labels %} + <li><a href="/timer/label/1/events/?view=list">{{ l.title }}<span class="ui-li-count">{{ l.event_set.count }}</span></a></a></li> +{% endfor %} diff --git a/timer/templates/labels.html b/timer/templates/labels.html new file mode 100644 index 0000000..325f5e7 --- /dev/null +++ b/timer/templates/labels.html @@ -0,0 +1,31 @@ +{% extends "timer.html" %} + +{% block content %} +<div data-role="page"> + <div data-role="header"> + <h1>Labels</h1> + <a href="#labelPopup" data-icon="plus" data-rel="popup" data-position-to="window">Add</a> + </div> + <div data-role="content"> + <ul data-role="listview" id="labelList"> + {% include "label_list.html" %} + </ul> + </div> + <div data-role="popup" id="labelPopup" class="ui-content"> + <form method="post" action="/timer/labels/new/"> + {% csrf_token %} + <input type="text" name="title"/> + <select name="color"> + <option>Red</option> + <option>Orange</option> + <option>Yellow</option> + <option>Green</option> + <option>Blue</option> + <option>Purple</option> + <option>Brown</option> + </select> + <button type="submit">Save</button> + </form> + </div> +</div> +{% endblock content %} diff --git a/timer/templates/timer.html b/timer/templates/timer.html new file mode 100644 index 0000000..bb1d0c0 --- /dev/null +++ b/timer/templates/timer.html @@ -0,0 +1,59 @@ +{% extends "default.html" %} + +{% block content %} +<div data-role="page"> + <div data-role="header" data-position="fixed"> + <a href="/timer/">Labels</a> + <h1>{{ label.title }}</h1> + <a href="#eventPopup" data-icon="plus" data-rel="popup" data-position-to="window" data-transition="fade">New Event</a> + </div> + <div data-role="header" data-theme="b"> + <a href="?start={{ previous }}" data-icon="arrow-l" data-iconpos="left">Previous</a> + <h1>{{ title|date:"SHORT_DATE_FORMAT" }}</h1> + <a href="?start={{ next }} " data-icon="arrow-r" data-iconpos="right">Next</a> + </div> + <div data-role="navbar"> + <ul> + <li><a href="?view=list">List</a></li> + <li><a href="?view=report">Report</a></li> + </ul> + </div> + <div data-role="content"> + {% block main_content %} + <ul data-role="listview" id="eventList" data-filter="true"> + {% include "event_list.html" %} + </ul> + {% endblock main_content %} + </div> + + <div data-role="footer" data-position="fixed" style="text-align:center;"> + <a href="?start={% now "Ymd" %}&group=day" style="float:left">Today</a> + <div data-role="controlgroup" data-type="horizontal"> + <a href="?start={{ title|date:"Ymd" }}&group=day" data-role="button">Day</a> + <a href="?start={{ title|date:"Ymd" }}&group=week" data-role="button">Week</a> + <a href="?start={{ title|date:"Ymd" }}&group=month" data-role="button">Month</a> + </div> + </div> + + <div data-role="popup" id="eventPopup" class="ui-content" data-theme="b"> + <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> + <form method="post" action="" class="ui-hide-label"> + {% csrf_token %} + <div class="ui-grid-b"> + <div class="ui-block-a">{{ form.started_at }}</div> + <div class="ui-block-c"><input type="text" id="duration"/></div> + <div class="ui-block-b">{{ form.finished_at }}</div> + </div><!-- /grid-a --> + {{ form.duration }} + {{ form.labels }} + {{ form.notes }} + <button type="submit" data-theme="b">Save</button> + </form> + </div> +</div> + +<div data-role="page" id="event"> + +</div> + +{% endblock content %} |