Header SettingsModal Responsive
This commit is contained in:
ISA
@@ -91,224 +91,181 @@ function SettingModal({ showModal, onClose }) {
|
||||
onRequestClose={onClose}
|
||||
shouldCloseOnOverlayClick={false}
|
||||
overlayClassName="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"
|
||||
className="w-[90%] max-w-[800px] h-auto max-h-[90vh] lg:max-h-[80vh] overflow-y-auto p-6 lg:p-4 bg-white rounded-lg relative border-none laptop:scale-75"
|
||||
className="w-[90%] max-w-[800px] h-auto max-h-[85vh] lg:max-h-[75vh] xl:max-h-[85vh] 2xl:max-h-[90vh]
|
||||
overflow-y-auto p-4 lg:p-2 xl:p-6 2xl:p-8 bg-white rounded-lg relative border-none
|
||||
scale-90 lg:scale-75 xl:scale-90 2xl:scale-100"
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "10px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
className="absolute top-2 right-2 text-xl bg-transparent border-none cursor-pointer"
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
|
||||
{/* Hauptinhalt oder Login-Formular */}
|
||||
{showLoginForm ? (
|
||||
<div className="text-black">
|
||||
<h2 className="text-lg font-bold mb-4">Admin Login</h2>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium">Benutzername:</label>
|
||||
<div className="text-black text-sm lg:text-xs xl:text-sm 2xl:text-base">
|
||||
<h2 className="text-lg font-bold mb-4">System:</h2>
|
||||
<form>
|
||||
{/* Name */}
|
||||
<div className="mb-2">
|
||||
<label className="block font-medium">Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* MAC Adresse und Systemuhr */}
|
||||
<div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div>
|
||||
<label className="block font-medium">MAC Adresse 1:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={mac1}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium">Passwort:</label>
|
||||
<div>
|
||||
<label className="block font-medium">Systemuhr:</label>
|
||||
<input
|
||||
type="password"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={systemUhr}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-red-500">{error}</p>}
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full"
|
||||
onClick={() => {
|
||||
if (
|
||||
window.confirm(
|
||||
"Möchten Sie wirklich die Systemzeit übernehmen?"
|
||||
)
|
||||
) {
|
||||
handleSetDateTime();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Systemzeit übernehmen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IP-Konfiguration */}
|
||||
<div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div>
|
||||
<label className="block font-medium">IP:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={ip}
|
||||
onChange={(e) => setIp(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium">Subnet:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={subnet}
|
||||
onChange={(e) => setSubnet(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium">Gateway:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={gateway}
|
||||
onChange={(e) => setGateway(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SNTP Client */}
|
||||
<h3 className="text-sm font-bold my-2">SNTP Client:</h3>
|
||||
<div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div>
|
||||
<label className="block font-medium">IP NTP Server 1:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={ntp1}
|
||||
onChange={(e) => setNtp1(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium">IP NTP Server 2:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={ntp2}
|
||||
onChange={(e) => setNtp2(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium">IP NTP Server 3:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={ntp3}
|
||||
onChange={(e) => setNtp3(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium">Zeitzone:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={ntpTimezone}
|
||||
onChange={(e) => setNtpTimezone(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium">NTP Active:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||
value={active}
|
||||
onChange={(e) => setActive(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons: Skaliert für große Screens */}
|
||||
<div className="flex flex-col md:flex-row justify-between mt-4 gap-2">
|
||||
<button
|
||||
onClick={handleAdminLogin}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded w-full"
|
||||
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||
onClick={handleReboot}
|
||||
>
|
||||
Anmelden
|
||||
Neustart CPL
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<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-1 md: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}
|
||||
disabled
|
||||
/>
|
||||
</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
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded mt-2 w-full"
|
||||
onClick={() => {
|
||||
if (
|
||||
window.confirm(
|
||||
"Möchten Sie wirklich die Systemzeit übernehmen?"
|
||||
)
|
||||
) {
|
||||
handleSetDateTime();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Systemzeit übernehmen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 grid grid-cols-1 md: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>
|
||||
<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>
|
||||
|
||||
{/* SNTP Client */}
|
||||
<h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
|
||||
<div className="mb-4 grid grid-cols-1 md: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>
|
||||
|
||||
{/* Buttons: gestapelt auf kleinen Bildschirmen, nebeneinander auf großen */}
|
||||
<div className="flex flex-col md:flex-row justify-between mt-4 gap-2">
|
||||
<button
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto"
|
||||
onClick={handleReboot}
|
||||
>
|
||||
Neustart CPL
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
isAdminLoggedIn ? handleAdminLogout() : setShowLoginForm(true)
|
||||
}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto"
|
||||
>
|
||||
{isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
|
||||
</button>
|
||||
<button
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto"
|
||||
onClick={handleClearDatabase}
|
||||
>
|
||||
Datenbank leeren
|
||||
</button>
|
||||
<button
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto"
|
||||
onClick={() => handleSubmit(originalValues, currentValues)}
|
||||
>
|
||||
Übernehmen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() =>
|
||||
isAdminLoggedIn ? handleAdminLogout() : setShowLoginForm(true)
|
||||
}
|
||||
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||
>
|
||||
{isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
|
||||
</button>
|
||||
<button
|
||||
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||
onClick={handleClearDatabase}
|
||||
>
|
||||
Datenbank leeren
|
||||
</button>
|
||||
<button
|
||||
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||
onClick={() => handleSubmit(originalValues, currentValues)}
|
||||
>
|
||||
Übernehmen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ReactModal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,5 +6,5 @@
|
||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||
|
||||
*/
|
||||
const webVersion = "1.6.99";
|
||||
const webVersion = "1.6.100";
|
||||
export default webVersion;
|
||||
|
||||
Reference in New Issue
Block a user