FEAT:Time Limit (#15)

Author: sheepzh

package.json

@@ -40,9 +40,10 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "clipboardy": "^2.3.0",
     "echarts": "^5.1.2",
     "element-plus": "^1.0.2-beta.48",
     "vue": "^3.0.11",
     "vue-router": "^4.0.8"
   }
-}
+}

src/app/components/clear/index.ts

@@ -4,6 +4,7 @@ import { computed, defineComponent, h, ref, Ref } from "vue"
 import { getUsedStorage } from "../../../database/memory-detector"
 import './style'
 import { t } from "../../locale"
+import { renderContentContainer } from "../common/content-container"
 
 const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000
 
@@ -65,4 +66,4 @@ const firstRow = () => h(ElRow, { gutter: 20 },
     ]
 )
 
-export default defineComponent(() => () => h('div', { class: 'content-container' }, firstRow()))
+export default defineComponent(() => renderContentContainer(firstRow))

src/app/components/report/contants.ts src/app/components/common/constants.tssrc/app/components/report/contants.ts renamed to src/app/components/common/constants.ts

@@ -0,0 +1,8 @@
+import { h, VNode } from "vue"
+
+/**
+ * @returns the render function of content container 
+ */
+export function renderContentContainer(childNodes: () => VNode[] | VNode): () => VNode {
+    return () => h('div', { class: 'content-container' }, childNodes())
+}

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

@@ -0,0 +1,67 @@
+import { ElButton, ElInput, ElSwitch } from "element-plus"
+import { h, Ref, VNode } from "vue"
+import { I18nKey, t } from "../../locale"
+import { QueryData } from "./constants"
+
+/**
+ * @returns the render function of filtr containers
+ */
+export function renderFilterContainer<Props>(childNodes: (props: Props) => VNode[]): (props: Props) => VNode {
+    //  The container render function
+    return (props: Props) => h(
+        'div',
+        { class: 'filter-container' },
+        childNodes(props)
+    )
+}
+
+type _I18nKey = I18nKey | string
+
+const processI18nKey = (key: _I18nKey) => typeof key !== 'string' ? t(key) : key
+
+/** 
+ * @returns filter item input VNode 
+ */
+export const inputFilterItem = (modelValue: Ref<string>, placeholder: _I18nKey, queryData?: QueryData) => h(ElInput,
+    {
+        class: 'filter-item',
+        modelValue: modelValue.value,
+        placeholder: processI18nKey(placeholder),
+        clearable: true,
+        onClear: () => modelValue.value = '',
+        onInput: (val: string) => modelValue.value = val.trim(),
+        onKeyup: (event: KeyboardEvent) => event.key === 'Enter' && queryData && queryData()
+    }
+)
+
+const switchLabel = (label: string) => h('a', { class: 'filter-name' }, label)
+
+const elSwitch = (modelValue: Ref<boolean>, queryData?: QueryData) => h(ElSwitch,
+    {
+        class: 'filter-item',
+        modelValue: modelValue.value,
+        onChange: (val: boolean) => {
+            modelValue.value = val
+            queryData && queryData()
+        }
+    }
+)
+
+export const switchFilterItem = (modelValue: Ref<boolean>, labelName: _I18nKey, queryData?: QueryData) => [
+    switchLabel(processI18nKey(labelName)),
+    elSwitch(modelValue, queryData)
+]
+
+export type FilterButtonProps = {
+    onClick: () => void
+    type?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
+    label: _I18nKey
+    icon?: string
+}
+
+export const buttonFilterItem = ({ onClick, type, label, icon }: FilterButtonProps) => h(ElButton, {
+    class: 'filter-item',
+    type,
+    icon: `el-icon-${icon}`,
+    onClick
+}, () => processI18nKey(label))

src/app/components/common/filter.ts

@@ -13,7 +13,7 @@ const formatTimeOfEchart = (params: EChartOption.Tooltip.Format | EChartOption.T
     return `${formatPeriodCommon(value[1] * 1000)}<br/>${start}-${end}`
 }
 
-const title = t(msg => msg.period.chart.title)
+const title = t(msg => msg.habit.chart.title)
 const baseOptions: EChartOption<EChartOption.SeriesBar> = {
     title: {
         text: title,
@@ -25,7 +25,7 @@ const baseOptions: EChartOption<EChartOption.SeriesBar> = {
         feature: {
             saveAsImage: {
                 show: true,
-                title: t(msg => msg.period.chart.saveAsImageTitle),
+                title: t(msg => msg.habit.chart.saveAsImageTitle),
                 name: title, // file name
                 excludeComponents: ['toolbox'],
                 pixelRatio: 1
@@ -40,7 +40,7 @@ const baseOptions: EChartOption<EChartOption.SeriesBar> = {
         }
     },
     yAxis: {
-        name: t(msg => msg.period.chart.yAxisName),
+        name: t(msg => msg.habit.chart.yAxisName),
         type: 'value'
     },
     series: [{

src/app/components/habit/chart/option.ts

@@ -2,11 +2,12 @@ import { ElDatePicker, ElOption, ElSelect, ElSwitch } from "element-plus"
 import { ref, Ref, h } from "vue"
 import { daysAgo } from "../../../util/time"
 import { t } from "../../locale"
-import { PeriodMessage } from "../../locale/components/period"
+import { HabitMessage } from "../../locale/components/habit"
+import { renderFilterContainer, switchFilterItem } from "../common/filter"
 
-const datePickerShortcut = (msg: keyof PeriodMessage['dateRange'], agoOfStart: number) => {
+const datePickerShortcut = (msg: keyof HabitMessage['dateRange'], agoOfStart: number) => {
     return {
-        text: t(messages => messages.period.dateRange[msg]),
+        text: t(messages => messages.habit.dateRange[msg]),
         value: daysAgo(agoOfStart, 0)
     }
 }
@@ -21,7 +22,7 @@ export type FilterProps = _Props
 
 const trenderSearchingRef: Ref<boolean> = ref(false)
 
-const options: { [size: string]: keyof PeriodMessage['sizes'] } = {
+const options: { [size: string]: keyof HabitMessage['sizes'] } = {
     1: 'fifteen',
     2: 'halfHour',
     4: 'hour',
@@ -30,7 +31,7 @@ const options: { [size: string]: keyof PeriodMessage['sizes'] } = {
 
 // Period size select
 const selectOptions = () => Object.entries(options)
-    .map(([size, msg]) => h(ElOption, { label: t(root => root.period.sizes[msg]), value: size }))
+    .map(([size, msg]) => h(ElOption, { label: t(root => root.habit.sizes[msg]), value: size }))
 const periodSizeSelect = (periodSizeRef: Ref<string>) => h(ElSelect,
     {
         placeholder: t(msg => msg.trender.hostPlaceholder),
@@ -41,7 +42,7 @@ const periodSizeSelect = (periodSizeRef: Ref<string>) => h(ElSelect,
         onChange: (val: string) => periodSizeRef.value = val,
     }, selectOptions)
 
-type ShortCutProp = [label: keyof PeriodMessage['dateRange'], dayAgo: number]
+type ShortCutProp = [label: keyof HabitMessage['dateRange'], dayAgo: number]
 const shortcutProps: ShortCutProp[] = [
     ['latestDay', 1],
     ['latest3Days', 3],
@@ -69,29 +70,17 @@ const picker = (dateRangeRef: Ref<Date[]>) => h(ElDatePicker, {
 })
 const datePickerItem = (dateRangeRef: Ref<Date[]>) => h('span', { class: 'filter-item' }, picker(dateRangeRef))
 
-const averageName = () => h('a', { class: 'filter-name' }, t(msg => msg.period.average.label))
-const averageSwitch = (averageRef: Ref<boolean>) => h(ElSwitch,
-    {
-        class: 'filter-item',
-        modelValue: averageRef.value,
-        onChange: (val: boolean) => averageRef.value = val
-    }
-)
-
-const filterContainer = ({
+const childNodes = ({
     dateRangeRef,
     periodSizeRef,
     averageRef
-}: _Props) => h('div',
-    { class: 'filter-container' },
-    [
+}: _Props) => [
         // Size select
         periodSizeSelect(periodSizeRef),
         // Date range picker
         datePickerItem(dateRangeRef),
         // Average by date
-        averageName(), averageSwitch(averageRef)
+        ...switchFilterItem(averageRef, msg => msg.habit.average.label)
     ]
-)
 
-export default filterContainer
+export default renderFilterContainer(childNodes)

src/app/components/habit/filter.ts

@@ -3,6 +3,7 @@ import { computed, ComputedRef, defineComponent, h, onMounted, ref, Ref, watch }
 import { MAX_PERIOD_ORDER, PeriodKey } from "../../../entity/dto/period-info"
 import periodService, { PeriodQueryParam } from "../../../service/period-service"
 import { daysAgo, isSameDay } from "../../../util/time"
+import { renderContentContainer } from "../common/content-container"
 import chart, { ChartProps } from "./chart"
 import generateOptions from "./chart/option"
 import filter from './filter'
@@ -25,8 +26,15 @@ const queryParamRef: ComputedRef<PeriodQueryParam> = computed(() => {
     const now = new Date()
     const endIsToday = isSameDay(now, endDate)
 
-    let periodEnd = endIsToday ? PeriodKey.of(now).before(1) : PeriodKey.of(endDate, MAX_PERIOD_ORDER)
-    let periodStart = endIsToday ? PeriodKey.of(startDate, periodEnd.order).after(1) : PeriodKey.of(startDate, 0)
+    let periodEnd: PeriodKey, periodStart: PeriodKey
+    if (endIsToday) {
+        periodEnd = PeriodKey.of(now)
+        periodStart = PeriodKey.of(startDate, periodEnd.order)
+        periodEnd = periodEnd.before(1)
+    } else {
+        periodEnd = PeriodKey.of(endDate, MAX_PERIOD_ORDER)
+        periodStart = PeriodKey.of(startDate, 0)
+    }
 
     const remainder = (periodEnd.order + 1) % periodSizeNumberRef.value
     if (remainder) {
@@ -51,14 +59,15 @@ const queryAndRenderChart = () => periodService.list(queryParamRef.value)
 
 watch([dateRangeRef, averageRef, periodSizeRef], () => queryAndRenderChart())
 
+const handleMounted = () => {
+    bar = init(chartRef.value)
+    queryAndRenderChart()
+}
 
 const _default = defineComponent(() => {
-    onMounted(() => {
-        bar = init(chartRef.value)
-        queryAndRenderChart()
-    })
-
-    return () => h('div', { class: 'content-container' }, [filter(filterProps), chart(chartProps)])
+    // Must use closure, not functaion variable
+    onMounted(() => handleMounted())
+    return renderContentContainer(() => [filter(filterProps), chart(chartProps)])
 })
 
 export default _default

src/app/components/habit/index.ts

@@ -0,0 +1,21 @@
+import { ElButton } from "element-plus"
+import { defineComponent, h, SetupContext } from "vue"
+import { t } from "../../../locale"
+
+const saveButton = (onClick: () => void) => h(ElButton,
+    {
+        onClick,
+        type: 'primary',
+        icon: 'el-icon-check'
+    },
+    () => t(msg => msg.limit.button.save)
+)
+
+const _default = defineComponent((_props, context: SetupContext) => {
+    const onSave: () => void = (context.attrs.onSave || (() => { })) as () => void
+    return () => h('span', {}, [
+        saveButton(onSave)
+    ])
+})
+
+export default _default

src/app/components/limit/add-dialog/footer.ts

@@ -0,0 +1,70 @@
+import { ElForm } from "element-plus"
+import { computed, ComputedRef, defineComponent, h, ref, Ref, useContext } from "vue"
+import '../style/el-input'
+import pathEdit from "./path-edit"
+import timeFormItem from "./time-limit"
+import urlFormItem, { FormUrlProps, Protocol } from './url'
+import UrlPathItem from "./url-path-item"
+
+// Limitted time
+const hourRef: Ref<number> = ref()
+const minuteRef: Ref<number> = ref()
+const secondRef: Ref<number> = ref()
+
+// Limitted url
+const protocolRef: Ref<string> = ref()
+const pathItemsRef: Ref<UrlPathItem[]> = ref([])
+const urlRef: ComputedRef<string> = computed(() => pathItemsRef.value.map(i => i.toString()).join('/'))
+
+const timeProps = { hourRef, minuteRef, secondRef }
+const urlProps: FormUrlProps = { protocolRef, pathItemsRef, urlRef }
+const pathEditProps = { pathItemsRef }
+const render = () => h(ElForm,
+    { labelWidth: '100px' },
+    () => [timeFormItem(timeProps), urlFormItem(urlProps), pathEdit(pathEditProps)]
+)
+
+function init() {
+    hourRef.value = 1
+    minuteRef.value = undefined
+    secondRef.value = undefined
+    protocolRef.value = Protocol.ALL
+    pathItemsRef.value = []
+}
+
+init()
+
+export type FormData = {
+    /**
+     * Time / seconds
+     */
+    timeLimit: number
+    /**
+     * Protocol + url
+     */
+    url: string
+}
+
+const handleGetData = () => {
+    let timeLimit = 0
+    timeLimit += (hourRef.value || 0) * 3600
+    timeLimit += (minuteRef.value || 0) * 60
+    timeLimit += (secondRef.value || 0)
+    const url = urlRef.value || ''
+    const protocol = protocolRef.value
+    const result: FormData = {
+        timeLimit,
+        url: url ? protocol + url : ''
+    }
+    return result
+}
+
+const _default = defineComponent(() => {
+    useContext().expose({
+        getData: () => handleGetData(),
+        clean: () => init()
+    })
+    return render
+})
+
+export default _default