/
index.html
123 lines (119 loc) · 5.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tasks</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="css/tasks.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">Tasks</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list" id="projects">
<li class="nav-header">Projects</li>
</ul>
</div>
<a href="#new-project" id="add-project" class="btn pull-right"><i class="icon-folder-open"></i> Add project</a>
</div>
<div class="span9 main-content">
<div class="page-header">
<div class="row-fluid">
<div class="span9">
<h3 id="project-title"><span>Project</span> tasks</h3>
</div>
<div class="span3">
<a href="#new-task" id="add-task" role="button" class="btn pull-right" data-toggle="modal"><i class="icon-tasks"></i> Add task</a>
<a href="#delete-project" id="remove-project" role="button" class="btn pull-right offset-right"><i class="icon-remove"></i></a>
</div>
</div>
</div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th class="status-col">Status</th>
<th>Task</th>
<th class="date-col">Due date</th>
<th class="action-col"> </th>
</tr>
</thead>
<tbody id="tasks">
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/backbone.min.js"></script>
<script type="text/javascript" src="js/tasks.js"></script>
<script type="text/template" id="project-dialog">
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="Create project" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Create project</h3>
</div>
<div class="modal-body">
<form class="form-inline">
<input type="text" name="name" class="input-block-level project-title" placeholder="Project name" value="<%= name %>">
</form>
</div>
<div class="modal-footer">
<button class="btn close-action" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary save-action">Save</button>
</div>
</div>
<div class="modal-backdrop fade in"></div>
</script>
<script type="text/template" id="project-item">
<a href="#<%= id %>" data-id="<%= id %>"><%= name %></a>
</script>
<script type="text/template" id="task-dialog">
<div class="modal in fade" tabindex="-1" role="dialog" aria-labelledby="Create task" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Create task</h3>
</div>
<div class="modal-body">
<form class="form-inline">
<input type="text" name="task" class="input-xlarge input-task" placeholder="Task name" value="<%= task %>">
<div id="dp1" class="input-append date">
<input class="input-medium" name="date_due" value="<%= date_due %>" data-format="yyyy-MM-dd hh:mm:ss" type="text" placeholder="Due date">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn close-action" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary save-action">Save</button>
</div>
</div>
<div class="modal-backdrop fade in"></div>
</script>
<script type="text/template" id="task-item">
<td class="center-col">
<input type="checkbox" name="status" value="1"<% if (status == 1) { %> checked="checked" <% } %> />
</td>
<td<% if (status == 1) { %> class="finished" <% } %>><%= task %></td>
<td<% if (status == 1) { %> class="finished" <% } %>><%= date_due %></td>
<td class="center-col">
<a href="#delete" class="delete-action">
<i class="icon-remove"></i>
</a>
</td>
</script>
</body>
</html>