add event for calendar change & add empty row for days

Author: Stigmatoz

scripts/ui.js

@@ -52,8 +52,12 @@ class UI {
         totalElement.appendChild(spanTime);
     }
 
-    fillEmptyBlock() {
-        document.getElementById('chart').innerHTML = '<p class="no-data">No data</p>';
+    fillEmptyBlock(elementName) {
+        document.getElementById(elementName).innerHTML = '<p class="no-data">No data</p>';
+    }
+
+    fillEmptyBlockForDays() {
+        document.getElementById('tableForDaysBlock').innerHTML = '<p class="no-data">Invalid date</p>';
     }
 
     addHrAfterChart() {
@@ -158,6 +162,8 @@ class UI {
         calendarTwo.type = 'date';
         calendarTwo.valueAsDate = new Date(Date.UTC(dateNow.getFullYear(), dateNow.getMonth(), dateNow.getDate()));
 
+        var tableForDaysBlock = document.createElement('div');
+        tableForDaysBlock.id = 'tableForDaysBlock';
         var header = document.createElement('div');
         header.classList.add('table-header');
 
@@ -171,12 +177,22 @@ class UI {
         header.appendChild(headerTitleDate);
         header.appendChild(headerTitleTime);
 
+        tableForDaysBlock.appendChild(header);
+
         div.appendChild(from);
         div.appendChild(calendarFirst);
         div.appendChild(to);
         div.appendChild(calendarTwo);
 
-        div.append(header);
+        div.append(tableForDaysBlock);
+
+        document.getElementById('dateFrom').addEventListener('change', function () {
+            getTabsByDays(tabsFromStorage);
+        });
+
+        document.getElementById('dateTo').addEventListener('change', function () {
+            getTabsByDays(tabsFromStorage);
+        });
     }
 
     getDateRange() {
@@ -187,21 +203,27 @@ class UI {
     }
 
     fillListOfDays(days) {
-        var parent = document.getElementById('byDays');
-        for (var i = 0; i < days.length; i++) {
-            var div = document.createElement('div');
-            div.classList.add('day-block');
-            var span = document.createElement('span');
-            span.classList.add('day');
-            span.innerHTML = days[i].date;
-            var spanTime = document.createElement('span');
-            spanTime.classList.add('day-time');
-            spanTime.innerHTML = convertSummaryTimeToString(days[i].total);
-
-            div.appendChild(span);
-            div.appendChild(spanTime);
-
-            parent.appendChild(div);
+        var parent = document.getElementById('tableForDaysBlock');
+        parent.innerHTML = null;
+        if (days.length > 0) {
+            for (var i = 0; i < days.length; i++) {
+                var div = document.createElement('div');
+                div.classList.add('day-block');
+                var span = document.createElement('span');
+                span.classList.add('day');
+                span.innerHTML = days[i].date;
+                var spanTime = document.createElement('span');
+                spanTime.classList.add('day-time');
+                spanTime.innerHTML = convertSummaryTimeToString(days[i].total);
+
+                div.appendChild(span);
+                div.appendChild(spanTime);
+
+                parent.appendChild(div);
+            }
+        
+        } else {
+            this.fillEmptyBlock('tableForDaysBlock');
         }
     }
 }

scripts/webact.js

@@ -47,7 +47,7 @@ function getTabsFromStorage(tabs) {
 
     ui.clearUI();
     if (tabs === null) {
-        ui.fillEmptyBlock();
+        ui.fillEmptyBlock('chart');
         return;
     }
 
@@ -68,7 +68,7 @@ function getTabsFromStorage(tabs) {
             totalTime = getTotalTime(targetTabs);
         }
         else {
-            ui.fillEmptyBlock();
+            ui.fillEmptyBlock('chart');
             return;
         }
     }
@@ -175,25 +175,30 @@ function getFirstDay() {
 
 function getTabsByDays(tabs) {
     var range = ui.getDateRange();
-    var listOfDays = [];
-    tabs.map(function (a) {
-        return a.days.map(function (a) {
-            var item = listOfDays.find(x => x.date == a.date);
-            if (item !== undefined){
-                return item.total += a.summary;
-            }
-            if (item === undefined && isDateInRange(a.date, range))
-                return listOfDays.push(
-                    {
-                        'date': a.date,
-                        'total': a.summary
-                    }
-                );
+    if (range.from !== 'Invalid Date' && range.to !== 'Invalid Date') {
+        var listOfDays = [];
+        tabs.map(function (a) {
+            return a.days.map(function (a) {
+                var item = listOfDays.find(x => x.date == a.date);
+                if (item !== undefined) {
+                    return item.total += a.summary;
+                }
+                if (item === undefined && isDateInRange(a.date, range))
+                    return listOfDays.push(
+                        {
+                            'date': a.date,
+                            'total': a.summary
+                        }
+                    );
+            });
+        });
+        listOfDays = listOfDays.sort(function (a, b) {
+            return new Date(a.date) - new Date(b.date);
         });
-    });
-    listOfDays = listOfDays.sort(function (a, b) {
-        return new Date(a.date) - new Date(b.date);
-    });
 
-    ui.fillListOfDays(listOfDays);
+        ui.fillListOfDays(listOfDays);
+    }
+    else{
+        ui.fillEmptyBlockForDays();
+    }
 }