u

2025-12-25 00:08:05 +01:00
parent 1f3292bc17
commit 077e76735e
15 changed files with 9311 additions and 0 deletions
--- a/uiserver/src/App.js
+++ b/uiserver/src/App.js
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Link, Navigate, useNavigate } from 'react-router-dom';
+import { ThemeProvider, CssBaseline, AppBar, Toolbar, Typography, Button, Box, IconButton, Menu, MenuItem } from '@mui/material';
+import SettingsIcon from '@mui/icons-material/Settings';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import theme from './theme';
+import Settings from './components/Settings';
+import Chart from './components/Chart';
+import Login from './components/Login';
+import ViewManager from './components/ViewManager';
+import ViewDisplay from './components/ViewDisplay';
+
+function NavBar({ user, onLogout }) {
+    const navigate = useNavigate();
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleMenu = (event) => setAnchorEl(event.currentTarget);
+    const handleClose = () => setAnchorEl(null);
+    const handleLogout = () => {
+        handleClose();
+        onLogout();
+        navigate('/');
+    };
+
+    return (
+        <AppBar position="static">
+            <Toolbar>
+                <Typography variant="h6" component="div" sx={{ flexGrow: 1, cursor: 'pointer' }} onClick={() => navigate('/')}>
+                    TischlerCtrl
+                </Typography>
+
+                <Button color="inherit" startIcon={<DashboardIcon />} onClick={() => navigate('/')}>
+                    Views
+                </Button>
+                <Button color="inherit" startIcon={<ShowChartIcon />} onClick={() => navigate('/live')}>
+                    Live
+                </Button>
+                <Button color="inherit" startIcon={<SettingsIcon />} onClick={() => navigate('/settings')}>
+                    Settings
+                </Button>
+
+                {user ? (
+                    <div>
+                        <IconButton
+                            size="large"
+                            onClick={handleMenu}
+                            color="inherit"
+                        >
+                            <AccountCircle />
+                        </IconButton>
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={Boolean(anchorEl)}
+                            onClose={handleClose}
+                        >
+                            <MenuItem disabled>{user.username} ({user.role})</MenuItem>
+                            <MenuItem onClick={handleLogout}>Logout</MenuItem>
+                        </Menu>
+                    </div>
+                ) : (
+                    <Button color="inherit" onClick={() => navigate('/login')}>
+                        Login
+                    </Button>
+                )}
+            </Toolbar>
+        </AppBar>
+    );
+}
+
+export default function App() {
+    const [user, setUser] = useState(null);
+    const [selectedChannels, setSelectedChannels] = useState([]);
+
+    // Load persistence (User + Settings)
+    useEffect(() => {
+        try {
+            const savedSettings = localStorage.getItem('selectedChannels');
+            if (savedSettings) setSelectedChannels(JSON.parse(savedSettings));
+
+            const savedUser = localStorage.getItem('user');
+            if (savedUser) setUser(JSON.parse(savedUser));
+        } catch (e) {
+            console.error("Failed to load persistence", e);
+        }
+    }, []);
+
+    const handleLogin = (userData) => {
+        setUser(userData);
+        localStorage.setItem('user', JSON.stringify(userData));
+    };
+
+    const handleLogout = () => {
+        setUser(null);
+        localStorage.removeItem('user');
+    };
+
+    const handleToggleChannel = (id) => {
+        setSelectedChannels(prev => {
+            const newSelection = prev.includes(id)
+                ? prev.filter(c => c !== id)
+                : [...prev, id];
+            localStorage.setItem('selectedChannels', JSON.stringify(newSelection));
+            return newSelection;
+        });
+    };
+
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <BrowserRouter>
+                <Box sx={{ flexGrow: 1, height: '100vh', display: 'flex', flexDirection: 'column' }}>
+                    <NavBar user={user} onLogout={handleLogout} />
+
+                    <Box component="main" sx={{ flexGrow: 1, overflow: 'auto' }}>
+                        <Routes>
+                            <Route path="/" element={<ViewManager user={user} />} />
+                            <Route path="/live" element={<Chart selectedChannels={selectedChannels} />} />
+                            <Route path="/settings" element={<Settings selectedChannels={selectedChannels} onToggleChannel={handleToggleChannel} />} />
+                            <Route path="/login" element={<Login onLogin={handleLogin} />} />
+
+                            <Route path="/views/:id" element={<ViewDisplay />} />
+                        </Routes>
+                    </Box>
+                </Box>
+            </BrowserRouter>
+        </ThemeProvider>
+    );
+}