Header SettingsModal Responsive
This commit is contained in:
ISA
@@ -91,224 +91,181 @@ function SettingModal({ showModal, onClose }) {
|
|||||||
onRequestClose={onClose}
|
onRequestClose={onClose}
|
||||||
shouldCloseOnOverlayClick={false}
|
shouldCloseOnOverlayClick={false}
|
||||||
overlayClassName="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"
|
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
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
style={{
|
className="absolute top-2 right-2 text-xl bg-transparent border-none cursor-pointer"
|
||||||
position: "absolute",
|
|
||||||
top: "10px",
|
|
||||||
right: "10px",
|
|
||||||
background: "transparent",
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "24px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<i className="bi bi-x-circle-fill"></i>
|
<i className="bi bi-x-circle-fill"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Hauptinhalt oder Login-Formular */}
|
<div className="text-black text-sm lg:text-xs xl:text-sm 2xl:text-base">
|
||||||
{showLoginForm ? (
|
<h2 className="text-lg font-bold mb-4">System:</h2>
|
||||||
<div className="text-black">
|
<form>
|
||||||
<h2 className="text-lg font-bold mb-4">Admin Login</h2>
|
{/* Name */}
|
||||||
<form onSubmit={(e) => e.preventDefault()}>
|
<div className="mb-2">
|
||||||
<div className="mb-4">
|
<label className="block font-medium">Name:</label>
|
||||||
<label className="block text-sm font-medium">Benutzername:</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
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="border border-gray-300 rounded p-2 w-full"
|
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||||
value={username}
|
value={mac1}
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-4">
|
<div>
|
||||||
<label className="block text-sm font-medium">Passwort:</label>
|
<label className="block font-medium">Systemuhr:</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="text"
|
||||||
className="border border-gray-300 rounded p-2 w-full"
|
className="border border-gray-300 rounded p-1 xl:p-2 w-full"
|
||||||
value={password}
|
value={systemUhr}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</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
|
<button
|
||||||
onClick={handleAdminLogin}
|
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||||
className="bg-littwin-blue text-white px-4 py-2 rounded w-full"
|
onClick={handleReboot}
|
||||||
>
|
>
|
||||||
Anmelden
|
Neustart CPL
|
||||||
</button>
|
</button>
|
||||||
</form>
|
<button
|
||||||
</div>
|
onClick={() =>
|
||||||
) : (
|
isAdminLoggedIn ? handleAdminLogout() : setShowLoginForm(true)
|
||||||
<div className="text-black">
|
}
|
||||||
<h2 className="text-lg font-bold mb-4">System:</h2>
|
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||||
<form>
|
>
|
||||||
<div className="mb-4">
|
{isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
|
||||||
<label className="block text-sm font-medium">Name:</label>
|
</button>
|
||||||
<input
|
<button
|
||||||
type="text"
|
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||||
className="border border-gray-300 rounded p-2 w-full"
|
onClick={handleClearDatabase}
|
||||||
value={name}
|
>
|
||||||
onChange={(e) => setName(e.target.value)}
|
Datenbank leeren
|
||||||
/>
|
</button>
|
||||||
</div>
|
<button
|
||||||
|
className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
|
||||||
<div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
onClick={() => handleSubmit(originalValues, currentValues)}
|
||||||
<div>
|
>
|
||||||
<label className="block text-sm font-medium">
|
Übernehmen
|
||||||
MAC Adresse 1:
|
</button>
|
||||||
</label>
|
</div>
|
||||||
<input
|
</form>
|
||||||
type="text"
|
</div>
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</ReactModal>
|
</ReactModal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.99";
|
const webVersion = "1.6.100";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
Reference in New Issue
Block a user