Add block with stats and fIx limilt icons

Author: Stigmatoz

src/index.html

@@ -34,6 +34,61 @@
       <a id="btnByDays">By days</a>
       <a id="settings">Settings</a>
    </div>
+   <div id="stats" class="hide">
+      <p class="table-header">Overall stats</p>
+      <div id="statsBlock">
+         <div>
+            <div class="title-block">
+               <span>First day</span>
+               <span class="value-block" id="statFirstDay"></span>
+            </div>
+            <div class="inline-block">
+               <span>Last day</span>
+               <span class="value-block" id="statLastDay"></span>
+            </div>
+         </div>
+         <div>
+            <div class="title-block">
+               <span>Active days</span>
+               <span class="value-block" id="statActiveDays"></span>
+            </div>
+            <div class="inline-block">
+               <span>Days in total</span>
+               <span class="value-block" id="statTotalDays"></span>
+            </div>
+         </div>
+         <div>
+            <div class="most-inactive-days-title">
+               <div class="most-inactive-days-value">
+                  <span>Most inactive day</span>
+               </div>
+               <div class="inline-block">
+                  <div class="value-block" id="statInActiveDay"></div>
+                  <div class="value-block" id="statInActiveDayTime"></div>
+               </div>
+            </div>
+            <div class="inline-block">
+               <div style="display: inline-block;vertical-align: top;">
+                  <span>Most active day</span>
+               </div>
+               <div class="inline-block">
+                     <div class="value-block" id="statActiveDay"></div>
+                     <div class="value-block" id="statActiveDayTime"></div>
+               </div>
+            </div>
+         </div>
+         <div>
+            <div class="title-block">
+               <span>Today</span>
+               <span class="value-block" id="statTodayTime"></span>
+            </div>
+            <div class="inline-block">
+               <span>All-time</span>
+               <span class="value-block" id="statAllDaysTime"></span>
+            </div>
+         </div>
+      </div>
+   </div>
    <div id="blockForChartBtn">
       <a class="button active chart-btn chart-btn-donut" id="donutChartBtn">Common chart</a>
       <a class="button chart-btn chart-btn-heatmap" id="heatMapChartBtn">Time chart</a>

src/scripts/ui.js

@@ -10,6 +10,7 @@ class UI {
         document.getElementById('btnAll').classList.remove('active');
         document.getElementById('btnByDays').classList.remove('active');
         document.getElementById('blockForChartBtn').classList.remove('hide');
+        document.getElementById('stats').classList.add('hide');
         this.setUIForDonutChart();
 
         this.clearUI();
@@ -20,6 +21,7 @@ class UI {
         document.getElementById('btnToday').classList.remove('active');
         document.getElementById('btnByDays').classList.remove('active');
         document.getElementById('blockForChartBtn').classList.add('hide');
+        document.getElementById('stats').classList.remove('hide');
 
         this.clearUI();
     }
@@ -29,6 +31,7 @@ class UI {
         document.getElementById('btnAll').classList.remove('active');
         document.getElementById('btnToday').classList.remove('active');
         document.getElementById('blockForChartBtn').classList.add('hide');
+        document.getElementById('stats').classList.add('hide');
 
         this.clearUI();
         this.addBlockForCalendar(range);

src/scripts/webact.js

@@ -9,6 +9,18 @@ var currentTypeOfList;
 var today = new Date().toLocaleDateString("en-US");
 var setting_range_days;
 var restrictionList;
+var stat = {
+    'firstDay': null,
+    'lastDay': null,
+    'activeDays': null,
+    'totalDays': null,
+    'inActiveDay': null,
+    'inActiveDayTime': null,
+    'activeDay': null,
+    'activeDayTime': null,
+    'todayTime': null,
+    'allDaysTime': null
+};
 
 document.addEventListener('DOMContentLoaded', function () {
     storage.getValue(SETTINGS_INTERVAL_RANGE, function (item) { setting_range_days = item; });
@@ -92,6 +104,7 @@ function getTabsFromStorage(tabs) {
 
         if (targetTabs.length > 0) {
             totalTime = getTotalTime(targetTabs);
+            stat.allDaysTime = totalTime;
         }
         else {
             ui.fillEmptyBlock('chart');
@@ -109,6 +122,7 @@ function getTabsFromStorage(tabs) {
             });
 
             totalTime = getTotalTime(targetTabs);
+            stat.todayTime = totalTime;
         }
         else {
             ui.fillEmptyBlock('chart');

src/style/webact.css

@@ -302,7 +302,6 @@ p.table-header{
   }
 
   .tooltip {
-    width: 70px;
     position: relative;
     display: inline-block;
   }
@@ -397,4 +396,38 @@ p.table-header{
 
   .chart-btn-heatmap{
     background-image: url(/icons/heat-map-16.png);
+  }
+
+  #statsBlock{
+    /* border: 1px solid rgb(195, 194, 194);
+    border-radius: 5px; */
+    /* padding: 7px; */
+    color: #9b9b9b;
+    font-size: 13px;
+  }
+
+  #statsBlock .title-block{
+    display: inline-block; 
+    width: 40%; 
+    margin-left:10%;
+  }
+
+  #statsBlock .value-block{
+    color:black; 
+    font-weight: 600;
+  }
+
+  #statsBlock .inline-block{
+    display: inline-block;
+  }
+
+  #statsBlock .most-inactive-days-title{
+    width: 50%; 
+    display: inline-block;
+  }
+
+  #statsBlock .most-inactive-days-value{
+    display: inline-block;
+    margin-left:20%;
+    vertical-align: top;
   }