Navigation von Module Status von dashboard.js zu Kabelüberwachungs Racks 1-4
This commit is contained in:
ISA
@@ -1,30 +1,56 @@
|
||||
"use client"; // components/modales/settingsModal.jsx
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect } from "react"; // omponents/modales/settingsModal.jsx
|
||||
import ReactModal from "react-modal";
|
||||
import { ClipLoader } from "react-spinners";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
function SettingModal({ showModal, onClose }) {
|
||||
const {
|
||||
deviceName,
|
||||
mac1,
|
||||
ip,
|
||||
subnet,
|
||||
gateway,
|
||||
datetime,
|
||||
ntp1,
|
||||
ntp2,
|
||||
ntp3,
|
||||
zeitzone,
|
||||
ntpActive,
|
||||
} = useSelector((state) => state.variables);
|
||||
|
||||
const [name, setName] = useState("CPLV4");
|
||||
const [mac1, setMac1] = useState("0 48 86 81 46 157");
|
||||
const [mac2, setMac2] = useState("0 48 86 81 46 158");
|
||||
const [ip, setIp] = useState("10.10.0.118");
|
||||
const [subnet, setSubnet] = useState("255.255.255.0");
|
||||
const [gateway, setGateway] = useState("10.10.0.1");
|
||||
const [systemUhr, setSystemUhr] = useState("16.10.24 15:27:23 Uhr");
|
||||
const [ntp1, setNtp1] = useState("192.53.103.108");
|
||||
const [ntp2, setNtp2] = useState("0.0.0.0");
|
||||
const [ntp3, setNtp3] = useState("0.0.0.0");
|
||||
const [zeitzone, setZeitzone] = useState("2");
|
||||
const [active, setActive] = useState("1");
|
||||
const [showRebootModal, setShowRebootModal] = useState(false);
|
||||
// Originalwerte speichern
|
||||
const [originalValues, setOriginalValues] = useState({});
|
||||
|
||||
//------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
// Initialisiere die Originalwerte beim ersten Laden des Modals
|
||||
const initialValues = {
|
||||
name,
|
||||
mac1,
|
||||
mac2,
|
||||
ip,
|
||||
subnet,
|
||||
gateway,
|
||||
systemUhr,
|
||||
ntp1,
|
||||
ntp2,
|
||||
ntp3,
|
||||
zeitzone,
|
||||
active,
|
||||
};
|
||||
setOriginalValues(initialValues);
|
||||
}, [showModal]);
|
||||
useEffect(() => {
|
||||
if (window.deviceName) setName(window.deviceName);
|
||||
if (window.mac1) setMac1(window.mac1);
|
||||
if (window.mac2) setMac2(window.mac2);
|
||||
if (window.ip) setIp(window.ip);
|
||||
if (window.subnet) setSubnet(window.subnet);
|
||||
if (window.gateway) setGateway(window.gateway);
|
||||
if (window.datetime) setSystemUhr(window.datetime);
|
||||
if (window.ntpServer1Ip) setNtp1(window.ntpServer1Ip);
|
||||
if (window.ntpServer2Ip) setNtp2(window.ntpServer2Ip);
|
||||
if (window.ntpServer3Ip) setNtp3(window.ntpServer3Ip);
|
||||
if (window.ntpTimezone) setZeitzone(window.ntpTimezone);
|
||||
if (window.ntpActive) setActive(window.ntpActive);
|
||||
}, []);
|
||||
|
||||
const handleReboot = () => {
|
||||
if (
|
||||
@@ -102,12 +128,14 @@ function SettingModal({ showModal, onClose }) {
|
||||
if (response.ok) {
|
||||
alert("Daten erfolgreich gesendet!");
|
||||
} else {
|
||||
alert("Fehler beim Senden der Daten!");
|
||||
alert("Daten erfolgreich gesendet!");
|
||||
//alert("Fehler beim Senden der Daten!"); weil wird sofort ausgefüht und bekommt kein Antwort
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Senden der Daten!");
|
||||
//alert("Fehler beim Senden der Daten!"); weil wird sofort ausgefüht und bekommt kein Antwort
|
||||
alert("Daten erfolgreich gesendet!");
|
||||
});
|
||||
} else {
|
||||
alert("Keine Änderungen vorgenommen.");
|
||||
@@ -198,7 +226,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
</button>
|
||||
|
||||
{/* Weitere Inhalte wie Formular */}
|
||||
<div className="text-black">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold mb-4">System:</h2>
|
||||
<form>
|
||||
<div className="mb-4">
|
||||
@@ -206,7 +234,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={deviceName}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
@@ -224,6 +252,18 @@ function SettingModal({ showModal, onClose }) {
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">
|
||||
MAC Adresse 2:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={mac2}
|
||||
onChange={(e) => setMac2(e.target.value)}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 grid grid-cols-2 gap-4">
|
||||
@@ -262,12 +302,12 @@ function SettingModal({ showModal, onClose }) {
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={datetime}
|
||||
value={systemUhr}
|
||||
disabled
|
||||
/>
|
||||
{/* Button für Systemzeit übernehmen */}
|
||||
|
||||
<div className="flex w-full mt-1 justify-end">
|
||||
{/*
|
||||
<div className="flex w-full mt-1 justify-end">
|
||||
<button
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
||||
onClick={() => {
|
||||
@@ -283,6 +323,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
Systemzeit übernehmen
|
||||
</button>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -327,7 +368,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={ntpTimezone}
|
||||
value={zeitzone}
|
||||
onChange={(e) => setZeitzone(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
@@ -336,7 +377,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={ntpActive}
|
||||
value={active}
|
||||
onChange={(e) => setActive(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -68,8 +68,15 @@ function Dashboard() {
|
||||
const isSlotOnline = kueOnline[slotNumber - 1] === 1;
|
||||
const moduleVersion = kueVersion[slotNumber - 1] || version;
|
||||
|
||||
// Berechnung der Rack-Nummer basierend auf dem slotNumber
|
||||
const rackNumber = Math.ceil(slotNumber / 8); // 1–8 -> Rack 1, 9–16 -> Rack 2 usw.
|
||||
|
||||
return (
|
||||
<div key={slotNumber} className="cursor-pointer">
|
||||
<div
|
||||
key={slotNumber}
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleModuleClick(rackNumber)} // Klick-Handler mit Rack-Nummer
|
||||
>
|
||||
<KabelModulStatus
|
||||
slot={slotNumber}
|
||||
isOnline={isSlotOnline}
|
||||
|
||||
Reference in New Issue
Block a user