SettingsModal etwas responsive mit tailwindcss
This commit is contained in:
ISA
@@ -86,263 +86,230 @@ function SettingModal({ showModal, onClose }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ReactModal
|
||||
isOpen={showModal}
|
||||
onRequestClose={onClose}
|
||||
shouldCloseOnOverlayClick={false}
|
||||
<ReactModal
|
||||
isOpen={showModal}
|
||||
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"
|
||||
>
|
||||
<button
|
||||
onClick={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",
|
||||
},
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "10px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<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">
|
||||
{/* 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>
|
||||
<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">
|
||||
Benutzername:
|
||||
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)}
|
||||
value={mac1}
|
||||
disabled
|
||||
/>
|
||||
</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>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Systemuhr:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
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 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>
|
||||
<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 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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* 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
|
||||
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>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</ReactModal>
|
||||
</>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
// components/header/settingsModal/hooks/useSystemSettings.ts
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../redux/store";
|
||||
|
||||
export function useSystemSettings(showModal: boolean) {
|
||||
const settings = useSelector((state: RootState) => state.systemSettings);
|
||||
const [formValues, setFormValues] = useState(settings);
|
||||
@@ -13,9 +12,11 @@ export function useSystemSettings(showModal: boolean) {
|
||||
setFormValues(settings);
|
||||
setOriginalValues({
|
||||
name: settings.deviceName,
|
||||
mac1: settings.mac1,
|
||||
ip: settings.ip,
|
||||
subnet: settings.subnet,
|
||||
gateway: settings.gateway,
|
||||
systemUhr: settings.cplInternalTimestamp,
|
||||
ntp1: settings.ntp1,
|
||||
ntp2: settings.ntp2,
|
||||
ntp3: settings.ntp3,
|
||||
|
||||
Reference in New Issue
Block a user