Badge for domain list if site has limit

Author: Stigmatoz

src/components/BadgeIcons.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="d-inline-block">
+    <span v-if="showDocumentBadge" class="badge-document">Document</span>
+    <span v-if="showLimitBadge" class="badge-block">Limit</span>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'BadgeIcons',
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { TypeOfList, TypeOfUrl } from '../utils/enums';
+import { isDomainInLimits } from '../compositions/limit-list';
+
+const props = defineProps<{
+  url: string;
+  type: TypeOfUrl;
+  listType: TypeOfList;
+}>();
+
+onMounted(async () => {
+  isLimit.value = await isDomainInLimits(props.url);
+});
+
+const isLimit = ref<boolean>();
+
+const showDocumentBadge = computed(() => props.type == TypeOfUrl.Document);
+const showLimitBadge = computed(() => props.listType == TypeOfList.Today && isLimit.value == true);
+</script>
+
+<style scoped>
+span.badge-document {
+  border-radius: 6px;
+  background-color: #0043ff9e;
+  padding: 3px 7px;
+  font-size: 11px;
+  color: white;
+  font-weight: 600;
+}
+span.badge-block {
+  border-radius: 6px;
+  background-color: #ff0000c0;
+  padding: 3px 7px;
+  font-size: 11px;
+  color: white;
+  font-weight: 600;
+}
+</style>

src/components/ByDays.vue

@@ -41,9 +41,9 @@
       </div>
       <div class="stats-block block">
         <div class="header">Average time on selected days</div>
-        <p>{{ convertSummaryTimeToString(tabsByDays.averageTime) }}</p>
+        <p>{{ convertSummaryTimeToString(tabsByDays!.averageTime) }}</p>
       </div>
-      <ByDaysChart :data="tabsByDays" />
+      <ByDaysChart :data="tabsByDays!" />
       <div>
         <Expander
           v-for="(tabDay, i) of tabsByDays?.days"

src/components/GeneralSettings.vue

@@ -25,7 +25,7 @@
       />
       <span>Allow deferring block for 5 minutes</span>
       <p class="description">
-        After the site is blocked, you can postpone the blocking for 5 minutes
+        After the site is blocked, you can postpone the blocking for 5 minutes ones
       </p>
     </label>
   </div>

src/components/TabItem.vue

@@ -5,7 +5,7 @@
       <div class="first-block">
         <div class="w-80">
           <p class="url" @click="openUrl(item.url)">{{ url }}</p>
-          <div class="d-inline-block" v-html="getBadgeIcon()"></div>
+          <BadgeIcons :url="url" :type="typeOfUrl" :listType="listType" />
         </div>
         <p class="text-right time">{{ summaryTimeForTab }}</p>
       </div>
@@ -32,20 +32,18 @@ export default {
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import Favicon from './Favicon.vue';
+import BadgeIcons from './BadgeIcons.vue';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { getPercentage } from '../utils/common';
 import { CurrentTabItem } from '../dto/currentTabItem';
+import { TypeOfList, TypeOfUrl } from '../utils/enums';
 
 const props = defineProps<{
   item: CurrentTabItem;
   summaryTimeForWholeDay: number;
+  listType: TypeOfList;
 }>();
 
-enum TypeOfUrl {
-  WebSite,
-  Document,
-}
-
 const typeOfUrl = computed(() =>
   props.item.url.startsWith('file:') ? TypeOfUrl.Document : TypeOfUrl.WebSite,
 );
@@ -75,10 +73,6 @@ function openUrl(url: string) {
 }
 
 const showWarningMessage = ref<boolean>();
-
-function getBadgeIcon() {
-  if (typeOfUrl.value == TypeOfUrl.Document) return `<span class="badge-document">Document</span>`;
-}
 </script>
 
 <style scoped>
@@ -141,14 +135,6 @@ function getBadgeIcon() {
 .tab-item .sessions {
   margin: 0 0 0 5px;
 }
-.tab-item ::v-deep span.badge-document {
-  border-radius: 6px;
-  background-color: #0043ff9e;
-  padding: 3px 7px;
-  font-size: 11px;
-  color: white;
-  font-weight: 600;
-}
 .tab-item .warning-message {
   color: grey;
 }

src/components/TabList.vue

@@ -20,6 +20,7 @@
         v-for="(tab, i) of tabs"
         :key="i"
         :item="getItem(tab)"
+        :listType="type"
         :summaryTimeForWholeDay="summaryTime"
       />
 

src/compositions/limit-list.ts

@@ -32,3 +32,12 @@ export async function isLimitExceeded(url: string, tab: Tab): Promise<LimitExcee
     LimitTime: null,
   };
 }
+
+export async function isDomainInLimits(url: string): Promise<boolean> {
+  const limitList = (await Settings.getInstance().getSetting(
+    StorageParams.RESTRICTION_LIST,
+  )) as Restriction[];
+  const array = Object.values(limitList);
+  const item = array?.find(x => isDomainEquals(x.domain, url));
+  return item != undefined;
+}

src/pages/Block.vue

@@ -10,11 +10,11 @@
     <table>
       <tr>
         <td class="title">Limit:</td>
-        <td>{{ limitTime }}</td>
+        <td class="value">{{ limitTime }}</td>
       </tr>
       <tr>
         <td class="title">Sessions:</td>
-        <td>{{ summaryCounter }}</td>
+        <td class="value">{{ summaryCounter }}</td>
       </tr>
     </table>
   </div>
@@ -60,13 +60,13 @@ body {
 
 .block-container span {
   font-weight: 600;
-  font-size: 17px;
+  font-size: 21px;
 }
 
 .header {
   font-weight: 600;
   color: #4a4a4a;
-  font-size: 18px !important;
+  font-size: 19px !important;
   vertical-align: super;
   margin-left: 10px;
 }
@@ -87,4 +87,7 @@ table .title {
   width: 100px;
   text-align: left;
 }
+table .value {
+  font-weight: 600;
+}
 </style>

src/utils/enums.ts

@@ -16,3 +16,8 @@ export enum SettingsTab {
   Notifications,
   About,
 }
+
+export enum TypeOfUrl {
+  WebSite,
+  Document,
+}