Add icon for limit for site with tooltip

Author: Stigmatoz

icons/limit.png

@@ -92,6 +92,17 @@ function convertShortSummaryTimeToString(summaryTime) {
     return hours + 'h : ' + mins + 'm';
 }
 
+function convertShortSummaryTimeToLongString(summaryTime) {
+    var hours = Math.floor(summaryTime / 3600);
+    var totalSeconds = summaryTime % 3600;
+    var mins = Math.floor(totalSeconds / 60);
+
+    hours = zeroAppend(hours);
+    mins = zeroAppend(mins);
+
+    return hours + ' hour ' + mins + ' minutes';
+}
+
 function convertSummaryTimeToString(summaryTime) {
     var days = Math.floor(summaryTime / 3600 / 24);
     var totalHours = summaryTime % (3600 * 24);

scripts/common.js

@@ -110,7 +110,7 @@ class UI {
         this.getTableOfSite().appendChild(p);
     }
 
-    addLineToTableOfSite(tab, currentTab, summaryTime, blockName) {
+    addLineToTableOfSite(tab, currentTab, summaryTime, typeOfList, blockName) {
         var div = document.createElement('div');
         div.classList.add('inline-flex');
 
@@ -128,6 +128,26 @@ class UI {
             spanUrl.classList.add('span-active-url');
         }
 
+        if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
+            if (restrictionList !== undefined && restrictionList.length > 0) {
+                var item = restrictionList.find(x => isDomainEquals(x.domain, tab.url));
+                if (item !== undefined) {
+                    var divLimit = document.createElement('div');
+                    divLimit.classList.add('tooltip', 'inline-block');
+                    var limitIcon = document.createElement('img');
+                    limitIcon.height = 15;
+                    limitIcon.classList.add('margin-left-5', 'tooltip');
+                    limitIcon.src = '/icons/limit.png';
+                    var tooltip = document.createElement('span');
+                    tooltip.classList.add('tooltiptext');
+                    tooltip.innerText = "Dayly limit is " + convertShortSummaryTimeToLongString(item.time);
+                    divLimit.appendChild(limitIcon);
+                    divLimit.appendChild(tooltip);
+                    spanUrl.appendChild(divLimit);
+                }
+            }
+        }
+
         var spanPercentage = document.createElement('span');
         spanPercentage.classList.add('span-percentage');
         spanPercentage.innerText = getPercentage(summaryTime);

scripts/ui.js

@@ -8,6 +8,7 @@ var targetTabs;
 var currentTypeOfList;
 var today = new Date().toLocaleDateString();
 var setting_range_days;
+var restrictionList;
 
 document.addEventListener('DOMContentLoaded', function () {
     storage.getSettings(SETTINGS_INTERVAL_RANGE, function (item) { setting_range_days = item; });
@@ -39,9 +40,14 @@ firstInitPage();
 
 function firstInitPage() {
     currentTypeOfList = TypeListEnum.ToDay;
+    getLimitsListFromStorage();
     getDataFromStorage();
 }
 
+function getLimitsListFromStorage() {
+    storage.loadTabs(STORAGE_RESTRICTION_LIST, getLimitsListFromStorageCallback);
+}
+
 function getDataFromStorage() {
     storage.loadTabs(STORAGE_TABS, getTabsFromStorage);
 }
@@ -50,6 +56,12 @@ function getDataFromStorageByDays() {
     storage.loadTabs(STORAGE_TABS, getTabsByDays);
 }
 
+function getLimitsListFromStorageCallback(items){
+    if (items !== undefined)
+        restrictionList = items;
+    else restrictionList = [];
+}
+
 function getTabsFromStorage(tabs) {
     tabsFromStorage = tabs;
     targetTabs = [];
@@ -105,7 +117,7 @@ function getTabsFromStorage(tabs) {
             summaryTime = targetTabs[i].summaryTime;
         }
 
-        ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime);
+        ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList);
 
         if (i <= 8)
             addTabForChart(tabsForChart, targetTabs[i].url, summaryTime);
@@ -254,6 +266,6 @@ function getTabsFromStorageByDay(day, blockName) {
         var summaryTime;
         summaryTime = targetTabs[i].days.find(x => x.date == day).summary;
 
-        ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, blockName + '_content');
+        ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, TypeListEnum.ByDays, blockName + '_content');
     }
 }

scripts/webact.js

@@ -236,4 +236,41 @@ p.table-header{
 
 
     /* border-left: 3px solid rgb(151, 218, 52); */
+  }
+
+  .margin-left-5{
+      margin-left: 5px;
+  }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+  }
+  
+  /* Tooltip text */
+  .tooltip .tooltiptext {
+    font-size: 11px;
+    font-weight: 500;
+    visibility: hidden;
+    width: 220px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+  
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    transform: translateX(-20%) translateY(-120%);
+  
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  /* Show the tooltip text when you mouse over the tooltip container */
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
   }