add export and import function

index.html

@@ -28,6 +28,18 @@
               <img src="app/assets/images/bin.svg" alt="">
             </a>
           </li>
+          <li data-tooltip="Create backup">
+            <a href="#" class="export" id="export">
+              export
+              <!-- <img src="app/assets/images/.svg" alt=""> -->
+            </a>
+          </li>
+          <li data-tooltip="Import backup">
+            <a href="#" class="import" id="import">
+              import
+              <!-- <img src="app/assets/images/.svg" alt=""> -->
+            </a>
+          </li>
           <li data-tooltip="Add Task">
             <a href="#" id="add-task" class="add-task">
               <img src="app/assets/images/plus.svg" alt="">
@@ -96,6 +108,25 @@
       </div>
     </div>
 
+    <div class="modal hide" id="import-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>Import backup file</h3>
+ 
+           <ul>
+             <li>
+               <input type="file" id="importfile" autofocus>
+             </li>
+             <li>
+               <input type="submit" name="import" value="Import data">
+             </li>
+           </ul>
+        </form>
+      </div>
+    </div>
+    
     <div class="hide" id="tips">
       Double click on the task text to edit it <br> <span>(Task titles are <b>editable</b> for now)</span>
     </div>

src/scripts/app.js

@@ -22,6 +22,63 @@ var App = function() {
     printNotes();
     editTask();
     exitEditMode();
+    exportData();
+    importData();
+  }
+
+  function exportData(){
+    function getFullData(){
+      var data = {};
+      data['status'] = JSON.parse(LocalStorage.get('status'));
+      data['taskCounter'] = parseInt(LocalStorage.get('taskCounter'));
+      for(var i=0; i <= data['taskCounter']; i++){
+        const task = LocalStorage.get('task-' + i);
+        if(task != null)
+          data['task-' + i] = JSON.parse(task)
+      }
+      console.log(data);
+      return data;
+    }
+
+    $('#export').on('click', function(e){
+      var btn = document.createElement('a');
+      btn.setAttribute('download', 'scrum-backup.json');
+      btn.style.display = 'none';
+    
+      var url = JSON.stringify(getFullData());
+      url = encodeURI("data:text/json;charset=utf-8," + url);
+      btn.setAttribute('href', url);
+      
+      document.body.appendChild(btn);
+      btn.click();
+      btn.remove();
+    })
+  }
+
+  function importData(){
+    $('#import').on('click', function(e){
+        e.preventDefault();
+
+        $('#import-modal').removeClass('hide');
+    });
+    $('#import-modal').find('form').on('submit', function(e){
+      e.preventDefault();
+      var file = e.target[0].files[0];
+
+      var fr = new FileReader();
+      fr.onload = function(){
+        var data = JSON.parse(fr.result);
+        for(key in data){
+          if(!data.hasOwnProperty(key))
+            continue;
+          LocalStorage.set(key, JSON.stringify(data[key]));
+        }
+        window.location.reload()
+      }
+      fr.readAsText(file);
+
+      $('.close-modal').trigger('click');
+    });
   }
   
   function preset() {