guyg1474andClaude Opus 5.5
dd58b3d1f8
FastAPI-Backend und React-Frontend mit Konten, Sendungsverfolgung, Projekt-Artikeln, Vorrat & Einkauf mit Rezeptabgleich, Reise-Weltkarte, Kanban-Projekten mit Priorität, Server-Monitoring und den Designs Matrix und Blackwall. Betrieb per Docker hinter nginx (siehe DEPLOY.md). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
93 lines
3.2 KiB
React
93 lines
3.2 KiB
React
import { lazy, StrictMode, Suspense } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
|
import '@fontsource/vt323/400.css';
|
|
import '@fontsource/ibm-plex-mono/400.css';
|
|
import '@fontsource/ibm-plex-mono/600.css';
|
|
// Schriften der übrigen Designs (nur @font-face; geladen wird eine Datei erst, wenn das Design sie nutzt)
|
|
import '@fontsource/chakra-petch/latin-400.css';
|
|
import '@fontsource/chakra-petch/latin-500.css';
|
|
import '@fontsource/chakra-petch/latin-600.css';
|
|
import '@fontsource/oxanium/latin-700.css';
|
|
import '@fontsource/oxanium/latin-800.css';
|
|
import { AuthProvider, useAuth } from './auth.jsx';
|
|
import Layout from './components/Layout.jsx';
|
|
import ThemeBackground from './components/ThemeBackground.jsx';
|
|
import { LinksProvider } from './links.jsx';
|
|
import Account from './pages/Account.jsx';
|
|
import Haushalt from './pages/Haushalt.jsx';
|
|
import Kanban from './pages/Kanban.jsx';
|
|
import KanbanBoard from './pages/KanbanBoard.jsx';
|
|
import Home from './pages/Home.jsx';
|
|
import Login from './pages/Login.jsx';
|
|
import Monitoring from './pages/Monitoring.jsx';
|
|
import NotFound from './pages/NotFound.jsx';
|
|
import Projects from './pages/Projects.jsx';
|
|
import Users from './pages/Users.jsx';
|
|
import './theme.js';
|
|
import './styles.css';
|
|
import './themes.css';
|
|
|
|
// Artikelseite inkl. Editor erst bei Bedarf laden, damit die Startseite schnell bleibt
|
|
const Project = lazy(() => import('./pages/Project.jsx'));
|
|
// Weltkarte (d3, Kartendaten) ebenfalls nur bei Bedarf
|
|
const Reisen = lazy(() => import('./pages/Reisen.jsx'));
|
|
|
|
const router = createBrowserRouter([
|
|
{
|
|
element: <Layout />,
|
|
children: [
|
|
{ index: true, element: <Home /> },
|
|
{ path: 'projekte', element: <Projects /> },
|
|
{
|
|
path: 'projekte/:id',
|
|
element: <Suspense fallback={<p className="hint">Lade …</p>}><Project /></Suspense>,
|
|
},
|
|
{ path: 'haushalt', element: <Haushalt /> },
|
|
{ path: 'reisen', element: <Suspense fallback={<p className="hint">Lade …</p>}><Reisen /></Suspense> },
|
|
{ path: 'kanban', element: <Kanban /> },
|
|
{ path: 'kanban/:id', element: <KanbanBoard /> },
|
|
{ path: 'monitoring', element: <Monitoring /> },
|
|
{ path: 'konto', element: <Account /> },
|
|
{ path: 'benutzer', element: <Users /> },
|
|
{ path: '*', element: <NotFound /> },
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Ohne Anmeldung gibt es nur die Login- bzw. Einrichtungsseite
|
|
function App() {
|
|
const { state, user, error, retry } = useAuth();
|
|
|
|
if (state === 'loading') {
|
|
return (
|
|
<div className="auth-page">
|
|
{error ? (
|
|
<div className="card auth-card">
|
|
<p className="error">Server nicht erreichbar: {error}</p>
|
|
<button className="btn" type="button" onClick={retry}>Erneut versuchen</button>
|
|
</div>
|
|
) : (
|
|
<p className="hint">Lade …</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
if (state !== 'ready') return <Login />;
|
|
|
|
return (
|
|
<LinksProvider key={user.id}>
|
|
<RouterProvider router={router} />
|
|
</LinksProvider>
|
|
);
|
|
}
|
|
|
|
createRoot(document.getElementById('root')).render(
|
|
<StrictMode>
|
|
<ThemeBackground />
|
|
<AuthProvider>
|
|
<App />
|
|
</AuthProvider>
|
|
</StrictMode>,
|
|
);
|