fix(ui): make notification countdown update reactively
The "Time Until" field in NotificationsView was not updating when refresh was clicked or over time because the computed property used Date.now() directly, which is evaluated once and doesn't trigger reactive updates. Changes: - Add reactive currentTime property that updates every second - Set up interval in mounted() to keep countdown live - Clean up interval in beforeUnmount() to prevent memory leaks - Update timeUntilNext computed to use reactive currentTime - Update refreshNotifications() to immediately refresh currentTime The countdown now updates automatically every second and immediately when the refresh button is clicked, without requiring navigation away and back to the view.
This commit is contained in:
@@ -139,9 +139,22 @@ class NotificationsView extends Vue {
|
|||||||
errorMessage = ''
|
errorMessage = ''
|
||||||
notificationStatus: NotificationStatus | null = null
|
notificationStatus: NotificationStatus | null = null
|
||||||
rolloverInfo: RolloverInfo | null = null
|
rolloverInfo: RolloverInfo | null = null
|
||||||
|
currentTime = Date.now()
|
||||||
|
private timeUpdateInterval: number | null = null
|
||||||
|
|
||||||
async mounted() {
|
async mounted() {
|
||||||
await this.refreshNotifications()
|
await this.refreshNotifications()
|
||||||
|
// Update current time every second to keep countdown reactive
|
||||||
|
this.timeUpdateInterval = window.setInterval(() => {
|
||||||
|
this.currentTime = Date.now()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeUnmount() {
|
||||||
|
if (this.timeUpdateInterval !== null) {
|
||||||
|
clearInterval(this.timeUpdateInterval)
|
||||||
|
this.timeUpdateInterval = null
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
goBack() {
|
goBack() {
|
||||||
@@ -151,6 +164,8 @@ class NotificationsView extends Vue {
|
|||||||
async refreshNotifications() {
|
async refreshNotifications() {
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
this.errorMessage = ''
|
this.errorMessage = ''
|
||||||
|
// Update current time immediately to refresh countdown
|
||||||
|
this.currentTime = Date.now()
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const platform = Capacitor.getPlatform()
|
const platform = Capacitor.getPlatform()
|
||||||
@@ -231,8 +246,7 @@ class NotificationsView extends Vue {
|
|||||||
|
|
||||||
get timeUntilNext(): string | null {
|
get timeUntilNext(): string | null {
|
||||||
if (!this.nextNotificationTime) return null
|
if (!this.nextNotificationTime) return null
|
||||||
const now = Date.now()
|
const diff = this.nextNotificationTime - this.currentTime
|
||||||
const diff = this.nextNotificationTime - now
|
|
||||||
|
|
||||||
if (diff < 0) return 'Past due'
|
if (diff < 0) return 'Past due'
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user