Function for clear tabs and notify for clear all data

Author: Stigmatoz

options.html

@@ -57,6 +57,9 @@
                   </select>
                </div>
                <div class="margin-top-10"><input type="button" value="Clear all data" id='clearAllData'></div>
+               <div class="notify" id='notify' hidden>
+                  Data succeed deleted
+               </div>
             </div>
          </div>
          <div id='aboutBlock' hidden>

scripts/background.js

@@ -14,8 +14,7 @@ function updateSummaryTime() {
 }
 
 function updateStorage() {
-    storage.getSettings(SETTINGS_INTERVAL_SAVE_STORAGE, function (item) { setting_interval_save = item; });
-    setInterval(backgroundUpdateStorage, setting_interval_save);
+    setInterval(backgroundUpdateStorage, SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT);
 }
 
 function backgroundCheck() {

scripts/chart/chart-core.js

@@ -16,7 +16,7 @@ function donutChart() {
 
             // ===========================================================================================
             // Set up constructors for making donut. See https://github.com/d3/d3-shape/blob/master/README.md
-            var radius = 120;
+            var radius = 135;
 
             // creates a new pie generator
             var pie = d3.pie()
@@ -49,7 +49,7 @@ function donutChart() {
                 .attr('height', height + margin.top + margin.bottom)
                 .attr('class', 'backColorChart')
                 .append('g')
-                .attr('transform', 'translate(' + (width / 2 - 100) + ',' + (height / 2) + ')');
+                .attr('transform', 'translate(' + (width / 2 - 100) + ',' + (height / 2 + 10) + ')');
             // ===========================================================================================
 
             // ===========================================================================================
@@ -74,7 +74,7 @@ function donutChart() {
                 .data(pie(data))
                 .enter().append("g")
                 .attr("transform", function (d, i) {
-                    return "translate(" + (120) + "," + (i * 20 - 30) + ")"; // place each legend on the right and bump each one down 15 pixels
+                    return "translate(" + (130) + "," + (i * 20 - 30) + ")"; // place each legend on the right and bump each one down 15 pixels
                 })
                 .attr("class", "legend");
 

scripts/settings.js

@@ -47,5 +47,12 @@ function loadSettings(){
 }
 
 function clearAllData(){
-    storage.saveTabs(null);
+    var tabs = [];
+    chrome.extension.getBackgroundPage().tabs = tabs;
+    storage.saveTabs(tabs, viewNotify);
+}
+
+function viewNotify(){
+    document.getElementById('notify').hidden = false;
+    setTimeout(function(){ document.getElementById('notify').hidden = true; }, 3000);
 }

scripts/storage.js

@@ -4,15 +4,17 @@ class LocalStorage {
     loadTabs(name, callback) {
         chrome.storage.local.get(name, function (item) {
             if (item[name] !== undefined) {
-                var result = JSON.parse(item[name]);
+                var result = item[name];
                 if (result !== undefined)
                     callback(result);
             }
         });
     }
 
-    saveTabs(value) {
-        chrome.storage.local.set({ tabs: JSON.stringify(value) });
+    saveTabs(value, callback) {
+        chrome.storage.local.set({ tabs: value });
+        if (callback !== undefined)
+            callback();
     }
 
     saveSettings(name, value) {

scripts/webact.js

@@ -65,7 +65,13 @@ function getTabsFromStorage(tabs) {
             return b.summaryTime - a.summaryTime;
         });
 
-        totalTime = getTotalTime(targetTabs);
+        if (targetTabs.length > 0){
+            totalTime = getTotalTime(targetTabs);
+        }
+        else{
+            ui.fillEmptyBlock('chart');
+            return;
+        }
     }
     if (currentTypeOfList === TypeListEnum.ToDay) {
         targetTabs = tabs.filter(x => x.days.find(s => s.date === today));

style/settings.css

@@ -231,4 +231,22 @@ select {
   .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
+  }
+
+  .notify{
+    width: 200px;
+    height: 30px;
+    margin: auto;
+    background-color: rgb(118, 219, 93);
+    color: rgb(0, 0, 0);
+    text-align: center;
+    font-weight: 600;
+    border-radius: 5px;
+    position: fixed;
+    z-index: 1;
+    top: 10px;
+    right: 20px;
+    font-size: 17px;
+    white-space: nowrap;
+    padding: 10px;
   }