refactor: API-Port-Variable entfernt, dynamische Port-Nutzung eingeführt

- NEXT_PUBLIC_API_PORT_3000 entfernt
- API-Aufrufe basieren jetzt auf window.location.hostname:3000
- kein Rebuild mehr bei IP-Änderung nötig
- .env.local aufgeräumt
- CHANGELOG.md auf 1.1.68 aktualisiert

.env.local

@@ -15,4 +15,4 @@ NEXT_PUBLIC_DEBUG_LOG=true
 # für Polylines/kabelstecken -> in Konextmenü "Station öffnen" "
 NEXT_PUBLIC_BASE_URL=http://10.10.0.70/talas5/devices/
 NEXT_PUBLIC_API_BASE_URL=http://10.10.0.70/talas5/ClientData/WebServiceMap.asmx
-NEXT_PUBLIC_API_PORT_3000=http://10.10.0.70:3000
+

CHANGELOG.md

@@ -4,6 +4,19 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.68] – 2025-05-15
+
+### Changed
+
+- Verweis auf `NEXT_PUBLIC_API_PORT_3000` entfernt
+- API-URL wird nun dynamisch per `window.location.hostname:3000` gesetzt
+- `.env.local` bereinigt: keine API-URL mehr nötig
+- Betroffene Dateien:
+  - `useFetchPoiData.js`
+  - `poiTypesSlice.js`
+
+---
+
 ## [1.1.65] – 2025-05-15
 
 ### Changed

components/mainComponent/hooks/useFetchPoiData.js

@@ -1,7 +1,7 @@
 // /components/mainComponent/hooks/useFetchWebServiceMap.js
 import { useEffect, useState } from "react";
 
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_PORT_3000; // API-URL aus .env.local
+const API_BASE_URL = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:3000` : "";
 
 const useFetchPoiData = (setPoiTypMap, setPoiData) => {
   useEffect(() => {

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.68";
+export const APP_VERSION = "1.1.69";

docs/frontend/hooks/useFetchPoiData.md

@@ -0,0 +1,44 @@
+# 📍 useFetchPoiData – Laden von POI-Typen und Icons
+
+## Zweck
+
+Dieser React-Hook wird im Frontend verwendet, um:
+
+1. Alle POI-Typen (`poiTyp/readPoiTyp`)
+2. Alle POI-Icons (`pois/poi-icons`)
+
+vom Server abzurufen und sie in lokale React-Komponenten zu laden.
+
+---
+
+## Aufrufstruktur
+
+```js
+const API_BASE_URL = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:3000` : "";
+
+await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
+await fetch(`${API_BASE_URL}/api/talas_v5_DB/pois/poi-icons`);
+```
+
+---
+
+## Erklärung
+
+Da die Anwendung produktiv über Port `80` läuft, aber die Next.js-API auf Port `3000`, wird `:3000` explizit in der URL ergänzt.
+
+Dieser Hook funktioniert nur im Client-Browser. Die Prüfung mit `typeof window !== "undefined"` schützt davor, dass `window` im SSR-Kontext (Server-Side Rendering) undefined ist.
+
+---
+
+## Verhalten bei Fehlern
+
+- Wenn die Antwort nicht `ok` ist (z. B. 404, 500), wird ein Fehler in der Console angezeigt.
+- Wenn die Daten kein Array sind (für `poiTyp`), wird eine zusätzliche Validierung ausgelöst.
+
+---
+
+## Siehe auch
+
+- [`MapComponent`](../components/MapComponent.md)
+- `pages/api/talas_v5_DB/poiTyp/readPoiTyp.js`
+- `pages/api/talas_v5_DB/pois/poi-icons.js`

docs/frontend/redux/slices/poiTypesSlice.md

@@ -0,0 +1,71 @@
+# 🧩 poiTypesSlice – Redux Slice für POI-Typen
+
+## Zweck
+
+Dieses Slice verwaltet die Liste der POI-Typen (`poiTyp`) aus der Datenbank.
+Die Daten werden beim Start der Karte vom Server abgerufen und im Redux Store gespeichert.
+
+---
+
+## Quelle
+
+API-Endpunkt:
+
+```
+/api/talas_v5_DB/poiTyp/readPoiTyp
+```
+
+Die Daten werden über einen `createAsyncThunk` geladen:
+
+```js
+export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => {
+  // ...
+});
+```
+
+---
+
+## Dynamische API-URL
+
+Damit kein Rebuild bei jedem Serverwechsel nötig ist, wird die API-URL dynamisch bestimmt:
+
+```js
+let API_BASE_URL = "";
+
+if (typeof window !== "undefined") {
+  API_BASE_URL = `${window.location.protocol}//${window.location.hostname}:3000`;
+} else {
+  API_BASE_URL = "http://localhost:3000";
+}
+```
+
+➡ Dadurch kann dieselbe `.next`-Build auf verschiedenen Servern verwendet werden, ohne neu zu builden.
+
+---
+
+## Datenstruktur im Redux Store
+
+```ts
+{
+  poiTypes: {
+    items: [], // Liste aller POI-Typen
+    status: "idle" | "loading" | "succeeded" | "failed"
+  }
+}
+```
+
+---
+
+## Verwendung in Komponenten
+
+Diese Daten werden typischerweise verwendet in:
+
+- `components/pois/AddPoiModalWindow.js`
+- `MapComponent.js` (indirekt)
+
+---
+
+## Siehe auch
+
+- [`useFetchPoiData`](../../frontend/hooks/useFetchPoiData.md)
+- API-Datei: `pages/api/talas_v5_DB/poiTyp/readPoiTyp.js`

redux/slices/db/poiTypesSlice.js

@@ -3,7 +3,16 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 
 // API-Abruf für POI-Typen
 export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => {
-  const API_BASE_URL = process.env.NEXT_PUBLIC_API_PORT_3000;
+  let API_BASE_URL = "";
+
+  if (typeof window !== "undefined") {
+    // Browser
+    API_BASE_URL = `${window.location.protocol}//${window.location.hostname}:3000`;
+  } else {
+    // Server (z. B. SSR)
+    API_BASE_URL = "http://localhost:3000"; // oder env-Fallback z. B. process.env.API_BASE_URL
+  }
+
   const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
   return await response.json();
 });