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:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user