Merge pull request Stigmatoz#88 from nilshah98/85-edit_limits

[FIX] Edit limits in options page

Author: Stigmatoz

src/block.html

@@ -17,6 +17,10 @@
       <div class="description">You've reached your limit today on <span id="site" class="current-site"></span></div>
       <div class="description margin-top-10">Your current daily limit is <span id="limit" class="current-limit"></span></div>
 
+      <div class="description margin-top-10">You have already been here
+         <span id="deferredCount" class="deferred-metrics"></span> times for a total duration of
+         <span id="deferredTime" class="deferred-metrics"></span> today !
+      </div>
       <div class="margin-top-10"><a id="deffererBtn" class="defferer-link">Set aside for 5 minutes</a></div>
    </div>
    <p class="product-title">Web Activity Time Tracker</p>

src/scripts/background.js

@@ -66,7 +66,7 @@ function backgroundCheck() {
 
 function mainTRacker(activeUrl, tab, activeTab) {
     if (activity.isLimitExceeded(activeUrl, tab) && !activity.wasDeferred(activeUrl)) {
-        setBlockPageToCurrent(activeTab.url);
+        setBlockPageToCurrent(activeTab.url, tab.days.at(-1).summary, tab.days.at(-1).counter);
     }
     if (!activity.isInBlackList(activeUrl)) {
         if (activity.isNeedNotifyView(activeUrl, tab)) {
@@ -131,8 +131,10 @@ function notificationAction(activeUrl, tab) {
         });
 }
 
-function setBlockPageToCurrent(currentUrl) {
-    var blockUrl = chrome.runtime.getURL("block.html") + '?url=' + currentUrl;
+function setBlockPageToCurrent(currentUrl, summaryTime, counter) {
+    var blockUrl = chrome.runtime.getURL("block.html") + '?url=' + currentUrl
+    + '&summaryTime=' + summaryTime
+    + '&counter=' + counter;
     chrome.tabs.query({ currentWindow: true, active: true }, function(tab) {
         chrome.tabs.update(tab.id, { url: blockUrl });
     });

src/scripts/block.js

@@ -2,12 +2,18 @@
 
 var storage = new LocalStorage();
 var blockSiteUrl;
+var blockSiteTime;
+var blockSiteCounter;
 var restrictionList = [];
 
 document.addEventListener("DOMContentLoaded", function () {
   var url = new URL(document.URL);
   blockSiteUrl = url.searchParams.get("url");
+  blockSiteTime = url.searchParams.get("summaryTime");
+  blockSiteCounter = url.searchParams.get("counter");
   document.getElementById("site").innerText = extractHostname(blockSiteUrl);
+  document.getElementById("deferredTime").innerText = convertShortSummaryTimeToString(blockSiteTime);
+  document.getElementById("deferredCount").innerText = blockSiteCounter;
 
   storage.getValue(STORAGE_RESTRICTION_LIST, function (items) {
     restrictionList = items;

src/scripts/settings.js

@@ -444,14 +444,14 @@ function addDomainToEditableListBox(entity, elementId, actionEdit, actionDelete,
 }
 
 function deleteBlackSite(e) {
-    var targetElement = e.path[1];
+    var targetElement = e.composedPath()[1];
     blackList.splice(blackList.indexOf(targetElement.innerText), 1);
     document.getElementById('blackList').removeChild(targetElement);
     updateBlackList();
 }
 
 function deleteRestrictionSite(e) {
-    var targetElement = e.path[1];
+    var targetElement = e.composedPath()[1];
     var itemValue = targetElement.querySelector("[name='domain']").value;
     var item = restrictionList.find(x => x.domain == itemValue);
     restrictionList.splice(restrictionList.indexOf(item), 1);
@@ -460,7 +460,7 @@ function deleteRestrictionSite(e) {
 }
 
 function deleteNotificationSite(e) {
-    var targetElement = e.path[1];
+    var targetElement = e.composedPath()[1];
     var itemValue = targetElement.querySelector("[name='domain']").value;
     var item = notifyList.find(x => x.domain == itemValue);
     notifyList.splice(notifyList.indexOf(item), 1);
@@ -469,7 +469,7 @@ function deleteNotificationSite(e) {
 }
 
 function actionEditSite(e, actionUpdateTimeFromList, actionUpdateList) {
-    var targetElement = e.path[1];
+    var targetElement = e.composedPath()[1];
     var domainElement = targetElement.querySelector('[name="domain"]');
     var timeElement = targetElement.querySelector('[name="time"]');
     if (timeElement.classList.contains('clock-li-readonly')) {

src/style/block.css

@@ -41,4 +41,10 @@ body{
     color: gray;
     text-decoration: underline;
     cursor: pointer;
+}
+
+.deferred-metrics{
+    font-weight: 500;
+    font-size: 1.2rem;
+    color: rgb(202, 48, 48);
 }