94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import { Component, inject } from '@angular/core';
|
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatDividerModule } from '@angular/material/divider';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatListModule } from '@angular/material/list';
|
|
import { MatMenuModule } from '@angular/material/menu';
|
|
import { Notification, NotificationService } from '../../services/notification.service';
|
|
|
|
@Component({
|
|
selector: 'app-notifications',
|
|
imports: [
|
|
CommonModule,
|
|
MatIconModule,
|
|
MatButtonModule,
|
|
MatBadgeModule,
|
|
MatMenuModule,
|
|
MatListModule,
|
|
MatDividerModule,
|
|
],
|
|
templateUrl: './notifications.html',
|
|
styleUrl: './notifications.css',
|
|
})
|
|
export class NotificationsComponent {
|
|
private notificationService = inject(NotificationService);
|
|
|
|
get notifications() {
|
|
return this.notificationService.notifications();
|
|
}
|
|
|
|
get unreadCount() {
|
|
return this.notificationService.unreadCount();
|
|
}
|
|
|
|
markAsRead(notification: Notification) {
|
|
this.notificationService.markAsRead(notification.id);
|
|
}
|
|
|
|
markAllAsRead() {
|
|
this.notificationService.markAllAsRead();
|
|
}
|
|
|
|
clearNotification(notification: Notification) {
|
|
this.notificationService.clearNotification(notification.id);
|
|
}
|
|
|
|
clearAll() {
|
|
this.notificationService.clearAllNotifications();
|
|
}
|
|
|
|
getNotificationIcon(type: string): string {
|
|
switch (type) {
|
|
case 'error':
|
|
return 'error';
|
|
case 'warning':
|
|
return 'warning';
|
|
case 'success':
|
|
return 'check_circle';
|
|
case 'info':
|
|
default:
|
|
return 'info';
|
|
}
|
|
}
|
|
|
|
getNotificationColor(type: string): string {
|
|
switch (type) {
|
|
case 'error':
|
|
return 'text-red-600';
|
|
case 'warning':
|
|
return 'text-yellow-600';
|
|
case 'success':
|
|
return 'text-green-600';
|
|
case 'info':
|
|
default:
|
|
return 'text-blue-600';
|
|
}
|
|
}
|
|
|
|
formatTime(timestamp: Date): string {
|
|
const now = new Date();
|
|
const diff = now.getTime() - timestamp.getTime();
|
|
const minutes = Math.floor(diff / 60000);
|
|
|
|
if (minutes < 1) return 'Just now';
|
|
if (minutes < 60) return `${minutes}m ago`;
|
|
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
|
|
const days = Math.floor(hours / 24);
|
|
return `${days}d ago`;
|
|
}
|
|
}
|