ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-20 00:10:03 +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,70 +1,57 @@
import React from 'react';
import { ToastContainer, Toast } from 'react-bootstrap';
export type LevelName = 'ERROR' | 'WARNING' | 'INFO' | 'DEBUG'; // Added levelname
export type Notification = {
id: number;
time: string;
text: string;
timeStamp: string;
message: string;
levelname: LevelName;
};
type NotificationProps = {
showNotification: boolean;
notifications: Notification[];
exceptions: Notification[];
removeNotificationById: (id: number) => void;
removeExceptionById: (id: number) => void;
};
export const Notifications = React.memo((props: NotificationProps) => {
const {
showNotification,
notifications,
exceptions,
removeExceptionById,
removeNotificationById
} = props;
const { showNotification, notifications, removeNotificationById } = props;
return (
<ToastContainer className="navbarOffset toastContainer" position="top-end">
{showNotification &&
notifications.map((notification) => (
<Toast
className="notificationToast"
className={notification.levelname.toLowerCase() + 'Toast'}
key={notification.id}
onClose={() => removeNotificationById(notification.id)}
onClick={() => {
removeNotificationById(notification.id);
}}
onClick={() => removeNotificationById(notification.id)}
onMouseLeave={() => {
removeNotificationById(notification.id);
}}
show={true}
autohide={true}
delay={2000}>
<Toast.Header closeButton={false} className="notificationToast text-right">
<strong className="me-auto">Notification</strong>
<small>{notification.time}</small>
autohide={
notification.levelname === 'WARNING' ||
notification.levelname === 'INFO' ||
notification.levelname === 'DEBUG'
}
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.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>
))}
</ToastContainer>
);
});