Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header SettingsModal Responsive

Browse Source
This commit is contained in:
ISA
2025-02-24 11:10:33 +01:00
parent 35eecfdbae
commit 6be431469c
2 changed files with 159 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
components/header/settingsModal/SettingsModal.tsx
View File

@@ -91,91 +91,54 @@ 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 ? (
<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>
<input
type="text"
className="border border-gray-300 rounded p-2 w-full"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div className="mb-4">
<label className="block text-sm font-medium">Passwort:</label>
<input
type="password"
className="border border-gray-300 rounded p-2 w-full"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{error && <p className="text-red-500">{error}</p>}
<button
onClick={handleAdminLogin}
className="bg-littwin-blue text-white px-4 py-2 rounded w-full"
>
Anmelden
</button>
</form>
</div>
) : (
<div className="text-black">
<h2 className="text-lg font-bold mb-4">System:</h2> <h2 className="text-lg font-bold mb-4">System:</h2>
<form> <form>
<div className="mb-4"> {/* Name */}
<label className="block text-sm font-medium">Name:</label> <div className="mb-2">
<label className="block font-medium">Name:</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={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
/> />
</div> </div>
<div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4"> {/* MAC Adresse und Systemuhr */}
<div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
<div> <div>
<label className="block text-sm font-medium"> <label className="block font-medium">MAC Adresse 1:</label>
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={mac1} value={mac1}
disabled disabled
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium">Systemuhr:</label> <label className="block font-medium">Systemuhr:</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={systemUhr} value={systemUhr}
disabled disabled
/> />
</div>
<div className="flex items-end">
<button <button
className="bg-littwin-blue text-white px-4 py-2 rounded mt-2 w-full" className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full"
onClick={() => { onClick={() => {
if ( if (
window.confirm( window.confirm(
@@ -191,30 +154,31 @@ function SettingModal({ showModal, onClose }) {
</div> </div>
</div> </div>
<div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4"> {/* IP-Konfiguration */}
<div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
<div> <div>
<label className="block text-sm font-medium">IP:</label> <label className="block font-medium">IP:</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={ip} value={ip}
onChange={(e) => setIp(e.target.value)} onChange={(e) => setIp(e.target.value)}
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium">Subnet:</label> <label className="block font-medium">Subnet:</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={subnet} value={subnet}
onChange={(e) => setSubnet(e.target.value)} onChange={(e) => setSubnet(e.target.value)}
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium">Gateway:</label> <label className="block font-medium">Gateway:</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={gateway} value={gateway}
onChange={(e) => setGateway(e.target.value)} onChange={(e) => setGateway(e.target.value)}
/> />
@@ -222,65 +186,59 @@ function SettingModal({ showModal, onClose }) {
</div> </div>
{/* SNTP Client */} {/* SNTP Client */}
<h3 className="text-sm font-bold mb-2">SNTP Client:</h3> <h3 className="text-sm font-bold my-2">SNTP Client:</h3>
<div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
<div> <div>
<label className="block text-sm font-medium"> <label className="block font-medium">IP NTP Server 1:</label>
IP NTP Server 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={ntp1} value={ntp1}
onChange={(e) => setNtp1(e.target.value)} onChange={(e) => setNtp1(e.target.value)}
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium"> <label className="block font-medium">IP NTP Server 2:</label>
IP NTP Server 2:
</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={ntp2} value={ntp2}
onChange={(e) => setNtp2(e.target.value)} onChange={(e) => setNtp2(e.target.value)}
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium"> <label className="block font-medium">IP NTP Server 3:</label>
IP NTP Server 3:
</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={ntp3} value={ntp3}
onChange={(e) => setNtp3(e.target.value)} onChange={(e) => setNtp3(e.target.value)}
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium">Zeitzone:</label> <label className="block font-medium">Zeitzone:</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={ntpTimezone} value={ntpTimezone}
onChange={(e) => setNtpTimezone(e.target.value)} onChange={(e) => setNtpTimezone(e.target.value)}
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium">NTP Active:</label> <label className="block font-medium">NTP Active:</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={active} value={active}
onChange={(e) => setActive(e.target.value)} onChange={(e) => setActive(e.target.value)}
/> />
</div> </div>
</div> </div>
{/* Buttons: gestapelt auf kleinen Bildschirmen, nebeneinander auf großen */} {/* Buttons: Skaliert für große Screens */}
<div className="flex flex-col md:flex-row justify-between mt-4 gap-2"> <div className="flex flex-col md:flex-row justify-between mt-4 gap-2">
<button <button
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto" className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
onClick={handleReboot} onClick={handleReboot}
> >
Neustart CPL Neustart CPL
@@ -289,18 +247,18 @@ function SettingModal({ showModal, onClose }) {
onClick={() => onClick={() =>
isAdminLoggedIn ? handleAdminLogout() : setShowLoginForm(true) isAdminLoggedIn ? handleAdminLogout() : setShowLoginForm(true)
} }
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto" 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"} {isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
</button> </button>
<button <button
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto" className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
onClick={handleClearDatabase} onClick={handleClearDatabase}
> >
Datenbank leeren Datenbank leeren
</button> </button>
<button <button
className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto" 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)} onClick={() => handleSubmit(originalValues, currentValues)}
> >
Übernehmen Übernehmen
@@ -308,7 +266,6 @@ function SettingModal({ showModal, onClose }) {
</div> </div>
</form> </form>
</div> </div>
)}
</ReactModal> </ReactModal>
); );
} }

2
config/webVersion.ts
View File

@@ -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;