Anlegen der Startseite (#13)

Co-authored-by: Thomas Schley <thomas.schley@lmis.de>
vitrum-connect · Dec 6, 2024 · f5f9f06 · f5f9f06
1 parent 624cded
commit f5f9f06
Show file tree

Hide file tree

Showing 14 changed files with 316 additions and 5 deletions.
diff --git a/app/app.css b/app/app.css
@@ -12,3 +12,7 @@ p {
   margin-block-start: 0;
   margin-block-end: 0;
 }
+
+h1 {
+  margin-block-start: 0;
+}
diff --git a/app/components/Breadcrumbs.module.css b/app/components/Breadcrumbs.module.css
@@ -0,0 +1,18 @@
+.breadcrumbs {
+    background-color: #41485A;
+    display: flex;
+    padding: 10px min(4vh, 2vw);
+    a {
+        color: white;
+        font-size: large;
+        text-decoration: none;
+        & + &:before {
+            content: '>';
+            font-weight: normal;
+            margin: 0 15px;
+        }
+        &.active {
+            font-weight: bold;
+        }
+    }
+}
diff --git a/app/components/Breadcrumbs.tsx b/app/components/Breadcrumbs.tsx
@@ -0,0 +1,31 @@
+import {NavLink, useLocation} from 'react-router';
+import styles from './Breadcrumbs.module.css';
+
+const routeLabels: { [key: string]: string } = {
+    impressum: 'Impressum'
+};
+
+function Breadcrumbs() {
+    const location = useLocation();
+    const pathnames = location.pathname.split('/').filter((x) => x);
+    return (
+        <nav aria-label="breadcrumb" className={styles.breadcrumbs}>
+            <NavLink
+                to="/"
+                className={({ isActive }) => (isActive ? styles.active : undefined)}>
+                Startseite
+            </NavLink>
+            {pathnames.map((pathname, index) => {
+                const to = `/${pathnames.slice(0, index + 1).join('/')}`;
+                const label: string = routeLabels[pathname] || pathname;
+                return <NavLink
+                    to={to}
+                    className={({ isActive }) => (isActive ? styles.active : undefined)}>
+                    {decodeURIComponent(label)}
+                </NavLink>;
+            })}
+        </nav>
+    );
+}
+
+export default Breadcrumbs;
diff --git a/app/components/Footer.module.css b/app/components/Footer.module.css
@@ -4,7 +4,7 @@
     justify-content: center;
     gap: 40px;
     list-style: none;
-    padding: 20px 40px;
+    padding: 20px min(4vh, 2vw);
     a {
         color: white;
         font-size: x-large;

diff --git a/app/components/Header.module.css b/app/components/Header.module.css
@@ -2,7 +2,7 @@
     background-color: #0E172D;
     color: white;
     font-size: xxx-large;
-    padding: 20px 40px;
+    padding: 20px min(4vh, 2vw);
     text-align: center;
     text-decoration: none;
 }
diff --git a/app/components/OpenLayers.module.css b/app/components/OpenLayers.module.css
@@ -0,0 +1,4 @@
+.map {
+    height: 100%;
+    width: 100%;
+}
diff --git a/app/components/OpenLayers.tsx b/app/components/OpenLayers.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+
+import TileLayer from 'ol/layer/Tile';
+import { OSM } from 'ol/source';
+import { Map, View } from 'ol';
+
+import 'ol/ol.css';
+import styles from './OpenLayers.module.css';
+
+interface Props {
+    id: string
+}
+
+function OpenLayers({ id }: Props) {
+    useEffect(() => {
+        const osmLayer = new TileLayer({
+            preload: Infinity,
+            source: new OSM(),
+        })
+
+        const map = new Map({
+            target: id,
+            layers: [ osmLayer ],
+            view: new View({
+                center: [0, 0],
+                zoom: 0,
+            }),
+        });
+        return () => map.setTarget(undefined)
+    });
+
+    return <div id={id} className={styles.map}></div>;
+}
+
+export default OpenLayers;
diff --git a/app/root.module.css b/app/root.module.css
@@ -5,7 +5,7 @@
 }
 
 .content {
-    padding: 40px;
+    padding: min(4vh, 2vw);
     flex-grow: 1;
     overflow-y: auto;
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -10,8 +10,9 @@ import {
 
 import stylesheet from './app.css?url';
 import React from 'react';
-import Header from './components/Header';
+import Breadcrumbs from './components/Breadcrumbs';
 import Footer from './components/Footer';
+import Header from './components/Header';
 import styles from './root.module.css';
 
 export const links: LinksFunction = () => [
@@ -31,6 +32,7 @@ export function Layout({children}: { children: React.ReactNode }) {
         <body>
         <div className={styles.container}>
             <Header/>
+            <Breadcrumbs/>
             <div className={styles.content}>{children}</div>
             <Footer/>
         </div>

diff --git a/app/routes.ts b/app/routes.ts
@@ -1,5 +1,6 @@
-import {route, RouteConfig} from '@react-router/dev/routes';
+import {index, route, RouteConfig} from '@react-router/dev/routes';
 
 export default [
+    index('./routes/Home.tsx'),
     route('impressum', './routes/Impressum.tsx')
 ] satisfies RouteConfig;
diff --git a/app/routes/Home.module.css b/app/routes/Home.module.css
@@ -0,0 +1,16 @@
+.container {
+    display: flex;
+    @media only screen and (max-width: 767px) {
+        flex-wrap: wrap;
+    }
+    height: 100%;
+    .filter, .map {
+        width: 50%;
+        @media only screen and (max-width: 767px) {
+            width: 100%;
+        }
+    }
+    .filter {
+        padding-right: 10px;
+    }
+}
diff --git a/app/routes/Home.tsx b/app/routes/Home.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './Home.module.css';
+import OpenLayers from '../components/OpenLayers';
+
+function Home() {
+  return (
+      <div className={styles.container}>
+        <div className={styles.filter}>
+          <p>Placeholder for filters</p>
+        </div>
+        <div className={styles.map}>
+          <OpenLayers id="geo_server" />
+        </div>
+      </div>
+  );
+}
+
+export default Home;