|
|
@@ -1,7 +1,7 @@
|
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
-import { IonicModule, NavController } from '@ionic/angular';
|
|
|
+import { IonicModule, NavController, AlertController } from '@ionic/angular';
|
|
|
import { ActivatedRoute } from '@angular/router';
|
|
|
import { addIcons } from 'ionicons';
|
|
|
import {
|
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
playOutline,
|
|
|
stopOutline,
|
|
|
exitOutline,
|
|
|
- trashOutline
|
|
|
+ arrowBackOutline
|
|
|
} from 'ionicons/icons';
|
|
|
|
|
|
@Component({
|
|
|
@@ -40,7 +40,11 @@ export class CountdownPage implements OnInit, OnDestroy {
|
|
|
remainingSeconds: number = 0;
|
|
|
alertAudio: HTMLAudioElement;
|
|
|
|
|
|
- constructor(private route: ActivatedRoute, private navCtrl: NavController) {
|
|
|
+ constructor(
|
|
|
+ private route: ActivatedRoute,
|
|
|
+ private navCtrl: NavController,
|
|
|
+ private alertController: AlertController
|
|
|
+ ) {
|
|
|
addIcons({
|
|
|
'school-outline': schoolOutline,
|
|
|
'briefcase-outline': briefcaseOutline,
|
|
|
@@ -56,35 +60,36 @@ export class CountdownPage implements OnInit, OnDestroy {
|
|
|
'play-outline': playOutline,
|
|
|
'stop-outline': stopOutline,
|
|
|
'exit-outline': exitOutline,
|
|
|
- 'trash-outline': trashOutline
|
|
|
+ 'arrow-back-outline': arrowBackOutline
|
|
|
});
|
|
|
|
|
|
- // 初始化音频
|
|
|
this.alertAudio = new Audio('assets/alert.mp3');
|
|
|
}
|
|
|
|
|
|
ngOnInit() {
|
|
|
+ console.log('CountdownPage initialized');
|
|
|
this.route.queryParams.subscribe(params => {
|
|
|
+ console.log('Received params:', params);
|
|
|
this.activityType = params['type'];
|
|
|
this.activityName = params['name'];
|
|
|
this.duration = parseInt(params['duration']);
|
|
|
- this.remainingSeconds = this.duration * 60; // 转换为秒
|
|
|
- this.startCountdown();
|
|
|
+ this.remainingSeconds = this.duration * 60;
|
|
|
+ this.remainingTime = this.formatTime(this.remainingSeconds);
|
|
|
+ this.progress = 1;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
ngOnDestroy() {
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
+ this.stopTimer();
|
|
|
}
|
|
|
|
|
|
- startCountdown() {
|
|
|
+ startTimer() {
|
|
|
if (this.timer) {
|
|
|
clearInterval(this.timer);
|
|
|
}
|
|
|
|
|
|
- const startTime = this.remainingSeconds;
|
|
|
+ const startTime = this.duration * 60;
|
|
|
+ this.isRunning = true;
|
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
if (this.remainingSeconds > 0) {
|
|
|
@@ -92,13 +97,21 @@ export class CountdownPage implements OnInit, OnDestroy {
|
|
|
this.progress = this.remainingSeconds / startTime;
|
|
|
this.remainingTime = this.formatTime(this.remainingSeconds);
|
|
|
} else {
|
|
|
- this.isRunning = false;
|
|
|
- clearInterval(this.timer);
|
|
|
- this.playAlertSound(); // 播放提示音
|
|
|
+ this.stopTimer();
|
|
|
+ this.playAlertSound();
|
|
|
+ this.showCompletionAlert();
|
|
|
}
|
|
|
}, 1000);
|
|
|
}
|
|
|
|
|
|
+ stopTimer() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ this.isRunning = false;
|
|
|
+ }
|
|
|
+
|
|
|
formatTime(seconds: number): string {
|
|
|
const hours = Math.floor(seconds / 3600);
|
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
@@ -111,31 +124,57 @@ export class CountdownPage implements OnInit, OnDestroy {
|
|
|
}
|
|
|
|
|
|
togglePause() {
|
|
|
- console.log('Toggle Pause called');
|
|
|
if (this.isRunning) {
|
|
|
- clearInterval(this.timer);
|
|
|
- console.log('Paused at:', this.remainingSeconds, 'seconds');
|
|
|
+ this.stopTimer();
|
|
|
} else {
|
|
|
- console.log('Resuming from:', this.remainingSeconds, 'seconds');
|
|
|
- this.startCountdown();
|
|
|
+ this.startTimer();
|
|
|
}
|
|
|
- this.isRunning = !this.isRunning;
|
|
|
}
|
|
|
|
|
|
- stop() {
|
|
|
- clearInterval(this.timer);
|
|
|
- this.isRunning = false;
|
|
|
+ reset() {
|
|
|
+ this.stopTimer();
|
|
|
this.remainingSeconds = this.duration * 60;
|
|
|
this.remainingTime = this.formatTime(this.remainingSeconds);
|
|
|
this.progress = 1;
|
|
|
}
|
|
|
|
|
|
- exit() {
|
|
|
- this.stop();
|
|
|
- this.navCtrl.back();
|
|
|
+ async exit() {
|
|
|
+ if (this.isRunning) {
|
|
|
+ const alert = await this.alertController.create({
|
|
|
+ header: '确认退出',
|
|
|
+ message: '计时正在进行中，确定要退出吗？',
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ text: '取消',
|
|
|
+ role: 'cancel'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '确定',
|
|
|
+ handler: () => {
|
|
|
+ this.stopTimer();
|
|
|
+ this.navCtrl.back();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ await alert.present();
|
|
|
+ } else {
|
|
|
+ this.navCtrl.back();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async showCompletionAlert() {
|
|
|
+ const alert = await this.alertController.create({
|
|
|
+ header: '专注完成！',
|
|
|
+ message: `恭喜你完成了 ${this.duration} 分钟的${this.activityName}`,
|
|
|
+ buttons: ['确定']
|
|
|
+ });
|
|
|
+ await alert.present();
|
|
|
}
|
|
|
|
|
|
private playAlertSound() {
|
|
|
- this.alertAudio.play().catch(error => console.error('Error playing alert sound:', error));
|
|
|
+ this.alertAudio.play().catch(error => {
|
|
|
+ console.error('Error playing alert sound:', error);
|
|
|
+ });
|
|
|
}
|
|
|
-}
|
|
|
+}
|
