guyg1474andClaude Opus 5.5
b30acb652a
Vorrat & Einkauf: - Mehrere Listen (z. B. "Zuhause", "Urlaub"), jede mit eigenem Vorrat und eigener Einkaufsliste; Auswahl oben auf der Seite, gemerkt pro Browser - Beim Anlegen festlegen, wer die Liste sieht: alle Konten oder nur ausgewählte (Ersteller sieht sie immer); ändern/löschen nur Ersteller und Administratoren - Gekauft, aufgebraucht, Nachkaufen und Rezeptabgleich wirken innerhalb der gewählten Liste - Migration: bisheriger Vorrat und Einkauf werden zur Liste "Zuhause" (für alle sichtbar) Reisen: - Schalter "Städte anderer zeigen": Städte der übrigen Konten in je einer eigenen Farbe, einzelne Personen ein-/ausblendbar, nur lesend - Info-Karte zeigt, wer noch in einer Stadt bzw. einem Land war Design "Fabrik" (Industrie-Inventar à la Satisfactory): - Stahlplatten mit Schrauben, Titelleisten mit Fenstersymbol, gelb leuchtende Hauptbuttons, orange Mengen-Zähler, Warnstreifen, Riffelblech und drehende Zahnräder im Hintergrund - Schriften Roboto / Roboto Condensed (OFL), lokal eingebunden Doku: README verlinkt das zugehörige Repository P42-S.M. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
98 lines
3.4 KiB
React
98 lines
3.4 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 '@fontsource/roboto/latin-400.css';
|
|
import '@fontsource/roboto/latin-500.css';
|
|
import '@fontsource/roboto/latin-700.css';
|
|
import '@fontsource/roboto-condensed/latin-500.css';
|
|
import '@fontsource/roboto-condensed/latin-700.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>,
|
|
);
|