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

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

@@ -86,28 +86,12 @@ function SettingModal({ showModal, onClose }) {
}; };
return ( return (
<>
<ReactModal <ReactModal
isOpen={showModal} isOpen={showModal}
onRequestClose={onClose} onRequestClose={onClose}
shouldCloseOnOverlayClick={false} shouldCloseOnOverlayClick={false}
style={{ overlayClassName="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)", zIndex: 100 }, 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"
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",
},
}}
> >
<button <button
onClick={onClose} onClick={onClose}
@@ -130,9 +114,7 @@ function SettingModal({ showModal, onClose }) {
<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"> <label className="block text-sm font-medium">Benutzername:</label>
Benutzername:
</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"
@@ -172,7 +154,7 @@ function SettingModal({ showModal, onClose }) {
/> />
</div> </div>
<div className="mb-4 grid grid-cols-2 gap-4"> <div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium"> <label className="block text-sm font-medium">
MAC Adresse 1: MAC Adresse 1:
@@ -181,13 +163,35 @@ function SettingModal({ showModal, onClose }) {
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={mac1} value={mac1}
onChange={(e) => setMac1(e.target.value)}
disabled disabled
/> />
</div> </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>
<div className="mb-4 grid grid-cols-2 gap-4"> <div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium">IP:</label> <label className="block text-sm font-medium">IP:</label>
<input <input
@@ -206,9 +210,6 @@ function SettingModal({ showModal, onClose }) {
onChange={(e) => setSubnet(e.target.value)} onChange={(e) => setSubnet(e.target.value)}
/> />
</div> </div>
</div>
<div className="mb-4 grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium">Gateway:</label> <label className="block text-sm font-medium">Gateway:</label>
<input <input
@@ -218,40 +219,11 @@ function SettingModal({ showModal, onClose }) {
onChange={(e) => setGateway(e.target.value)} onChange={(e) => setGateway(e.target.value)}
/> />
</div> </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>
</div> </div>
{/* SNTP Client */} {/* SNTP Client */}
<h3 className="text-sm font-bold mb-2">SNTP Client:</h3> <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
<div className="mb-4 grid grid-cols-2 gap-4"> <div className="mb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium"> <label className="block text-sm font-medium">
IP NTP Server 1: IP NTP Server 1:
@@ -295,9 +267,7 @@ function SettingModal({ showModal, onClose }) {
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium"> <label className="block text-sm font-medium">NTP Active:</label>
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-2 w-full"
@@ -307,33 +277,31 @@ function SettingModal({ showModal, onClose }) {
</div> </div>
</div> </div>
{/* Modal Footer */} {/* Buttons: gestapelt auf kleinen Bildschirmen, nebeneinander auf großen */}
<div className="flex justify-between mt-4"> <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" className="bg-littwin-blue text-white px-4 py-2 rounded w-full md:w-auto"
onClick={() => handleReboot()} onClick={handleReboot}
> >
Neustart CPL Neustart CPL
</button> </button>
<button <button
onClick={() => { onClick={() =>
isAdminLoggedIn isAdminLoggedIn ? handleAdminLogout() : setShowLoginForm(true)
? 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-4 py-2 rounded"
> >
{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" className="bg-littwin-blue text-white px-4 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"
onClick={() => handleSubmit(originalValues, currentValues)} onClick={() => handleSubmit(originalValues, currentValues)}
className="bg-littwin-blue text-white px-4 py-2 rounded"
> >
Übernehmen Übernehmen
</button> </button>
@@ -342,7 +310,6 @@ function SettingModal({ showModal, onClose }) {
</div> </div>
)} )}
</ReactModal> </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;