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

SettingsModal etwas responsive mit tailwindcss

Browse Source
This commit is contained in:
ISA
2025-02-24 10:55:20 +01:00
parent f544ef3c60
commit 35eecfdbae
3 changed files with 206 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,263 +86,230 @@ function SettingModal({ showModal, onClose }) {
}; };
return ( return (
<> <ReactModal
<ReactModal isOpen={showModal}
isOpen={showModal} onRequestClose={onClose}
onRequestClose={onClose} shouldCloseOnOverlayClick={false}
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"
>
<button
onClick={onClose}
style={{ style={{
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)", zIndex: 100 }, position: "absolute",
content: { top: "10px",
top: "50%", right: "10px",
left: "50%", background: "transparent",
right: "auto", border: "none",
bottom: "auto", cursor: "pointer",
marginRight: "-50%", fontSize: "24px",
transform: "translate(-50%, -50%)",
width: "80%",
maxWidth: "800px",
padding: "20px",
borderRadius: "8px",
border: "none",
position: "relative",
},
}} }}
> >
<button <i className="bi bi-x-circle-fill"></i>
onClick={onClose} </button>
style={{
position: "absolute",
top: "10px",
right: "10px",
background: "transparent",
border: "none",
cursor: "pointer",
fontSize: "24px",
}}
>
<i className="bi bi-x-circle-fill"></i>
</button>
{/* Hauptinhalt oder Login-Formular */} {/* Hauptinhalt oder Login-Formular */}
{showLoginForm ? ( {showLoginForm ? (
<div className="text-black"> <div className="text-black">
<h2 className="text-lg font-bold mb-4">Admin Login</h2> <h2 className="text-lg font-bold mb-4">Admin Login</h2>
<form onSubmit={(e) => e.preventDefault()}> <form onSubmit={(e) => e.preventDefault()}>
<div className="mb-4"> <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>
<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"> <label className="block text-sm font-medium">
Benutzername: MAC Adresse 1:
</label> </label>
<input <input
type="text" type="text"
className="border border-gray-300 rounded p-2 w-full" className="border border-gray-300 rounded 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 text-sm 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)}
/>
</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>
<form>
<div className="mb-4">
<label className="block text-sm 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-2 w-full"
value={name} value={systemUhr}
onChange={(e) => setName(e.target.value)} 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>
<div>
<div className="mb-4 grid grid-cols-2 gap-4"> <label className="block text-sm font-medium">Subnet:</label>
<div> <input
<label className="block text-sm font-medium"> type="text"
MAC Adresse 1: className="border border-gray-300 rounded p-2 w-full"
</label> value={subnet}
<input onChange={(e) => setSubnet(e.target.value)}
type="text" />
className="border border-gray-300 rounded p-2 w-full"
value={mac1}
onChange={(e) => setMac1(e.target.value)}
disabled
/>
</div>
</div> </div>
<div>
<div className="mb-4 grid grid-cols-2 gap-4"> <label className="block text-sm font-medium">Gateway:</label>
<div> <input
<label className="block text-sm font-medium">IP:</label> type="text"
<input className="border border-gray-300 rounded p-2 w-full"
type="text" value={gateway}
className="border border-gray-300 rounded p-2 w-full" onChange={(e) => setGateway(e.target.value)}
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>
</div>
<div className="mb-4 grid grid-cols-2 gap-4"> {/* SNTP Client */}
<div> <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
<label className="block text-sm font-medium">Gateway:</label> <div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<input <div>
type="text" <label className="block text-sm font-medium">
className="border border-gray-300 rounded p-2 w-full" IP NTP Server 1:
value={gateway} </label>
onChange={(e) => setGateway(e.target.value)} <input
/> type="text"
</div> className="border border-gray-300 rounded p-2 w-full"
<div> value={ntp1}
<label className="block text-sm font-medium"> onChange={(e) => setNtp1(e.target.value)}
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> </div>
<div>
{/* SNTP Client */} <label className="block text-sm font-medium">
<h3 className="text-sm font-bold mb-2">SNTP Client:</h3> IP NTP Server 2:
<div className="mb-4 grid grid-cols-2 gap-4"> </label>
<div> <input
<label className="block text-sm font-medium"> type="text"
IP NTP Server 1: className="border border-gray-300 rounded p-2 w-full"
</label> value={ntp2}
<input onChange={(e) => setNtp2(e.target.value)}
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> </div>
<div>
{/* Modal Footer */} <label className="block text-sm font-medium">
<div className="flex justify-between mt-4"> IP NTP Server 3:
<button </label>
className="bg-littwin-blue text-white px-4 py-2 rounded" <input
onClick={() => handleReboot()} type="text"
> className="border border-gray-300 rounded p-2 w-full"
Neustart CPL value={ntp3}
</button> onChange={(e) => setNtp3(e.target.value)}
<button />
onClick={() => {
isAdminLoggedIn
? handleAdminLogout()
: setShowLoginForm(true);
}}
className="bg-littwin-blue text-white px-4 py-2 rounded"
>
{isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
</button>
<button
className="bg-littwin-blue text-white px-4 py-2 rounded"
onClick={() => handleClearDatabase()}
>
Datenbank leeren
</button>
<button
onClick={() => handleSubmit(originalValues, currentValues)}
className="bg-littwin-blue text-white px-4 py-2 rounded"
>
Übernehmen
</button>
</div> </div>
</form> <div>
</div> <label className="block text-sm font-medium">Zeitzone:</label>
)} <input
</ReactModal> 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>
); );
} }

5
components/header/settingsModal/hooks/useSystemSettings.ts
View File

@@ -1,8 +1,7 @@
// components/header/settingsModal/hooks/useSystemSettings.ts // components/header/settingsModal/hooks/useSystemSettings.ts
import { useEffect, useState } from "react"; import { useState, useEffect } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store"; import { RootState } from "../../../../redux/store";
export function useSystemSettings(showModal: boolean) { export function useSystemSettings(showModal: boolean) {
const settings = useSelector((state: RootState) => state.systemSettings); const settings = useSelector((state: RootState) => state.systemSettings);
const [formValues, setFormValues] = useState(settings); const [formValues, setFormValues] = useState(settings);
@@ -13,9 +12,11 @@ export function useSystemSettings(showModal: boolean) {
setFormValues(settings); setFormValues(settings);
setOriginalValues({ setOriginalValues({
name: settings.deviceName, name: settings.deviceName,
mac1: settings.mac1,
ip: settings.ip, ip: settings.ip,
subnet: settings.subnet, subnet: settings.subnet,
gateway: settings.gateway, gateway: settings.gateway,
systemUhr: settings.cplInternalTimestamp,
ntp1: settings.ntp1, ntp1: settings.ntp1,
ntp2: settings.ntp2, ntp2: settings.ntp2,
ntp3: settings.ntp3, ntp3: settings.ntp3,

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.98"; const webVersion = "1.6.99";
export default webVersion; export default webVersion;