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

Merge pull request #121 from tiqi-group/feat/add_async_method_status_spinner

Browse Source 
Feat: adds async method status spinner
This commit is contained in:
Mose Müller 2024-04-22 17:49:58 +02:00 committed by GitHub
commit 2b8e25f5f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/AsyncMethodComponent.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { runMethod } from '../socket'; import { runMethod } from '../socket';
import { Form, Button, InputGroup } from 'react-bootstrap'; import { Form, Button, InputGroup, Spinner } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
@ -32,6 +32,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
const renderCount = useRef(0); const renderCount = useRef(0);
const formRef = useRef(null); const formRef = useRef(null);
const [spinning, setSpinning] = useState(false);
const name = fullAccessPath.split('.').at(-1); const name = fullAccessPath.split('.').at(-1);
const parentPath = fullAccessPath.slice(0, -(name.length + 1)); const parentPath = fullAccessPath.slice(0, -(name.length + 1));
@ -45,6 +46,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
message = `${fullAccessPath} was started.`; message = `${fullAccessPath} was started.`;
} }
addNotification(message); addNotification(message);
setSpinning(false);
}, [props.value]); }, [props.value]);
const execute = async (event: React.FormEvent) => { const execute = async (event: React.FormEvent) => {
@ -58,6 +60,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
} }
const accessPath = [parentPath, method_name].filter((element) => element).join('.'); const accessPath = [parentPath, method_name].filter((element) => element).join('.');
setSpinning(true);
runMethod(accessPath); runMethod(accessPath);
}; };
@ -73,7 +76,13 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
</InputGroup.Text> </InputGroup.Text>
<Button id={`button-${id}`} type="submit"> <Button id={`button-${id}`} type="submit">
{runningTask === 'RUNNING' ? 'Stop ' : 'Start '} {spinning ? (
<Spinner size="sm" role="status" aria-hidden="true" />
) : runningTask === 'RUNNING' ? (
'Stop '
) : (
'Start '
)}
</Button> </Button>
</InputGroup> </InputGroup>
</Form> </Form>

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

@ -1,13 +1,13 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.7ef670d5.css", "main.css": "/static/css/main.7ef670d5.css",
"main.js": "/static/js/main.27a065cb.js", "main.js": "/static/js/main.53be4eb9.js",
"index.html": "/index.html", "index.html": "/index.html",
"main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map", "main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map",
"main.27a065cb.js.map": "/static/js/main.27a065cb.js.map" "main.53be4eb9.js.map": "/static/js/main.53be4eb9.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.7ef670d5.css", "static/css/main.7ef670d5.css",
"static/js/main.27a065cb.js" "static/js/main.53be4eb9.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.27a065cb.js"></script><link href="/static/css/main.7ef670d5.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.53be4eb9.js"></script><link href="/static/css/main.7ef670d5.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.27a065cb.js.map
View File

File diff suppressed because one or more lines are too long

6
src/pydase/frontend/static/js/main.27a065cb.js → src/pydase/frontend/static/js/main.53be4eb9.js
View File

File diff suppressed because one or more lines are too long

0
src/pydase/frontend/static/js/main.27a065cb.js.LICENSE.txt → src/pydase/frontend/static/js/main.53be4eb9.js.LICENSE.txt
View File

1
src/pydase/frontend/static/js/main.53be4eb9.js.map Normal file
View File

File diff suppressed because one or more lines are too long