feat: handleSave Funktion ausgelagert und KueModal strukturiert
- handleSave in separate Datei handle-save.js ausgelagert, um KueModal-Komponente modularer und wartbarer zu gestalten - handleSaveWrapper in KueModal hinzugefügt, um Parameter an handleSave zu übergeben - KueModal umgestaltet, um Funktionen und Redux-Dispatch klarer zu organisieren - Konsistente Verwendung von Parametern und State-Updates für sauberen Codefluss
This commit is contained in:
ISA
359
components/modales/settingsModal/SettingsModal.jsx
Normal file
359
components/modales/settingsModal/SettingsModal.jsx
Normal file
@@ -0,0 +1,359 @@
|
||||
"use client"; // components/modales/settingsModal.jsx
|
||||
import React, { useState, useEffect } from "react";
|
||||
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";
|
||||
import { current } from "@reduxjs/toolkit";
|
||||
import handleReboot from "./handlers/handleReboot";
|
||||
import handleClearDatabase from "./handlers/handleClearDatabase";
|
||||
import handleSetDateTime from "./handlers/handleSetDateTime";
|
||||
import handleSubmit from "./handlers/handleSubmit";
|
||||
|
||||
// Definiere das App-Element für ReactModal
|
||||
ReactModal.setAppElement("#__next");
|
||||
|
||||
function SettingModal({ showModal, onClose }) {
|
||||
// Redux-Werte abrufen
|
||||
const deviceName_Redux = useSelector((state) => state.variables.deviceName);
|
||||
const mac1_Redux = useSelector((state) => state.variables.mac1);
|
||||
|
||||
const ip_Redux = useSelector((state) => state.variables.ip);
|
||||
const subnet_Redux = useSelector((state) => state.variables.subnet);
|
||||
const gateway_Redux = useSelector((state) => state.variables.gateway);
|
||||
const datetime_Redux = useSelector(
|
||||
(state) => state.variables.cplInternalTimestamp
|
||||
);
|
||||
const ntp1_Redux = useSelector((state) => state.variables.ntp1);
|
||||
const ntp2_Redux = useSelector((state) => state.variables.ntp2);
|
||||
const ntp3_Redux = useSelector((state) => state.variables.ntp3);
|
||||
const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone);
|
||||
const active_Redux = useSelector((state) => state.variables.ntpActive);
|
||||
|
||||
// Lokale State-Variablen zum Bearbeiten
|
||||
const [name, setName] = useState(deviceName_Redux || "");
|
||||
const [mac1, setMac1] = useState(mac1_Redux || "");
|
||||
|
||||
const [ip, setIp] = useState(ip_Redux || "");
|
||||
const [subnet, setSubnet] = useState(subnet_Redux || "");
|
||||
const [gateway, setGateway] = useState(gateway_Redux || "");
|
||||
const [systemUhr, setSystemUhr] = useState(datetime_Redux || "");
|
||||
const [ntp1, setNtp1] = useState(ntp1_Redux || "");
|
||||
const [ntp2, setNtp2] = useState(ntp2_Redux || "");
|
||||
const [ntp3, setNtp3] = useState(ntp3_Redux || "");
|
||||
const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || "");
|
||||
const [active, setActive] = useState(active_Redux || "");
|
||||
|
||||
const [showRebootModal, setShowRebootModal] = useState(false);
|
||||
// Originalwerte speichern
|
||||
const [originalValues, setOriginalValues] = useState({});
|
||||
// Effekt, um Redux-Werte beim Anzeigen des Modals in lokale State-Variablen zu setzen
|
||||
// Initialisiere currentPath für die gesamte Datei
|
||||
let currentPath = window.location.pathname;
|
||||
if (!currentPath.endsWith(".html")) {
|
||||
currentPath += ".html";
|
||||
}
|
||||
const handleSubmitWrapper = () => {
|
||||
handleSubmit(originalValues, {
|
||||
name,
|
||||
ip,
|
||||
subnet,
|
||||
gateway,
|
||||
ntp1,
|
||||
ntp2,
|
||||
ntp3,
|
||||
ntpTimezone,
|
||||
active,
|
||||
});
|
||||
};
|
||||
//---------------------------------------------------
|
||||
// Setze initiale Werte nur beim Öffnen des Modals
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
setName(deviceName_Redux || "");
|
||||
setMac1(mac1_Redux || "");
|
||||
|
||||
setIp(ip_Redux || "");
|
||||
setSubnet(subnet_Redux || "");
|
||||
setGateway(gateway_Redux || "");
|
||||
setSystemUhr(datetime_Redux || "");
|
||||
setNtp1(ntp1_Redux || "");
|
||||
setNtp2(ntp2_Redux || "");
|
||||
setNtp3(ntp3_Redux || "");
|
||||
setNtpTimezone(ntpTimezone_Redux || "");
|
||||
setActive(active_Redux || "");
|
||||
}
|
||||
}, [showModal]); // Nur beim Öffnen des Modals erneut setzen
|
||||
|
||||
useEffect(() => {
|
||||
setOriginalValues({
|
||||
name: deviceName_Redux,
|
||||
ip: ip_Redux,
|
||||
subnet: subnet_Redux,
|
||||
gateway: gateway_Redux,
|
||||
ntp1: ntp1_Redux,
|
||||
ntp2: ntp2_Redux,
|
||||
ntp3: ntp3_Redux,
|
||||
ntpTimezone: ntpTimezone_Redux,
|
||||
active: active_Redux,
|
||||
});
|
||||
}, [
|
||||
deviceName_Redux,
|
||||
ip_Redux,
|
||||
subnet_Redux,
|
||||
gateway_Redux,
|
||||
ntp1_Redux,
|
||||
ntp2_Redux,
|
||||
ntp3_Redux,
|
||||
ntpTimezone_Redux,
|
||||
active_Redux,
|
||||
]);
|
||||
//---------------------------------------------------
|
||||
// Aktualisiere `systemUhr`, wenn sich `datetime_Redux` ändert
|
||||
useEffect(() => {
|
||||
setSystemUhr(datetime_Redux || "");
|
||||
}, [datetime_Redux]);
|
||||
//---------------------------------------------------
|
||||
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 className="text-black">
|
||||
<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>
|
||||
</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={ntpTimezone}
|
||||
onChange={(e) => setNtpTimezone(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>
|
||||
|
||||
{/* 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={handleSubmitWrapper}
|
||||
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;
|
||||
Reference in New Issue
Block a user