-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
135 lines (122 loc) · 5.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html>
<head>
<title>Tutorial App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- build:css all.min.css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.2/flatly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- /build -->
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li><a href="#" data-toggle="modal" data-target="#share">Share <span class="hidden-xs">List</span> <span class="glyphicon glyphicon-share"></span></a></li>
</ul>
<h3>Tutorial App <small class="hidden-xs">The Time-Tracking Todo List</small></h3>
</div>
<div class="marketing">
<!-- The button group to change visibility of Todos -->
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" onchange="TodoController.showUnfinished()" autocomplete="off" checked><span class="glyphicon glyphicon glyphicon-unchecked"></span> Todo
</label>
<label class="btn btn-primary">
<input type="radio" onchange="TodoController.showDone()" autocomplete="off"><span class="glyphicon glyphicon-check"></span> Done
</label>
<label class="btn btn-primary">
<input type="radio" onchange="TodoController.showAll()" autocomplete="off"><span class="glyphicon glyphicon glyphicon glyphicon-align-justify"></span> All
</label>
</div>
<!-- The container for the actual Todo list generated from the template -->
<div id="todos"></div>
</div>
<div class="footer"><p>Baqend Tutorial</p></div>
<!-- Sharing dialog -->
<div class="modal fade" id="share" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h4 class="modal-title">Share this list</h4></div>
<div class="modal-body">
<p>To share this list copy the following URL and send it to someone:</p>
<input type="text" class="form-control" type="text" id="shareURL">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ok</button>
</div>
</div>
</div>
</div>
</div>
<!--Template-->
<script id="todo-template" type="text/x-handlebars-template">
<div class="panel-group" id="tablist">
<!-- Iterate over each Todo item -->
{{#each todos}}
<div class="panel panel-default {{#if active}}active{{/if}} {{#if done}}done{{/if}}">
<!-- Shows the buttons on the right -->
<div class="btn-group pull-right">
{{#if done}}
<button type="button" onclick="TodoController.delete('{{id}}')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
{{else}}
<button onclick="TodoController.toggleWork('{{id}}');" class="btn {{#if active}}btn-default{{else}}start{{/if}}">
<span class="glyphicon {{#if active}}glyphicon glyphicon-pause{{else}}glyphicon glyphicon-play{{/if}}"></span> {{#if active}}Stop Work{{else}}Start Work{{/if}}
</button>
<button type="button" onclick="TodoController.done('{{id}}')" class="btn btn-success">
<span class="glyphicon glyphicon-ok"></span>
</button>
{{/if}}
</div>
<!-- The name of each Todo -->
<div class="panel-heading">
<h4 class="panel-title">
<!-- The collapsible list of all past activities-->
<a class="collapsed" data-toggle="collapse" href="#{{key}}">{{name}} <small>{{sum activities}}</small></a>
</h4>
</div>
<!-- The collapsible list of all past activities-->
<div id="{{key}}" class="panel-collapse collapse clear">
<div class="panel-body">
<table class="table table-condensed table-striped">
<tr><th>From</th><th>To</th><th>Time spent</th></tr>
{{#each activities}}
<tr>
<td>{{pretty start}}</td>
<td>{{pretty end}}</td>
<td><strong>{{diff start end}}</strong>
</td>
</tr>
{{/each}}
</table>
</div>
</div>
</div>
{{else}}
<div class="panel-body">
<p class="text-muted text-center">No items here.</p>
</div>
{{/each}}
</div>
<!-- Only show the input for new Todos in the "Unfinished" view -->
{{#if isUnfinished}}
<form id="addTodo" onsubmit="TodoController.add(this.insert.value); return false;" autocomplete="off" class="insert-todo">
<input required tabindex="1" data-toggle="collapse" data-target=".collapse.in" class="form-control" type="text" placeholder="New Todo" name="insert" id="typing"/>
</form>
{{/if}}
</script>
<!-- build:js all.min.js -->
<script type="text/javascript" src="https://baqend.global.ssl.fastly.net/js-sdk/2.2.1/baqend.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="libs/js/typed.min.js"></script>
<script type="text/javascript" src="typed.js"></script>
<!-- /build -->
<!-- build:js:iframe inline typed.js --><!-- /build -->
</body>
</html>