-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (121 loc) · 3.56 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
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="/node_modules/vue-touch/dist/vue-touch.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('serviceWorker.js', {
scope: './'
})
.then(function() {
console.log('Service working now interfering with network traffic');
}, function(err) {
console.log('No service worker here, we\'re on our own :(', err);
});
}
// window.onload = function () {
// console.log('hello', document.getElementById('the-list'));
// var hammertime = new Hammer(document.getElementById('the-list'));
// hammertime.on('swipe', function(ev) {
// console.log(ev);
// });
// };
</script>
<link rel="stylesheet" type="text/css" href="www/default.css">
</head>
<body>
<header>
At Your Service - Parent Express Delivery
</header>
What's up this week
<button v-on:click="authorizeCalendar">Add baby calendar</button>
<div id="the-events">
<ul>
{{ event.id }} - {{ event.text }}
</ul>
</div>
<header>
<img src="/www/idea.png"/><h1>The ultimate handlingslista</h1>
</header>
<div id="the-list">
<ul>
<v-touch
tag="li"
v-for="item in list"
v-bind:key="item.id"
v-bind:class="{ done: item.done }"
v-on:tap="done(item.id)"
v-on:swipe="remove(item.id)">
<!-- <v-touch
tag="li"
v-for="item in list"
v-bind:key="item.id"
v-bind:class="{ done: item.done }"
v-on:swipeleft="remove"
> -->
<!-- v-on:tap="touch(item.id)" -->
{{ item.id }} - {{ item.text }}
</v-touch>
</ul>
<input v-model="newItem.text" />
<button v-on:click="add">Add</button>
</div>
<script>
// console.log(vueTouch);
// Vue.use(VueTouch);
var listApp = new Vue({
el: '#the-list',
created: function() {
this.init();
},
methods: {
init: function() {
this.loadData();
},
loadData: function() {
this.$http.get('http://localhost:3000/todos').then(function(response) {
if (!!response.body) {
this.list = response.body;
}
}, function (err) {
console.log('err', err);
alert('Cant get todos ' + err);
});
},
add: function () {
var item = {text: this.newItem.text};
this.list.push(item);
this.newItem = {};
this.$http.post('http://localhost:3000/todos', { text: item.text }).then(function (response) {
this.loadData();
}, function (err) {
console.log('err', err);
alert('Cant save new item ' + err);
});
},
done: function(id) {
var item = this.list.find(function(item) {
return item.id == id;
});
item.done = !item.done;
},
remove: function(id) {
console.log('remove', id);
// console.log('id', id);
// var item = this.list.find((item)=>{
// return item.id == id;
// });
// this.list.splice(this.list.findIndex(item => item.id == id));
}
},
data: {
newItem: {},
list: []
}
});
</script>
</body>
</html>