Support to disable 'More 5 minutes' (#46)

sheepzh · Nov 28, 2021 · d974225 · d974225
1 parent 178c236
commit d974225
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 27 deletions.
diff --git a/src/app/components/limit/add-dialog/index.ts b/src/app/components/limit/add-dialog/index.ts
@@ -26,7 +26,7 @@ const handleSave = async (ctx: { $emit: (arg0: string) => void }) => {
         ElMessage.warning(t(msg => msg.limit.message.noTime))
         return
     }
-    const toInsert: TimeLimit = { cond: url, time: timeLimit, enabled: true }
+    const toInsert: TimeLimit = { cond: url, time: timeLimit, enabled: true, allowDelay: true }
     await db.save(toInsert)
     dialogVisibleRef.value = false
     ElMessage.success(t(msg => msg.limit.message.saved))

diff --git a/src/app/components/limit/table/column/delay.ts b/src/app/components/limit/table/column/delay.ts
@@ -0,0 +1,37 @@
+import { InfoFilled } from "@element-plus/icons"
+import { ElIcon, ElSwitch, ElTableColumn, ElTooltip } from "element-plus"
+import { h } from "vue"
+import TimeLimitItem from "../../../../../entity/dto/time-limit-item"
+import limitService from "../../../../../service/limit-service"
+import { t } from "../../../../locale"
+
+const columnProps = {
+    prop: 'delayClosed',
+    label: t(msg => msg.limit.item.delayAllowed),
+    minWidth: 80,
+    align: 'center',
+}
+
+const handleChange = (row: TimeLimitItem, val: boolean) => {
+    row.allowDelay = val
+    limitService.updateDelay(row)
+}
+
+const headerAlert = () => h(ElTooltip, {
+    content: t(msg => msg.limit.item.delayAllowedInfo),
+    placement: 'top'
+}, {
+    default: () => h(ElIcon, { size: 14, style: { paddingLeft: '4px' } }, h(InfoFilled))
+})
+
+const slots = {
+    default: ({ row }: { row: TimeLimitItem }) => h(ElSwitch, {
+        modelValue: row.allowDelay,
+        onChange: (val: boolean) => handleChange(row, val)
+    }),
+    header: () => h('div', [t(msg => msg.limit.item.delayAllowed), headerAlert()])
+}
+
+const _default = () => h(ElTableColumn, columnProps, slots)
+
+export default _default
diff --git a/src/app/components/limit/table/column/index.ts b/src/app/components/limit/table/column/index.ts
@@ -2,9 +2,10 @@ import cond from "./cond"
 import waste from "./waste"
 import time from "./time"
 import enabled from "./enabled"
+import delay from './delay'
 import operations from "./operation"
 import { QueryData } from "../../../common/constants"
 
-const _default = (queryData: QueryData) => [cond(), time(), waste(), enabled(), operations(queryData)]
+const _default = (queryData: QueryData) => [cond(), time(), waste(), delay(), enabled(), operations(queryData)]
 
 export default _default
diff --git a/src/app/locale/components/limit.ts b/src/app/locale/components/limit.ts
@@ -7,6 +7,8 @@ export type LimitMessage = {
         condition: string
         time: string
         enabled: string
+        delayAllowed: string
+        delayAllowedInfo: string
         waste: string
         operation: string
     },
@@ -42,6 +44,8 @@ const _default: Messages<LimitMessage> = {
             time: '每日限制时长',
             waste: '今日浏览时长',
             enabled: '是否有效',
+            delayAllowed: '再看 5 分钟',
+            delayAllowedInfo: '上网时间超过限制时，点击【再看 5 分钟】短暂延时。如果关闭该功能则不能延时。',
             operation: '操作'
         },
         button: {
@@ -74,6 +78,8 @@ const _default: Messages<LimitMessage> = {
             time: 'Limited time per day',
             waste: 'Browsed today',
             enabled: 'Enabled',
+            delayAllowed: 'More 5 minutes',
+            delayAllowedInfo: 'Allow to delay 5 minutes temporarily if time over',
             operation: 'Operations'
         },
         button: {
@@ -106,6 +112,8 @@ const _default: Messages<LimitMessage> = {
             waste: '今日の時間を閲覧する',
             time: '1日あたりの制限',
             enabled: '有效',
+            delayAllowed: 'さらに5分間閲覧する',
+            delayAllowedInfo: '時間が経過した場合は、一時的に5分遅らせることができます',
             operation: '操作'
         },
         button: {

diff --git a/src/content-script/limit.ts b/src/content-script/limit.ts
@@ -43,19 +43,25 @@ function link2Setup(url: string): HTMLParagraphElement {
 }
 
 function moreMinutes(url: string, limitedRules: TimeLimitItem[]): HTMLParagraphElement {
-    const link = document.createElement('a')
-    Object.assign(link.style, linkStyle)
-    link.setAttribute('href', 'javascript:void(0)')
-    const text = t2Chrome(msg => msg.message.more5Minutes)
-    link.innerText = text
-    link.onclick = async () => {
-        await limitService.moreMinutes(url, limitedRules)
-        mask.remove()
-        document.body.style.overflow = ''
-    }
     const p = document.createElement('p')
     p.style.marginTop = '100px'
-    p.append(link)
+    const canDelayRules = limitedRules.filter(r => r.allowDelay)
+
+    if (canDelayRules && canDelayRules.length) {
+        // Only delay-allowed rules exist, can delay
+        // @since 0.4.0
+        const link = document.createElement('a')
+        Object.assign(link.style, linkStyle)
+        link.setAttribute('href', 'javascript:void(0)')
+        const text = t2Chrome(msg => msg.message.more5Minutes)
+        link.innerText = text
+        link.onclick = async () => {
+            await limitService.moreMinutes(url, canDelayRules)
+            mask.remove()
+            document.body.style.overflow = ''
+        }
+        p.append(link)
+    }
     return p
 }
 

diff --git a/src/database/limit-database.ts b/src/database/limit-database.ts
@@ -6,8 +6,8 @@ const KEY = REMAIN_WORD_PREFIX + 'LIMIT'
 
 type ItemValue = {
     /**
-        * Limited time, second
-        */
+     * Limited time, second
+     */
     t: number
     /**
      * Enabled flag
@@ -21,6 +21,11 @@ type ItemValue = {
      * Wasted time, milliseconds
      */
     w: number
+    /**
+     * Allow to delay
+     * @since 0.4.0
+     */
+    ad: boolean
 }
 
 type Item = {
@@ -32,8 +37,8 @@ function migrate(exist: Item, toMigrate: any) {
         // Not rewrite
         if (exist[cond]) return
         const itemValue: ItemValue = value as ItemValue
-        const { t, e, d, w } = itemValue
-        exist[cond] = { t: t || 0, e: !!e, d, w: w || 0 }
+        const { t, e, ad, d, w } = itemValue
+        exist[cond] = { t: t || 0, e: !!e, ad: !!ad, d, w: w || 0 }
     })
 }
 
@@ -57,7 +62,7 @@ class LimitDatabase extends BaseDatabase {
         const items = await this.getItems()
         return Object.entries(items).map(([cond, info]) => {
             const item: ItemValue = info as ItemValue
-            return { cond, time: item.t, enabled: item.e, wasteTime: item.w, latestDate: item.d } as TimeLimitInfo
+            return { cond, time: item.t, enabled: item.e, allowDelay: !!item.ad, wasteTime: item.w, latestDate: item.d } as TimeLimitInfo
         })
     }
 
@@ -67,7 +72,7 @@ class LimitDatabase extends BaseDatabase {
             // Not rewrite
             return
         }
-        items[data.cond] = { t: data.time, e: data.enabled, w: 0, d: '' }
+        items[data.cond] = { t: data.time, e: data.enabled, ad: data.allowDelay, w: 0, d: '' }
         this.update(items)
     }
 
@@ -88,6 +93,15 @@ class LimitDatabase extends BaseDatabase {
         this.update(items)
     }
 
+    async updateDelay(cond: string, allowDelay: boolean) {
+        const items = await this.getItems()
+        if (!items[cond]) {
+            return
+        }
+        items[cond].ad = allowDelay
+        await this.update(items)
+    }
+
     async importData(data: any): Promise<void> {
         const toImport = data[KEY]
         // Not import

diff --git a/src/entity/dao/time-limit.ts b/src/entity/dao/time-limit.ts
@@ -8,6 +8,10 @@ export type TimeLimit = {
      */
     time: number
     enabled: boolean
+    /**
+     * Allow to delay 5 minutes if time over
+     */
+    allowDelay: boolean
 }
 
 export type TimeLimitInfo = TimeLimit & {

diff --git a/src/entity/dto/time-limit-item.ts b/src/entity/dto/time-limit-item.ts
@@ -9,17 +9,19 @@ export default class TimeLimitItem {
      */
     time: number
     enabled: boolean
+    allowDelay: boolean
     /**
      * Waste today, milliseconds
      */
     waste?: number
 
-    static of(cond: string, time: number, enabled?: boolean, waste?: number) {
+    static of(cond: string, time: number, enabled?: boolean, waste?: number, allowDelay?: boolean) {
         const result = new TimeLimitItem()
         result.cond = cond
         result.regular = new RegExp(`^${cond.split('*').join('.*')}`)
         result.time = time
         result.enabled = enabled === undefined ? true : enabled
+        result.allowDelay = allowDelay === undefined ? true : allowDelay
         result.waste = waste || 0
         return result
     }

diff --git a/src/service/limit-service.ts b/src/service/limit-service.ts
@@ -19,16 +19,23 @@ async function select(cond?: QueryParam): Promise<TimeLimitItem[]> {
     const today = formatTime(new Date(), DATE_FORMAT)
     return (await db.all())
         .filter(item => filterDisabled ? item.enabled : true)
-        .map(({ cond, time, enabled, wasteTime, latestDate }) =>
-            TimeLimitItem.of(cond, time, enabled, latestDate === today ? wasteTime : 0)
+        .map(({ cond, time, enabled, wasteTime, latestDate, allowDelay }) =>
+            TimeLimitItem.of(cond, time, enabled, latestDate === today ? wasteTime : 0, allowDelay)
         )
         // If use url, then test it
         .filter(item => url ? item.matches(url) : true)
 }
 
-async function update({ cond, time, enabled }: TimeLimitItem): Promise<void> {
-    const limit: TimeLimit = { cond, time, enabled }
-    await db.save(limit, true)
+async function update({ cond, time, enabled, allowDelay }: TimeLimitItem, rewrite?: boolean): Promise<void> {
+    if (rewrite === undefined) {
+        rewrite = true
+    }
+    const limit: TimeLimit = { cond, time, enabled, allowDelay }
+    await db.save(limit, rewrite)
+}
+
+async function updateDelay(item: TimeLimitItem) {
+    await db.updateDelay(item.cond, item.allowDelay)
 }
 
 function remove(cond: string): Promise<void> {
@@ -77,6 +84,7 @@ class LimitService {
     moreMinutes = moreMinutes
     getLimited = getLimited
     update = update
+    updateDelay = updateDelay
     select = select
     remove = remove
     addFocusTime = (host: string, url: string, focusTime: number) => !this.whitelist.includes(host) && addFocusTime(url, focusTime)

diff --git a/test/database/limit-database.test.ts b/test/database/limit-database.test.ts
@@ -10,7 +10,8 @@ describe('archived-database', () => {
         const toAdd: TimeLimit = {
             cond: '123',
             time: 20,
-            enabled: true
+            enabled: true,
+            allowDelay: false
         }
         await db.save(toAdd)
         let all: TimeLimit[] = await db.all()
@@ -19,7 +20,8 @@ describe('archived-database', () => {
         const toRewrite = {
             cond: '123',
             time: 21,
-            enabled: true
+            enabled: true,
+            allowDelay: false
         }
         // Not rewrite
         await db.save(toRewrite)