enable modify the column title

index.html

@@ -12,19 +12,9 @@
     <div class="wrapper">
       <header class="clear">
         <ul>
-          <li>Rejected</li>
-          <li>Pending</li>
-          <li>Development</li>
-          <li>Testing</li>
-          <li>Production</li>
         </ul>
       </header>
       <section id="dashboard" class="dashboard clear">
-        <div id="rejected" class="rejected"></div>
-        <div id="pending" class="pending"></div>
-        <div id="development" class="development"></div>
-        <div id="testing" class="testing"></div>
-        <div id="production" class="production"></div>
       </section>
       
       <footer>
@@ -54,6 +44,25 @@
     
     <div id="removed-task-notification" class="removed-task-notification hide"></div>
     
+   <div class="modal hide" id="change-status-modal">
+     <div class="modal-wrapper">
+       <form action="index.html" method="post" class="change-status-form" name="change_status">
+          <span class="close-modal">X</span>
+
+          <h3>Change column name</h3>
+
+          <ul>
+            <li>
+              <input type="text" id="new_status" placeholder="Column name" autofocus>
+            </li>
+            <li>
+              <input type="submit" name="change_status" value="Change column name">
+            </li>
+          </ul>
+       </form>
+     </div>
+   </div>
+
     <div class="modal hide" id="add-task-modal">
       <div class="modal-wrapper">
         <form action="index.html" method="post" class="add-task-form" name="add_task">
@@ -87,7 +96,7 @@
     </div>
     
     <div class="hide" id="tips">
-      Double click on the task text to edit it <br> <span>(Task titles are not editable for now)</span>
+      Double click on the task text to edit it <br> <span>(Task titles are <b>editable</b> for now)</span>
     </div>
     
     <script id="task-card-template" type="text/x-handlebars-template">

src/scripts/app.js

@@ -12,6 +12,8 @@ var App = function() {
   function init() {
     tips();
     preset();
+    addStatusColumns();
+    changeStatus();
     draggable();
     droppable();
     openCard();
@@ -38,10 +40,63 @@ var App = function() {
     
     if(!LocalStorage.get('appInitialized', true)) {
       LocalStorage.set('taskCounter', 1);
+      LocalStorage.set('status', JSON.stringify([
+        {key: 'rejected', value: 'Rejected'}, 
+        {key: 'pending', value: 'Pending'}, 
+        {key: 'development', value: 'Development'}, 
+        {key: 'testing', value: 'Testing'}, 
+        {key: 'production', value: 'Production'}]));
       LocalStorage.set('task-1', JSON.stringify(defaultTask));
       LocalStorage.set('appInitialized', true);
     }
   }
+
+  function addStatusColumns(){
+
+    var statusArr = JSON.parse(LocalStorage.get('status'));
+    var headerObj = $('header ul');
+    var myDashboard = $('#dashboard');
+    statusArr.map(function(item){
+      var newLi = $('<li>' + item.value + '</li>');
+      newLi.attr('data-id', item.key);
+      headerObj.append(newLi);
+
+      var newDiv = $('<div id=' + item.key + ' class=' + item.key + '></div>');
+      myDashboard.append(newDiv);
+    });
+    
+  }
+
+  function changeStatus(){
+    $('header li').on('dblclick', function(e){
+        e.preventDefault();
+        var statusToChange = $(this).attr('data-id');
+        
+        $('#change-status-modal').removeClass('hide');
+
+        $('#new_status').val($(this).text());
+
+        $('#change-status-modal').find('form').on('submit', function(e){
+            e.preventDefault();
+            var newStatus = $('#new_status').val();
+            var currentStatus = JSON.parse(LocalStorage.get('status'));
+            currentStatus.map(function(obj){
+                if(obj.key == statusToChange)
+                {
+                  obj.value = newStatus;
+                }
+            });
+
+            $('header ul li[data-id=' + statusToChange + ']').html(newStatus);
+
+            LocalStorage.set('status', JSON.stringify(currentStatus));
+
+            
+            $('.close-modal').trigger('click');
+
+        });
+    });
+  }
   
   function createTask() {
     var source = $("#task-card-template").html();
@@ -201,16 +256,16 @@ var App = function() {
     var source = $("#task-card-template").html();
     var template = Handlebars.compile(source);
     
-    var status = ['rejected', 'pending', 'development', 'testing', 'production'];
+    var status = JSON.parse(LocalStorage.get('status'));
     
     for(var i = 0, l = status.length; i < l; i++) {
       var result = App.getAllNotes().filter(function(obj) {
-        return obj.status == status[i];
+        return obj.status == status[i].key;
       });
       
       if(result) {
         var cards = template(result);
-        $('#dashboard #' + status[i]).append(cards);
+        $('#dashboard #' + status[i].key).append(cards);
         draggable();
       }
     }

src/stylesheets/app.scss

@@ -338,7 +338,7 @@ header {
   }
 }
 
-.add-task-form {
+.add-task-form, .change-status-form {
   text-align: center;
   
   li {