Backup and restore data

Author: Stigmatoz

src/options.html

@@ -82,6 +82,20 @@
                     <div class="margin-top-10">
                         <input type="button" value="Export to CSV" id='exportToCsv'>
                     </div>
+                    <div class="margin-top-10">
+                        <input type="button" value="Backup" id='backup'>
+                        <input type="button" value="Restore" id='restore'>
+                        <input id="file-input-backup" class="hidden" type="file" name="backupFile" />
+                    </div>
+                    <div class="notify" id='notify-backup' hidden>
+                        Backup completed successfully
+                    </div>
+                    <div class="notify" id='notify-restore' hidden>
+                        Restore completed successfully
+                    </div>
+                    <div class="notify warning" id='notify-restore-failed' hidden>
+                        Backup file is not valid
+                    </div>
                     <!-- YouTube -->
                     <div class="margin-top-10">
                         <label class="block">Web Activity Time Tracker tracks your activity, if you active in browser

src/scripts/settings.js

@@ -25,6 +25,15 @@ document.addEventListener('DOMContentLoaded', function () {
     document.getElementById('exportToCsv').addEventListener('click', function () {
         exportToCSV();
     });
+    document.getElementById('backup').addEventListener('click', function () {
+        backup();
+    });
+    document.getElementById('restore').addEventListener('click', function () {
+        restoreDataClick();
+    });
+    document.getElementById('file-input-backup').addEventListener('change', function (e) {
+        restore(e);
+    });
     document.getElementById('addBlackSiteBtn').addEventListener('click', function () {
         addNewSiteClickHandler('addBlackSiteLbl', null, actionAddBlackSiteToList, 'notifyForBlackList');
     });
@@ -88,6 +97,9 @@ function loadSettings() {
     storage.getMemoryUse(STORAGE_TABS, function (integer) {
         document.getElementById('memoryUse').innerHTML = (integer / 1024).toFixed(2) + 'Kb';
     });
+    storage.getValue(STORAGE_TABS, function (item) {
+        let s = item;
+    });
     storage.getValue(STORAGE_BLACK_LIST, function (items) {
         if (items !== undefined)
             blackList = items;
@@ -234,20 +246,54 @@ function exportToCSV() {
     });
 }
 
+function backup() {
+    storage.getValue(STORAGE_TABS, function (item) {
+        let tabs = JSON.stringify(item);
+        createFile(tabs, "application/json", 'backup.json');
+        viewNotify('notify-backup');
+    });
+}
+
+function restoreDataClick() {
+    document.getElementById('file-input-backup').click();
+}
+
+function restore(e) {
+    let file = e.target.files[0];
+    if (file.type === "application/json") {
+        var reader = new FileReader();
+        reader.readAsText(file, 'UTF-8');
+
+        reader.onload = readerEvent => {
+            let content = readerEvent.target.result;
+            let tabs = JSON.parse(content);
+            chrome.extension.getBackgroundPage().tabs = tabs;
+            storage.saveTabs(tabs, allDataDeletedSuccess);
+            viewNotify('notify-restore');
+        }
+    } else {
+        viewNotify('notify-restore-failed');
+    }
+}
+
 function toCsv(tabsData) {
     var str = 'domain,date,time(sec)\r\n';
     for (var i = 0; i < tabsData.length; i++) {
         for (var y = 0; y < tabsData[i].days.length; y++) {
-            var line = tabsData[i].url + ',' + tabsData[i].days[y].date + ','  + tabsData[i].days[y].summary;
+            var line = tabsData[i].url + ',' + tabsData[i].days[y].date + ',' + tabsData[i].days[y].summary;
             str += line + '\r\n';
         }
     }
 
-    var csvFile = new Blob([str], { type: "text/csv" });
+    createFile(str, "text/csv", 'domains.csv');
+}
+
+function createFile(data, type, fileName) {
+    var file = new Blob([data], { type: type });
     var downloadLink;
     downloadLink = document.createElement("a");
-    downloadLink.download = 'domains.csv';
-    downloadLink.href = window.URL.createObjectURL(csvFile);
+    downloadLink.download = fileName;
+    downloadLink.href = window.URL.createObjectURL(file);
     downloadLink.style.display = "none";
     document.body.appendChild(downloadLink);
     downloadLink.click();

src/style/settings.css

@@ -249,11 +249,11 @@ input[type="button"]:hover {
   }
 
   .notify{
-    width: 200px;
+    width: 220px;
     height: 27px;
     margin: auto;
-    background-color: rgb(118, 219, 93);
-    color: rgb(0, 0, 0);
+    background-color: rgb(21, 104, 0);
+    color: rgb(255, 255, 255);
     text-align: center;
     font-weight: 600;
     border-radius: 5px;