add total time

Stigmatoz · Stigmatoz · commit 0851d08aa87a · 2018-12-27T00:58:06.000+03:00
diff --git a/index.html b/index.html
@@ -1,15 +1,23 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-   <meta charset="utf-8">	
+   <meta charset="utf-8">
    <title>WebActivity Time Tracker</title>
-   <link href="style/webact.css" rel="stylesheet"/>
+   <link href="style/webact.css" rel="stylesheet" />
    <script src="scripts/storage.js"></script>
    <script src="scripts/common.js"></script>
    <script src="scripts/webact.js"></script>
 </head>
+
 <body>
-   <div id="resultTable">
+   <hr>
+   <div id="resultTable"></div>
+   <hr>
+   <div class="inline-flex">
+      <span class="span-total">Total</span>
+      <span class="span-time" id="totalTime"></span>
    </div>
 </body>
+
 </html>
diff --git a/scripts/webact.js b/scripts/webact.js
@@ -11,7 +11,7 @@ function getDataFromStorage() {
 function getTabsFromStorage(tabs) {
     var table = document.getElementById('resultTable');
     table.innerHTML = null;
-    tabs = tabs.sort(function(a, b){
+    tabs = tabs.sort(function (a, b) {
         return b.summaryTime - a.summaryTime;
     });
     for (var i = 0; i < tabs.length; i++) {
@@ -36,4 +36,12 @@ function getTabsFromStorage(tabs) {
         div.appendChild(spanTime);
         table.appendChild(div);
     }
+
+    setTotalTime(tabs);
+}
+
+function setTotalTime(tabs) {
+    var summaryTimeList = tabs.map(function (a) { return a.summaryTime; });
+    var total = summaryTimeList.reduce(function (a, b) { return a + b; })
+    document.getElementById('totalTime').innerText = convertSummaryTimeToString(total);
 }
diff --git a/style/webact.css b/style/webact.css
@@ -19,11 +19,27 @@ body {
     color: rgb(107, 107, 107);
 }
 
+.span-total{
+    width: 220px;
+    text-decoration: none;
+    color: rgb(0, 0, 0);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
 .span-time{
     margin-left: 10px;
     width: 70px;
+    font-weight: 500;
 }
 
 .favicon{
     margin-right:5px;
-}
+}
+
+hr {
+    border: none;
+    background-color: rgb(187, 187, 187);
+    height: 2px;
+   }
