style: Layout-Anpassung für Einstellungsseite (Ausrichtung rechts oben)

- Inhalte in GeneralSettings und OPCUAInterfaceSettings nicht mehr zentriert
- Layout konsistent mit anderen Seiten (rechts oben durch max-w-5xl + mr-auto)
- Bessere Ausrichtung für Desktop-Auflösung und altes Laptop-Design
This commit is contained in:
ISA
2025-04-23 13:21:31 +02:00
parent 549288ebb9
commit 4fa534ee42
4 changed files with 74 additions and 34 deletions

View File

@@ -1,10 +1,13 @@
"use client";
// /components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
import React, { useState, useEffect } from "react";
declare global {
interface Window {
win_tdrActive?: number[];
win_tdrAmp?: string[];
win_tdrPulse?: string[];
win_tdrTrigger?: string[];
}
}
@@ -14,25 +17,41 @@ interface Props {
export default function TdrEinstellung({ slot }: Props) {
const [tdrActive, setTdrActive] = useState(false);
const [params, setParams] = useState({
const [tdrData, setTdrData] = useState({
verstarkung: "",
pulsweite: "",
trigger: "",
});
useEffect(() => {
if (
typeof window !== "undefined" &&
Array.isArray(window.win_tdrActive) &&
typeof window.win_tdrActive[slot] !== "undefined"
) {
const status = parseInt(String(window.win_tdrActive[slot]));
setTdrActive(status === 1);
} else {
console.warn("⚠️ win_tdrActive ist nicht definiert oder Slot ungültig");
if (typeof window !== "undefined") {
if (Array.isArray(window.win_tdrActive)) {
const status = parseInt(String(window.win_tdrActive[slot]));
setTdrActive(status === 1);
}
setTdrData({
verstarkung: window.win_tdrAmp?.[slot] ?? "",
pulsweite: window.win_tdrPulse?.[slot] ?? "",
trigger: window.win_tdrTrigger?.[slot] ?? "",
});
}
}, [slot]);
const handleSave = () => {
const v = tdrData.verstarkung.trim();
const p = tdrData.pulsweite.trim();
const t = tdrData.trigger.trim();
if (!v || !p || !t) {
alert("Bitte alle Felder ausfüllen.");
return;
}
const url = `/CPL?KTT${slot}=0&V=${v}&P=${p}&T=${t}`;
alert(`Sende: ${url}`);
window.location.href = url;
};
return (
<div className="space-y-4 text-sm laptop:text-base">
<h2 className="text-base laptop:text-lg font-semibold">
@@ -62,26 +81,47 @@ export default function TdrEinstellung({ slot }: Props) {
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<input
placeholder="Verstärkung"
value={params.verstarkung}
onChange={(e) =>
setParams({ ...params, verstarkung: e.target.value })
}
className="border px-2 py-1 rounded"
/>
<input
placeholder="Pulsweite"
value={params.pulsweite}
onChange={(e) => setParams({ ...params, pulsweite: e.target.value })}
className="border px-2 py-1 rounded"
/>
<input
placeholder="Trigger"
value={params.trigger}
onChange={(e) => setParams({ ...params, trigger: e.target.value })}
className="border px-2 py-1 rounded"
/>
<div>
<label className="block text-sm font-medium mb-1">Verstärkung</label>
<input
value={tdrData.verstarkung}
onChange={(e) =>
setTdrData({ ...tdrData, verstarkung: e.target.value })
}
className="border px-2 py-1 rounded w-full"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">Pulsweite</label>
<input
value={tdrData.pulsweite}
onChange={(e) =>
setTdrData({ ...tdrData, pulsweite: e.target.value })
}
className="border px-2 py-1 rounded w-full"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">Trigger</label>
<input
value={tdrData.trigger}
onChange={(e) =>
setTdrData({ ...tdrData, trigger: e.target.value })
}
className="border px-2 py-1 rounded w-full"
/>
</div>
</div>
<div className="pt-4 flex justify-end">
<button
onClick={handleSave}
className="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700 transition"
>
💾 Einstellungen senden
</button>
</div>
</div>
);

View File

@@ -65,7 +65,7 @@ const GeneralSettings: React.FC = () => {
//-------------------------------
return (
<div className="p-2 md:p-3 bg-gray-100 max-w-2xl mx-auto">
<div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto">
<h2 className="text-sm md:text-md font-bold mb-2">
Allgemeine Einstellungen
</h2>

View File

@@ -36,7 +36,7 @@ export default function OPCUAInterfaceSettings() {
};
return (
<div className="max-w-lg mx-auto p-2 bg-gray-100 shadow-md rounded-lg">
<div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto ">
<h2 className="text-base font-semibold mb-3">
OPCUA Server Einstellungen
</h2>

View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.257";
const webVersion = "1.6.258";
export default webVersion;