-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (108 loc) · 5.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
<!DOCTYPE html>
<html lang="en" manifest="../todo.manifest">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Todo list</title>
<link rel="icon" href="pi.ico" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,500">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="./todo.css">
</head>
<body>
<div id="loader" style="display:none;">
<div id="loader_anim"></div>
</div>
<!-- item template -->
<script type="text/x-template" id="item-template">
<li :class="{'inactive':item.done}">
<div
:class="{'bold': isParent,'task': !item.toDoTitle==''}">
<div
v-show="item.toDoTitle != null" class="title">
<i class="children fas fa-list-ol icon-left" @click="makeParent(item)"><span>{{item.childrenList.length}}</span></i>
<span v-if="!item.editModeTitle" class="titleLong" @click="editTitle(item)"> {{item.toDoTitle}} <span class="datetime">{{item.id | getDateTime}}</span> </span>
<span v-else class="falseEdit"><input @change="saveTitle(item)" class="edit" v-model="item.toDoTitle">
<i style="border-left: solid 1px black;padding-left:1px;" class="fa fa-check" @click="saveTitle(item)" aria-hidden="true"></i>
<span class="icon-3" @click="toggleShopping(item)">
<i class="fas fa-shopping-basket"></i>
<i v-if="item.shoppingList==null" class="far fa-square"></i>
<i v-if="item.shoppingList!=null" class="far fa-check-square"></i>
</span>
</span>
<i v-if="!item.editModeTitle" class="fa fa-trash icon-right icon-1" @click="handleTrash(item)"></i>
<i v-if="!item.editModeTitle" :class="{'fa-eye': item.done,'fa-eye-slash': !item.done}" class="fa icon-right icon-2" @click="handleHide(item)"></i>
<i v-if="!item.editModeTitle"
:id="item.id"
ondrop="drop(event)"
ondragover="allowDrop(event)"
:draggable="!item.done"
:data-parent="item.parentId"
ondragstart="drag(event)"
:class="{'fa fa-arrows-alt icon-right mover': true,'noDrop':item.done}">
</i>
</div>
<div v-if="item.shoppingList != null" :class="{'note':true}">
<div class="shop-item" @click="toggleShoppingDone(tobuy)" :class="{'done':tobuy.done}" v-for="(tobuy, index) in item.shoppingList">
<i v-if="tobuy.done" class="far fa-check-square" ></i>
<i v-else class="far fa-square"></i> {{tobuy.label}}</div>
</div>
<div v-else-if="!item.editModeSummary" @click="editSummary(item)" class="pre" :class="{'note':item.toDoSummary !=''}">{{ item.toDoSummary}}
<span v-if="item.dueDate!=''" :class="{'cool':dueStatus=='cool','late':dueStatus=='late','soon':dueStatus=='soon','dueDate':true}">{{item.dueDate | getDateTimeStr}}</span>
</div>
<div v-else :class="{'note':true}">
<textarea v-model="item.toDoSummary" @change="saveSummary(item)"></textarea>
<i class="fa fa-check summaryCheck" @click="saveSummary(item)" aria-hidden="true"></i></span><br />
<span><input type="datetime-local" class="edit" v-model="item.dueDate"></span>
</div>
</div>
<ul v-show="isOpen" v-if="isParent">
<tree-item
class="item"
v-for="(child, index) in item.childrenList"
:key="index"
:item="child"
></tree-item>
<li @click="addItem(item)"><i class="fas fa-plus"></i></li>
</ul>
</li>
</script>
<!-- dom -->
<p id="titleZone">Todo list <i class="fas fa-info-circle"></i></p>
<div id="message"></div>
<span id="tooSmall">Your device is too small, sorry :-(</span>
<div id="showTasks" style="display:none;"><i class=""></i><span id="showTaskLabel"> Show done tasks</span></div>
<ul id="todoList">
<tree-item
class="item"
:item="treeData"
></tree-item>
</ul>
<div class="buttons" style="display:none;">
<button class="btn-red btn-left btn-small" onclick="doImport()">Get from the cloud</button> <i class="fas fa-key"></i>
<button class="btn-blue btn-right btn-small" onclick="doExport()">Save to the cloud</button>
<div id="key-message"></div>
</div>
<div class="getCloudKey" style="display:none;">
<h3>jsonblob.com account management *</h3>
<h5>Enter your Cloud key : </h5>
<div>
<input id="cloudKeyValue" placeholder=".. or leave it blank to get a new one"> <i aria-hidden="true" id="setCloudKey" class="fa fa-check" style="padding: 3px;"></i>
<i id="cloudKeyHide" class="fa fa-eye-slash"></i>
</div>
<p>* <a href="https://jsonblob.com">https://jsonblob.com</a> is a free cloud storage service service</p>
</div>
<div id="fullScreenToggler">hide bar</div>
<!-- scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="storage.js"></script>
<script type="text/javascript" src="clouds.js"></script>
<script type="text/javascript" src="recursive.js"></script>
<script type="text/javascript">
window.onload = resursiveInit;
</script>
</body>
</html>