navdrawer done: html and js-filter

Huxpro · Jun 3, 2015 · 73de11a · 73de11a
1 parent dc23d7c
commit 73de11a
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 7 deletions.
diff --git a/src/index.html b/src/index.html
@@ -32,7 +32,7 @@
             <!-- appbar -->
             <header class="app-bar promote-layer">
               <div class="app-bar-container">
-                <button class="bw-action-nav iconfont icon-hamburgermenu"></button>
+                <button class="bw-action-nav iconfont icon-hamburgermenu navdrawer-menu"></button>
                 <h1 class="logo">BusyWeek!</h1>
                 <section class="app-bar-actions">
                      <button 
@@ -45,6 +45,17 @@ <h1 class="logo">BusyWeek!</h1>
               </div>
             </header>
 
+            <!--nav-->
+            <nav class="navdrawer-container promote-layer">
+              <h4></h4>
+              <ul>
+                <li v-on = "click:activeFilter = 'all'"><a href="#all">全部事项</a></li>
+                <li v-on = "click:activeFilter = 'done'"><a href="#done">完成事项</a></li>
+                <li v-on = "click:activeFilter = 'active'"><a href="#active">活动事项</a></li>
+                <li v-on = "click:activeFilter = 'about'"><a href="#about">关于</a></li>
+              </ul>
+            </nav>
+
             <!-- inputView -->
             <form 
                 id="form" 
@@ -99,12 +110,16 @@ <h1 class="logo">BusyWeek!</h1>
             </form>
 
             <!-- timeline -->
-            <div class="bw-timeline" v-show="state == 'LIST'"> 
+            <div class="bw-timeline navdrawer-mask" v-show="state == 'LIST'"> 
+                <!-- day -->
                 <ul class= "m-cell m-cell-list bw-day"
                     v-repeat="timeline | orderBy 'key'"
+                    v-show="ifDayShow(todos)"
                     v-transition
                 >
-                    <li class="m-cell-header sticky">
+                    <li class="m-cell-header sticky"
+
+                    >
                         <em 
                             v-class="today : ifToday($key)"
                         > 
@@ -115,9 +130,11 @@ <h1 class="logo">BusyWeek!</h1>
                         </span>
 
                     </li>
+                    <!-- todo -->
                     <li 
                         class="m-cell-item bw-todo" 
                         v-repeat="todos" 
+                        v-show="ifTodoShow(done)"
                         v-transition
                     >
                         <div 

diff --git a/src/js/app.js b/src/js/app.js
@@ -2,7 +2,8 @@ require( [
     'js/lib/vue.js',
     'http://cdn.bootcss.com/fastclick/1.0.3/fastclick.min.js',
     'js/store.js',
-    'js/util.js'
+    'js/util.js',
+    'js/nav.js'
 ], function(Vue, FastClick, Store) {   
     'use strict';
     console.log("module app loaded..");
@@ -67,10 +68,19 @@ require( [
              * 时间轴 Map 对象
              *
              * @object Timeline  { date: {DayObject} }        
-             * @object DayObject { date: {Date}, todolist: [{Todo}] }
+             * @object DayObject { date: {Date}, todos: [{Todo}] }
              * @object Todo      { date: {Date}, dayType: {Number}, done: {Bool}, text:{String}}
              */
-            timeline: todoStorage.fetch()
+            timeline: todoStorage.fetch(),
+
+            /**
+             * 当前过滤器
+             * 
+             * @param {string} all
+             * @param {string} done
+             * @param {string} active
+             */
+             activeFilter: "all"
 
         },
         created: function () {
@@ -101,6 +111,7 @@ require( [
             console.log("vue working...");
             this.loaded = true;
         },
+
         methods: {
 
             onActionAdd: function(e){
@@ -238,6 +249,48 @@ require( [
                 }
                 return false;
             },
+            // if todo show in activeFilter
+            ifTodoShow: function(done){
+                if (this.activeFilter == "active"){
+                    return !done;
+                }else if(this.activeFilter == "done"){
+                    return done;
+                }else{
+                    return true;
+                }
+
+            },
+            // if day show in activeFilter
+            ifDayShow: function(todos){
+
+                var activeTodos = todos.filter(function(todo){
+                    return !todo.done
+                })
+
+                // 完成数与活动数
+                var actives = activeTodos.length;
+                var dones = todos.length - actives;
+
+                // 只要有未完成的，今天就需要显示
+                if (this.activeFilter == "active"){
+                    if(actives > 0){
+                        return true;
+                    }else{
+                        return false;
+                    }
+
+                // 只要有完成的，今天就需要展示
+                }else if(this.activeFilter == "done"){
+                    if (dones > 0) {
+                        return true;
+                    }else{
+                        return false;
+                    }
+                }else{
+                    return true;
+                }
+
+            },
             // export to scope
             getDiffDate: function(_dayType){
                 return getDiffDate(_dayType)
@@ -258,7 +311,7 @@ require( [
 
     // export app to global
     window.vue = Vue;
-    window.app = this;
+    window.app = app;
 
     // deal with load
     //app.loaded = true;