From e3005cd2fd9fb6a58e50c0e48fac6e984084f6f1 Mon Sep 17 00:00:00 2001
From: THS-LMIS <91137979+THS-LMIS@users.noreply.github.com>
Date: Mon, 16 Dec 2024 08:36:41 +0100
Subject: [PATCH] =?UTF-8?q?Hinzuf=C3=BCgen=20von=20Funktionalit=C3=A4ten?=
 =?UTF-8?q?=20der=20Kartendarstellung=20auf=20der=20Startseite=20(#14)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Thomas Schley <thomas.schley@lmis.de>
---
 .env.example                          |   1 +
 .github/Dockerfile                    |   2 +
 .gitignore                            |   1 +
 README.md                             |  10 +-
 app/components/Breadcrumbs.module.css |  16 +--
 app/components/Breadcrumbs.tsx        |   8 +-
 app/components/OpenLayers.tsx         | 186 ++++++++++++++++++++++++--
 app/services/fiwareService.tsx        |  39 ++++++
 package-lock.json                     |  92 +++++++++++++
 package.json                          |   2 +
 public/index.html                     |  12 --
 tsconfig.json                         |   5 +-
 vite.config.ts                        |  23 +++-
 13 files changed, 353 insertions(+), 44 deletions(-)
 create mode 100644 .env.example
 create mode 100644 app/services/fiwareService.tsx
 delete mode 100644 public/index.html

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..2e86b48
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+VITE_FIWARE_SERVER_BASE_URL=
\ No newline at end of file
diff --git a/.github/Dockerfile b/.github/Dockerfile
index 831d131..b7a4411 100644
--- a/.github/Dockerfile
+++ b/.github/Dockerfile
@@ -8,6 +8,8 @@ ADD . /app/
 WORKDIR /app
 
 # install app
+ARG VITE_FIWARE_SERVER_BASE_URL=localhost
+ENV VITE_FIWARE_SERVER_BASE_URL=$VITE_FIWARE_SERVER_BASE_URL
 RUN npm install && npm run build
 
 # expose web port
diff --git a/.gitignore b/.gitignore
index 4786736..70415cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/README.md b/README.md
index d490839..42a5a6c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,11 @@
 # Getting Started with 5GLa Visualization
 
+## Create .env
+
+Rename/copy `.env.example` to `.env` and change the `.env` with your configuration. 
+
+## Scripts
+
 In the project directory, you can run:
 
 ### `npm run dev`
@@ -26,8 +32,8 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 ## Run with Docker
 
 ```shell
-docker build -f ./.github/Dockerfile -t 5gla-react-visualization .
-docker run --name 5gla-react-visualization -p 3000:3000  5gla-react-visualization
+docker build --build-arg VITE_FIWARE_SERVER_BASE_URL=<url of Fiware server> -f ./.github/Dockerfile -t 5gla-react-visualization .
+docker run --name 5gla-react-visualization -p 3000:3000 5gla-react-visualization
 ```
 
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 
\ No newline at end of file
diff --git a/app/components/Breadcrumbs.module.css b/app/components/Breadcrumbs.module.css
index 56a4286..c810c07 100644
--- a/app/components/Breadcrumbs.module.css
+++ b/app/components/Breadcrumbs.module.css
@@ -6,13 +6,13 @@
         color: white;
         font-size: large;
         text-decoration: none;
-        & + &:before {
-            content: '>';
-            font-weight: normal;
-            margin: 0 15px;
-        }
-        &.active {
-            font-weight: bold;
-        }
+    }
+    a + a:before {
+        content: '>';
+        font-weight: normal;
+        margin: 0 15px;
+    }
+    a.active {
+        font-weight: bold;
     }
 }
\ No newline at end of file
diff --git a/app/components/Breadcrumbs.tsx b/app/components/Breadcrumbs.tsx
index f9e5b56..5e07a65 100644
--- a/app/components/Breadcrumbs.tsx
+++ b/app/components/Breadcrumbs.tsx
@@ -12,7 +12,9 @@ function Breadcrumbs() {
         <nav aria-label="breadcrumb" className={styles.breadcrumbs}>
             <NavLink
                 to="/"
-                className={({ isActive }) => (isActive ? styles.active : undefined)}>
+                className={({ isActive }) => (isActive ? styles.active : undefined)}
+                key="home"
+            >
                 Startseite
             </NavLink>
             {pathnames.map((pathname, index) => {
@@ -20,7 +22,9 @@ function Breadcrumbs() {
                 const label: string = routeLabels[pathname] || pathname;
                 return <NavLink
                     to={to}
-                    className={({ isActive }) => (isActive ? styles.active : undefined)}>
+                    className={({ isActive }) => (isActive ? styles.active : undefined)}
+                    key={pathname}
+                >
                     {decodeURIComponent(label)}
                 </NavLink>;
             })}
diff --git a/app/components/OpenLayers.tsx b/app/components/OpenLayers.tsx
index ae14108..180edad 100644
--- a/app/components/OpenLayers.tsx
+++ b/app/components/OpenLayers.tsx
@@ -1,31 +1,199 @@
-import React, { useEffect } from 'react';
+import React, {useEffect} from 'react';
 
+import {Feature, Map, View} from 'ol';
+import {Coordinate} from 'ol/coordinate';
+import {Extent} from "ol/extent";
+import {Point, Polygon} from 'ol/geom';
 import TileLayer from 'ol/layer/Tile';
-import { OSM } from 'ol/source';
-import { Map, View } from 'ol';
+import VectorLayer from "ol/layer/Vector";
+import {fromLonLat} from 'ol/proj';
+import {OSM} from 'ol/source';
+import VectorSource from 'ol/source/Vector';
+import {Fill, Stroke, Style} from 'ol/style';
 
 import 'ol/ol.css';
 import styles from './OpenLayers.module.css';
+import {getAgriCropPolygon, getAgvolutionSensorsLocations, getSentekSensorsLocations} from '../services/fiwareService';
 
 interface Props {
     id: string
 }
 
-function OpenLayers({ id }: Props) {
-    useEffect(() => {
-        const osmLayer = new TileLayer({
-            preload: Infinity,
-            source: new OSM(),
+interface SensorResponse {
+    id: string,
+    type: string,
+    location: {
+        type: string,
+        coordinates: Coordinate
+    } | null
+}
+
+interface Sensor {
+    id: string,
+    type: string,
+    coordinates: Coordinate
+}
+
+interface AgriCropResponse {
+    id: string,
+    type: string,
+    location: {
+        type: string,
+        coordinates: Coordinate[]
+    }
+}
+
+interface AgriCrop {
+    id: string,
+    coordinates: Coordinate[]
+}
+
+function removeSensorByIdAndType(sensors: Sensor[], id: string, type: string) {
+    const index: number = sensors
+        .findIndex((sensor: Sensor): boolean => sensor.id === id && sensor.type === type);
+    if (index >= 0) {
+        delete sensors[index];
+    }
+}
+
+function removeAgriCropById(agriCrops: AgriCrop[], id: string) {
+    const index: number = agriCrops.findIndex((agriCrop: AgriCrop) => agriCrop.id === id);
+    if (index > 0) {
+        delete agriCrops[index];
+    }
+}
+
+function updateSensors(map: Map, vectorSource: VectorSource<Feature<Point>>, sensors: Sensor[]) {
+    const features: Feature<Point>[] = [];
+    sensors.map((sensor: Sensor) => {
+        features.push(new Feature({ geometry: new Point(fromLonLat(sensor.coordinates)) }));
+    });
+    vectorSource.clear();
+    vectorSource.addFeatures(features);
+}
+
+function updateAgriCrops(map: Map, vectorSource: VectorSource<Feature<Polygon>>, agriCrops: AgriCrop[]) {
+    const features: Feature<Polygon>[] = [];
+    agriCrops.map((agriCrop: AgriCrop) => {
+        const lonLatCoordinates: Coordinate[] = [];
+        agriCrop.coordinates.map((coordinate) => {
+            lonLatCoordinates.push(fromLonLat(coordinate));
         })
+        const polygonFeature = new Feature({ geometry: new Polygon([lonLatCoordinates]) });
+        polygonFeature.setStyle(style);
+        features.push(polygonFeature);
+    });
+    vectorSource.clear();
+    vectorSource.addFeatures(features);
+    fitMap(map, vectorSource.getExtent());
+}
+
+function fitMap(map: Map, extent: Extent | undefined) {
+    if (extent && extent.length === 4 && extent.every((element: number): boolean => isFinite(element))) {
+        map.getView().fit(extent, { padding: [50, 50, 50, 50] });
+    }
+}
+
+function handleSensorsResponse(_sensors: SensorResponse[], map: Map, vectorSource: VectorSource<Feature<Point>>, sensors: Sensor[]) {
+    if (Array.isArray(_sensors)) {
+        _sensors.map((_sensor: SensorResponse) => {
+            removeSensorByIdAndType(sensors, _sensor.id, _sensor.type);
+            if (_sensor.location !== null) {
+                sensors.push({
+                    id: _sensor.id,
+                    type: _sensor.type,
+                    coordinates: _sensor.location.coordinates
+                });
+            }
+            updateSensors(map, vectorSource, sensors);
+        });
+    }
+}
+
+function handleAgriCropResponse(_agriCrops: AgriCropResponse[], map: Map, vectorSource: VectorSource<Feature<Polygon>>, agriCrops: AgriCrop[]) {
+    if (Array.isArray(_agriCrops)) {
+        _agriCrops.map((_agriCrop: AgriCropResponse) => {
+            removeAgriCropById(agriCrops, _agriCrop.id)
+            agriCrops.push({
+                id: _agriCrop.id,
+                coordinates: _agriCrop.location.coordinates
+            });
+        });
+        updateAgriCrops(map, vectorSource, agriCrops);
+    }
+}
+
+const style = new Style({
+    fill: new Fill({
+        color: 'rgba(0, 128, 255, 0.4)',
+    }),
+    stroke: new Stroke({
+        color: 'blue',
+        width: 2,
+    }),
+});
+
+function OpenLayers({ id }: Props) {
 
+    const osmLayer = new TileLayer({
+        preload: Infinity,
+        source: new OSM(),
+    });
+
+    const pointFeatures: Feature<Point>[] = [];
+    const polygonFeatures: Feature<Polygon>[] = [];
+    const sensors: Sensor[] = [];
+    const agriCrops: AgriCrop[] = [];
+
+    const pointVectorSource = new VectorSource({ features: pointFeatures });
+    const polygonVectorSource = new VectorSource({ features: polygonFeatures });
+
+    const pointVectorLayer = new VectorLayer({ source: pointVectorSource });
+    const polygonVectorLayer = new VectorLayer({ source: polygonVectorSource });
+
+    useEffect(() => {
         const map = new Map({
             target: id,
-            layers: [ osmLayer ],
+            layers: [ osmLayer, polygonVectorLayer, pointVectorLayer ],
             view: new View({
                 center: [0, 0],
                 zoom: 0,
             }),
         });
+
+        getAgvolutionSensorsLocations()
+            .then((response) => handleSensorsResponse(
+                response.data,
+                map,
+                pointVectorSource,
+                sensors
+            ))
+            .catch((error) => {
+                console.debug(error);
+            });
+
+        getSentekSensorsLocations()
+            .then((response) => handleSensorsResponse(
+                response.data,
+                map,
+                pointVectorSource,
+                sensors
+            ))
+            .catch((error) => {
+                console.debug(error);
+            });
+
+        getAgriCropPolygon()
+            .then((response) => handleAgriCropResponse(
+                response.data,
+                map,
+                polygonVectorSource,
+                agriCrops
+            ))
+            .catch((error) => {
+                console.debug(error);
+            });
+
         return () => map.setTarget(undefined)
     });
 
diff --git a/app/services/fiwareService.tsx b/app/services/fiwareService.tsx
new file mode 100644
index 0000000..10def8b
--- /dev/null
+++ b/app/services/fiwareService.tsx
@@ -0,0 +1,39 @@
+import axios, {AxiosInstance} from 'axios';
+
+const baseUrlFiwareServer: string = process.env.NODE_ENV === 'development' ? 'http://localhost:5173' : import.meta.env.VITE_FIWARE_SERVER_BASE_URL;
+const entitiesApiUrlFiwareServer: string = baseUrlFiwareServer + '/v2/entities/';
+
+function getRequestInstanceFromFiwareServer(): AxiosInstance {
+    return axios.create({
+        baseURL: entitiesApiUrlFiwareServer,
+        headers: { 'fiware-service': 'dev' }
+    });
+}
+
+function getRequestFromFiwareServer(params = {}, headers = {}) {
+    return getRequestInstanceFromFiwareServer().get(entitiesApiUrlFiwareServer, { headers: headers, params: params });
+}
+
+export function getAgvolutionSensorsLocations() {
+    return getRequestFromFiwareServer({
+        type: 'AgvolutionSensor',
+        attrs: 'location',
+        options: 'keyValues'
+    });
+}
+
+export function getSentekSensorsLocations() {
+    return getRequestFromFiwareServer({
+        type: 'SentekSensor',
+        attrs: 'location',
+        options: 'keyValues'
+    });
+}
+
+export function getAgriCropPolygon() {
+    return getRequestFromFiwareServer({
+        type: 'AgriCrop',
+        attrs: 'location',
+        options: 'keyValues'
+    });
+}
diff --git a/package-lock.json b/package-lock.json
index 93df5d6..b164287 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,8 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.9",
+        "dotenv": "^16.4.7",
         "isbot": "^5",
         "ol": "^10.2.1",
         "react": "^18.3.1",
@@ -1804,6 +1806,12 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1857,6 +1865,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-dead-code-elimination": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/babel-dead-code-elimination/-/babel-dead-code-elimination-1.0.6.tgz",
@@ -2130,6 +2149,18 @@
       "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -2407,6 +2438,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -2451,6 +2491,18 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "license": "MIT"
     },
+    "node_modules/dotenv": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -2758,6 +2810,26 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2784,6 +2856,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -4245,6 +4331,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/pump": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
diff --git a/package.json b/package.json
index bba0a68..1d1fbee 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.9",
+    "dotenv": "^16.4.7",
     "isbot": "^5",
     "ol": "^10.2.1",
     "react": "^18.3.1",
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 923ce90..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>5GLa Visualization</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
diff --git a/tsconfig.json b/tsconfig.json
index 340536c..40a5022 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,10 +21,7 @@
     "jsx": "react-jsx",
     "types": [ "node", "vite/client" ],
     "rootDirs": [ ".", "./.react-router/types" ],
-    "baseUrl": ".",
-    "paths": {
-      "~/*": [ "./app/*" ]
-    },
+    "baseUrl": "./app",
   },
   "include": [
     "**/*",
diff --git a/vite.config.ts b/vite.config.ts
index 78ece28..8069672 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,12 +1,21 @@
 import {reactRouter} from '@react-router/dev/vite';
 import autoprefixer from 'autoprefixer';
-import {defineConfig} from 'vite';
+import {ConfigEnv, defineConfig, loadEnv, UserConfig} from 'vite';
 
-export default defineConfig({
-    css: {
-        postcss: {
-            plugins: [autoprefixer]
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
+    const env = loadEnv(mode, process.cwd());
+
+    return {
+        css: {
+            postcss: {
+                plugins: [autoprefixer]
+            }
+        },
+        plugins: [reactRouter()],
+        server: {
+            proxy: {
+                '/v2/entities': env.VITE_FIWARE_SERVER_BASE_URL
+            }
         }
-    },
-    plugins: [reactRouter()]
+    }
 });
\ No newline at end of file