456 lines
15 KiB
JavaScript
456 lines
15 KiB
JavaScript
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
|
|
|
|
function SettingModal({ showModal, onClose }) {
|
|
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 (
|
|
window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
|
|
) {
|
|
fetch(`CPL?KUEdetail.ACP&BOOT=1`, { method: "GET" }).finally(() => {
|
|
window.location.href = `/wait`; //auf Client-Seite
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleClearDatabase = () => {
|
|
if (
|
|
window.confirm("Sind Sie sicher, dass Sie die Datenbank leeren möchten?")
|
|
) {
|
|
const clearDbUrl = `CPL?KUEdetail.ACP&DEDB=1`;
|
|
|
|
fetch(clearDbUrl)
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert("Befehl zum Leeren der Datenbank erfolgreich gesendet!");
|
|
} else {
|
|
alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler:", error);
|
|
alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
const changes = {};
|
|
|
|
// Überprüfe, welche Werte sich geändert haben
|
|
if (name !== originalValues.name) {
|
|
changes.SNNA = name;
|
|
}
|
|
if (ip !== originalValues.ip) {
|
|
changes.SEI01 = ip;
|
|
}
|
|
if (subnet !== originalValues.subnet) {
|
|
changes.SEI02 = subnet;
|
|
}
|
|
if (gateway !== originalValues.gateway) {
|
|
changes.SEI03 = gateway;
|
|
}
|
|
if (ntp1 !== originalValues.ntp1) {
|
|
changes.SNIP1 = ntp1;
|
|
}
|
|
if (ntp2 !== originalValues.ntp2) {
|
|
changes.SNIP2 = ntp2;
|
|
}
|
|
if (ntp3 !== originalValues.ntp3) {
|
|
changes.SNIP3 = ntp3;
|
|
}
|
|
if (zeitzone !== originalValues.zeitzone) {
|
|
changes.SNTZ = zeitzone;
|
|
}
|
|
if (active !== originalValues.active) {
|
|
changes.SNAC = active;
|
|
}
|
|
|
|
// Falls Änderungen vorhanden sind, sende die neuen Daten
|
|
if (Object.keys(changes).length > 0) {
|
|
let url = `CPL?KUEdetail.ACP`;
|
|
|
|
Object.keys(changes).forEach((paramKey) => {
|
|
url += `&${paramKey}=${encodeURIComponent(changes[paramKey])}`;
|
|
});
|
|
|
|
fetch(url, { method: "GET" })
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert("Daten erfolgreich gesendet!");
|
|
} else {
|
|
alert("Fehler beim Senden der Daten!");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler:", error);
|
|
alert("Fehler beim Senden der Daten!");
|
|
});
|
|
} else {
|
|
alert("Keine Änderungen vorgenommen.");
|
|
}
|
|
};
|
|
const handleSetDateTime = () => {
|
|
const currentDate = new Date();
|
|
|
|
// Format date and time as required by the system:
|
|
const year = currentDate.getFullYear().toString().slice(-2); // Last two digits of the year
|
|
const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // Month (1-12)
|
|
const day = String(currentDate.getDate()).padStart(2, "0"); // Day (1-31)
|
|
|
|
const hours = String(currentDate.getHours()).padStart(2, "0"); // Hours (0-23)
|
|
const minutes = String(currentDate.getMinutes()).padStart(2, "0"); // Minutes (0-59)
|
|
const seconds = String(currentDate.getSeconds()).padStart(2, "0"); // Seconds (0-59)
|
|
|
|
// Date command
|
|
const dateCommand = `CLK00=${year}-${month}-${day}`;
|
|
|
|
// Time command
|
|
const timeCommand = `CLK01=${hours}-${minutes}-${seconds}`;
|
|
|
|
// Send the commands to the server using fetch and GET method
|
|
fetch(`/CPL?${dateCommand}`, { method: "GET" })
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert("Datum erfolgreich gesetzt!");
|
|
return fetch(`/CPL?${timeCommand}`, { method: "GET" });
|
|
} else {
|
|
alert("Fehler beim Setzen des Datums!");
|
|
throw new Error("Date setting failed.");
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert("Uhrzeit erfolgreich gesetzt!");
|
|
} else {
|
|
alert("Fehler beim Setzen der Uhrzeit!");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler:", error);
|
|
alert("Fehler beim Setzen von Datum und Uhrzeit!");
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ReactModal
|
|
isOpen={showModal}
|
|
onRequestClose={onClose}
|
|
style={{
|
|
overlay: {
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
zIndex: 100,
|
|
},
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "80%",
|
|
maxWidth: "800px",
|
|
padding: "20px",
|
|
borderRadius: "8px",
|
|
border: "none",
|
|
position: "relative",
|
|
},
|
|
}}
|
|
>
|
|
{/* Modal-Inhalt */}
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
position: "absolute",
|
|
top: "10px",
|
|
right: "10px",
|
|
background: "transparent",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
fontSize: "24px",
|
|
}}
|
|
>
|
|
<i className="bi bi-x-circle-fill"></i>
|
|
</button>
|
|
|
|
{/* Weitere Inhalte wie Formular */}
|
|
<div>
|
|
<h2 className="text-lg font-bold mb-4">System:</h2>
|
|
<form>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium">Name:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
MAC Adresse 1:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={mac1}
|
|
onChange={(e) => setMac1(e.target.value)}
|
|
disabled
|
|
/>
|
|
</div>
|
|
{/* MAC Adresse 2 */}
|
|
{/*
|
|
|
|
<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">
|
|
<div>
|
|
<label className="block text-sm font-medium">IP:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ip}
|
|
onChange={(e) => setIp(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">Subnet:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={subnet}
|
|
onChange={(e) => setSubnet(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">Gateway:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={gateway}
|
|
onChange={(e) => setGateway(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">Systemuhr:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={systemUhr}
|
|
disabled
|
|
/>
|
|
{/* Button für Systemzeit übernehmen */}
|
|
|
|
<div className="flex w-full mt-1 justify-end">
|
|
<button
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
onClick={() => {
|
|
if (
|
|
window.confirm(
|
|
"Möchten Sie wirklich die Systemzeit übernehmen?"
|
|
)
|
|
) {
|
|
handleSetDateTime();
|
|
}
|
|
}}
|
|
>
|
|
Systemzeit übernehmen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SNTP Client */}
|
|
<h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
|
|
<div className="mb-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
IP NTP Server 1:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ntp1}
|
|
onChange={(e) => setNtp1(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
IP NTP Server 2:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ntp2}
|
|
onChange={(e) => setNtp2(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">
|
|
IP NTP Server 3:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={ntp3}
|
|
onChange={(e) => setNtp3(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">Zeitzone:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={zeitzone}
|
|
onChange={(e) => setZeitzone(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">NTP Active:</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded p-2 w-full"
|
|
value={active}
|
|
onChange={(e) => setActive(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Datenbank leeren und Neustart CPL */}
|
|
{/*
|
|
<div className="flex flex-col items-start justify-between mt-4 space-y-2">
|
|
<button
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
onClick={() => handleReboot()}
|
|
>
|
|
Neustart CPL
|
|
</button>
|
|
</div>
|
|
*/}
|
|
|
|
{/* Modal Footer */}
|
|
<div className="flex justify-between mt-4">
|
|
<button
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
onClick={() => handleReboot()}
|
|
>
|
|
Neustart CPL
|
|
</button>
|
|
<button
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
onClick={() => handleClearDatabase()}
|
|
>
|
|
Datenbank leeren
|
|
</button>
|
|
<button
|
|
onClick={() => handleSubmit()}
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
|
>
|
|
Übernehmen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</ReactModal>
|
|
|
|
{/* Reboot Modal */}
|
|
<ReactModal
|
|
isOpen={showRebootModal}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: {
|
|
backgroundColor: "rgba(0, 0, 0, 0.75)",
|
|
zIndex: 200,
|
|
},
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "400px",
|
|
textAlign: "center",
|
|
padding: "20px",
|
|
},
|
|
}}
|
|
>
|
|
<h3>CPL wird neu gestartet...</h3>
|
|
<ClipLoader color={"#76c7c0"} size={50} /> {/* Spinner */}
|
|
<p>Bitte warten Sie 5 Sekunden...</p>
|
|
</ReactModal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SettingModal;
|