This commit is contained in:
Ismail Ali
2025-05-27 19:41:17 +02:00
parent 257341475c
commit 97fbb6fdc1
86 changed files with 1452 additions and 1185 deletions

View File

@@ -0,0 +1,25 @@
<!-- /docs/redux/slices/database/locationDevicesFromDBSlice.md -->
# 🧩 locationDevicesFromDBSlice.js
Redux-Slice für das Laden von Geräten aus der Datenbank-Tabelle `location_device`.
## Zustand
```js
{
devices: [],
status: "idle" | "loading" | "succeeded" | "failed",
error: string | null
}
```
## Thunk
- `fetchLocationDevicesThunk` (async)
## Selector
```js
selectLocationDevices = (state) => state.locationDevicesFromDB.devices
```

View File

@@ -0,0 +1,23 @@
<!-- /docs/redux/slices/database/locationDevicesSlice.md -->
# 🧩 locationDevicesSlice.js
Zweite Variante des Slices für Geräte (veraltet oder parallel verwendet).
## Zustand
```js
{
data: [],
status: "idle" | "loading" | "succeeded" | "failed",
error: string | null
}
```
## Selector
```js
selectLocationDevices = (state) => state.locationDevices.data
```
⚠️ Beachte: Duplikat zu `locationDevicesFromDBSlice.js`

View File

@@ -0,0 +1,24 @@
<!-- /docs/redux/slices/database/priorityConfigSlice.md -->
# 🧩 priorityConfigSlice.js
Lädt die Prioritätskonfiguration für Marker (z.B. zur farblichen Darstellung).
## Zustand
```js
{
data: [],
status: "idle" | "succeeded"
}
```
## Thunk
- `fetchPriorityConfigThunk`
## Selector
```js
selectPriorityConfig = (state) => state.priorityConfig.data
```

View File

@@ -1,103 +0,0 @@
# 📦 locationDevicesFromDBSlice
Zuständig für das Laden und Speichern der Geräteinformationen pro Standort (Location) aus der Datenbank.
## 🧠 Zweck
Dieses Slice verwaltet die Geräte, die mit einem bestimmten Standort (Location) verknüpft sind.
Es nutzt ein `createAsyncThunk`, um die Daten vom Webservice bzw. von der lokalen Datenbank zu laden.
---
## 🔁 Datenfluss
1. **Dispatch `fetchLocationDevicesFromDB()`**
2. **Daten werden über `fetchLocationDevices()` geladen**
3. **Status wird aktualisiert (`loading`, `succeeded`, `failed`)**
4. **Geräte-Liste (`devices`) wird gespeichert**
---
## 🧩 Slice-Definition
```js
initialState: {
devices: [], // Geräte-Liste pro Standort
status: "idle", // "idle" | "loading" | "succeeded" | "failed"
error: null // Fehlernachricht im Fehlerfall
}
```
---
## 🔧 Actions
| Action Type | Beschreibung |
|--------------------------------------------|--------------------------------------------------|
| `fetchLocationDevicesFromDB/pending` | Startet den Ladeprozess |
| `fetchLocationDevicesFromDB/fulfilled` | Speichert die empfangenen Geräte in `devices` |
| `fetchLocationDevicesFromDB/rejected` | Speichert die Fehlermeldung in `error` |
---
## 📥 Async Thunk
```ts
export const fetchLocationDevicesFromDB = createAsyncThunk(
"locationDevicesFromDB/fetchLocationDevicesFromDB",
async () => {
return fetchLocationDevices(); // API-Aufruf aus services/api
}
);
```
Die Funktion `fetchLocationDevices()` befindet sich unter:
```
/redux/api/fromDB/fetchLocationDevices.js
```
---
## 🧪 Verwendung in Komponenten
### Beispiel mit `useSelector` & `useDispatch`
```tsx
import { useSelector, useDispatch } from "react-redux";
import { fetchLocationDevicesFromDB } from "@/redux/slices/db/locationDevicesFromDBSlice";
const dispatch = useDispatch();
const devices = useSelector((state) => state.locationDevicesFromDB.devices);
const status = useSelector((state) => state.locationDevicesFromDB.status);
useEffect(() => {
dispatch(fetchLocationDevicesFromDB());
}, []);
```
---
## 🧩 Integration im Store
```ts
import locationDevicesFromDBReducer from "./slices/db/locationDevicesFromDBSlice";
export const store = configureStore({
reducer: {
locationDevicesFromDB: locationDevicesFromDBReducer,
// weitere Slices ...
},
});
```
---
## 📌 Hinweis
Dieses Slice ist Bestandteil der neuen Redux-Architektur (ehemals Recoil)
→ siehe auch `CHANGELOG.md` Version `1.1.97` bis `1.1.98`.
```
Pfad: /redux/slices/db/locationDevicesFromDBSlice.js
```

View File

@@ -1,93 +0,0 @@
# 🧭 poiTypesSlice
Verwaltet die Point-of-Interest (POI) Typen, die vom Server bereitgestellt werden z.B. für die Darstellung von Symbolen oder Layer-Kategorien in der Karte.
---
## 📍 Datei
```
/redux/slices/db/poiTypesSlice.js
```
---
## 📦 Initialer State
```ts
{
data: [], // Liste der POI-Typen
status: "idle" // Ladezustand: "idle" | "loading" | "succeeded" | "failed"
}
```
---
## ⚙️ Async Thunk: `fetchPoiTypes`
```ts
export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => {
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";
}
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
return await response.json();
});
```
---
## 🔁 Lifecycle im Slice
| Zustand | Beschreibung |
|--------------------|--------------------------------------|
| `pending` | Setzt `status = "loading"` |
| `fulfilled` | Speichert `payload` in `state.data` und setzt `status = "succeeded"` |
| `rejected` | Setzt `status = "failed"` |
---
## 🧪 Verwendung im Component
```tsx
import { useSelector, useDispatch } from "react-redux";
import { fetchPoiTypes } from "@/redux/slices/db/poiTypesSlice";
const dispatch = useDispatch();
const poiTypes = useSelector((state) => state.poiTypes.data);
const status = useSelector((state) => state.poiTypes.status);
useEffect(() => {
dispatch(fetchPoiTypes());
}, []);
```
---
## 🧩 Store Integration
```ts
import poiTypesReducer from "./slices/db/poiTypesSlice";
export const store = configureStore({
reducer: {
poiTypes: poiTypesReducer,
// weitere ...
},
});
```
---
## 🌐 API-Endpunkt
```http
GET /api/talas_v5_DB/poiTyp/readPoiTyp
```
Erwartet JSON-Antwort mit allen verfügbaren POI-Typen für die App.