|
|
@@ -1,10 +1,26 @@
|
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
-import { IonicModule } from '@ionic/angular';
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
-import { Router } from '@angular/router';
|
|
|
+import { IonicModule, NavController } from '@ionic/angular';
|
|
|
+import { ActivatedRoute } from '@angular/router';
|
|
|
import { addIcons } from 'ionicons';
|
|
|
-import { arrowBack, timer, play, pause, stop } from 'ionicons/icons';
|
|
|
+import {
|
|
|
+ schoolOutline,
|
|
|
+ briefcaseOutline,
|
|
|
+ moonOutline,
|
|
|
+ barbellOutline,
|
|
|
+ bookOutline,
|
|
|
+ codeSlashOutline,
|
|
|
+ leafOutline,
|
|
|
+ musicalNotesOutline,
|
|
|
+ languageOutline,
|
|
|
+ pencilOutline,
|
|
|
+ pauseOutline,
|
|
|
+ playOutline,
|
|
|
+ stopOutline,
|
|
|
+ exitOutline,
|
|
|
+ trashOutline
|
|
|
+} from 'ionicons/icons';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-countdown',
|
|
|
@@ -14,30 +30,42 @@ import { arrowBack, timer, play, pause, stop } from 'ionicons/icons';
|
|
|
imports: [IonicModule, CommonModule, FormsModule]
|
|
|
})
|
|
|
export class CountdownPage implements OnInit, OnDestroy {
|
|
|
- public remainingTime: string = '00:00';
|
|
|
- public activityType: string = 'timer';
|
|
|
- public activityName: string = '专注';
|
|
|
- public progress: number = 1;
|
|
|
- public isRunning: boolean = false;
|
|
|
-
|
|
|
- private duration: number = 0;
|
|
|
- private timer: any;
|
|
|
- private endTime: number = 0;
|
|
|
- private pausedTimeLeft: number = 0;
|
|
|
+ remainingTime: string = '';
|
|
|
+ activityType: string = '';
|
|
|
+ activityName: string = '';
|
|
|
+ duration: number = 0;
|
|
|
+ timer: any;
|
|
|
+ isRunning: boolean = false;
|
|
|
+ progress: number = 1;
|
|
|
+ pausedTimeLeft: number = 0;
|
|
|
|
|
|
- constructor(private router: Router) {
|
|
|
+ constructor(private route: ActivatedRoute, private navCtrl: NavController) {
|
|
|
addIcons({
|
|
|
- 'arrow-back': arrowBack,
|
|
|
- 'timer': timer,
|
|
|
- 'play': play,
|
|
|
- 'pause': pause,
|
|
|
- 'stop': stop
|
|
|
+ 'school-outline': schoolOutline,
|
|
|
+ 'briefcase-outline': briefcaseOutline,
|
|
|
+ 'moon-outline': moonOutline,
|
|
|
+ 'barbell-outline': barbellOutline,
|
|
|
+ 'book-outline': bookOutline,
|
|
|
+ 'code-slash-outline': codeSlashOutline,
|
|
|
+ 'leaf-outline': leafOutline,
|
|
|
+ 'musical-notes-outline': musicalNotesOutline,
|
|
|
+ 'language-outline': languageOutline,
|
|
|
+ 'pencil-outline': pencilOutline,
|
|
|
+ 'pause-outline': pauseOutline,
|
|
|
+ 'play-outline': playOutline,
|
|
|
+ 'stop-outline': stopOutline,
|
|
|
+ 'exit-outline': exitOutline,
|
|
|
+ 'trash-outline': trashOutline
|
|
|
});
|
|
|
}
|
|
|
|
|
|
ngOnInit() {
|
|
|
- this.setDuration(5);
|
|
|
- this.startTimer();
|
|
|
+ this.route.queryParams.subscribe(params => {
|
|
|
+ this.activityType = params['type'];
|
|
|
+ this.activityName = params['name'];
|
|
|
+ this.duration = parseInt(params['duration']);
|
|
|
+ this.startCountdown(this.duration * 60); // 转换为秒
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
ngOnDestroy() {
|
|
|
@@ -46,66 +74,58 @@ export class CountdownPage implements OnInit, OnDestroy {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- public togglePause() {
|
|
|
- this.isRunning = !this.isRunning;
|
|
|
- if (this.isRunning) {
|
|
|
- // 继续计时
|
|
|
- this.endTime = Date.now() + this.pausedTimeLeft;
|
|
|
- this.startTimer();
|
|
|
- } else {
|
|
|
- // 暂停计时
|
|
|
- if (this.timer) {
|
|
|
+ startCountdown(totalSeconds: number) {
|
|
|
+ let seconds = totalSeconds;
|
|
|
+ if (this.pausedTimeLeft > 0) {
|
|
|
+ seconds = this.pausedTimeLeft;
|
|
|
+ }
|
|
|
+ const startTime = seconds;
|
|
|
+
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (seconds > 0) {
|
|
|
+ seconds--;
|
|
|
+ this.progress = seconds / startTime;
|
|
|
+ this.remainingTime = this.formatTime(seconds);
|
|
|
+ } else {
|
|
|
+ this.isRunning = false;
|
|
|
clearInterval(this.timer);
|
|
|
- this.pausedTimeLeft = this.endTime - Date.now();
|
|
|
+ // 可以添加提示音或震动
|
|
|
}
|
|
|
- }
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
|
|
|
- public stop() {
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- this.isRunning = false;
|
|
|
- this.setDuration(5); // 重置为5分钟
|
|
|
+ formatTime(seconds: number): string {
|
|
|
+ const hours = Math.floor(seconds / 3600);
|
|
|
+ const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
+ const secs = seconds % 60;
|
|
|
+ return `${this.padNumber(hours)}:${this.padNumber(minutes)}:${this.padNumber(secs)}`;
|
|
|
}
|
|
|
|
|
|
- public setDuration(minutes: number) {
|
|
|
- if (minutes < 5) {
|
|
|
- alert('倒计时的最小时长为5分钟。');
|
|
|
- return;
|
|
|
- }
|
|
|
- this.duration = minutes * 60;
|
|
|
- this.remainingTime = this.formatTime(this.duration);
|
|
|
+ padNumber(num: number): string {
|
|
|
+ return num.toString().padStart(2, '0');
|
|
|
}
|
|
|
|
|
|
- public exit() {
|
|
|
- if (this.timer) {
|
|
|
+ togglePause() {
|
|
|
+ if (this.isRunning) {
|
|
|
clearInterval(this.timer);
|
|
|
+ const timeArray = this.remainingTime.split(':');
|
|
|
+ this.pausedTimeLeft = timeArray.reduce((acc, time) => (60 * acc) + Number(time), 0);
|
|
|
+ } else {
|
|
|
+ this.startCountdown(this.pausedTimeLeft);
|
|
|
}
|
|
|
- this.router.navigate(['/']);
|
|
|
+ this.isRunning = !this.isRunning;
|
|
|
}
|
|
|
|
|
|
- private startTimer() {
|
|
|
- this.endTime = Date.now() + (this.duration * 1000);
|
|
|
- this.isRunning = true;
|
|
|
-
|
|
|
- this.timer = setInterval(() => {
|
|
|
- const now = Date.now();
|
|
|
- const timeLeft = Math.max(0, this.endTime - now);
|
|
|
-
|
|
|
- if (timeLeft === 0) {
|
|
|
- clearInterval(this.timer);
|
|
|
- this.isRunning = false;
|
|
|
- }
|
|
|
-
|
|
|
- this.remainingTime = this.formatTime(Math.floor(timeLeft / 1000));
|
|
|
- this.progress = timeLeft / (this.duration * 1000);
|
|
|
- }, 100);
|
|
|
+ stop() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.isRunning = false;
|
|
|
+ this.remainingTime = this.formatTime(this.duration * 60);
|
|
|
+ this.progress = 1;
|
|
|
+ this.pausedTimeLeft = 0;
|
|
|
}
|
|
|
|
|
|
- private formatTime(seconds: number): string {
|
|
|
- const minutes = Math.floor(seconds / 60);
|
|
|
- const secs = Math.floor(seconds % 60);
|
|
|
- return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
|
+ exit() {
|
|
|
+ this.stop();
|
|
|
+ this.navCtrl.back();
|
|
|
}
|
|
|
}
|
