ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-20 08:20:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

rewrites NotificationsComponent to handle various notification levels

Browse Source
This commit is contained in:
Mose Müller 2023-11-27 15:40:25 +01:00
parent acaac6f0a6
commit 667bb949cc
1 changed files with 25 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/components/NotificationsComponent.tsx
View File

@ -1,68 +1,55 @@
import React from 'react'; import React from 'react';
import { ToastContainer, Toast } from 'react-bootstrap'; import { ToastContainer, Toast } from 'react-bootstrap';
export type LevelName = 'ERROR' | 'WARNING' | 'INFO' | 'DEBUG'; // Added levelname
export type Notification = { export type Notification = {
id: number; id: number;
time: string; timeStamp: string;
text: string; message: string;
levelname: LevelName;
}; };
type NotificationProps = { type NotificationProps = {
showNotification: boolean; showNotification: boolean;
notifications: Notification[]; notifications: Notification[];
exceptions: Notification[];
removeNotificationById: (id: number) => void; removeNotificationById: (id: number) => void;
removeExceptionById: (id: number) => void;
}; };
export const Notifications = React.memo((props: NotificationProps) => { export const Notifications = React.memo((props: NotificationProps) => {
const { const { showNotification, notifications, removeNotificationById } = props;
showNotification,
notifications,
exceptions,
removeExceptionById,
removeNotificationById
} = props;
return ( return (
<ToastContainer className="navbarOffset toastContainer" position="top-end"> <ToastContainer className="navbarOffset toastContainer" position="top-end">
{showNotification && {showNotification &&
notifications.map((notification) => ( notifications.map((notification) => (
<Toast <Toast
className="notificationToast" className={notification.levelname.toLowerCase() + 'Toast'}
key={notification.id} key={notification.id}
onClose={() => removeNotificationById(notification.id)} onClose={() => removeNotificationById(notification.id)}
onClick={() => { onClick={() => removeNotificationById(notification.id)}
removeNotificationById(notification.id);
}}
onMouseLeave={() => { onMouseLeave={() => {
removeNotificationById(notification.id); removeNotificationById(notification.id);
}} }}
show={true} show={true}
autohide={true} autohide={
delay={2000}> notification.levelname === 'WARNING' ||
<Toast.Header closeButton={false} className="notificationToast text-right"> notification.levelname === 'INFO' ||
<strong className="me-auto">Notification</strong> notification.levelname === 'DEBUG'
<small>{notification.time}</small> }
delay={
notification.levelname === 'WARNING' ||
notification.levelname === 'INFO' ||
notification.levelname === 'DEBUG'
? 2000
: undefined
}>
<Toast.Header
closeButton={false}
className={notification.levelname.toLowerCase() + 'Toast text-right'}>
<strong className="me-auto">{notification.levelname}</strong>
<small>{notification.timeStamp}</small>
</Toast.Header> </Toast.Header>
<Toast.Body>{notification.text}</Toast.Body> <Toast.Body>{notification.message}</Toast.Body>
</Toast>
))}
{exceptions.map((exception) => (
<Toast
className="exceptionToast"
key={exception.id}
onClose={() => removeExceptionById(exception.id)}
onClick={() => {
removeExceptionById(exception.id);
}}
show={true}
autohide={false}>
<Toast.Header closeButton className="exceptionToast text-right">
<strong className="me-auto">Exception</strong>
<small>{exception.time}</small>
</Toast.Header>
<Toast.Body>{exception.text}</Toast.Body>
</Toast> </Toast>
))} ))}
</ToastContainer> </ToastContainer>