Defering limits

Author: Stigmatoz

src/components/Limits.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="setting-header mt-0">Daily restrictions on access to websites:</p>
+    <p class="setting-header mt-0">Daily restrictions on access to websites</p>
     <p class="description">
       Set the maximum time allowed to visit the site per day. After this time, the site will be
       blocked.

src/compositions/block-page.ts

@@ -3,11 +3,11 @@ import { buildBlockQuery } from '../utils/block-page';
 
 export async function useBlockPage(
   url: string,
-  summaryTime: number,
+  liimitTime: number,
   summaryCounter: number,
 ): Promise<void> {
   const blockUrl =
-    Browser.runtime.getURL('src/block.html') + buildBlockQuery(url, summaryTime, summaryCounter);
+    Browser.runtime.getURL('src/block.html') + buildBlockQuery(url, liimitTime, summaryCounter);
   const tab = await Browser.tabs.query({ currentWindow: true, active: true });
   Browser.tabs.update(tab[0].id, { url: blockUrl });
 }

src/compositions/deferList.ts

@@ -0,0 +1,62 @@
+import { differenceInCalendarDays } from 'date-fns';
+import { StorageParams } from '../storage/storage-params';
+import { isDomainEquals } from '../utils/common';
+import { Settings } from './settings';
+import { Deffering } from '../entity/deffering';
+import { injecStorage } from '../storage/inject-storage';
+import { MINUTE } from '../utils/time';
+import { log } from './logger';
+
+export async function isInDeferList(url: string): Promise<boolean> {
+  const deferList = (await Settings.getInstance().getSetting(
+    StorageParams.BLOCK_DEFERRAL_TIME,
+  )) as Deffering[];
+  const array = Object.values(deferList);
+  const item = array?.find(x => isDomainEquals(x.domain, url));
+  if (item != undefined)
+    log(
+      `Deferring time ${url} ${new Date(item.time)} diff ${differenceInCalendarDays(
+        new Date(item.time),
+        new Date(),
+      )}`,
+    );
+  return (
+    item != undefined &&
+    item.time > Date.now() &&
+    differenceInCalendarDays(new Date(item.time), new Date()) == 0
+  );
+}
+
+export async function canDefering(url: string): Promise<boolean> {
+  const deferList = (await Settings.getInstance().getSetting(
+    StorageParams.BLOCK_DEFERRAL_TIME,
+  )) as Deffering[];
+  const array = Object.values(deferList);
+  const item = array?.find(x => isDomainEquals(x.domain, url));
+  if (item != undefined)
+    log(
+      `Deferring time ${url} ${new Date(item.time)} diff ${differenceInCalendarDays(
+        new Date(item.time),
+        new Date(),
+      )}`,
+    );
+  return !(
+    item != undefined &&
+    ((item.time < Date.now() && differenceInCalendarDays(new Date(item.time), new Date()) == 0) ||
+      item.time > Date.now())
+  );
+}
+
+export async function defering(url: string, timeInMinutes: number): Promise<void> {
+  const settingsStorage = injecStorage();
+
+  const deferList = (await Settings.getInstance().getSetting(
+    StorageParams.BLOCK_DEFERRAL_TIME,
+  )) as Deffering[];
+  const array = Object.values(deferList);
+  const item = array?.find(x => isDomainEquals(x.domain, url));
+  if (item != undefined) item.time = Date.now() + timeInMinutes * MINUTE;
+  else array.push(new Deffering(url, 5));
+
+  await settingsStorage.saveValue(StorageParams.BLOCK_DEFERRAL_TIME, array);
+}

src/compositions/limit-list.ts

@@ -3,6 +3,8 @@ import { Tab } from '../entity/tab';
 import { StorageParams } from '../storage/storage-params';
 import { isDomainEquals } from '../utils/common';
 import { todayLocalDate } from '../utils/date';
+import { isInDeferList } from './deferList';
+import { log } from './logger';
 import { Settings } from './settings';
 
 export type LimitExceed = {
@@ -19,11 +21,20 @@ export async function isLimitExceeded(url: string, tab: Tab): Promise<LimitExcee
   if (item != undefined) {
     const date = tab.days.find(x => x.date == todayLocalDate());
     if (date != undefined) {
-      if (date.summary >= item.time)
+      if (date.summary >= item.time) {
+        log(`Limit Exceeded: website ${url} limit ${item.time} summary time ${date.summary}`);
+        if (await isInDeferList(url)) {
+          return {
+            IsLimitExceeded: false,
+            LimitTime: null,
+          };
+        }
+
         return {
           IsLimitExceeded: true,
           LimitTime: item.time,
         };
+      }
     }
   }
 

src/entity/deffering.ts

@@ -0,0 +1,11 @@
+import { MINUTE } from '../utils/time';
+
+export class Deffering {
+  domain: string;
+  time: number;
+
+  constructor(domain: string, minutes: number) {
+    this.domain = domain;
+    this.time = Date.now() + minutes * MINUTE;
+  }
+}

src/pages/Block.vue

@@ -10,30 +10,65 @@
     <table>
       <tr>
         <td class="title">Limit:</td>
-        <td class="value">{{ limitTime }}</td>
+        <td class="value">{{ limitTimeString }}</td>
       </tr>
       <tr>
         <td class="title">Sessions:</td>
         <td class="value">{{ summaryCounter }}</td>
       </tr>
     </table>
+    <input
+      v-if="allowDeferringBlock && haveToShowDeffering"
+      type="button"
+      class="mt-20"
+      value="+5 minutes"
+      @click="deferring()"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { getValueFromQuery } from '../utils/block-page';
+import { injecStorage } from '../storage/inject-storage';
+import { BLOCK_DEFERRAL_DEFAULT, StorageParams } from '../storage/storage-params';
+import { convertLimitTimeToString } from '../utils/converter';
+import { defering, canDefering } from '../compositions/deferList';
+
+const settingsStorage = injecStorage();
 
 const webSite = ref<string>();
-const limitTime = ref<string>();
+const limitTime = ref<number>();
+const limitTimeString = ref<string>();
 const summaryCounter = ref<number>();
+const allowDeferringBlock = ref<boolean>();
+const haveToShowDeffering = ref<boolean>();
 
-onMounted(() => {
+onMounted(async () => {
   const queryObj = getValueFromQuery(location.href);
   webSite.value = queryObj.domain ?? '';
   limitTime.value = queryObj.limitTime;
+  limitTimeString.value = convertLimitTimeToString(queryObj.limitTime);
   summaryCounter.value = queryObj.summaryCounter ?? 0;
+
+  allowDeferringBlock.value = await settingsStorage.getValue(
+    StorageParams.BLOCK_DEFERRAL,
+    BLOCK_DEFERRAL_DEFAULT,
+  );
+  haveToShowDeffering.value = await canDefering(webSite.value);
 });
+
+async function deferring() {
+  if (
+    webSite.value != undefined &&
+    limitTime.value != undefined &&
+    allowDeferringBlock.value &&
+    haveToShowDeffering.value
+  ) {
+    await defering(webSite.value, 5);
+    //window.open(document.referrer);
+  }
+}
 </script>
 
 <style scoped>

src/storage/storage-params.ts

@@ -1,5 +1,6 @@
 import { Tab } from '../entity/tab';
 import { TimeInterval } from '../entity/time-interval';
+import { HOUR } from '../utils/time';
 
 export enum StorageParams {
   BLACK_LIST = 'black_list',
@@ -10,7 +11,8 @@ export enum StorageParams {
   DARK_MODE = 'night_mode',
   VIEW_TIME_IN_BADGE = 'view_time_in_badge',
   BLOCK_DEFERRAL = 'view_block_deferral',
-  DAILY_SUMMARY_NOTIFICATION_TIME = 'dailySummaryNotificationTime',
+  BLOCK_DEFERRAL_TIME = 'view_block_deferral_time',
+  DAILY_SUMMARY_NOTIFICATION_TIME = 'daily-summary-notification-time',
 }
 
 export enum StorageDeserializeParam {
@@ -50,7 +52,7 @@ export const VIEW_TIME_IN_BADGE_DEFAULT = true;
 export const BLOCK_DEFERRAL_DEFAULT = true;
 export const SHOW_HINT_DEFAULT = true;
 // default time is 20:00, time in miliseconds
-export const DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT = 20 * 60 * 60 * 1000;
+export const DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT = 20 * HOUR;
 
 export function getDefaultValue(param: StorageParams) {
   switch (param) {
@@ -70,6 +72,8 @@ export function getDefaultValue(param: StorageParams) {
       return VIEW_TIME_IN_BADGE_DEFAULT;
     case StorageParams.BLOCK_DEFERRAL:
       return BLOCK_DEFERRAL_DEFAULT;
+    case StorageParams.BLOCK_DEFERRAL_TIME:
+      return [];
     case StorageParams.DAILY_SUMMARY_NOTIFICATION_TIME:
       return DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT;
   }

src/utils/block-page.ts

@@ -1,5 +1,3 @@
-import { convertLimitTimeToString } from './converter';
-
 export enum BlockParams {
   Domain = 'url',
   LimitTime = 'summaryTime',
@@ -18,7 +16,7 @@ export function getValueFromQuery(url: string) {
 
   return {
     domain: domain,
-    limitTime: convertLimitTimeToString(limitTime),
+    limitTime: limitTime,
     summaryCounter: summaryCounter,
   };
 }

src/utils/time.ts

@@ -7,6 +7,9 @@ export type Time = {
 
 //Every day - 60 minutes * 24 hours
 export const DAY_MINUTES = 1440;
+export const SECOND = 1000;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
 
 export function getNextTimeOfDay(timeOfDay: number): number {
   const todaysTime = getToday() + timeOfDay;