158 new layout

compose.yaml

@@ -119,7 +119,7 @@ services:
             POSTGRES_URL: jdbc:postgresql://postgres:5432/test
 
     ## Recompiles on source code changes.
-    ## Do ensure that the two Gradle containers have independent Home directories and Project cache directories.
+    ## Do ensure that the two Gradle containers have independent Intro directories and Project cache directories.
     ztor-build-once:
         extends:
             service: gradle-base
@@ -128,7 +128,7 @@ services:
         command: ztor:buildFatJar --no-daemon
 
     ## Recompiles on source code changes.
-    ## Do ensure that the two Gradle containers have independent Home directories and Project cache directories.
+    ## Do ensure that the two Gradle containers have independent Intro directories and Project cache directories.
     ztor-build:
         extends:
             service: gradle-base
@@ -137,7 +137,7 @@ services:
         command: ztor:classes
 
     ## Runs Ktor web server and reloads classes if the compiled .class file changes.
-    ## Do ensure that the two Gradle containers have independent Home directories and Project cache directories.
+    ## Do ensure that the two Gradle containers have independent Intro directories and Project cache directories.
     ztor-run:
         extends:
             service: ztor-gradle-with-db

frontend/src/App.test.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from '@testing-library/react'
 import React from 'react'
-import App from './App'
+import {App} from './App'
 
 test('renders learn react link', () => {
     render(<App/>)

frontend/src/App.tsx

@@ -1,54 +1,12 @@
-import 'leaflet/dist/leaflet.css'
-import React, {createElement as h, useState} from 'react'
-import './App.css'
-import {AggregatedAreaData} from './components/aggregated-area-data'
-import {AnyLogic} from './components/any-logic'
-import {BuurtPicker} from './components/buurt-picker'
-import {MainMap} from './components/main-map'
-import {PandDataDisplay} from './components/pand-display'
-import {useApp} from './services/appState'
-import {assertDefined} from './services/util'
-import {Buurt} from './services/wijkenbuurten/buurten'
-import {ZeroLayout} from "./components/zero-layout"
-
-function App() {
-    const appHook = useApp()
-    const {setGeometry, getPandData, bag2dPanden} = appHook
-
-    const [currentPandId, setCurrentPandId] = useState('')
-
-    const [buurt, setBuurt] = useState<Buurt | undefined>()
+import React, {FunctionComponent} from 'react'
+import {ZeroHeader} from "./components/zero-header";
+import {Outlet} from "react-router-dom";
 
+export const App: FunctionComponent = () => {
     return (
-        <ZeroLayout subtitle="Simuleer je buurt">
-            {/* Three-column layout*/}
-            <div style={{display: "flex"}}>
-                <div style={{width: '20rem', padding: '1rem', paddingTop: '5rem'}}>
-                    {h(AggregatedAreaData, {appHook: appHook})}
-                    <BuurtPicker onSelectBuurt={buurt => {
-                        setBuurt(buurt)
-                        setGeometry(buurt.geometry)
-                    }}/>
-                </div>
-                <div style={{
-                    height: '100vh',
-                    flexGrow: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                }}>
-                    <MainMap bag2dPanden={bag2dPanden}
-                             setGeometry={setGeometry}
-                             setCurrentPandId={setCurrentPandId}
-                             buurt={buurt} />
-                    <AnyLogic appHook={appHook}/>
-                </div>
-                <div style={{width: '20rem', padding: '1rem'}}>
-                    {currentPandId && getPandData(currentPandId) &&
-                        <PandDataDisplay pandData={assertDefined(getPandData(currentPandId))}/>}
-                </div>
-            </div>
-        </ZeroLayout>
-    )
-}
-
-export default App
+        <>
+            <ZeroHeader />
+            <Outlet />
+        </>
+    );
+};

frontend/src/admin/admin.tsx → frontend/src/admin/surveys.tsx

@@ -16,7 +16,7 @@ import {ZeroLayout} from "../components/zero-layout"
 import {AdminButtonRow} from "./admin-button-row"
 import {SurveyIncludeInSimulationCheckbox} from "./survey-include-in-simulation-checkbox"
 
-export const Admin: FunctionComponent = () => {
+export const Surveys: FunctionComponent = () => {
     const {loading, surveys, changeSurvey, removeSurvey} = useSurveys()
 
     const multipleProjects = surveys.map(survey => survey.zenmoProject)

frontend/src/components/home.tsx → frontend/src/components/intro.tsx

@@ -2,7 +2,7 @@ import {FunctionComponent} from "react"
 import {ZeroLayout} from "./zero-layout"
 import {Link} from "react-router-dom"
 
-export const Home: FunctionComponent = () => (
+export const Intro: FunctionComponent = () => (
     <ZeroLayout>
         <div style={{margin: "0 auto", maxWidth: "40rem"}}>
             <p>Welkom bij Zenmo Zero</p>

frontend/src/components/zero-header.tsx

@@ -1,16 +1,78 @@
-import React from "react";
+import React, {FunctionComponent, PropsWithChildren, useState} from "react"
+import {Button} from "primereact/button";
+import {Sidebar} from "primereact/sidebar";
+import {css} from "@emotion/react";
+import {To, useNavigate} from "react-router-dom";
 
-export const ZeroHeader = () => (
-    <h1 style={{
-        position: 'absolute',
-        left: 0,
-        padding: '.5em 1em',
-        margin: 0,
-    }}>
-        <img
-            src="https://zenmo.com/wp-content/uploads/elementor/thumbs/zenmo-logo-website-light-grey-square-o1piz2j6llwl7n0xd84ywkivuyf22xei68ewzwrvmc.png"
-            style={{height: '1em', verticalAlign: 'sub'}}/>
-        &nbsp;
-        Zenmo Zero
-    </h1>
-)
+const sidebarStyle = css({
+    width: '16rem',
+    backgroundColor: '#f5f5f5',
+    borderRight: '1px solid #ddd',
+});
+
+const buttonStyle = css({
+    display: 'block',
+    marginBottom: '3rem',
+    width: '100%',
+
+    textAlign: 'left',
+    padding: '0.5em 1em',
+    border: 'none',
+    borderBottom: '1px solid #ddd',
+    color: '#333',
+    background: '#f5f5f5',
+    transition: 'background-color 0.2s ease-in-out',
+    fontWeight: 'normal',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#ebebeb',
+        color: '#007ad9',
+    },
+});
+
+export const ZeroHeader: FunctionComponent<PropsWithChildren & {}> = () => {
+    const [visible, setVisible] = useState(false);
+    const navigate = useNavigate();
+
+    const loadContent = (navidateTo: To) => {
+        setVisible(false);
+        navigate(navidateTo)
+    }
+    return (
+        <div className="app-header">
+            <div className="header" css={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '1em 1em',
+                backgroundColor: '#f5f5f5',
+                boxShadow: '1px solid #ddd'
+            }}>
+                <Button icon="pi pi-bars" onClick={() => setVisible(true)}/>
+                <a href="https://zenmo.com">
+                    <img
+                        alt="Zenmo logo"
+                        src="https://zenmo.com/wp-content/uploads/elementor/thumbs/zenmo-logo-website-light-grey-square-o1piz2j6llwl7n0xd84ywkivuyf22xei68ewzwrvmc.png"
+                        style={{height: "1.5em", verticalAlign: "sub"}}/>
+                    &nbsp;
+                    <b>Zenmo Zero</b>
+                </a>
+            </div>
+
+            <Sidebar visible={visible} position="left" onHide={() => setVisible(false)} css={sidebarStyle}>
+                <a onClick={() => loadContent(`/`)} css={buttonStyle}>
+                    <i className="pi pi-fw pi-user" style={{marginRight: '0.5em'}}></i>
+                    Home
+                </a>
+                <a onClick={() => loadContent('/surveys')} css={buttonStyle}>
+                    <i className="pi pi-fw pi-file" style={{marginRight: '0.5em'}}></i>
+                    Surveys
+                </a>
+                <a onClick={() => loadContent('/simulation')} css={buttonStyle}>
+                    <i className="pi pi-fw pi-file" style={{marginRight: '0.5em'}}></i>
+                    Simulation
+                </a>
+            </Sidebar>
+        </div>
+    );
+};

frontend/src/components/zero-layout.tsx

@@ -29,4 +29,5 @@ export const ZeroLayout: FunctionComponent<PropsWithChildren & {
         </h3>}
         {children}
     </div>
-)
+)
+

frontend/src/index.tsx

@@ -1,106 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import {
-    createBrowserRouter,
-    RouterProvider,
-} from "react-router-dom";
 import './index.css'
-import {DE_WIEKEN, getProjectConfiguration, HESSENPOORT, ProjectName} from "./components/company-survey-v2/project"
-import {Survey, SurveyFromProject} from "./components/company-survey-v2/survey"
-import {ThankYou} from './components/thank-you'
 import reportWebVitals from './reportWebVitals'
-import App from "./App";
-import {LoginWidget} from "./user/login";
-import {BedrijvenFormV1} from "./components/bedrijven-form-v1";
-import {Admin} from "./admin/admin";
-import {
-    fetchSurveyById,
-    SurveyById,
-    SurveyByIdLoaderData,
-    SurveyByIdRouteData,
-} from "./components/company-survey-v2/survey-by-id"
-import {Home} from "./components/home"
-import {ExcelImport} from "./excel-import/excel-import"
-import {NewSurveyByProjectName} from "./components/company-survey-v2/new-survey-by-project-name"
-import {fetchBuurtcodesByProject} from "./panden-select/fetch-buurtcodes"
-import {assertDefined} from "./services/util"
-
-const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <Home />,
-    },
-    {
-        path: "/proof-of-concept",
-        element: <App />,
-    },
-    {
-        path: "/bedrijven-v1",
-        element: <BedrijvenFormV1 />
-    },
-    {
-        path: "/new-survey/:projectName",
-        element: <NewSurveyByProjectName />,
-        loader: async ({params: {projectName}, request}) => {
-            return getProjectConfiguration(assertDefined(projectName) as ProjectName)
-        }
-    },
-    {
-        path: "/bedrijven-hessenpoort",
-        element: <SurveyFromProject />,
-        loader: async () => getProjectConfiguration(HESSENPOORT.name)
-    },
-    {
-        path: "/bedrijven-de-wieken",
-        element: <SurveyFromProject />,
-        loader: async () => getProjectConfiguration(DE_WIEKEN.name)
-    },
-    {
-        path: "/bedrijven-uitvraag/:surveyId",
-        element: <SurveyById />,
-        loader: async ({params: {surveyId}, request}): Promise<SurveyByIdLoaderData> => {
-            if (!surveyId) {
-                throw new Error("Survey ID is required")
-            }
-            const url = new URL(request.url);
-            const deeplink = url.searchParams.get("deeplink");
-            const secret = url.searchParams.get("secret");
-
-            const survey = await fetchSurveyById({
-                surveyId,
-                deeplink,
-                secret,
-            })
-
-            const project = await getProjectConfiguration(survey.zenmoProject)
-
-            return {
-                survey,
-                project,
-            }
-        }
-    },
-    {
-        path: "/bedankt",
-        element: <ThankYou />,
-    },
-    {
-        path: "/admin",
-        element: <Admin />,
-    },
-    {
-        path: "/admin/import-excel",
-        element: <ExcelImport />
-    },
-    {
-        path: "/login",
-        element: <LoginWidget />
-    }
-]);
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
 
 const root = ReactDOM.createRoot(
-    //@ts-ignore
-    document.getElementById('react-root'),
+    document.getElementById('react-root') as HTMLElement,
 )
 root.render(
     <React.StrictMode>