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

fix: Kabelüberwachung Modal style

Browse Source 
alle Buttons mit Littwinblue
alle Buttons ohne Mouseover effect
This commit is contained in:
ISA
2025-05-06 11:24:19 +02:00
parent ff661dd7be
commit 992a0ff254
4 changed files with 104 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
View File

@@ -133,123 +133,108 @@ export default function KueEinstellung({
};
return (
<div
className="overflow-y-auto"
style={{ maxHeight: "55vh" }} // oder z. B. 600px
>
<div>
<label className="font-bold">Kabelbezeichnung:</label>
<div className="p-4 text-sm">
{/* Kabelbezeichnung */}
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="">Kabelbezeichnung:</label>
<input
type="text"
className="w-full border rounded p-1 text-sm"
className="w-full border rounded p-1"
value={formData.name}
onChange={(e) => handleChange("name", e.target.value)}
/>
</div>
<div>
<h3 className="font-bold text-center mb-2">Isolationsmessung</h3>
<table className="w-full border-collapse text-sm">
<thead className="bg-gray-100">
<tr>
<th className="border p-2 text-center">Grenzwert (MOhm)</th>
<th className="border p-2 text-center">Verzögerung (sek)</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border p-2 text-center">
<input
type="number"
step="0.1"
className="w-[6rem] border rounded p-1"
value={formData.limit1}
onChange={(e) => handleChange("limit1", e.target.value)}
/>
</td>
<td className="border p-2 text-center">
<input
type="number"
step="0.1"
className="w-[6rem] border rounded p-1"
value={formData.delay1}
onChange={(e) => handleChange("delay1", e.target.value)}
/>
</td>
</tr>
</tbody>
</table>
{/* Speicherintervall */}
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="">Speicherintervall:</label>
<select
className="w-full border rounded p-1"
value={formData.memoryInterval}
onChange={(e) => handleChange("memoryInterval", e.target.value)}
>
{memoryIntervalOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
<div>
<h3 className="font-bold text-center mb-2">Schleifenmessung</h3>
<table className="w-full border-collapse text-sm mb-2">
<thead className="bg-gray-100">
<tr>
<th className="border p-2 text-center">Grenzwert (kOhm)</th>
<th className="border p-2 text-center">Schleifenintervall (h)</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border p-2 text-center">
<input
type="number"
step="0.1"
className="w-[6rem] border rounded p-1"
value={formData.limit2Low}
onChange={(e) => handleChange("limit2Low", e.target.value)}
/>
</td>
<td className="border p-2 text-center">
<input
type="number"
step="0.1"
className="w-[6rem] border rounded p-1"
value={formData.loopInterval}
onChange={(e) => handleChange("loopInterval", e.target.value)}
/>
</td>
</tr>
</tbody>
</table>
<div>
<label className="font-bold block mb-1">Speicherintervall</label>
<select
className="w-full border rounded p-1 text-sm"
value={formData.memoryInterval}
onChange={(e) => handleChange("memoryInterval", e.target.value)}
>
{memoryIntervalOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
{/* Isolationsmessung */}
<div className="mb-4 w-full">
<h3 className="font-bold mb-2">Isolationsmessung</h3>
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="w-48 ">Grenzwert:</label>
<div>
<input
type="number"
className="w-24 border rounded p-1 mr-2 text-right"
value={formData.limit1}
onChange={(e) => handleChange("limit1", e.target.value)}
/>
<span>MOhm</span>
</div>
</div>
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="w-48 ">Verzögerung:</label>
<div>
<input
type="number"
className="w-24 border rounded p-1 mr-2 text-right"
value={formData.delay1}
onChange={(e) => handleChange("delay1", e.target.value)}
/>
<span>Sekunden</span>
</div>
</div>
</div>
{/* Schleifenmessung */}
<div className="mb-4">
<h3 className="font-bold mb-2">Schleifenmessung</h3>
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="w-48 ">Grenzwert:</label>
<div>
<input
type="number"
className="w-24 border rounded p-1 mr-2 text-right"
value={formData.limit2Low}
onChange={(e) => handleChange("limit2Low", e.target.value)}
/>
<span>kOhm</span>
</div>
</div>
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="w-48 ">Schleifenmessintervall:</label>
<div>
<input
type="number"
className="w-24 border rounded p-1 mr-2 text-right"
value={formData.loopInterval}
onChange={(e) => handleChange("loopInterval", e.target.value)}
/>
<span>Stunden</span>
</div>
</div>
</div>
<div className="flex justify-end gap-2 bg-gray-100 p-3 rounded">
{isAdminLoggedIn && (
<button
onClick={() => firmwareUpdate(slot)}
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
>
<span className="mr-2">🔧</span> Firmware Update
Firmware Update
</button>
)}
<button
onClick={() => handleDisplayEinschalten(slot)}
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
>
<span className="mr-2">📺</span> Display einschalten
</button>
Display einschalten
</button>{" "}
<button
onClick={handleSaveWrapper}
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
>
<span className="mr-2">💾</span> Speichern
Speichern
</button>
</div>
</div>