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

Merge pull request #57 from tiqi-group/feat/adding_connection_toast

Browse Source 
adds connection toast component to app
This commit is contained in:
Mose Müller 2023-11-02 15:26:47 +01:00 committed by GitHub
commit c13166dddb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/App.tsx
View File

@ -7,6 +7,7 @@ import {
} from './components/DataServiceComponent'; } from './components/DataServiceComponent';
import './App.css'; import './App.css';
import { Notifications } from './components/NotificationsComponent'; import { Notifications } from './components/NotificationsComponent';
import { ConnectionToast } from './components/ConnectionToast';
type ValueType = boolean | string | number | object; type ValueType = boolean | string | number | object;
@ -117,6 +118,7 @@ const App = () => {
const [showNotification, setShowNotification] = useState(false); const [showNotification, setShowNotification] = useState(false);
const [notifications, setNotifications] = useState([]); const [notifications, setNotifications] = useState([]);
const [exceptions, setExceptions] = useState([]); const [exceptions, setExceptions] = useState([]);
const [connectionStatus, setConnectionStatus] = useState('connecting');
// Keep the state reference up to date // Keep the state reference up to date
useEffect(() => { useEffect(() => {
@ -143,6 +145,14 @@ const App = () => {
}) })
.catch(console.error); // Handle the error appropriately .catch(console.error); // Handle the error appropriately
socket.on('connect', () => setConnectionStatus('connected'));
socket.on('disconnect', () => {
setConnectionStatus('disconnected');
setTimeout(() => {
setConnectionStatus('reconnecting');
}, 2000);
});
socket.on('notify', onNotify); socket.on('notify', onNotify);
socket.on('exception', onException); socket.on('exception', onException);
@ -264,6 +274,7 @@ const App = () => {
addNotification={addNotification} addNotification={addNotification}
/> />
</div> </div>
<ConnectionToast connectionStatus={connectionStatus} />
</> </>
); );
}; };

69
frontend/src/components/ConnectionToast.tsx Normal file
View File

@ -0,0 +1,69 @@
import React, { useEffect, useState } from 'react';
import { Toast, Button, ToastContainer } from 'react-bootstrap';
type SnackbarToast = {
connectionStatus: string;
};
export const ConnectionToast = React.memo(({ connectionStatus }: SnackbarToast) => {
const [show, setShow] = useState(true);
useEffect(() => {
setShow(true);
}, [connectionStatus]);
const handleClose = () => setShow(false);
const getToastContent = (): {
message: string;
bg: string; // bootstrap uses `bg` prop for background color
delay: number | undefined;
} => {
switch (connectionStatus) {
case 'connecting':
return {
message: 'Connecting...',
bg: 'info',
delay: undefined
};
case 'connected':
return { message: 'Connected', bg: 'success', delay: 1000 };
case 'disconnected':
return {
message: 'Disconnected',
bg: 'danger',
delay: undefined
};
case 'reconnecting':
return {
message: 'Reconnecting...',
bg: 'info',
delay: undefined
};
default:
return {
message: '',
bg: 'info',
delay: undefined
};
}
};
const { message, bg, delay } = getToastContent();
return (
<ToastContainer position="bottom-center">
<Toast
show={show}
onClose={handleClose}
delay={delay}
autohide={delay !== undefined}
bg={bg}>
<Toast.Body className="d-flex justify-content-between">
{message}
<Button variant="close" size="sm" onClick={handleClose} />
</Toast.Body>
</Toast>
</ToastContainer>
);
});

6
src/pydase/frontend/asset-manifest.json
View File

@ -1,13 +1,13 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.c444b055.css", "main.css": "/static/css/main.c444b055.css",
"main.js": "/static/js/main.1d805bdf.js", "main.js": "/static/js/main.9a4bacc5.js",
"index.html": "/index.html", "index.html": "/index.html",
"main.c444b055.css.map": "/static/css/main.c444b055.css.map", "main.c444b055.css.map": "/static/css/main.c444b055.css.map",
"main.1d805bdf.js.map": "/static/js/main.1d805bdf.js.map" "main.9a4bacc5.js.map": "/static/js/main.9a4bacc5.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.c444b055.css", "static/css/main.c444b055.css",
"static/js/main.1d805bdf.js" "static/js/main.9a4bacc5.js"
] ]
} }

2
src/pydase/frontend/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.1d805bdf.js"></script><link href="/static/css/main.c444b055.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.9a4bacc5.js"></script><link href="/static/css/main.c444b055.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

1
src/pydase/frontend/static/js/main.1d805bdf.js.map
View File

File diff suppressed because one or more lines are too long

6
src/pydase/frontend/static/js/main.1d805bdf.js → src/pydase/frontend/static/js/main.9a4bacc5.js
View File

File diff suppressed because one or more lines are too long

0
src/pydase/frontend/static/js/main.1d805bdf.js.LICENSE.txt → src/pydase/frontend/static/js/main.9a4bacc5.js.LICENSE.txt
View File

1
src/pydase/frontend/static/js/main.9a4bacc5.js.map Normal file
View File

File diff suppressed because one or more lines are too long