Merge branch 'main' into mv2

CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to Time Tracker will be documented in this file.
 
 It is worth mentioning that the release time of each change refers to the time when the installation package is submitted to the webstore. It is about one week for Edge to moderate packages, while only 1-2 days for Chrome and Firefox.
 
+## [v2.0.0] - 2023-11-13
+
+- Support unallowed period for limit rules.
+- Support limitting the time of each visit.
+- Refactored the UI for configuring limit rules.
+
+## [v1.9.7] - 2023-10-17 [For Chrome]
+
+- Fix crash on Qihu-360X Browser.
+
+## [v1.9.6] - 2023-10-16
+
+- Supported syncing data from [History Trends Unlimited](https://chrome.google.com/webstore/detail/history-trends-unlimited/pnmchffiealhkdloeffcdnbgdnedheme). (#238)
+
 ## [v1.9.5] - 2023-09-05
 
 - Fixed an issue where the restriction did not take effect in full screen mode (#234).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timer",
-  "version": "1.9.6",
+  "version": "2.0.0",
   "description": "Web timer",
   "homepage": "https://github.com/sheepzh/timer",
   "scripts": {

src/api/chrome/i18n.ts

@@ -1,10 +1,10 @@
+// Bug of chrome:
+// chrome.i18n.getUILanguage may not work in background
 export function getUILanguage(): string {
-    return chrome.i18n.getUILanguage()
+    return chrome?.i18n?.getUILanguage?.()
 }
 
-// Bug of chrome： 
+// Bug of chrome：
 // chrome.i18n.getMessage may not work in background
 // @see https://stackoverflow.com/questions/6089707/calling-chrome-i18n-getmessage-from-a-content-script
-export function getMessage(messageName: string): string {
-    return chrome.i18n.getMessage(messageName)
-}
+export const getMessage: (key: string) => string = chrome?.i18n?.getMessage

src/api/chrome/tab.ts

@@ -61,11 +61,10 @@ export function sendMsg2Tab<T = any, R = any>(tabId: number, code: timer.mq.ReqC
     const request: timer.mq.Request<T> = { code, data }
     return new Promise((resolve, reject) => {
         chrome.tabs.sendMessage<timer.mq.Request<T>, timer.mq.Response>(tabId, request, response => {
-            handleError('sendMsgTab')
+            handleError('sendMsg2Tab')
             const resCode = response?.code
-            resCode === 'success'
-                ? resolve(response.data)
-                : reject(new Error(response?.msg))
+            resCode === 'success' && resolve(response.data)
+            resCode === "fail" && reject(new Error(response?.msg))
         })
     })
 }

src/app/components/analysis/components/filter.ts

@@ -87,7 +87,6 @@ function renderHostLabel({ host, merged, virtual, alias }: timer.site.SiteInfo):
 }
 
 const _default = defineComponent({
-    name: "TrendFilter",
     props: {
         site: Object as PropType<timer.site.SiteKey>,
         timeFormat: String as PropType<timer.app.TimeFormat>

src/app/components/analysis/components/trend/index.ts

@@ -195,7 +195,7 @@ const _default = defineComponent({
         const indicators: Ref<IndicatorSet> = ref()
         const lastIndicators: Ref<IndicatorSet> = ref()
         const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
-        const rangeLength: ComputedRef = computed(() => getDayLenth(dateRange.value?.[0], dateRange.value?.[1]))
+        const rangeLength: ComputedRef<number> = computed(() => getDayLenth(dateRange.value?.[0], dateRange.value?.[1]))
 
         const compute = () => handleDataChange(
             { dateRange: dateRange.value, rows: props.rows },

src/app/components/analysis/index.ts

@@ -53,7 +53,6 @@ const _default = defineComponent(() => {
     const site: Ref<timer.site.SiteKey> = ref(siteFromQuery)
     const timeFormat: Ref<timer.app.TimeFormat> = ref('default')
     const rows: Ref<timer.stat.Row[]> = ref()
-    const filter: Ref = ref()
 
     const queryInner = async () => {
         const siteKey = site.value
@@ -67,7 +66,6 @@ const _default = defineComponent(() => {
         filter: () => h(Filter, {
             site: site.value,
             timeFormat: timeFormat.value,
-            ref: filter,
             onSiteChange: (newSite: timer.site.SiteKey) => site.value = newSite,
             onTimeFormatChange: (newFormat: timer.app.TimeFormat) => timeFormat.value = newFormat
         }),

src/app/components/common/content-container.ts

@@ -9,17 +9,19 @@ import { ElCard, ElScrollbar } from "element-plus"
 import ContentCard from "./content-card"
 import { defineComponent, h, useSlots } from "vue"
 
-const _default = defineComponent(() => {
-    const slots = useSlots()
-    const children = []
-    const { default: default_, filter, content } = slots
-    filter && children.push(h(ElCard, { class: "filter-container" }, () => h(filter)))
-    if (default_) {
-        children.push(h(slots.default))
-    } else {
-        content && children.push(h(ContentCard, () => h(content)))
+const _default = defineComponent({
+    setup() {
+        const slots = useSlots()
+        const children = []
+        const { default: default_, filter, content } = slots
+        filter && children.push(h(ElCard, { class: "filter-container" }, () => h(filter)))
+        if (default_) {
+            children.push(h(slots.default))
+        } else {
+            content && children.push(h(ContentCard, () => h(content)))
+        }
+        return () => h(ElScrollbar, () => h("div", { class: "content-container" }, children))
     }
-    return () => h(ElScrollbar, () => h("div", { class: "content-container" }, children))
 })
 
 export default _default

src/app/components/dashboard/components/calendar-heat-map.ts

@@ -258,7 +258,7 @@ const _default = defineComponent({
         const now = new Date()
         const startTime: Date = getWeeksAgo(now, isChinese, WEEK_NUM)
 
-        const chart: Ref = ref()
+        const chart: Ref<HTMLDivElement> = ref()
         const chartWrapper: ChartWrapper = new ChartWrapper(startTime, now)
 
         onMounted(async () => {

src/app/components/dashboard/components/top-k-visit.ts

@@ -97,12 +97,11 @@ class ChartWrapper {
 }
 
 const _default = defineComponent({
-    name: "TopKVisit",
     setup() {
         const now = new Date()
         const startTime: Date = new Date(now.getTime() - MILL_PER_DAY * DAY_NUM)
 
-        const chart: Ref = ref()
+        const chart: Ref<HTMLDivElement> = ref()
         const chartWrapper: ChartWrapper = new ChartWrapper()
 
         onMounted(async () => {

src/app/components/data-manage/clear/filter/index.ts

@@ -13,6 +13,10 @@ import DateFilter from "./date-filter"
 import NumberFilter from "./number-filter"
 import DeleteButton from "./delete-button"
 
+export type FilterInstance = {
+    getFilterOption(): DataManageClearFilterOption
+}
+
 const _default = defineComponent({
     emits: {
         delete: () => true
@@ -23,17 +27,18 @@ const _default = defineComponent({
         const focusEndRef: Ref<string> = ref('2')
         const timeStartRef: Ref<string> = ref('0')
         const timeEndRef: Ref<string> = ref('')
-        const computeFilterOption = () => ({
-            dateRange: dateRangeRef.value,
-            focusStart: focusStartRef.value,
-            focusEnd: focusEndRef.value,
-            timeStart: timeStartRef.value,
-            timeEnd: timeEndRef.value,
-        } as DataManageClearFilterOption)
 
-        ctx.expose({
-            getFilterOption: computeFilterOption
-        })
+        const instance: FilterInstance = {
+            getFilterOption: () => ({
+                dateRange: dateRangeRef.value,
+                focusStart: focusStartRef.value,
+                focusEnd: focusEndRef.value,
+                timeStart: timeStartRef.value,
+                timeEnd: timeEndRef.value,
+            } as DataManageClearFilterOption)
+        }
+
+        ctx.expose(instance)
 
         return () => h('div', { class: 'clear-panel' }, [
             h('h3', t(msg => msg.dataManage.filterItems)),

src/app/components/data-manage/clear/index.ts

@@ -9,7 +9,7 @@ import { ElAlert, ElCard, ElMessage, ElMessageBox } from "element-plus"
 import { defineComponent, h, Ref, ref, SetupContext } from "vue"
 import { t } from "@app/locale"
 import { alertProps } from "../common"
-import Filter from "./filter"
+import Filter, { FilterInstance } from "./filter"
 import StatDatabase, { StatCondition } from "@db/stat-database"
 import { MILL_PER_DAY } from "@util/time"
 
@@ -109,7 +109,7 @@ const _default = defineComponent({
         dataDelete: () => true
     },
     setup(_, ctx) {
-        const filterRef: Ref = ref()
+        const filter: Ref<FilterInstance> = ref()
         return () => h(ElCard, {
             class: 'clear-container'
         }, () => [
@@ -118,8 +118,8 @@ const _default = defineComponent({
                 title: t(msg => msg.dataManage.operationAlert)
             }),
             h(Filter, {
-                ref: filterRef,
-                onDelete: () => handleClick(filterRef, ctx),
+                ref: filter,
+                onDelete: () => handleClick(filter, ctx),
             }),
         ])
     }

src/app/components/data-manage/index.ts

@@ -9,13 +9,15 @@ import { ElRow, ElCol } from "element-plus"
 import { defineComponent, h, Ref, ref } from "vue"
 import ContentContainer from "../common/content-container"
 import Migration from "./migration"
-import MemeryInfo from "./memory-info"
+import MemeryInfo, { MemeryInfoInstance } from "./memory-info"
 import ClearPanel from "./clear"
 import './style'
 
 export default defineComponent(() => {
-    const memeryInfoRef: Ref = ref()
-    const queryData = () => memeryInfoRef?.value?.queryData()
+    const memeryInfoRef: Ref<MemeryInfoInstance> = ref()
+
+    const queryData = () => memeryInfoRef.value?.queryData()
+
     return () => h(ContentContainer, {
         class: 'data-manage-container'
     }, () => h(ElRow, { gutter: 20 },

src/app/components/data-manage/memory-info.ts

@@ -11,6 +11,10 @@ import { t } from "@app/locale"
 import { alertProps } from "./common"
 import { getUsedStorage } from "@db/memory-detector"
 
+export type MemeryInfoInstance = {
+    queryData(): void
+}
+
 const memoryAlert = (totalMb: number) => {
     const title = totalMb
         ? t(msg => msg.dataManage.totalMemoryAlert, { size: totalMb })
@@ -19,6 +23,7 @@ const memoryAlert = (totalMb: number) => {
     !totalMb && (props.type = 'warning')
     return h(ElAlert, props)
 }
+
 const progressStyle: Partial<CSSStyleDeclaration> = {
     height: '260px',
     paddingTop: '50px'
@@ -53,7 +58,6 @@ function computeColor(percentage: number, total: number): string {
 }
 
 const _default = defineComponent({
-    name: "MemoryInfo",
     setup(_, ctx) {
         // Total memory with byte
         const usedRef: Ref<number> = ref(0)
@@ -64,8 +68,11 @@ const _default = defineComponent({
             usedRef.value = used || 0
             totalRef.value = total
         }
+
+        const instance: MemeryInfoInstance = { queryData }
+        ctx.expose(instance)
+
         queryData()
-        ctx.expose({ queryData })
 
         const usedMbRef: ComputedRef<number> = computed(() => byte2Mb(usedRef.value))
         const totalMbRef: ComputedRef<number> = computed(() => byte2Mb(totalRef.value))

src/app/components/data-manage/migration/import-button.ts

@@ -37,20 +37,20 @@ const _default = defineComponent({
         import: () => true
     },
     setup(_, ctx) {
-        const fileInputRef = ref<HTMLInputElement>()
+        const fileInput = ref<HTMLInputElement>()
         return () => h(ElButton, {
             size: 'large',
             type: 'primary',
             icon: Upload,
-            onClick: () => fileInputRef.value.click()
+            onClick: () => fileInput.value.click()
         }, () => [
             t(msg => msg.item.operation.importWholeData),
             h('input', {
-                ref: fileInputRef,
+                ref: fileInput,
                 type: 'file',
                 accept: '.json',
                 style: { display: 'none' },
-                onChange: () => handleFileSelected(fileInputRef, () => ctx.emit('import'))
+                onChange: () => handleFileSelected(fileInput, () => ctx.emit('import'))
             })
         ])
     }

src/app/components/data-manage/migration/import-other-button/style.sass

@@ -1,16 +1,4 @@
 
-.sop-dialog-container
-    margin-right: 16px
-.step-container
-    width: 400px
-    margin: auto
-    .el-step__head
-        .el-step__line
-            margin-right: -50% !important
-            left: 50% !important
-    .el-step__title
-        text-align: center
-
 .operation-container
     margin: 40px 20px 0 20px
 
@@ -46,14 +34,3 @@
     margin-top: 20px
     text-align: center
     line-height: 32px
-
-.sop-footer
-    display: block
-    width: 100%
-    margin: auto
-    margin-top: 40px
-    .el-button
-        width: initial !important
-        height: initial !important
-    .el-button:not(:last-child)
-        margin-right: 10px

src/app/components/habit/component/chart/index.ts

@@ -10,15 +10,20 @@ import type { Ref } from "vue"
 import ChartWrapper from "./wrapper"
 import { defineComponent, h, onMounted, ref } from "vue"
 
+export type HabitChartInstance = {
+    render(data: timer.period.Row[], averageByDate: boolean, periodSize: number): void
+}
+
 const _default = defineComponent({
     name: "HabitChart",
     setup(_, ctx) {
         const elRef: Ref<HTMLDivElement> = ref()
         const wrapper: ChartWrapper = new ChartWrapper()
         onMounted(() => wrapper.init(elRef.value))
-        ctx.expose({
-            render: (data: timer.period.Row[], averageByDate: boolean, periodSize: number) => wrapper.render(data, averageByDate, periodSize)
-        })
+        const instance: HabitChartInstance = {
+            render: (data, averageByDate, periodSize) => wrapper.render(data, averageByDate, periodSize)
+        }
+        ctx.expose(instance)
         return () => h('div', {
             class: 'chart-container',
             ref: elRef

src/app/components/habit/index.ts

@@ -11,7 +11,7 @@ import { defineComponent, h, ref, onMounted } from "vue"
 import periodService from "@service/period-service"
 import { daysAgo, isSameDay } from "@util/time"
 import ContentContainer from "@app/components/common/content-container"
-import HabitChart from "./component/chart"
+import HabitChart, { HabitChartInstance } from "./component/chart"
 import HabitFilter from "./component/filter"
 import { keyOf, MAX_PERIOD_ORDER, keyBefore } from "@util/period"
 
@@ -49,9 +49,8 @@ function computeParam(periodSize: Ref<number>, dateRange: Ref<Date[]>, averageBy
 }
 
 const _default = defineComponent({
-    name: "Habit",
     setup() {
-        const chart: Ref = ref()
+        const chart: Ref<HabitChartInstance> = ref()
         const periodSize: Ref<number> = ref(1)
         //@ts-ignore ts(2322)
         const dateRange: Ref<Date[]> = ref(daysAgo(1, 0))
@@ -60,7 +59,7 @@ const _default = defineComponent({
         async function queryAndRender() {
             const queryParam = computeParam(periodSize, dateRange, averageByDate)
             const result = await periodService.list(queryParam)
-            chart?.value.render?.(result, averageByDate.value, periodSize.value)
+            chart.value.render?.(result, averageByDate.value, periodSize.value)
         }
 
         onMounted(queryAndRender)