aboutsummaryrefslogtreecommitdiffstats
path: root/timer/templates
diff options
context:
space:
mode:
Diffstat (limited to 'timer/templates')
-rw-r--r--timer/templates/alarm.html68
-rw-r--r--timer/templates/default.html62
-rw-r--r--timer/templates/event_detail.html13
-rw-r--r--timer/templates/event_grid.html30
-rw-r--r--timer/templates/event_list.html5
-rw-r--r--timer/templates/label_list.html3
-rw-r--r--timer/templates/labels.html31
-rw-r--r--timer/templates/timer.html59
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" %}&amp;group=day" style="float:left">Today</a>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="?start={{ title|date:"Ymd" }}&amp;group=day" data-role="button">Day</a>
+ <a href="?start={{ title|date:"Ymd" }}&amp;group=week" data-role="button">Week</a>
+ <a href="?start={{ title|date:"Ymd" }}&amp;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 %}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 16:34:25 +0000