mirror of
https://github.com/tiqi-group/pydase.git
synced 2025-06-03 20:30:40 +02:00
feat: adding navigation bar to frontend
This commit is contained in:
parent
7a89168d14
commit
c1a250e7e6
@ -1,5 +1,5 @@
|
||||
import { useEffect, useReducer, useState } from 'react';
|
||||
import { Form } from 'react-bootstrap';
|
||||
import { Navbar, Button, Form, Nav, Offcanvas, Container } from 'react-bootstrap';
|
||||
import { hostname, port, socket } from './socket';
|
||||
import {
|
||||
DataServiceComponent,
|
||||
@ -107,7 +107,10 @@ const reducer = (state: State, action: Action): State => {
|
||||
const App = () => {
|
||||
const [state, dispatch] = useReducer(reducer, null);
|
||||
const [isInstantUpdate, setIsInstantUpdate] = useState(true);
|
||||
// const [isConnected, setIsConnected] = useState(socket.connected);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
|
||||
const handleCloseSettings = () => setShowSettings(false);
|
||||
const handleShowSettings = () => setShowSettings(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch data from the API when the component mounts
|
||||
@ -137,11 +140,27 @@ const App = () => {
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Form.Check
|
||||
checked={isInstantUpdate}
|
||||
onChange={(e) => setIsInstantUpdate(e.target.checked)}
|
||||
type="switch"
|
||||
/>
|
||||
<Navbar expand={false} bg="primary" variant="dark" fixed="top">
|
||||
<Container fluid>
|
||||
<Navbar.Brand href="#home">My App</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls="offcanvasNavbar" onClick={handleShowSettings} />
|
||||
</Container>
|
||||
</Navbar>
|
||||
|
||||
<Offcanvas show={showSettings} onHide={handleCloseSettings} placement="end">
|
||||
<Offcanvas.Header closeButton>
|
||||
<Offcanvas.Title>Settings</Offcanvas.Title>
|
||||
</Offcanvas.Header>
|
||||
<Offcanvas.Body>
|
||||
<Form.Check
|
||||
checked={isInstantUpdate}
|
||||
onChange={(e) => setIsInstantUpdate(e.target.checked)}
|
||||
type="switch"
|
||||
label="Enable Instant Update"
|
||||
/>
|
||||
{/* Add any additional controls you want here */}
|
||||
</Offcanvas.Body>
|
||||
</Offcanvas>
|
||||
|
||||
<div className="App">
|
||||
<DataServiceComponent
|
||||
|
@ -1,13 +1,13 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.4da62354.css",
|
||||
"main.js": "/static/js/main.7e1debb9.js",
|
||||
"main.js": "/static/js/main.35fa39a1.js",
|
||||
"index.html": "/index.html",
|
||||
"main.4da62354.css.map": "/static/css/main.4da62354.css.map",
|
||||
"main.7e1debb9.js.map": "/static/js/main.7e1debb9.js.map"
|
||||
"main.35fa39a1.js.map": "/static/js/main.35fa39a1.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.4da62354.css",
|
||||
"static/js/main.7e1debb9.js"
|
||||
"static/js/main.35fa39a1.js"
|
||||
]
|
||||
}
|
@ -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 pyDataService UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pyDataService App</title><script defer="defer" src="/static/js/main.7e1debb9.js"></script><link href="/static/css/main.4da62354.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 pyDataService UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pyDataService App</title><script defer="defer" src="/static/js/main.35fa39a1.js"></script><link href="/static/css/main.4da62354.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
3
src/pyDataService/frontend/static/js/main.35fa39a1.js
Normal file
3
src/pyDataService/frontend/static/js/main.35fa39a1.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user