Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IP kommt von window und nicht von.env.local, weil in CHIPTOOL kann die IP eingestellt werden

Browse Source
This commit is contained in:
ISA
2024-10-21 12:25:16 +02:00
parent 328b1d8a0e
commit 6f26e1b503
5 changed files with 111 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/dashboard/page.jsx
View File

@@ -14,7 +14,8 @@ import { Icon } from "@iconify/react";
function Dashboard() { function Dashboard() {
//const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; //const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
const apiUrl = `https://${window.ip}:443`; const [isClient, setIsClient] = useState(false);
const [last20Messages, setLast20Messages] = useState([]); const [last20Messages, setLast20Messages] = useState([]);
const [kueOnline, setkueOnline] = useState([]); const [kueOnline, setkueOnline] = useState([]);
const [ip, setIp] = useState(""); const [ip, setIp] = useState("");
@@ -24,28 +25,42 @@ function Dashboard() {
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [kueCableBreak, setKueCableBreak] = useState([]); const [kueCableBreak, setKueCableBreak] = useState([]);
const [appVersion, setAppVersion] = useState(""); const [appVersion, setAppVersion] = useState("");
const [apiUrl, setApiUrl] = useState("");
/* useEffect(() => {
setIsClient(true);
if (typeof window !== "undefined") {
setApiUrl(`https://${window.ip}:443`);
}
}, []); */
/* if (!isClient) {
return null; // or a loading spinner
} */
//const apiUrl = `https://${ip}:443`;
useEffect(() => { useEffect(() => {
loadWindowVariables(apiUrl) if (typeof window !== "undefined") {
.then(() => { loadWindowVariables(apiUrl)
if (window.last20Messages) { .then(() => {
const parsedMessages = parseMessages(window.last20Messages); if (window.last20Messages) {
setLast20Messages(parsedMessages); const parsedMessages = parseMessages(window.last20Messages);
setIp(window.ip); setLast20Messages(parsedMessages);
setSubnet(window.subnet); setIp(window.ip);
setGateway(window.gateway); setSubnet(window.subnet);
setAppVersion(window.appVersion); setGateway(window.gateway);
} else { setAppVersion(window.appVersion);
console.error("Konnte last20Messages nicht finden."); setApiUrl(`https://${window.ip}:443`);
setError("Konnte last20Messages nicht finden."); } else {
} console.error("Konnte last20Messages nicht finden.");
setLoading(false); setError("Konnte last20Messages nicht finden.");
}) }
.catch((error) => { setLoading(false);
console.error("Fehler beim Laden des Skripts:", error); })
setError(error); .catch((error) => {
setLoading(false); console.error("Fehler beim Laden des Skripts:", error);
}); setError(error);
setLoading(false);
});
}
}, [apiUrl]); }, [apiUrl]);
useEffect(() => { useEffect(() => {
loadWindowVariables(apiUrl) loadWindowVariables(apiUrl)

14
app/kabelueberwachung/page.jsx
View File

@@ -4,7 +4,9 @@ import Kue705FO from "../../components/modules/Kue705FO";
function Kabelueberwachung() { function Kabelueberwachung() {
//const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; //const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
const apiUrl = `https://${window.ip}:443`; const [isClient, setIsClient] = useState(false);
const [apiUrl, setApiUrl] = useState("");
const [activeRack, setActiveRack] = useState(1); // Track the active rack const [activeRack, setActiveRack] = useState(1); // Track the active rack
const [kueIso, setKueIso] = useState([]); // State to store isolation values const [kueIso, setKueIso] = useState([]); // State to store isolation values
const [kueName, setKueName] = useState([]); // State to store the KUE names const [kueName, setKueName] = useState([]); // State to store the KUE names
@@ -16,7 +18,15 @@ function Kabelueberwachung() {
const changeRack = (rack) => { const changeRack = (rack) => {
setActiveRack(rack); setActiveRack(rack);
}; };
useEffect(() => {
setIsClient(true);
if (typeof window !== "undefined") {
setApiUrl(`https://${window.ip}:443`);
}
}, []);
/* if (!isClient) {
return null; // or a loading spinner
}*/
// Load the external JavaScript file and fetch the isolation values // Load the external JavaScript file and fetch the isolation values
useEffect(() => { useEffect(() => {
if (window.kueIso && Array.isArray(window.kueIso)) { if (window.kueIso && Array.isArray(window.kueIso)) {

97
components/Header.jsx
View File

@@ -7,12 +7,16 @@ import { loadWindowVariables } from "../utils/loadWindowVariables"; // Importier
import SettingsModal from "./modales/SettingsModal"; import SettingsModal from "./modales/SettingsModal";
function Header() { function Header() {
// const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; const [isClient, setIsClient] = useState(false);
const apiUrl = `https://${window.ip}:443`; const [apiUrl, setApiUrl] = useState("");
const [stationsname, setStationsname] = useState("Lädt..."); // Platzhalter const [stationsname, setStationsname] = useState("Lädt..."); // Platzhalter
const [cplStatus, setCplStatus] = useState("Lädt..."); const [cplStatus, setCplStatus] = useState("Lädt...");
const [showSettingsModal, setShowSettingsModal] = useState(false); const [showSettingsModal, setShowSettingsModal] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
const handleSettingsClick = () => { const handleSettingsClick = () => {
setShowSettingsModal(true); // Öffne das Modal setShowSettingsModal(true); // Öffne das Modal
}; };
@@ -22,58 +26,61 @@ function Header() {
}; };
const handleLogout = () => { const handleLogout = () => {
// Öffnet die Seite offline.html im selben Fenster window.location.href = "/offline.html"; // Opens offline.html
window.location.href = "/offline.html";
}; };
useEffect(() => { useEffect(() => {
// Lade die Variablen vom Server und setze sie in `window` if (typeof window !== "undefined") {
loadWindowVariables(apiUrl) loadWindowVariables(apiUrl)
.then(() => { .then(() => {
// Greife auf die geladenen Variablen im `window`-Objekt zu if (window.ip) {
setStationsname(window.deviceName || "Unbekannt"); setApiUrl(`https://${window.ip}:443`);
setCplStatus(window.hardware_version || "Unbekannt"); setStationsname(window.deviceName || "Unbekannt");
}) setCplStatus(window.hardware_version || "Unbekannt");
.catch((error) => { } else {
console.error("Fehler beim Laden der Variablen:", error); console.error("window.ip ist nicht verfügbar.");
}); }
}, [apiUrl]); })
.catch((error) => {
const files = [ console.error("Fehler beim Laden der Variablen:", error);
"de.acp", });
"kueConfig.acp", }
"kueData.js", }, [isClient]);
"kueDetailTdr.acp",
"Start.acp",
"System.acp",
]; // Manuelle Liste der Dateien, die du einbinden möchtest
useEffect(() => { useEffect(() => {
// Fetch each file in the files array if (isClient) {
files.forEach((file) => { const files = [
const script = document.createElement("script"); "de.acp",
script.src = `/CPL?/CPL/SERVICE/${file}`; // Lade die Datei aus dem public Verzeichnis "kueConfig.acp",
script.async = true; "kueData.js",
script.onload = () => { "kueDetailTdr.acp",
console.log(`${file} wurde erfolgreich geladen.`); "Start.acp",
}; "System.acp",
script.onerror = (error) => { ];
console.error(`Fehler beim Laden von ${file}:`, error);
}; files.forEach((file) => {
document.head.appendChild(script); // Füge das Skript in den Head ein const script = document.createElement("script");
}); script.src = `/CPL?/CPL/SERVICE/${file}`;
}, []); script.async = true;
script.onload = () => console.log(`${file} wurde erfolgreich geladen.`);
script.onerror = (error) =>
console.error(`Fehler beim Laden von ${file}:`, error);
document.head.appendChild(script);
});
}
}, [isClient]);
if (!isClient) return null; // Don't render the component until on the client side
return ( return (
<header className="bg-gray-300 flex justify-between items-center w-full h-28 relative"> <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
{/* Logo - Vergrößert und verschoben */}
<div className="absolute left-32 top-32 transform -translate-y-1/2"> <div className="absolute left-32 top-32 transform -translate-y-1/2">
<Image <Image
src="/images/Logo.png" // Angepasster Pfad src="/images/Logo.png"
alt="Logo" alt="Logo"
width={80} width={80}
height={80} height={80}
style={{ width: "auto", height: "auto" }} // Stellt sicher, dass das Seitenverhältnis korrekt bleibt style={{ width: "auto", height: "auto" }}
priority={false} priority={false}
/> />
</div> </div>
@@ -82,15 +89,11 @@ function Header() {
{/* CPL Status und Stationsname */} {/* CPL Status und Stationsname */}
<div className="flex items-start space-x-4 w-full"> <div className="flex items-start space-x-4 w-full">
<div className="flex flex-col text-left pl-8"> <div className="flex flex-col text-left pl-8">
{/* Text immer linksbündig */}
<h2 className="text-base ">Stationsname</h2> <h2 className="text-base ">Stationsname</h2>
<p className="text-base text-gray-600">{stationsname}</p> <p className="text-base text-gray-600">{stationsname}</p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-4 w-full"></div>
{/* Temperatur und Icons */}
<div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between"> <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
{/* Settings Icon als Button */}
<div className="flex items-center justify-end w-full"> <div className="flex items-center justify-end w-full">
<button <button
onClick={handleSettingsClick} onClick={handleSettingsClick}
@@ -99,7 +102,6 @@ function Header() {
<i className="bi bi-gear"></i> <i className="bi bi-gear"></i>
</button> </button>
</div> </div>
{/* Logout Button */}
<div className="flex items-center justify-end w-full"> <div className="flex items-center justify-end w-full">
<button <button
onClick={handleLogout} onClick={handleLogout}
@@ -109,7 +111,6 @@ function Header() {
</button> </button>
</div> </div>
</div> </div>
{/* SettingsModal wird angezeigt, wenn showSettingsModal true ist */}
{showSettingsModal && ( {showSettingsModal && (
<SettingsModal <SettingsModal
showModal={showSettingsModal} showModal={showSettingsModal}

2
components/modales/KueModal.jsx
View File

@@ -1,4 +1,4 @@
// components/modales/KueModal.jsx "use client"; // components/modales/KueModal.jsx
import ReactModal from "react-modal"; import ReactModal from "react-modal";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";

13
components/modules/Kue705FO.jsx
View File

@@ -1,3 +1,4 @@
"use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import ReactModal from "react-modal"; import ReactModal from "react-modal";
import Chart from "chart.js/auto"; import Chart from "chart.js/auto";
@@ -107,6 +108,18 @@ function Kue705FO({
// Funktion für die TDR-Messung // Funktion für die TDR-Messung
const goTDR = () => { const goTDR = () => {
//-------------------------------------------------
const [isClient, setIsClient] = useState(false);
useEffect(() => {
// This will only run in the client/browser, not on the server
setIsClient(true);
}, []);
if (!isClient) {
return null; // or a loading spinner
}
//-------------------------------------------------
let slot = slotIndex; let slot = slotIndex;
if (slot >= 32) { if (slot >= 32) {