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

2
apiMockData/SERVICE/kabelueberwachungMockData.js
View File

@@ -135,7 +135,7 @@ var win_kueID = [
//-------------TDR--------------------------------------------------- //-------------TDR---------------------------------------------------
var win_tdrActive = [ var win_tdrActive = [
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
]; ];
//---------------------------------------------------- //----------------------------------------------------
var win_tdrAtten = [ var win_tdrAtten = [

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

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

12
components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
View File

@@ -58,16 +58,18 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
}} }}
> >
<div className="p-2 flex justify-between items-center rounded-t-md"> <div className="p-2 flex justify-between items-center rounded-t-md">
<h2 className="text-base font-bold">Steckplatz {slot + 1}</h2> <h2 className="text-base font-bold">
Einstellungen Steckplatz {slot + 1}
</h2>
<button onClick={onClose} className="text-2xl hover:text-gray-200"> <button onClick={onClose} className="text-2xl hover:text-gray-200">
<i className="bi bi-x-circle-fill"></i> <i className="bi bi-x-circle-fill"></i>
</button> </button>
</div> </div>
<div className="flex justify-center bg-gray-100 space-x-2 p-2"> <div className="flex justify-start bg-gray-100 space-x-2 p-2">
{[ {[
{ label: "KUE Einstellung", key: "kue" }, { label: "Allgemein", key: "kue" },
{ label: "TDR Einstellung", key: "tdr" }, { label: "TDR ", key: "tdr" },
{ label: "Knotenpunkte", key: "knoten" }, { label: "Knotenpunkte", key: "knoten" },
].map(({ label, key }) => ( ].map(({ label, key }) => (
<button <button
@@ -75,7 +77,7 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
onClick={() => setActiveTab(key as any)} onClick={() => setActiveTab(key as any)}
className={`px-4 py-1 rounded-t font-bold text-sm ${ className={`px-4 py-1 rounded-t font-bold text-sm ${
activeTab === key activeTab === key
? "bg-white text-blue-600" ? "bg-white text-littwin-blue"
: "text-gray-500 hover:text-black" : "text-gray-500 hover:text-black"
}`} }`}
> >

42
components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
View File

@@ -173,7 +173,7 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
aria-checked={tdrActive} aria-checked={tdrActive}
onClick={handleTdrToggle} onClick={handleTdrToggle}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
tdrActive ? "bg-green-500" : "bg-gray-300" tdrActive ? "bg-littwin-blue" : "bg-gray-300"
}`} }`}
> >
<span <span
@@ -187,58 +187,54 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
</span> </span>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="mt-6 mb-4">
<div> <h3 className="font-bold mb-2">TDR Einstellungen</h3>
<label className="block text-sm font-medium mb-1">TDR Dämpfung</label>
<div className="relative"> <div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
<label className="font-semibold">TDR Dämpfung</label>
<div className="flex items-center gap-2">
<input <input
type="number" type="number"
className="w-24 border rounded p-1"
value={tdrData.daempfung} value={tdrData.daempfung}
onChange={(e) => { onChange={(e) => {
const updated = { ...tdrData, daempfung: e.target.value }; const updated = { ...tdrData, daempfung: e.target.value };
setTdrData(updated); setTdrData(updated);
updateCache(updated); updateCache(updated);
}} }}
className="border px-2 py-1 rounded w-full pr-10"
/> />
<span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-500"> <span>dB</span>
dB
</span>
</div> </div>
</div> </div>
<div> <div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
<label className="block text-sm font-medium mb-1"> <label className="font-semibold">Geschwindigkeit</label>
Geschwindigkeit <div className="flex items-center gap-2">
</label>
<div className="relative">
<input <input
type="number" type="number"
className="w-24 border rounded p-1"
value={tdrData.geschwindigkeit} value={tdrData.geschwindigkeit}
onChange={(e) => { onChange={(e) => {
const updated = { ...tdrData, geschwindigkeit: e.target.value }; const updated = { ...tdrData, geschwindigkeit: e.target.value };
setTdrData(updated); setTdrData(updated);
updateCache(updated); updateCache(updated);
}} }}
className="border px-2 py-1 rounded w-full pr-14"
/> />
<span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-500"> <span>m/µs</span>
m/µs
</span>
</div> </div>
</div> </div>
<div> <div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
<label className="block text-sm font-medium mb-1">Trigger</label> <label className="font-semibold">Trigger</label>
<input <input
type="number" type="number"
className="w-full border rounded p-1"
value={tdrData.trigger} value={tdrData.trigger}
onChange={(e) => { onChange={(e) => {
const updated = { ...tdrData, trigger: e.target.value }; const updated = { ...tdrData, trigger: e.target.value };
setTdrData(updated); setTdrData(updated);
updateCache(updated); updateCache(updated);
}} }}
className="border px-2 py-1 rounded w-full"
/> />
</div> </div>
</div> </div>
@@ -246,9 +242,9 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
<div className="qhd:pt-48 2xl:pt-16 xl:pt-8 laptop:pt-2 flex justify-end"> <div className="qhd:pt-48 2xl:pt-16 xl:pt-8 laptop:pt-2 flex justify-end">
<button <button
onClick={handleSave} onClick={handleSave}
className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-700" className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-500"
> >
💾 Einstellungen senden Einstellungen senden
</button> </button>
</div> </div>
</div> </div>