Change design block page

Stigmatoz · Stigmatoz · commit d892e732943f · 2019-04-07T01:09:51.000+03:00
diff --git a/block.html b/block.html
@@ -5,15 +5,19 @@
    <meta charset="utf-8">
    <title>Access to the site is limited</title>
    <link href="style/block.css" rel="stylesheet" />
+   <script src="scripts/storage.js"></script>
+   <script src="scripts/common.js"></script>
    <script src="scripts/block.js"></script>
 </head>
 
 <body>
-   <div class="content">
+   <div>
       <img src="icons/time.svg" height="50">
       <p class="title">Time limit</p>
       <div class="description">You've reached today your limit 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>
+   <p class="product-title">Web Activity Time Tracker</p>
 </body>
 
 </html>
diff --git a/scripts/activity.js b/scripts/activity.js
@@ -36,7 +36,7 @@ class Activity {
 
     isLimitExceeded(domain, tab) {
         if (setting_restriction_list !== undefined && setting_restriction_list.length > 0) {
-            var item = setting_restriction_list.find(o => this.isDomainEquals(o.domain, domain));
+            var item = setting_restriction_list.find(o => isDomainEquals(o.domain, domain));
             if (item !== undefined) {
                 var today = new Date().toLocaleDateString();
                 var data = tab.days.find(x => x.date == today);
@@ -51,22 +51,6 @@ class Activity {
         return false;
     }
 
-    isDomainEquals(first, second) {
-        if (first === second)
-            return true;
-        else {
-            var resultUrl = function (url) {
-                if (url.indexOf('www.') > -1)
-                    return url.split('www.')[1];
-                return url;
-            };
-
-            if (resultUrl(first) === resultUrl(second))
-                return true;
-            else return false;
-        }
-    }
-
     isNewUrl(domain) {
         if (tabs.length > 0)
             return tabs.find(o => o.url === domain) === undefined;
diff --git a/scripts/block.js b/scripts/block.js
@@ -1,5 +1,18 @@
+var storage = new LocalStorage();
+var restrictionList = [];
+
 document.addEventListener('DOMContentLoaded', function () {
     var url = new URL(document.URL);
     var blockSiteUrl = url.searchParams.get("url");
     document.getElementById('site').innerText = blockSiteUrl;
+
+    storage.getSettings(STORAGE_RESTRICTION_LIST, function (items) {
+        restrictionList = items;
+        if (restrictionList === undefined)
+            restrictionList = [];
+        var currentItem = restrictionList.find(x => isDomainEquals(x.domain, blockSiteUrl));
+        if (currentItem !== undefined){
+            document.getElementById('limit').innerText = convertShortSummaryTimeToString(currentItem.time);
+        }
+    });
 });
diff --git a/scripts/common.js b/scripts/common.js
@@ -152,3 +152,19 @@ function getDateFromRange(range) {
         case 'month3': return 90;
     }
 }
+
+function isDomainEquals(first, second) {
+    if (first === second)
+        return true;
+    else {
+        var resultUrl = function (url) {
+            if (url.indexOf('www.') > -1)
+                return url.split('www.')[1];
+            return url;
+        };
+
+        if (resultUrl(first) === resultUrl(second))
+            return true;
+        else return false;
+    }
+}
diff --git a/style/block.css b/style/block.css
@@ -15,6 +15,24 @@ body{
 }
 
 .current-site{
+    font-size: 18px;
     font-weight: 500;
     color: rgb(202, 48, 48);
+}
+
+.current-limit{
+    font-weight: 500;
+    color: rgb(128, 128, 128);
+}
+
+.margin-top-10{
+    margin-top: 10px;
+}
+
+.product-title{
+    font-size: 16px;
+    color: rgb(128, 128, 128);
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
 }
