Add: Modal zur Anzeige von Versionsinformationen hinzugefügt

- Ein neues Modal (Popup) hinzugefügt, das erscheint, wenn auf das Informations-Icon geklickt wird.
- Das Modal zeigt detaillierte Informationen zur Version 0.5.6 der TALAS.Map-Anwendung an.
- Verwendet Tailwind CSS für das Styling des Modals und der enthaltenen Elemente.
- Ein Schließen-Button hinzugefügt, um das Modal zu schließen.
- Verbesserte Lesbarkeit durch angepasste Zeilenabstände und ein zentriertes Layout.

Details:
- InformationCircleIcon von Heroicons verwendet, um das Informations-Icon darzustellen.
- Beim Klick auf das Icon öffnet sich das Modal und zeigt die Firmenadresse und Kontaktinformationen an.
- Die Bildgröße und Position im Modal wurde angepasst, um ein ansprechendes Layout zu gewährleisten.
- Textformatierungen wie Fettdruck und Abstände wurden für eine bessere Lesbarkeit angewendet.

Hinweis:
- Die Komponente wurde so gestaltet, dass sie leicht erweitert und an zukünftige Anforderungen angepasst werden kann.

components/MapComponent.js

@@ -19,6 +19,7 @@ import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
 import { poiTypState } from "../store/atoms/poiTypState.js";
 import ShowAddStationPopup from "./ShowAddStationPopup";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
+import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
 
 //import { createRoot } from "react-dom/client";
 
@@ -31,6 +32,7 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+  const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
   const zoomTrigger = useRecoilValue(zoomTriggerState);
   const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
   const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
@@ -98,6 +100,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
   const mapDataIconUrl = config.mapDataIconUrl;
 
+  const openVersionInfoModal = () => {
+    setShowVersionInfoModal(true);
+  };
+
+  const closeVersionInfoModal = () => {
+    setShowVersionInfoModal(false);
+  };
   // Funktion zum Aktualisieren der Position in der Datenbank
   const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
     const response = await fetch("/api/updateLocation", {
@@ -1677,6 +1686,67 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         className="z-0"
         style={{ height: "100vh", width: "100vw" }}
       ></div>
+
+      <div className="absolute bottom-5 left-24 w-72 p-4 bg-white rounded-lg shadow-md z-50">
+        <div className="flex justify-between items-center">
+          <div>
+            <span className="text-black text-lg font-bold">
+              TALAS.Map
+              <br />
+              Version 0.5.6
+            </span>
+          </div>
+          <div>
+            <button onClick={openVersionInfoModal}>
+              <InformationCircleIcon
+                className="text-blue-900 h-8 w-8 pr-1"
+                title="Weitere Infos"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      {showVersionInfoModal && (
+        <div className="fixed inset-0 flex items-center justify-center z-50">
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50"
+            onClick={closeVersionInfoModal}
+          ></div>
+          <div className="bg-white p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
+            <img
+              src="img/Logo_TALAS.png"
+              alt="TALAS V5 Logo"
+              className="w-1/2 mx-auto my-4"
+            />
+            <div className="bg-white border p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
+              <h2 className="text-xl font-bold mb-6 text-start leading-tight">
+                Littwin Systemtechnik GmbH & Co. KG
+              </h2>
+              <h4 className="text-lg font-bold mb-2 text-start leading-tight">
+                Bürgermeister-Brötje Str. 28
+              </h4>
+              <h4 className="text-lg font-bold mb-2 text-start leading-tight">
+                D-26180 Rastede
+              </h4>
+              <h5 className="text-md mb-2 text-start leading-snug">
+                T: +49 4402 9725 77-0
+              </h5>
+              <h5 className="text-md mb-2 text-start leading-snug">
+                E: kontakt@littwin-systemtechnik.de
+              </h5>
+            </div>
+            <p className="text-gray-700 text-center font-bold mt-4 leading-relaxed">
+              TALAS.Map Version 0.5.6
+            </p>
+            <button
+              onClick={closeVersionInfoModal}
+              className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 mx-auto block"
+            >
+              Schließen
+            </button>
+          </div>
+        </div>
+      )}
     </>
   );
 };

package-lock.json

@@ -1,10 +1,11 @@
 {
-  "name": "OpenStreetMapProject-02.05.2024",
+  "name": "OpenStreetMapProject-08.05.2024",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "dependencies": {
+        "@heroicons/react": "^2.1.3",
         "http-proxy-middleware": "^3.0.0",
         "leaflet": "^1.9.4",
         "leaflet-contextmenu": "^1.4.0",
@@ -40,6 +41,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz",
+      "integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "http-proxy-middleware": "^3.0.0",
     "leaflet": "^1.9.4",
     "leaflet-contextmenu": "^1.4.0",