feature list of days. part 1. days with summary time

Author: hai-altx-soft

scripts/ui.js

@@ -158,10 +158,25 @@ class UI {
         calendarTwo.type = 'date';
         calendarTwo.valueAsDate = new Date(Date.UTC(dateNow.getFullYear(), dateNow.getMonth(), dateNow.getDate()));
 
+        var header = document.createElement('div');
+        header.classList.add('table-header');
+
+        var headerTitleDate = document.createElement('span');
+        headerTitleDate.innerHTML = 'Day';
+        headerTitleDate.classList.add('header-title-day');
+        var headerTitleTime = document.createElement('span');
+        headerTitleTime.innerHTML = 'Summary time';
+        headerTitleTime.classList.add('header-title-time');
+
+        header.appendChild(headerTitleDate);
+        header.appendChild(headerTitleTime);
+
         div.appendChild(from);
         div.appendChild(calendarFirst);
         div.appendChild(to);
         div.appendChild(calendarTwo);
+
+        div.append(header);
     }
 
     getDateRange() {
@@ -175,10 +190,16 @@ class UI {
         var parent = document.getElementById('byDays');
         for (var i = 0; i < days.length; i++) {
             var div = document.createElement('div');
-            div.classList.add('day');
+            div.classList.add('day-block');
             var span = document.createElement('span');
-            span.innerHTML = days[i];
+            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);
         }

scripts/webact.js

@@ -37,7 +37,7 @@ function getDataFromStorage() {
     storage.load(STORAGE_TABS, getTabsFromStorage);
 }
 
-function getDataFromStorageByDays(){
+function getDataFromStorageByDays() {
     storage.load(STORAGE_TABS, getTabsByDays);
 }
 
@@ -46,7 +46,7 @@ function getTabsFromStorage(tabs) {
     targetTabs = [];
 
     ui.clearUI();
-    if (tabs === null){
+    if (tabs === null) {
         ui.fillEmptyBlock();
         return;
     }
@@ -173,17 +173,26 @@ function getFirstDay() {
     };
 }
 
-function getTabsByDays(tabs){
+function getTabsByDays(tabs) {
     var range = ui.getDateRange();
     var listOfDays = [];
     tabs.map(function (a) {
         return a.days.map(function (a) {
-            if (listOfDays.indexOf(a.date) === -1 && isDateInRange(a.date, range))
-                return listOfDays.push(a.date);
+            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) - new Date(b);
+        return new Date(a.date) - new Date(b.date);
     });
 
     ui.fillListOfDays(listOfDays);

style/webact.css

@@ -143,11 +143,37 @@ input[type="date"]{
     font-size: 13px;
     padding: 4px;
     background-color: rgb(223, 221, 221);
+}
+
+p.table-header{
     text-align: center;
 }
 
-.day{
-    width: 500px;
+.day-block{
+    display: inline-flex;
+    width: 100%;
     height: 25px;
     cursor: pointer;
+    border-bottom: 1px solid rgb(223, 221, 221);
+}
+
+.day{
+    width: 415px;
+    font-size: 13px;
+    padding-left:5px;
+    margin:auto;
+}
+
+.day-time{
+    width: 80px;
+    margin:auto;
+}
+
+.header-title-day{
+    margin-left: 5px;
+}
+
+.header-title-time{
+    margin-right: 5px;
+    float: right;
 }