Updates

src/views/notification-center/NotificationCenterView.tsx

@@ -8,9 +8,12 @@ import { NotificationCenterMessageHandler } from './NotificationCenterMessageHan
 import { NotificationCenterViewProps } from './NotificationCenterView.types';
 import { initialNotificationCenter, NotificationCenterActions, NotificationCenterReducer } from './reducers/NotificationCenterReducer';
 import { BroadcastMessageNotification } from './utils/BroadcastMessageNotification';
+import { HotelWillShutdownNotification } from './utils/HotelWillShutdownNotification';
 import { ModeratorMessageNotification } from './utils/ModeratorMessageNotification';
 import { MOTDNotification } from './utils/MOTDNotification';
+import { NitroNotification } from './utils/Notification';
 import { BroadcastMessageView } from './views/broadcast-message/BroadcastMessageView';
+import { HotelWillShutdownView } from './views/hotel-will-shutdown/HotelWillShutdownView';
 import { ModeratorMessageView } from './views/moderator-message/ModeratorMessageView';
 import { MOTDView } from './views/motd/MOTDView';
 
@@ -59,7 +62,15 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
 
         switch(action)
         {
-            case 'dismiss_alert':
+            case 'dismiss_notification':
+                dispatchNotificationCenterState({
+                    type: NotificationCenterActions.DISMISS_NOTIFICATION,
+                    payload: {
+                        id: value
+                    }
+                });
+                return;
+            case 'remove_notification':
                     dispatchNotificationCenterState({
                         type: NotificationCenterActions.REMOVE_NOTIFICATION,
                         payload: {
@@ -68,28 +79,38 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
                     });
                     return;
         }
-    }, []);
+    }, [ notificationCenterState, dispatchNotificationCenterState ]);
+
+    const mapNotifications = useCallback((notifications: NitroNotification[], inTray: boolean) =>
+    {
+        if(!notifications) return null;
+
+        return notifications.map(notification =>
+            {
+                if(!inTray && notification.dismissed) return null;
+
+                if(notification instanceof BroadcastMessageNotification)
+                    return <BroadcastMessageView key={ notification.id } inTray={ inTray } notification={ notification as BroadcastMessageNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
+                if(notification instanceof MOTDNotification)
+                    return <MOTDView key={ notification.id } inTray={ inTray } notification={ notification as MOTDNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
+                if(notification instanceof ModeratorMessageNotification)
+                    return <ModeratorMessageView key={ notification.id } inTray={ inTray } notification={ notification as ModeratorMessageNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
+                if(notification instanceof HotelWillShutdownNotification)
+                    return <HotelWillShutdownView key={ notification.id } inTray={ inTray } notification={ notification as HotelWillShutdownNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
+                else
+                    return null;
+            });
+    }, [ handleButtonClick ]);
 
     return (
         <NotificationCenterContextProvider value={ { notificationCenterState, dispatchNotificationCenterState } }>
             <NotificationCenterMessageHandler />
             <TransitionAnimation className="nitro-notification-center-container" type={ TransitionAnimationTypes.SLIDE_RIGHT } inProp={ isVisible } timeout={ 300 }>
-                <div className="nitro-notification-center">
+                <div className="nitro-notification-center pt-5 px-2">
-                    
+                    { mapNotifications(notifications, true) }
                 </div>
             </TransitionAnimation>
-            { notifications && notifications.map(notification =>
+            { mapNotifications(notifications, false) }
-                {
-                    if(notification instanceof BroadcastMessageNotification)
-                        return <BroadcastMessageView key={ notification.id } notification={ notification as BroadcastMessageNotification } onCloseClick={ () => handleButtonClick('dismiss_alert', notification.id) } />
-                    if(notification instanceof MOTDNotification)
-                        return <MOTDView key={ notification.id } notification={ notification as MOTDNotification } onCloseClick={ () => handleButtonClick('dismiss_alert', notification.id) } />
-                    if(notification instanceof ModeratorMessageNotification)
-                    return <ModeratorMessageView key={ notification.id } notification={ notification as ModeratorMessageNotification } onCloseClick={ () => handleButtonClick('dismiss_alert', notification.id) } />
-                    else
-                        return null;
-                    
-                }) }
         </NotificationCenterContextProvider>
     );
 }

src/views/notification-center/NotificationCenterView.types.ts

@@ -5,5 +5,6 @@ export interface NotificationCenterViewProps
 
 export class NotificationViewProps
 {
-    onCloseClick: () => void;
+    inTray?: boolean = false;
+    onButtonClick: (action: string) => void;
 }

src/views/notification-center/reducers/NotificationCenterReducer.tsx

@@ -19,6 +19,7 @@ export class NotificationCenterActions
 {
     public static ADD_NOTIFICATION: string = 'NCA_ADD_NOTIFICATION';
     public static REMOVE_NOTIFICATION: string = 'NCA_REMOVE_NOTIFICATION';
+    public static DISMISS_NOTIFICATION: string = 'NCA_DISMISS_NOTIFICATION';
 }
 
 export const initialNotificationCenter: INotificationCenterState = {
@@ -34,7 +35,7 @@ export const NotificationCenterReducer: Reducer<INotificationCenterState, INotif
 
             if(!notification) return state;
 
-            if(state.notifications) return {...state, notifications: [...state.notifications, notification]};
+            if(state.notifications) return {...state, notifications: [notification, ...state.notifications]};
 
             return {...state, notifications: [notification]};
         }
@@ -54,6 +55,22 @@ export const NotificationCenterReducer: Reducer<INotificationCenterState, INotif
 
             return {...state, notifications};
         }
+        case NotificationCenterActions.DISMISS_NOTIFICATION: {
+            const id = (action.payload.id || null);
+
+            if(!id) return state;
+
+            if(!state.notifications) return state;
+
+            const notifications = Array.from(state.notifications);
+            const notificationIndex = notifications.findIndex(notification => notification.id === id);
+
+            if(notificationIndex === -1) return state;
+
+            notifications[notificationIndex].dismiss();
+
+            return {...state, notifications};
+        }
         default:
             return state;
     }

src/views/notification-center/utils/Notification.ts

@@ -5,15 +5,23 @@ export class NitroNotification
     private _id: number;
     private _title: string;
     private _message: string;
+    private _dismissed: boolean = false;
+    private _timestamp: number;
 
     constructor(message: string = null, title: string = null)
     {
         this._id = ++NitroNotification.CURRENT_ID;
         this._title = title;
+        this._timestamp = Date.now();
 
         if(message) this._message = message.replace(/\r\n|\r|\n/g, '<br />');
     }
 
+    public dismiss(): void
+    {
+        this._dismissed = true;
+    }
+
     public get id(): number
     {
         return this._id;
@@ -28,4 +36,14 @@ export class NitroNotification
     {
         return this._message;
     }
+
+    public get dismissed(): boolean
+    {
+        return this._dismissed;
+    }
+
+    public get timestamp(): number
+    {
+        return this._timestamp;
+    }
 }

src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx

@@ -2,21 +2,27 @@ import { FC } from 'react';
 import { NitroCardContentView, NitroCardView } from '../../../../layout';
 import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { BroadcastMessageViewProps } from './BroadcastMessageView.types';
 
 export const BroadcastMessageView: FC<BroadcastMessageViewProps> = props =>
 {
-    const { notification = null, onCloseClick = null } = props;
+    const { notification = null, inTray = null, onButtonClick = null } = props;
     
     if(!notification) return null;
 
+    const content = <div dangerouslySetInnerHTML={ {__html: notification.message } } />;
+
+    if(inTray)
+        return (
+            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
+        );
+        
     return (
         <NitroCardView className="nitro-notification">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ onCloseClick } />
+            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
-            <NitroCardContentView>
+            <NitroCardContentView className="text-black">
-                <div className="text-black">
+                { content }
-                    <div dangerouslySetInnerHTML={ {__html: notification.message } } />
-                </div>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
+import { HotelWillShutdownViewProps } from './HotelWillShutdownView.types';
+
+export const HotelWillShutdownView: FC<HotelWillShutdownViewProps> = props =>
+{
+    const { notification = null, inTray = null, onButtonClick = null } = props;
+    
+    if(!notification) return null;
+
+    const content = <>{ LocalizeText('opening.hours.shutdown', ['m'], [notification.minutes.toString()]) }</>;
+
+    if(inTray)
+        return (
+            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
+        );
+
+    return (
+        <NitroCardView className="nitro-notification">
+            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+            <NitroCardContentView className="text-black">
+                { content }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.types.ts

@@ -0,0 +1,7 @@
+import { NotificationViewProps } from '../../NotificationCenterView.types';
+import { HotelWillShutdownNotification } from './../../utils/HotelWillShutdownNotification';
+
+export class HotelWillShutdownViewProps extends NotificationViewProps
+{
+    notification: HotelWillShutdownNotification;
+}

src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx

@@ -2,24 +2,32 @@ import { FC } from 'react';
 import { NitroCardContentView, NitroCardView } from '../../../../layout';
 import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { ModeratorMessageViewProps } from './ModeratorMessageView.types';
 
 export const ModeratorMessageView: FC<ModeratorMessageViewProps> = props =>
 {
-    const { notification = null, onCloseClick = null } = props;
+    const { notification = null, inTray = null, onButtonClick = null } = props;
     
     if(!notification) return null;
 
-    return (
+    const content = <>
-        <NitroCardView className="nitro-notification">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ onCloseClick } />
-            <NitroCardContentView>
-                <div className="text-black">
         <div dangerouslySetInnerHTML={ {__html: notification.message } } />
         <div className="fw-bold text-center">
-                        <a href={ notification.link } rel="noreferrer" target="_blank" onClick={ onCloseClick }>{ LocalizeText('mod.alert.link') }</a>
+            <a href={ notification.link } rel="noreferrer" target="_blank" onClick={ () => onButtonClick('dismiss_notification') }>{ LocalizeText('mod.alert.link') }</a>
-                    </div>
         </div>
+    </>;
+
+    if(inTray)
+        return (
+            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
+        );
+
+    return (
+        <NitroCardView className="nitro-notification">
+            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+            <NitroCardContentView className="text-black">
+                { content }
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/notification-center/views/motd/MOTDView.tsx

@@ -2,24 +2,30 @@ import { FC } from 'react';
 import { NitroCardContentView, NitroCardView } from '../../../../layout';
 import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
 import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
 import { MOTDViewProps } from './MOTDView.types';
 
 export const MOTDView: FC<MOTDViewProps> = props =>
 {
-    const { notification = null, onCloseClick = null } = props;
+    const { notification = null, inTray = null, onButtonClick = null } = props;
     
     if(!notification) return null;
 
-    return (
+    const content = notification.messages.map((message, index) =>
-        <NitroCardView className="nitro-notification">
-            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ onCloseClick } />
-            <NitroCardContentView>
-                <div className="text-black">
-                    { notification.messages.map((message, index) =>
     {
         return <div key={ index } dangerouslySetInnerHTML={ {__html: message } } />
-                        }) }
+    });
-                </div>
+
+    if(inTray)
+        return (
+            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
+        );
+
+    return (
+        <NitroCardView className="nitro-notification">
+            <NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
+            <NitroCardContentView className="text-black">
+                { content }
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/notification-center/views/tray-item/NotificationTrayItemView.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { NotificationTrayItemViewProps } from './NotificationTrayItemView.types';
+
+export const NotificationTrayItemView: FC<NotificationTrayItemViewProps> = props =>
+{
+    const { title = null, content = null, timestamp = null, onCloseClick = null } = props;
+    
+    return (
+        <div className="rounded bg-muted mb-2 text-black">
+            <div className="py-1 px-2 fw-bold d-flex justify-content-between align-items-center">
+                <div className="me-2">{ title }</div>
+                <i className="fas fa-times cursor-pointer" onClick={ onCloseClick }></i>
+            </div>
+            <div className="py-1 px-2">
+                { content }
+            </div>
+            <div className="py-1 px-2">
+                <i className="far fa-clock"></i> { timestamp }
+            </div>
+        </div>
+    );
+};

src/views/notification-center/views/tray-item/NotificationTrayItemView.types.ts

@@ -0,0 +1,7 @@
+export class NotificationTrayItemViewProps
+{
+    title: string;
+    content: any;
+    timestamp: number;
+    onCloseClick: () => void;
+}