97 lines
2.6 KiB
TypeScript
Executable File
97 lines
2.6 KiB
TypeScript
Executable File
interface INotification {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
time?: string;
|
|
memberId?: string;
|
|
}
|
|
|
|
class NotificationStore {
|
|
private static instance: NotificationStore;
|
|
private notifications: INotification[] = [];
|
|
|
|
private constructor() {
|
|
this.loadFromLocalStorage();
|
|
}
|
|
|
|
static getInstance(): NotificationStore {
|
|
if (!NotificationStore.instance) {
|
|
NotificationStore.instance = new NotificationStore();
|
|
}
|
|
return NotificationStore.instance;
|
|
}
|
|
|
|
addNotification(notification: INotification) {
|
|
this.notifications.push(notification);
|
|
this.saveToLocalStorage();
|
|
this.updateUI();
|
|
}
|
|
|
|
removeNotification(index: number) {
|
|
this.notifications.splice(index, 1);
|
|
this.saveToLocalStorage();
|
|
this.updateUI();
|
|
}
|
|
|
|
getNotifications(): INotification[] {
|
|
return this.notifications;
|
|
}
|
|
|
|
private saveToLocalStorage() {
|
|
localStorage.setItem('notifications', JSON.stringify(this.notifications));
|
|
}
|
|
|
|
private loadFromLocalStorage() {
|
|
const stored = localStorage.getItem('notifications');
|
|
if (stored) {
|
|
this.notifications = JSON.parse(stored);
|
|
}
|
|
}
|
|
|
|
private updateUI() {
|
|
const badge = document.querySelector('.notification-badge') as HTMLElement;
|
|
const board = document.querySelector('.notification-board') as HTMLElement;
|
|
|
|
if (badge) {
|
|
badge.textContent = this.notifications.length.toString();
|
|
badge.style.display = this.notifications.length > 0 ? 'block' : 'none';
|
|
}
|
|
|
|
if (board) {
|
|
this.renderNotificationBoard(board);
|
|
}
|
|
}
|
|
|
|
private renderNotificationBoard(board: HTMLElement) {
|
|
board.innerHTML = '';
|
|
|
|
if (this.notifications.length === 0) {
|
|
board.innerHTML = '<div class="no-notification">No notifications available</div>';
|
|
return;
|
|
}
|
|
|
|
this.notifications.forEach((notif, index) => {
|
|
const notifElement = document.createElement('div');
|
|
notifElement.className = 'notification-item';
|
|
notifElement.innerHTML = `
|
|
<div>${notif.title}</div>
|
|
<div>${notif.description}</div>
|
|
${notif.time ? `<div>${notif.time}</div>` : ''}
|
|
`;
|
|
notifElement.onclick = () => {
|
|
if (notif.memberId) {
|
|
window.loadMemberChat(notif.memberId);
|
|
}
|
|
this.removeNotification(index);
|
|
};
|
|
board.appendChild(notifElement);
|
|
});
|
|
}
|
|
|
|
public refreshNotifications() {
|
|
this.updateUI();
|
|
}
|
|
}
|
|
|
|
export const notificationStore = NotificationStore.getInstance();
|