submit code

Author: ‘ââyihua.luo

bin/www

@@ -21,6 +21,8 @@ app.set('port', port);
 
 var server = http.createServer(app);
 
+require('../server/socket.io/io').init(server);
+
 /**
  * Listen on provided port, on all network interfaces.
  */

package.json

@@ -13,6 +13,7 @@
     "express": "~4.13.1",
     "mongoose": "^4.4.15",
     "morgan": "~1.6.1",
-    "serve-favicon": "~2.3.0"
+    "serve-favicon": "~2.3.0",
+    "socket.io": "^1.4.6"
   }
 }

public/js/main.js

@@ -9,10 +9,22 @@ String.prototype.startWith=function(str){
     return true;
 }
 
+function genUid(){
+    return new Date().getTime()+""+Math.floor(Math.random()*899+100);
+}
+
+var uid = genUid();
+
+var io = (function initIO(){
+ var socket = io.connect();
+ socket.emit('register', {uid: uid});
+ return socket;
+})();
+
 function resourceFactory(resourcePath){
 
     var Resource = function(data){
-        Object.assign(this, data);
+        $.extend(this, data);
     };
     Resource.prototype.$data = function(){
         var pps = Object.getOwnPropertyNames(this);
@@ -31,6 +43,9 @@ function resourceFactory(resourcePath){
         return $.ajax({
             type: "post",
             url: resourcePath,
+            headers: {
+                uid: uid
+            },
             data: data
         }).then(function(data){
             return new Resource(data);
@@ -43,6 +58,9 @@ function resourceFactory(resourcePath){
         return $.ajax({
             type: "PUT",
             url: resourcePath,
+            headers: {
+                uid: uid
+            },
             data: data,
         }).then(function(data){
             return this;
@@ -52,16 +70,35 @@ function resourceFactory(resourcePath){
     Resource.prototype.$delete =  function(){
         return $.ajax({
             type: "delete",
+            headers: {
+                uid: uid
+            },
             url: resourcePath+'/'+this._id
         });
     };
 
+    function wrapper(list){
+        return $.map(list, function(s){
+            return new Resource(s);
+        });
+    }
+
     return {
-        all: function(){
-            return $.get(resourcePath).then(function(ss){
-                return $.map(ss, function(s){
-                    return new Resource(s);
-                });
+        all: function(callback){
+            $.ajax({
+                type: "get",
+                url: resourcePath,
+                headers: {
+                    uid: uid
+                }
+            }).then(function(list){
+                callback(wrapper(list));
+            });
+
+            io.on(resourcePath, function(result){
+                if(result.uid !== uid){
+                    callback(wrapper(result.data));
+                }
             });
         },
         model: Resource
@@ -70,17 +107,55 @@ function resourceFactory(resourcePath){
 
 var TodoResource = resourceFactory('/api/todos');
 
+var i18nPlugin = {
+  install: function (Vue, options) {
+        var locale = {};
+        Vue.locale = function(localeOpt){
+            locale = localeOpt;
+        };
+
+        Vue.prototype.$i = function(localeStr, key){
+            return locale[localeStr] && locale[localeStr][key];
+        };
+    }
+};
+
 Vue.directive('datetimepicker', {
   bind: function () {
-    $(this.el).datetimepicker();
+    $(this.el).datetimepicker({
+        minDate: new Date(),
+        defaultDate: new Date(),
+        step:5
+    });
   },
   update: function (newValue, oldValue) {
 
   },
   unbind: function () {
     $(this.el).datetimepicker('destroy');
   }
-})
+});
+
+Vue.use(i18nPlugin);
+
+Vue.locale({
+    "en": {
+        "Allow Notification": "Allow Notification",
+        "Todo Tasks": "Todo Tasks",
+        "Input the title": "Input the title",
+        "Input the desc": "Input the desc",
+        "Finished time": "Finished time",
+        "Your browser not support this function.": "Your browser not support this function."
+    },
+    "zh": {
+        "Allow Notification": "允许推送",
+        "Todo Tasks": "待办任务",
+        "Input the title": "输入标题",
+        "Input the desc": "输入描述",
+        "Finished time": "结束时间",
+        "Your browser not support this function.": "你的浏览器不支持该功能。"
+    }
+});
 
 
 //{title: '', done: true, createDate: Date.now()}
@@ -95,7 +170,8 @@ var TodoItem = Vue.extend({
 
                 };
             }
-        }
+        },
+        locale: String
     },
     data: function(){
         return {
@@ -134,6 +210,7 @@ var ColorPicker = Vue.extend({
 
 var ItemAdd = Vue.extend({
     template: '#itemAdd',
+    props: ['locale'],
     data: function(){
         return {
             showDialog: false,
@@ -203,6 +280,35 @@ var ItemAdd = Vue.extend({
     }
 });
 
+var NotificationAllow = Vue.extend({
+    template: '#notificationAllow',
+    props: {
+        locale: String
+    },
+    data: function(){
+        var allow = Notification && Notification.permission==='granted';
+        return {
+            allow: allow
+        }
+    },
+    methods: {
+        allowIt: function(){
+            var self = this;
+            if (window.Notification){
+                Notification.requestPermission(function(r){
+                    if(r === 'granted'){
+                        self.allow = true;
+                    } else {
+                        self.allow = false;
+                    }
+                });
+            } else {
+               alert(this.$i("Your browser not support this function.")); 
+            }        
+        }
+    }
+});
+
 var Todo = Vue.extend({
     template: '#template',
     props: {
@@ -215,15 +321,18 @@ var Todo = Vue.extend({
     },
     data: function(){
         return {
-           
+            locale: 'en'
         }
     },
     methods:{
-
+        selectThis: function(locale){
+            this.locale = locale;
+        }
     },
     components:{
         TodoItem: TodoItem,
-        TodoAdd: ItemAdd
+        TodoAdd: ItemAdd,
+        NotificationAllow: NotificationAllow
     },
     events:{
         'item-remove': function(item){
@@ -235,22 +344,52 @@ var Todo = Vue.extend({
         'item-add': function(item){
             var self = this;
             new TodoResource.model(item).$save().then(function(resource){
+                resource.remainTime = moment(resource.finishedTime).fromNow();
                 self.list.push(resource);
             });
         }
     }
 });
 
+function notification(item){
+    if (window.Notification){
+        if(Notification.permission==='granted'){
+            var notification = new Notification(item.title,{
+                body: item.desc,
+                icon: '/img/todo.png'
+            });
+        }
+    }
+}
+
 new Vue({
     el: '#app',
     data: {
         list: []
     },
     created:function(){
         var self = this;
-        TodoResource.all().then(function(result){
+
+        TodoResource.all(function(result){
+            $.each(result, function(){
+                this.remainTime = moment(this.finishedTime).fromNow();
+            });
             self.list = result;
-        })
+        });
+
+        setInterval(function(){
+            $.each(self.list, function(i){
+                this.remainTime = moment(this.finishedTime).fromNow();
+
+                var a = moment(this.finishedTime);
+                var b = moment();
+                if(Math.abs(a.diff(b)) < 60 * 1000 && !this.isNotified){
+                    notification(this);
+                    this.isNotified = true;
+                }
+            });
+        }, 1000);
+        
     },
     components:{
         Todo: Todo

server/controllers/todos.js

@@ -1,12 +1,23 @@
 'use strict';
 
 var Todos = require('../models/todos');
+var io = require('../socket.io/io');
+
+function notifyAll(uid){
+    Todos.find(function (err, todos) {
+        io.update('todos', {
+            uid: uid,
+            data: todos
+        });
+    });
+}
 
 exports.create = function (req, res) {
     var todo = new Todos(req.body);
 
     todo.save(function (err) {
         res.json(todo);
+        notifyAll(req.headers.uid);
     });
 };
 
@@ -23,14 +34,14 @@ exports.update = function (req, res) {
         createDate: req.body.createDate
     }, {}, function (err, todo) {
         res.json(todo);
+        notifyAll(req.headers.uid);
     });
 };
 
 exports.remove = function (req, res) {
     console.log(req.params.id);
     Todos.findOneAndRemove({'_id': req.params.id}, function (err, todo) {
-        console.log(err);
-        console.log(todo);
         res.json(todo);
+        notifyAll(req.headers.uid);
     });
 };

server/models/todos.js

@@ -6,7 +6,7 @@ var Schema = mongoose.Schema;
 var TodoSchema = new Schema({
     title: String,
     desc: String,
-    finishedTime: Date,
+    finishedTime: Number,
     color: String,
     done: {
         type: Boolean,