feat: adding navigation bar to frontend

This commit is contained in:
Mose Müller 2023-08-02 12:06:22 +02:00
parent 7a89168d14
commit c1a250e7e6
8 changed files with 34 additions and 15 deletions

View File

@ -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

View File

@ -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"
]
}

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 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>

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