feat: Redux-Thunk für digitale Eingänge integriert & UI mit zwei Tabellen umgesetzt
- `fetchDigitaleEingaengeThunk.ts` erstellt, um digitale Eingänge in Redux zu speichern.
- `fetchDigitaleEingaenge.ts` erstellt, um API-Daten aus `de.js` zu laden.
- `digitalInputsSlice.ts` hinzugefügt, um digitale Eingänge in Redux zu verwalten.
- `DigitalInputs.tsx` überarbeitet: Zwei Tabellen für digitale Eingänge hinzugefügt.
- Sicherstellung, dass Redux-Thunk nur im Client (`useEffect`) ausgeführt wird.
- API-Calls werden nun alle 10 Sekunden aktualisiert.
✅ Jetzt läuft Redux-Thunk stabil & effizient für digitale Eingänge!
This commit is contained in:
52
services/fetchDigitaleEingaenge.ts
Normal file
52
services/fetchDigitaleEingaenge.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Bestimmt die richtige API-URL für digitale Eingänge basierend auf Umgebung.
|
||||
*/
|
||||
const getApiUrl = () => {
|
||||
if (typeof window === "undefined") {
|
||||
console.error("❌ `window` ist nicht verfügbar (Server-Side Rendering)");
|
||||
return null;
|
||||
}
|
||||
|
||||
return process.env.NODE_ENV === "development"
|
||||
? `${window.location.origin}/CPLmockData/SERVICE/de.js`
|
||||
: `${window.location.origin}/CPL/SERVICE/de.js`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Holt die digitalen Eingänge und formatiert die Daten für Redux.
|
||||
*/
|
||||
export const fetchDigitaleEingaenge = async () => {
|
||||
try {
|
||||
const apiUrl = getApiUrl();
|
||||
if (!apiUrl) return null;
|
||||
|
||||
console.log(`📡 API-Request an: ${apiUrl}`);
|
||||
const response = await fetch(apiUrl);
|
||||
if (!response.ok) {
|
||||
throw new Error(`❌ Fehler: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const rawData = await response.text();
|
||||
console.log("✅ Rohdaten erfolgreich geladen:", rawData);
|
||||
|
||||
// **JavaScript-Variablen als Skript einfügen**
|
||||
const script = document.createElement("script");
|
||||
script.innerHTML = rawData;
|
||||
document.body.appendChild(script);
|
||||
|
||||
// **Daten ins Redux-Format umwandeln**
|
||||
const formattedData = win_de_state.map((status, index) => ({
|
||||
id: index + 1,
|
||||
label: win_de_label[index] || `DE${index + 1}`,
|
||||
status: status === 1,
|
||||
counter: win_counter[index] || 0,
|
||||
flutter: win_flutter[index] || 0,
|
||||
}));
|
||||
|
||||
console.log("✅ Formatierte Daten:", formattedData);
|
||||
return formattedData;
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler beim Laden der digitalen Eingänge:", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user