158 UI users

compose.yaml

@@ -133,6 +133,7 @@ services:
         command: ztor:run
         ports:
             - 127.0.0.1:8082:8082
+            - 127.0.0.1:5005:5005
         environment:
             BASE_URL: http://localhost:8082
             CORS_ALLOW_ORIGIN_PATTERN: 'http://localhost:\d{2,5}'

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 './Simulation'
 
 test('renders learn react link', () => {
     render(<App/>)

frontend/src/App.tsx

@@ -1,54 +1,13 @@
-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";
+import {Dashboard} from "./components/dashboard";
 
+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/Router/router.tsx

@@ -0,0 +1,82 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import {Users} from "../admin/users";
+import {Projects} from "../admin/projects";
+import {Surveys} from "../admin/surveys";
+
+import {ThankYou} from '../components/thank-you'
+import {LoginWidget} from "../user/login";
+import {BedrijvenFormV1} from "../components/bedrijven-form-v1";
+import Simulation from "../Simulation";
+
+import {Survey} from '../components/company-survey-v2/survey'
+import {Intro} from "../components/intro";
+import {SurveyById, SurveyByIdRouteData} from "../components/company-survey-v2/survey-by-id";
+import {ExcelImport} from "../excel-import/excel-import"
+import {NewSurveyByProjectName} from "../components/company-survey-v2/new-survey-by-project-name"
+import {DE_WIEKEN, HESSENPOORT} from '../components/company-survey-v2/project'
+import {Dashboard} from "../components/dashboard";
+import {App} from "../App";
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <App />,
+        children: [
+            {path: "", element: <Dashboard />},
+            {path: "/users", element: <Users />},
+            {path: "/projects", element: <Projects />},
+            {path: "/surveys", element: <Surveys />},
+            {path: "/simulation", element: <Simulation />},
+            {path: "/intro", element: <Intro />},
+        ],
+    },
+    {
+        path: "/bedrijven-v1",
+        element: <BedrijvenFormV1 />
+    },
+    {
+        path: "/new-survey/:projectName",
+        element: <NewSurveyByProjectName />,
+    },
+    {
+        path: "/bedrijven-hessenpoort",
+        element: <Survey project={HESSENPOORT} />,
+    },
+    {
+        path: "/bedrijven-de-wieken",
+        element: <Survey project={DE_WIEKEN} />,
+    },
+    {
+        path: "/bedrijven-uitvraag/:surveyId",
+        element: <SurveyById />,
+        loader: ({params: {surveyId}, request}): SurveyByIdRouteData => {
+            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");
+
+            return {
+                surveyId,
+                deeplink,
+                secret,
+            }
+        }
+    },
+    {
+        path: "/bedankt",
+        element: <ThankYou />,
+    },
+    {
+        path: "/admin/import-excel",
+        element: <ExcelImport />
+    },
+
+    {
+        path: "/login",
+        element: <LoginWidget />
+    }
+]);
+

frontend/src/Simulation.tsx

@@ -0,0 +1,55 @@
+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 Simulation() {
+    const appHook = useApp()
+    const {setGeometry, getPandData, bag2dPanden} = appHook
+
+    const [currentPandId, setCurrentPandId] = useState('')
+
+    const [buurt, setBuurt] = useState<Buurt | undefined>()
+
+    return (
+        <>
+            <h3 style={{padding: "0 1em 1em 5rem", margin: 0 }}>Simuleer je buurt</h3>
+            {/* 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>
+        </>
+    )
+}
+
+export default Simulation

frontend/src/admin/projects.tsx

@@ -0,0 +1,59 @@
+import React, {FunctionComponent} from "react";
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import {useProjects} from "./use-projects";
+import {PrimeReactProvider} from "primereact/api";
+import {Project} from "zero-zummon"
+
+import "primereact/resources/themes/lara-light-cyan/theme.css"
+import 'primeicons/primeicons.css'
+import {DeleteButton} from "./delete-button";
+import {EditButton} from "./edit-button";
+import {Button} from "primereact/button";
+import {useNavigate} from "react-router-dom"
+
+export const Projects: FunctionComponent = () => {
+    const {loadingProjects, projects, changeProject, removeProject} = useProjects()
+    const navigate = useNavigate();
+
+    return (
+        <PrimeReactProvider>
+            <div css={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '1em 1em',
+                boxShadow: '1px solid #ddd'
+            }}>
+                <h3>Projects List</h3>
+                <Button
+                    label="Nieuw"
+                    icon="pi pi-pencil"
+                    onClick={(event) => navigate(`/simulation`)}
+                />
+            </div>
+            <DataTable
+                value={projects}
+                loading={loadingProjects}
+                sortField="created"
+                sortOrder={-1}
+                filterDisplay="row"
+            >
+                <Column field="name" header="Name" sortable filter/>
+                <Column field="energiekeRegioId" header="Energie Regio Id" sortable filter/>
+
+                <Column body={(project: Project) => (
+                    <div css={{
+                        display: 'flex',
+                        '> *': {
+                            margin: `${1 / 6}rem`
+                        },
+                    }}>
+                        <DeleteButton surveyId={project.id} onDelete={removeProject}/>
+                        <EditButton surveyId={project.id}/>
+                    </div>
+                )}/>
+            </DataTable>
+        </PrimeReactProvider>
+    )
+}