fix(off-work): add start date

scripts/start.mjs

@@ -103,7 +103,8 @@ try {
     id: -2,
     workTitle: '距离下班还有',
     restTitle: '休息啦',
-    date: dayjs.tz(new Date(2024, 7, 26, 18, 0, 0)).valueOf(),
+    startDate: new Date(2018, 3, 26, 9, 0, 0).getTime(),
+    date: new Date(2018, 3, 26, 18, 0, 0).getTime(),
   }
   if (idx >= 0) {
     components[idx] = {

src/components/off-work/drawer/index.component.html

@@ -20,7 +20,13 @@
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
-      <nz-form-label [nzSpan]="8">{{ $t('_time') }}</nz-form-label>
+      <nz-form-label [nzSpan]="8">{{ $t('_workHours') }}</nz-form-label>
+      <nz-form-control [nzSpan]="16">
+        <nz-time-picker formControlName="startDate"></nz-time-picker>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8">{{ $t('_breakTime') }}</nz-form-label>
       <nz-form-control [nzSpan]="16">
         <nz-time-picker formControlName="date"></nz-time-picker>
       </nz-form-control>

src/components/off-work/drawer/index.component.ts

@@ -5,6 +5,7 @@
 import { Component, EventEmitter, Output } from '@angular/core'
 import { $t } from 'src/locale'
 import { FormBuilder, FormGroup } from '@angular/forms'
+import { NzMessageService } from 'ng-zorro-antd/message'
 
 @Component({
   selector: 'offwork-drawer',
@@ -19,10 +20,11 @@ export class OffWorkDrawerComponent {
   validateForm!: FormGroup
   index = 0
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: FormBuilder, private message: NzMessageService) {
     this.validateForm = this.fb.group({
       workTitle: [''],
       restTitle: [''],
+      startDate: [null],
       date: [null],
     })
   }
@@ -41,9 +43,15 @@ export class OffWorkDrawerComponent {
 
   handleSubmit() {
     const values = this.validateForm.value
+    const startDate = new Date(values.startDate).getTime()
+    const date = new Date(values.date).getTime()
+    if (startDate >= date) {
+      return this.message.error('休息时间需要比工作时间大')
+    }
     this.ok.emit({
       ...values,
-      date: new Date(values.date).getTime(),
+      startDate,
+      date,
       index: this.index,
     })
     this.handleClose()

src/components/off-work/index.component.ts

@@ -55,25 +55,35 @@ export class OffWorkComponent {
     if (component) {
       this.component = component
       const now = new Date()
+      const nowTime = now.getTime()
+      const startDate = new Date(component['startDate'])
+      startDate.setFullYear(now.getFullYear())
+      startDate.setMonth(now.getMonth())
+      startDate.setDate(now.getDate())
+      const startTime = startDate.getTime()
       const date = new Date(component['date'])
       date.setFullYear(now.getFullYear())
       date.setMonth(now.getMonth())
       date.setDate(now.getDate())
-      const diffTime = (date.getTime() - now.getTime()) / 1000
+      const dateTime = date.getTime()
+      const diffTime = (dateTime - nowTime) / 1000
       const hours = diffTime / (60 * 60)
       const decimal = Math.floor((hours % 1) * 10) / 10
       const minutes = Math.floor((diffTime / 60) % 60)
       const seconds = Math.floor(diffTime % 60)
       const hoursDecimal = Math.floor(hours) + decimal
-      if (diffTime <= 0) {
+
+      if (nowTime >= startTime && nowTime <= dateTime) {
+        if (hoursDecimal >= 1) {
+          this.countdownStr = `${hoursDecimal}小时`
+        } else if (minutes > 0) {
+          this.countdownStr = `${minutes}分钟`
+        } else if (seconds >= 0) {
+          this.countdownStr = `${seconds}秒`
+        }
+      } else {
         this.isRest = true
         return clearTimeout(this.timer)
-      } else if (hoursDecimal >= 1) {
-        this.countdownStr = `${hoursDecimal}小时`
-      } else if (minutes > 0) {
-        this.countdownStr = `${minutes}分钟`
-      } else if (seconds >= 0) {
-        this.countdownStr = `${seconds}秒`
       }
       this.isRest = false
     }

src/locale/english.ts

@@ -271,6 +271,8 @@ const english: Record<string, any> = {
   _timeColor: 'Time color',
   _date: 'Date',
   _time: 'Time',
+  _workHours: 'Work hours',
+  _breakTime: 'Break time',
 }
 
 export default english

src/locale/zh_CN.ts

@@ -263,6 +263,8 @@ const zhCN: Record<string, any> = {
   _timeColor: '时间颜色',
   _date: '日期',
   _time: '时间',
+  _workHours: '工作时间',
+  _breakTime: '休息时间',
 }
 
 export default zhCN