add calendar's from and to

Author: hai-altx-soft

index.html

@@ -18,14 +18,15 @@
    <div id="title">
       <p class="title">Web Activity Time Tracker</p>
    </div>
-   <div id="buttons">
+   <div id="buttons" class="btn-block">
       <input type="button" value="Today" class="active" id="btnToday"/>
       <input type="button" value="All" id="btnAll"/>
       <input type="button" value="By days" id="btnByDays"/>
    </div>
-   <div id="chart" class="margin-top-7"></div>
+   <div id="chart"></div>
    <div id="resultTable" class="list-of-site"></div>
    <div id="total" class="inline-flex"></div>
+   <div id="byDays" class="calendar-block"></div>
 </body>
 
 </html>

scripts/ui.js

@@ -22,14 +22,15 @@ class UI {
         document.getElementById('btnAll').classList.remove('active');
         document.getElementById('btnToday').classList.remove('active');
 
-        document.getElementById('resultTable').innerHTML = null;
-        document.getElementById('chart').innerHTML = null;
+        this.clearUI();
+        this.addBlockForCalendar();
     }
 
     clearUI() {
         document.getElementById('resultTable').innerHTML = null;
         document.getElementById('chart').innerHTML = null;
         document.getElementById('total').innerHTML = null;
+        document.getElementById('byDays').innerHTML = null;
     }
 
     createTotalBlock(totalTime) {
@@ -131,4 +132,28 @@ class UI {
         div.appendChild(spanTime);
         this.getTableOfSite().appendChild(div);
     }
+
+    addBlockForCalendar() {
+        var div = document.getElementById('byDays');
+
+        var from = document.createElement('span');
+        from.innerHTML = 'From';
+        var to = document.createElement('span');
+        to.innerHTML = 'To';
+
+        var calendarFirst = document.createElement('input');
+        calendarFirst.type = 'date';
+        var previousDate = new Date();
+        previousDate.setDate(previousDate.getDate() - 7);
+        calendarFirst.valueAsDate = previousDate;
+
+        var calendarTwo = document.createElement('input');
+        calendarTwo.type = 'date';
+        calendarTwo.valueAsDate = new Date();
+
+        div.appendChild(from);
+        div.appendChild(calendarFirst);
+        div.appendChild(to);
+        div.appendChild(calendarTwo);
+    }
 }

scripts/webact.js

@@ -44,7 +44,6 @@ function getTabsFromStorage(tabs) {
     tabsFromStorage = tabs;
     targetTabs = [];
 
-    var table = ui.getTableOfSite();
     ui.clearUI();
 
     if (currentTypeOfList === TypeListEnum.All) {

style/webact.css

@@ -3,17 +3,12 @@ body {
     color: #262626;
 }
 
-.margin-top-7{
-    margin-top: 7px;
-}
-
 .list-of-site{
     overflow-y: auto;
 }
 
 .inline-flex{
     display: inline-flex;
-    height: 25px;
 }
 
 .inline-flex:hover{
@@ -107,6 +102,7 @@ input[type="button"]{
     border: 1px solid #0099CC;
     background: transparent; 
     color: #0099CC; 
+    width: 32%;
 }
 
 input[type="button"]:hover {
@@ -119,11 +115,27 @@ input[type="button"].active {
     color: white;
 }
 
+input[type="date"]{
+    margin: 4px 6px;
+    height: 22px;
+}
+
+.btn-block{
+    width: 500px;
+    margin-bottom: 7px;
+}
+
 .no-data{
     width: 500px;
     text-align: center;
     font-weight: 600;
     font-size: 14px;
+}
+
+.calendar-block{
+    margin-top: -20px;
+}
+
 .table-header{
     margin:3px 0;
     border-radius: 5px;