Skip to content

Commit

Permalink
add writing TODO list in calendar
Browse files Browse the repository at this point in the history 
add writing TODO list in calendar
  • Loading branch information
@Cha0s0000
Cha0s0000 committed May 31, 2018
1 parent e636864 commit 6868e42
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 9 deletions.
140 changes: 138 additions & 2 deletions pages/calendar/calendar.js
View file
Expand Up @@ -19,7 +19,12 @@ Page({
},
swiperMap: ['first', 'second', 'third', 'fourth'],
swiperIndex: 1,
showCaldenlar: false
showCaldenlar: false,
input: '',
todos: [],
leftCount: 0,
allCompleted: false,
logs: []
},

/**
Expand Down Expand Up @@ -365,5 +370,136 @@ Page({
},
formatDay(day) {
return `${(day + '').length > 1 ? '' : '0'}${day}`
}
},
/**
*
* Get user input in the box
*/
inputChangeHandle: function (e) {
this.setData({ input: e.detail.value })
},

/**
*
* Add to TODO list after clicking enter
*/
addTodoHandle: function (e) {
if (!this.data.input || !this.data.input.trim()) return
var todos = this.data.todos
todos.push({ name: this.data.input, completed: false })
var logs = this.data.logs
logs.push({ timestamp: new Date(), action: 'Add', name: this.data.input })
this.setData({
input: '',
todos: todos,
leftCount: this.data.leftCount + 1,
logs: logs
})
this.save()
},
/**
*
* Toggle the specified items in TODO list
*/
toggleTodoHandle: function (e) {
var index = e.currentTarget.dataset.index
var todos = this.data.todos
todos[index].completed = !todos[index].completed
var logs = this.data.logs
logs.push({
timestamp: new Date(),
action: todos[index].completed ? 'Finish' : 'Restart',
name: todos[index].name
})
this.setData({
todos: todos,
leftCount: this.data.leftCount + (todos[index].completed ? -1 : 1),
logs: logs
})
this.save()
},
/**
*
* Remove the specified items from TODO list
*/
removeTodoHandle: function (e) {
var index = e.currentTarget.dataset.index
var todos = this.data.todos
var remove = todos.splice(index, 1)[0]
var logs = this.data.logs
logs.push({ timestamp: new Date(), action: 'Remove', name: remove.name })
this.setData({
todos: todos,
leftCount: this.data.leftCount - (remove.completed ? 0 : 1),
logs: logs
})
this.save()
},
/**
*
* Toggle all items in TODO list
*/
toggleAllHandle: function (e) {
this.data.allCompleted = !this.data.allCompleted
var todos = this.data.todos
for (var i = todos.length - 1; i >= 0; i--) {
todos[i].completed = this.data.allCompleted
}
var logs = this.data.logs
logs.push({
timestamp: new Date(),
action: this.data.allCompleted ? 'Finish' : 'Restart',
name: 'All todos'
})
this.setData({
todos: todos,
leftCount: this.data.allCompleted ? 0 : todos.length,
logs: logs
})
this.save()
},
/**
*
* Clear the completed item
*/
clearCompletedHandle: function (e) {
var todos = this.data.todos
var remains = []
for (var i = 0; i < todos.length; i++) {
todos[i].completed || remains.push(todos[i])
}
var logs = this.data.logs
logs.push({
timestamp: new Date(),
action: 'Clear',
name: 'Completed todo'
})
this.setData({ todos: remains, logs: logs })
this.save()
},
/**
*
* Svae TODO list data into app storage
*/
save: function () {
wx.setStorageSync('todo_list', this.data.todos)
wx.setStorageSync('todo_logs', this.data.logs)
},
/**
*
* load TODO list data from app storage
*/
load: function () {
var todos = wx.getStorageSync('todo_list')
if (todos) {
var leftCount = todos.filter(function (item) {
return !item.completed
}).length
this.setData({ todos: todos, leftCount: leftCount })
}
var logs = wx.getStorageSync('todo_logs')
if (logs) {
this.setData({ logs: logs })
}
},
})
30 changes: 27 additions & 3 deletions pages/calendar/calendar.wxml
View file
Expand Up @@ -43,6 +43,30 @@
</swiper>
</view>
</view>
<view class='diary-box'>
Click to add diary
</view>
<view class="diary-box">
<view class="header">
<image class="plus" src="../../images/icon/plus.png"/>
<input class="new-todo" value="{{ input }}" placeholder="Anything here..." auto-focus bindinput="inputChangeHandle" bindconfirm="addTodoHandle"/>
</view>
<block wx:if="{{ todos.length }}">
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll" class="todos">
<!-- List items should get the class `completed` when marked as completed -->
<view class="item{{ item.completed ? ' completed' : '' }}" wx:for="{{ todos }}" wx:key="{{ index }}" bindtap="toggleTodoHandle" data-index="{{ index }}">
<!-- completed: success, todo: circle -->
<icon class="checkbox" type="{{ item.completed ? 'success' : 'circle' }}"/>
<text class="name">{{ item.name }}</text>
<icon class="remove" type="clear" size="16" catchtap="removeTodoHandle" data-index="{{ index }}"/>
</view>
</scroll-view>
<view class="footer">
<text class="btn" bindtap="toggleAllHandle">Toggle all</text>
<text wx:if="{{ leftCount }}">{{ leftCount }} {{ leftCount === 1 ? 'item' : 'items' }} left</text>
<text class="btn" wx:if="{{ todos.length > leftCount }}" bindtap="clearCompletedHandle">Clear completed</text>
</view>
</block>
<block wx:else>
<view class="empty">
<text class="content">There's no diary.</text>
</view>
</block>
</view>
98 changes: 94 additions & 4 deletions pages/calendar/calendar.wxss
View file
Expand Up @@ -46,7 +46,7 @@
background: red;
}
.swpier-box {
height: 550rpx;
height: 500rpx;
width: 100%;
}
.arrow {
Expand Down Expand Up @@ -96,10 +96,100 @@
.s-center {
align-items: center;
}
.diary-box{
.diary-box{
padding: 30rpx;
border-top: 5rpx solid grey;
position: fixed;
top:700rpx;
width: 100%;
top:650rpx;
left: 0rpx;
right: 0rpx;
height: 100%;
background-color:aliceblue;
}
.header {
display: flex;
align-items: center;
border: 1rpx solid #e0e0e0;
border-radius: 10rpx;
box-shadow: 0 0 5rpx #e0e0e0;
margin-bottom: 30rpx;
padding: 20rpx;
}

.header .plus {
width: 41rpx;
height: 41rpx;
margin-right: 20rpx;
}

.header .new-todo {
flex: 1;
font-size: 28rpx;
}

.todos {
border: 1rpx solid #e0e0e0;
border-radius: 10rpx;
box-shadow: 0 0 5rpx #e0e0e0;
}

.todos .item {
display: flex;
align-items: center;
padding: 25rpx;
border-bottom: 1rpx solid #e0e0e0;
}

.todos .item:last-child {
border-bottom: 0;
}

.todos .item .checkbox {
margin-right: 20rpx;
}

.todos .item .name {
flex: 1;
font-size: 30rpx;
color: #444;
}

.todos .item.completed .name {
text-decoration: line-through;
color: #888;
}
/*
.todos .item .remove {
cursor: pointer;
}
*/
.footer {
display: flex;
justify-content: space-between;
margin: 30rpx 0;
padding: 0 10rpx;
font-size: 26rpx;
color: #777;
}
/*
.footer .btn {
cursor: pointer;
}
*/
.empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.empty .title {
font-size: 60rpx;
margin: 50rpx 50rpx 50rpx;
color: #444;
}

.empty .content {
color: #666;
text-align: center;
}

0 comments on commit 6868e42

Please sign in to comment.