Update headers

Change the Compete to Status and assign default status of new to all
task.

diff --git a/dash/app.js b/dash/app.js
index 5ff209a..1fb4024 100644 (file)
--- a/dash/app.js
+++ b/dash/app.js
@@ -1,8 +1,26 @@
 $(document).ready(function(){
-    var task1 = new Task({title: "new task #1"});
-    var task2 = new Task({title: "new task #2"});
-    var taskView1 = new TaskView({model: task1});
-    console.log(taskView1.render().el);
-    var taskView2 = new TaskView({model: task2});
-    console.log(taskView2.render().el);
+    // render to the page
+    // project 1
+    var task11 = new Task({title: "new task #11", project: 1});
+    var taskView11 = new TaskView({model: task11});
+    var task12 = new Task({title: "new task #12", project: 1});
+    var taskView12 = new TaskView({model: task12});
+    $('#myList').append(taskView11.render().el);
+    $('#myList').append(taskView12.render().el);
+
+    // project 2
+    var task21 = new Task({title: "new task #21", project: 2});
+    var taskView21 = new TaskView({model: task21});
+    var task22 = new Task({title: "new task #22", project: 2});
+    var taskView22 = new TaskView({model: task22});
+    $('#myList2').append(taskView21.render().el);
+    $('#myList2').append(taskView22.render().el);
+
+    // project 3
+    var task31 = new Task({title: "new task #31", project: 3});
+    var taskView31 = new TaskView({model: task31});
+    var task32 = new Task({title: "new task #32", project: 3});
+    var taskView32 = new TaskView({model: task32});
+    $('#myList3').append(taskView31.render().el);
+    $('#myList3').append(taskView32.render().el);
 });

diff --git a/dash/models/Task.js b/dash/models/Task.js
index af26f1a..20f0f71 100644 (file)
--- a/dash/models/Task.js
+++ b/dash/models/Task.js
@@ -1,7 +1,7 @@
 var Task = Backbone.Model.extend({
     defaults: {
         title: "untitled",
-        complete: false,
+        status: "new",
         project: 0
     }
 });

diff --git a/dash/views/TaskView.js b/dash/views/TaskView.js
index ae51baa..420bf55 100644 (file)
--- a/dash/views/TaskView.js
+++ b/dash/views/TaskView.js
@@ -1,7 +1,10 @@
 var TaskView = Backbone.View.extend({
-    tagName: 'article',
+    tagName: 'tr',
     className: 'task',
-    template: _.template('<h1><%= title %></h1>'),
+    template: _.template(
+        '<td><%= status %></td>' +
+        '<td><%= project %></td>' +
+        '<td><%= title %></td>'),
     render: function(){
         this.$el.append(this.template(this.model.toJSON()));
         return this;

diff --git a/index.html b/index.html
index ac3b204..c673bdd 100644 (file)
--- a/index.html
+++ b/index.html
@@ -35,7 +35,47 @@
             </div><!-- /.container-fluid -->
         </nav>
         <div class="container">
-                <div id="myList"></div>
+            <div class="row">
+                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
+                    <h3>Project 1</h3>
+                    <table id="myList"
+                        class="table table-condensed table-striped table-bordered table-hover">
+                        <thead>
+                            <tr>
+                                <th>Status</th>
+                                <th>Project</th>
+                                <th>Task Name</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
+                    <h3>Project 2</h3>
+                    <table id="myList2"
+                        class="table table-condensed table-striped table-bordered table-hover">
+                        <thead>
+                            <tr>
+                                <th>Status</th>
+                                <th>Project</th>
+                                <th>Task Name</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
+                    <h3>Project 3</h3>
+                    <table id="myList3"
+                        class="table table-condensed table-striped table-bordered table-hover">
+                        <thead>
+                            <tr>
+                                <th>Status</th>
+                                <th>Project</th>
+                                <th>Task Name</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
         </div>
 
         <script src="libs/jquery/dist/jquery.min.js"></script>