-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (156 loc) · 8.33 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5"/>
<meta name="theme-color" content="#448AFF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#448AFF">
<meta name="apple-mobile-web-app-title" content="Priority Task List">
<meta name="description" content="Priority Task List">
<meta name="keywords" content="Task list, TODO list, Priority list, Prioritized activity list, SPA, PWA, Single page application, Progressive web app">
<meta name="author" content="Jinjinov">
<title>Priority Task List</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/> <!-- 30 kb -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 30 kb -->
<link rel="manifest" href="manifest.json"> <!-- 1 kb -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"> <!-- 2 kb -->
<link rel="stylesheet" href="index.css" type="text/css"/> <!-- 2 kb -->
</head>
<body>
<!-- The JSON standard specifies that all key/value pairs should be in double quotes. -->
<div id="app" class="tasks-vue-app">
<div class="top-menu">
<button v-on:click="expandedMenu = !expandedMenu" class="top-menu-button" id="menu">
<img src="icons/menu.png" alt="Menu" title="Menu" height="20" width="20">
</button>
<label for="menu">Priority Task List</label>
<div v-if="expandedMenu">
<hr>
<input type="checkbox" id="compact" v-model="compactMode">
<label for="compact">Compact display</label>
<br>
<label for="group">Group filter:</label>
<select v-model="selectedGroup" id="group">
<option v-for="(value, key) in taskGroups" v-bind:value="key" v-bind:style="{ 'background-color': value }">
{{ key }}
</option>
</select>
<hr>
<button v-on:click="expandedHelp = !expandedHelp" class="top-menu-button" id="help">
<img src="icons/help.png" alt="Help" title="Help" height="20" width="20">
</button>
<label for="help">Help</label>
<div v-if="expandedHelp">
<br>
<span class="task-help">
<img src="icons/priority.png" alt="Task priority" title="Task priority" height="20" width="20"> Task priority
</span>
<span class="task-help">
<img src="icons/age.png" alt="Time since task was last completed" title="Time since task was last completed" height="20" width="20"> Time since task was last completed
<br>
<img src="icons/week.png" alt="Weeks since task was last completed" title="Weeks since task was last completed" height="20" width="20"> Weeks since task was last completed
<br>
<img src="icons/day.png" alt="Days since task was last completed" title="Days since task was last completed" height="20" width="20"> Days since task was last completed
</span>
<span class="task-help">
<img src="icons/count.png" alt="Number of times task was completed" title="Number of times task was completed" height="20" width="20"> Number of times task was completed
</span>
<span class="task-help">
<img src="icons/increase.png" alt="Task priority factor" title="Task priority factor" height="20" width="20"> Task priority factor
</span>
<span class="task-help">
<img src="icons/tag.png" alt="Task group" title="Task group" height="20" width="20"> Task group
</span>
<span class="task-help">
<img src="icons/pause.png" alt="Pause task" title="Pause task" height="20" width="20"> Pause task
<br>
<img src="icons/play.png" alt="Resume task" title="Resume task" height="20" width="20"> Resume task
</span>
<span class="task-help">
<img src="icons/delete.png" alt="Delete task" title="Delete task" height="20" width="20"> Delete task
</span>
<span class="task-help">
<img src="icons/save.png" alt="Save task" title="Save task" height="20" width="20"> Save task
</span>
</div>
</div>
</div>
<div v-on:click="onLeftClick()" v-click-outside="addNewTask" class="task" v-bind:style="{ 'background-color': taskGroups[newTaskGroup] }">
<div v-if="expanded" class="task-top-row">
<span class="task-top-row-span">
<img src="icons/increase.png" alt="Task priority factor" title="Task priority factor" height="20" width="20">
<input type="text" ref="factor" v-on:input="inputAdjust()" v-model="newTaskFactor" aria-label="Task factor" class="task-top-row-input" />%
</span>
<span class="task-top-row-span">
<img src="icons/tag.png" alt="Task group" title="Task group" height="20" width="20">
<select v-model="newTaskGroup">
<option v-for="(value, key) in taskGroups" v-bind:value="key" v-bind:style="{ 'background-color': value }">
{{ key }}
</option>
</select>
</span>
<button v-on:click="addNewTask" class="task-top-row-button">
<img src="icons/save.png" alt="Save task" title="Save task" height="20" width="20">
</button>
</div>
<textarea ref="message" v-on:input="textAreaAdjust()" v-model="newTaskText" placeholder="Add a task" aria-label="Add a task" class="task-textarea" v-bind:style="{ 'background-color': taskGroups[newTaskGroup] }"></textarea>
</div>
<!-- button v-on:click="addAllTasks()">Add developer tasks</button -->
<div v-if="compactMode">
<div v-for="task in tasksByPriority" :key="task._id">
<compact-task-item
:text="task.text"
@update:text="val => { task.text = val; }"
:activity-counter="task.activityCounter"
v-on:activity="onTaskActivity(task._id)"
:color="taskGroups[task.group]"
></compact-task-item>
</div>
</div>
<div v-else>
<div v-for="task in tasksByPriority" :key="task._id">
<task-item
:text="task.text"
@update:text="val => { task.text = val; }"
:group="task.group"
@update:group="val => { task.group = val; }"
:priority="task.priority"
:priority-factor="task.priorityFactor"
@update:priority-factor="val => { task.priorityFactor = val; }"
:paused="task.paused"
v-on:toggle="task.paused = !task.paused"
:activity-counter="task.activityCounter"
:last-update="task.lastUpdate"
:last-activity="task.lastActivity"
v-on:outside="clickOutsideTask(task._id)"
v-on:save="updateTask(task._id)"
v-on:remove="deleteTask(task._id)"
v-on:activity="onTaskActivity(task._id)"
:color="taskGroups[task.group]"
></task-item>
<!-- v-on:click.native="onLeftClickTask(task._id)" -->
</div>
</div>
</div>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/6.4.3/pouchdb.min.js"></script> <!-- 148 kb -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script> <!-- 279 kb -->
<script src="vuepouch.js"></script> <!-- 4 kb -->
<script src="tasks.js"></script> <!-- 6 kb -->
<script src="autolink-min.js"></script> <!-- 1 kb -->
<script src="index.js"></script> <!-- 14 kb -->
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker.register("worker.js").then(function(registration) {
console.log("ServiceWorker registration successful with scope: ", registration.scope);
}, function(err) {
console.log("ServiceWorker registration failed: ", err);
});
});
}
</script>
</body>
</html>