White list

Author: Stigmatoz

src/assets/css/settings.css

@@ -33,12 +33,14 @@ body {
     min-height: 150px;
     cursor: pointer;
     list-style: none;
-    padding:10px
+    padding:10px;
+    max-height: 300px;
+    overflow: auto;
 }
 
 .url-list li{
-    line-height: 20px;
-    font-size: 13px;
+    line-height: 25px;
+    font-size: 14px;
 }
 
 input[type="text"]{

src/assets/icons/delete.png

@@ -5,7 +5,6 @@ import { Settings } from './settings';
 
 export async function isInBlackList(url: string): Promise<boolean> {
   const blackList = (await Settings.getInstance().getSetting(StorageParams.BLACK_LIST)) as string[];
-  return (
-    blackList?.find(x => isDomainEquals(extractHostname(x), extractHostname(url))) !== undefined
-  );
+  const array = Object.values(blackList);
+  return array?.find(x => isDomainEquals(extractHostname(x), extractHostname(url))) !== undefined;
 }

src/compositions/black-list.ts

@@ -88,7 +88,16 @@
               Activity and time for these domains will not be tracked
             </p>
             <ul readonly class="url-list">
-              <li v-for="(url, i) of whiteList" :key="i">{{ url }}</li>
+              <li v-for="(url, i) of whiteList" :key="i">
+                <div>
+                  <img
+                    src="../assets/icons/delete.png"
+                    height="16"
+                    @click="deleteFromWhiteList(url)"
+                  />
+                  {{ url }}
+                </div>
+              </li>
             </ul>
             <div class="mt-20">
               <input
@@ -102,7 +111,7 @@
                 class="d-inline-block small-btn ml-10"
                 value="Add Website"
                 :disabled="newWebsiteForWhiteList == null || newWebsiteForWhiteList == ''"
-                @click="addWebsite()"
+                @click="addToWhiteList()"
               />
             </div>
           </div>
@@ -204,14 +213,14 @@ onMounted(async () => {
     StorageParams.BLOCK_DEFERRAL,
     BLOCK_DEFERRAL_DEFAULT,
   );
-  whiteList.value = await settingsStorage.getValue(StorageParams.BLACK_LIST, []);
+  whiteList.value = Object.values(await settingsStorage.getValue(StorageParams.BLACK_LIST, []));
 });
 
 async function save(storageParam: StorageParams, value: any) {
   if (value != undefined) await settingsStorage.saveValue(storageParam, value);
 }
 
-async function addWebsite() {
+function addToWhiteList() {
   const existingItem = whiteList.value?.find(x =>
     isDomainEquals(extractHostname(x), extractHostname(newWebsiteForWhiteList.value!)),
   );
@@ -221,12 +230,18 @@ async function addWebsite() {
       type: 'error',
     });
   } else {
-    whiteList.value?.push(newWebsiteForWhiteList.value!);
+    const newWebsite = extractHostname(newWebsiteForWhiteList.value!);
+    whiteList.value?.push(newWebsite);
     onChange(StorageParams.BLACK_LIST, whiteList.value);
     newWebsiteForWhiteList.value = '';
   }
 }
 
+function deleteFromWhiteList(url: string) {
+  whiteList.value = whiteList.value!.filter(x => x != url);
+  onChange(StorageParams.BLACK_LIST, whiteList.value);
+}
+
 function onChange(storageParam: StorageParams, value: any) {
   save(storageParam, value);
 }
@@ -241,4 +256,10 @@ function onChange(storageParam: StorageParams, value: any) {
   margin-bottom: 30px;
   display: block;
 }
+
+.url-list img {
+  vertical-align: middle;
+  margin-right: 10px;
+  cursor: pointer;
+}
 </style>

src/pages/Settings.vue

@@ -50,7 +50,7 @@ async function trackTime() {
         useBadge({
           tabId: activeTab!.id!,
           text: 'n/a',
-          color: BadgeColor.red,
+          color: BadgeColor.green,
         });
       } else {
         let tab = repo.getTab(activeDomain);