forked from Rookout/tutorial-python
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
124 lines (121 loc) · 3.31 KB
/
Copy pathapp.js
File metadata and controls
124 lines (121 loc) · 3.31 KB
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
$().ready(() => {
Vue.component('todo-item', {
props: ['todo'],
data: function () {
return {
editing: false
}
},
methods: {
saveTodoEdit(e) {
if (e.keyCode != 13) return true;
this.editing = false;
this.$emit('update-todo', this.todo);
},
onTodoToggle(e) {
this.editing = false;
this.$emit('update-todo', this.todo);
}
},
template: `<li v-bind:class="{ completed: todo.completed, editing: editing }">
<div class="view">
<input class="toggle" type="checkbox" @change="onTodoToggle" v-model="todo.completed">
<label class="todo-label" v-on:dblclick="editing=true">{{ todo.title }}</label>
<button class="duplicate" v-on:click="$emit('duplicate-todo',todo)"></button>
<button class="destroy" v-on:click="$emit('remove-todo',todo)"></button>
</div>
<input class="edit" type="text" v-on:keypress="saveTodoEdit" v-model="todo.title">
</li>`
});
var app = new Vue({
el: "#app",
data: {
todos: [],
newTodoTitle: '',
filterMode: 'all',
todosFilter: (todo) => true
},
computed: {
filteredTodos() {
return this.todos.filter(this.todosFilter);
}
},
methods: {
setFilter(filter) {
this.filterMode = filter;
switch (filter) {
case 'all':
this.todosFilter = (todo) => true;
break;
case 'active':
this.todosFilter = (todo) => !todo.completed;
break;
case 'completed':
this.todosFilter = (todo) => todo.completed;
break;
}
},
clearCompleted(e) {
const action = $.ajax('/todos/clear_completed', {
method: 'DELETE'
});
this.reloadOnFinish(action);
},
updateTodo(todo) {
const action = $.ajax('/todos', {
contentType: 'application/json',
method: 'UPDATE',
data: JSON.stringify(todo),
dataType: 'json',
});
this.reloadOnFinish(action);
},
duplicateTodo(todo) {
const action = $.ajax(`/todo/dup/${todo.id}`, {
method: 'POST'
});
this.reloadOnFinish(action);
},
removeTodo(todo) {
const action = $.ajax(`/todos/${todo.id}`, {
method: 'DELETE',
});
this.reloadOnFinish(action);
},
reloadOnFinish(p) {
if (p) {
p.then(this.reloadTodos);
return;
}
reloadTodos();
},
reloadTodos() {
const vm = this;
$.ajax('/todos', {
method: 'GET'
}).done((data) => {
const todos = JSON.parse(data);
vm.todos = todos;
});
},
addTodo(text) {
const action = $.ajax('/todos', {
contentType: 'application/json',
method: 'POST',
data: JSON.stringify({ "title": text }),
dataType: 'json',
});
this.reloadOnFinish(action);
},
onAddTodoPressed(e) {
if (e.keyCode != 13) return;
const title = this.newTodoTitle;
this.addTodo(title);
this.newTodoTitle = '';
}
},
mounted() {
this.reloadTodos();
},
});
});