Skip to content

Commit a885949

Browse files
prograpeprogrape
committed
add detail
1 parent bd31115 commit a885949

File tree

13 files changed

+245
-30
lines changed

13 files changed

+245
-30
lines changed

‎src/app.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
11
import 'weui';
22
import $ from 'jquery';
3+
import 'weui.js';
34
import attachFastClick from 'fastclick';
45
import Router from './lib/router/router';
6+
import API from './lib/api/api';
7+
import dataManager from './lib/dataManager/dataManager';
8+
import * as util from './lib/util/util';
59
import todo from './todo/todo';
10+
import detail from './detail/detail';
611
attachFastClick.attach(document.body);
712

8-
const router = new Router();
9-
router.push(todo).setDefault('/').init();
13+
$.weui.loading('加载中...');
14+
API.read().then((data) => {
15+
$.weui.hideLoading();
16+
17+
for (let key in data) {
18+
dataManager.setData(key, data[key]);
19+
}
20+
21+
const router = new Router();
22+
router.push(todo).push(detail).setDefault('/').init();
23+
});

‎src/detail/detail.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<h1 class="{{styles['title']}}">TODO</h1>
2+
<div class="weui_cells weui_cells_form">
3+
<div class="weui_cell">
4+
<div class="weui_cell_hd">
5+
<label for="" class="weui_label {{styles['label']}}">标题</label>
6+
</div>
7+
<div class="weui_cell_bd weui_cell_primary">
8+
<input type="text" class="weui_input" id="title" value="{{todo.title}}">
9+
</div>
10+
<div class="weui_cell_ft"></div>
11+
</div>
12+
<div class="weui_cell">
13+
<div class="weui_cell_hd">
14+
<label for="" class="weui_label {{styles['label']}}">完成时间</label>
15+
</div>
16+
<div class="weui_cell_bd weui_cell_primary">
17+
<input type="datetime-local" class="weui_input" id="finishTime" value="{{todo.finishTime}}">
18+
</div>
19+
<div class="weui_cell_ft"></div>
20+
</div>
21+
<div class="weui_cell weui_cell_switch">
22+
<div class="weui_cell_bd weui_cell_primary">
23+
<p>是否完成</p>
24+
</div>
25+
<div class="weui_cell_ft">
26+
<input class="weui_switch" type="checkbox" id="status" {{if todo.status == 1}}checked{{/if}}>
27+
</div>
28+
</div>
29+
</div>
30+
<div class="weui_cells_title">备注说明</div>
31+
<div class="weui_cells weui_cells_form">
32+
<div class="weui_cell">
33+
<div class="weui_cell_bd weui_cell_primary">
34+
<textarea class="weui_textarea" id="remark" placeholder="请输入备注说明" rows="3">{{todo.remark}}</textarea>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="weui_btn_area">
39+
<a class="weui_btn weui_btn_primary" href="javascript:" id="back">确认</a>
40+
<a class="weui_btn weui_btn_warn" href="javascript:" id="delete">删除</a>
41+
</div>

‎src/detail/detail.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import $ from 'jquery';
2+
import 'weui.js';
3+
import uuid from 'node-uuid';
4+
import template from 'art-template/dist/template-debug';
5+
import dataManager from '../lib/dataManager/dataManager';
6+
import * as util from '../lib/util/util';
7+
import styles from './detail.less';
8+
import tpl from 'raw!./detail.html';
9+
10+
export default {
11+
url: '/detail/:id',
12+
render: function () {
13+
const id = this.params.id;
14+
const todos = dataManager.getData(dataManager.TODOS, []);
15+
const todo = todos.filter(todo => todo.id == id)[0];
16+
return template.compile(tpl)({
17+
todo: todo,
18+
styles: styles
19+
});
20+
},
21+
bind: function () {
22+
const router = this;
23+
$('#container').on('input', '#title', function () {
24+
const id = router.params.id;
25+
const todos = dataManager.getData(dataManager.TODOS, []);
26+
let todo = todos.filter(todo => todo.id == id)[0];
27+
const title = $(this).val();
28+
util.debug('inputting title', title);
29+
todo.title = title;
30+
dataManager.setData(dataManager.TODOS, todos);
31+
}).on('change', '#finishTime', function () {
32+
const id = router.params.id;
33+
const todos = dataManager.getData(dataManager.TODOS, []);
34+
let todo = todos.filter(todo => todo.id == id)[0];
35+
const finishTime = $(this).val();
36+
util.debug('finishTime', finishTime);
37+
todo.finishTime = finishTime;
38+
dataManager.setData(dataManager.TODOS, todos);
39+
}).on('change', '#status', function () {
40+
const id = router.params.id;
41+
const todos = dataManager.getData(dataManager.TODOS, []);
42+
let todo = todos.filter(todo => todo.id == id)[0];
43+
const isChecked = $(this).is(':checked');
44+
todo.status = isChecked ? 1 : 0;
45+
dataManager.setData(dataManager.TODOS, todos);
46+
}).on('input', '#remark', function () {
47+
const id = router.params.id;
48+
const todos = dataManager.getData(dataManager.TODOS, []);
49+
let todo = todos.filter(todo => todo.id == id)[0];
50+
const remark = $(this).val();
51+
util.debug('remark', remark);
52+
todo.remark = remark;
53+
dataManager.setData(dataManager.TODOS, todos);
54+
}).on('click', '#back', function () {
55+
history.go(-1);
56+
}).on('click', '#delete', function () {
57+
$.weui.confirm('确定要删除改任务 ?', function () {
58+
util.debug('确定删除');
59+
dataManager.setData(dataManager.TODOS, util.removeFromArray(todos, todo));
60+
history.go(-1);
61+
}, function () {
62+
util.debug('不删除');
63+
});
64+
});
65+
}
66+
}

‎src/detail/detail.less

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
.title {
3+
margin: 30px 0;
4+
font-weight: 400;
5+
font-size: 34px;
6+
color: #3cc51f;
7+
text-align: center;
8+
}
9+
10+
.label {
11+
width: 4em;
12+
margin-right: 1em;
13+
}

‎src/index.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515
-ms-user-select: none;
1616
user-select: none;
1717
}
18-
.weui_cells_checkbox > .weui_cell:not(:first-child) > * {
19-
pointer-events: none;
20-
}
2118
</style>
2219
</head>
2320
<body ontouchstart>

‎src/lib/api/api.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import $ from 'jquery';
22
import * as util from '../util/util';
33

4-
const TODOS = 'todos';
5-
64
export default {
5+
TODOS: 'todos',
76
read(){
87
return new Promise((resolve, reject) => {
9-
const todos = localStorage.getItem(TODOS);
10-
resolve(JSON.parse(todos));
8+
const todos = localStorage.getItem(this.TODOS);
9+
setTimeout(() => {
10+
resolve(JSON.parse(todos));
11+
}, 1000);
1112
});
1213
},
1314
write(obj){
1415
return new Promise((resolve, reject) => {
1516
const str = JSON.stringify(obj);
16-
localStorage.setItem(TODOS, str);
17+
localStorage.setItem(this.TODOS, str);
1718
resolve(str);
1819
});
1920
}

‎src/lib/dataManager/dataManager.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import API from '../api/api';
2+
13
let data = {};
24

35
export default {
@@ -9,6 +11,7 @@ export default {
911
*/
1012
setData (key, value){
1113
data[key] = value;
14+
API.write(data);
1215
return this;
1316
},
1417
/**

‎src/lib/util/util.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,37 @@
44
*/
55
export function debug() {
66
DEBUG && console.debug.apply(console, arguments);
7+
}
8+
9+
/**
10+
* get local iso string
11+
* @returns {string}
12+
*/
13+
export function getLocalISOString() {
14+
const now = new Date();
15+
16+
function pad(n) {
17+
return n < 10 ? '0' + n : n;
18+
}
19+
20+
return now.getFullYear() + '-'
21+
+ pad(now.getMonth() + 1) + '-'
22+
+ pad(now.getDate()) + 'T'
23+
+ pad(now.getHours()) + ':'
24+
+ pad(now.getMinutes()) + ':'
25+
+ pad(now.getSeconds());
26+
}
27+
28+
/**
29+
* remove item from array
30+
* @param {Array} array
31+
* @param item
32+
* @returns {Array}
33+
*/
34+
export function removeFromArray(array, item) {
35+
let i = array.indexOf(item);
36+
if (i != -1) {
37+
array.splice(i, 1);
38+
}
39+
return array;
740
}

‎src/todo/todo.html

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,33 @@ <h1 class="{{styles['title']}}">TODO</h1>
22
<div class="weui_cells_title">
33
<p>你想干嘛</p>
44
</div>
5-
<div class="weui_cells weui_cells_form weui_cells_checkbox" id="todos">
5+
<div class="weui_cells weui_cells_form weui_cells_checkbox weui_cells_access" id="todos">
66
<div class="weui_cell">
77
<div class="weui_cell_bd weui_cell_primary">
88
<input class="weui_input" id="todo" type="text" placeholder="What needs to be done ?">
99
</div>
1010
</div>
11-
</div>
11+
{{each todos as todo i}}
12+
<a href="#/detail/{{todo.id}}" class="weui_cell weui_check_label {{styles['item']}} {{if todo.status == 1}}{{styles['completed']}}{{/if}}">
13+
<label class="weui_cell_hd" for="{{todo.id}}">
14+
<input type="checkbox" class="weui_check" name="checkbox1" data-id="{{todo.id}}" id="{{todo.id}}" {{if todo.status == 1}}checked{{/if}}>
15+
<i class="weui_icon_checked"></i>
16+
</label>
17+
<div class="weui_cell_bd weui_cell_primary">
18+
{{if todo.status == 1}}
19+
<p><s>{{todo.title}}</s></p>
20+
{{else}}
21+
<p>{{todo.title}}</p>
22+
{{/if}}
23+
</div>
24+
<div class="weui_cell_ft {{styles['remark']}}">
25+
{{todo.remark.substring(0, 10)}}
26+
</div>
27+
</a>
28+
{{/each}}
29+
</div>
30+
{{if DEBUG}}
31+
<div class="weui_btn_area">
32+
<a class="weui_btn weui_btn_warn" href="javascript:" id="deleteAll">清空</a>
33+
</div>
34+
{{/if}}

‎src/todo/todo.js

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import $ from 'jquery';
2+
import 'weui.js';
23
import uuid from 'node-uuid';
34
import template from 'art-template/dist/template-debug';
5+
import API from '../lib/api/api';
46
import dataManager from '../lib/dataManager/dataManager';
57
import * as util from '../lib/util/util';
68
import styles from './todo.less';
79
import tpl from 'raw!./todo.html';
810
import todoItemTpl from 'raw!./todoItem.html';
911

1012
export default {
11-
url: '/:status?',
13+
url: '/',
1214
render: function () {
15+
const todos = dataManager.getData(dataManager.TODOS, []);
1316
return template.compile(tpl)({
14-
styles: styles
17+
todos: todos,
18+
styles: styles,
19+
DEBUG: DEBUG
1520
});
1621
},
1722
bind: function () {
@@ -29,27 +34,26 @@ export default {
2934
$('#todos').append(html);
3035
}
3136

32-
$('#container').on('input', '#todo', function () {
33-
const value = $(this).val();
34-
util.debug('inputting ', value);
35-
}).on('keyup', '#todo', function (e) {
37+
$('#container').on('keyup', '#todo', function (e) {
3638
if (e.keyCode === 13) {
3739
util.debug('enter');
38-
const value = $(this).val();
40+
const title = $(this).val();
3941
const todos = dataManager.getData(dataManager.TODOS, []);
40-
if (!value) {
42+
if (!title) {
4143
return;
4244
}
4345
todos.push({
4446
id: uuid.v4(),
45-
text: value,
46-
status: 0
47+
title: title,
48+
status: 0,
49+
finishTime: util.getLocalISOString(),
50+
remark: ''
4751
});
4852
dataManager.setData(dataManager.TODOS, todos);
4953
updateTodos();
5054
$(this).val('');
5155
}
52-
}).on('change', 'input[type=checkbox]', function () {
56+
}).on('change', 'label input[type=checkbox]', function () {
5357
const isChecked = $(this).is(':checked');
5458
const id = $(this).data('id');
5559
util.debug('status change', id, isChecked);
@@ -62,6 +66,13 @@ export default {
6266
});
6367
dataManager.setData(dataManager.TODOS, todos);
6468
updateTodos();
69+
}).on('click', '#deleteAll', function () {
70+
$.weui.confirm('确定要清空吗?', function (){
71+
localStorage.clear(API.TODOS);
72+
location.reload();
73+
}, function (){
74+
75+
});
6576
});
6677

6778
$('#todo').focus();

‎src/todo/todo.less

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
text-align: center;
88
}
99

10+
.item {
11+
color: #222;
12+
}
13+
1014
.completed {
11-
color: #999;
15+
color: #999 !important;
16+
}
17+
18+
.remark {
19+
font-size: inherit !important;
1220
}

‎src/todo/todoItem.html

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
{{each todos as todo i}}
2-
<label class="weui_cell weui_check_label {{if todo.status == 1}}{{styles['completed']}}{{/if}}" for="{{todo.id}}">
3-
<div class="weui_cell_hd">
2+
<a href="#/detail/{{todo.id}}" class="weui_cell weui_check_label {{styles['item']}} {{if todo.status == 1}}{{styles['completed']}}{{/if}}">
3+
<label class="weui_cell_hd" for="{{todo.id}}">
44
<input type="checkbox" class="weui_check" name="checkbox1" data-id="{{todo.id}}" id="{{todo.id}}" {{if todo.status == 1}}checked{{/if}}>
55
<i class="weui_icon_checked"></i>
6-
</div>
6+
</label>
77
<div class="weui_cell_bd weui_cell_primary">
88
{{if todo.status == 1}}
9-
<p><s>{{todo.text}}</s></p>
9+
<p><s>{{todo.title}}</s></p>
1010
{{else}}
11-
<p>{{todo.text}}</p>
11+
<p>{{todo.title}}</p>
1212
{{/if}}
1313
</div>
14-
</label>
14+
<div class="weui_cell_ft {{styles['remark']}}">
15+
{{todo.remark.substring(0, 10)}}
16+
</div>
17+
</a>
1518
{{/each}}

0 commit comments

Comments
 (0)