132 lines
4.6 KiB
JavaScript
132 lines
4.6 KiB
JavaScript
import ReactModal from "react-modal";
|
|
|
|
function KueModal({ showModal, onClose }) {
|
|
return (
|
|
<ReactModal
|
|
isOpen={showModal}
|
|
onRequestClose={onClose}
|
|
style={{
|
|
overlay: {
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
zIndex: 100,
|
|
},
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "90%",
|
|
maxWidth: "800px",
|
|
padding: "0",
|
|
borderRadius: "8px",
|
|
border: "none",
|
|
},
|
|
}}
|
|
>
|
|
{/* Modal Header */}
|
|
<div className="flex items-center justify-between bg-littwin-blue text-white p-2 rounded-t-lg">
|
|
<h2 className="text-sm font-bold">KUE Einstellung</h2>
|
|
<button onClick={onClose} className="text-white text-lg font-bold">
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal Body */}
|
|
<div className="p-2">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead className="bg-gray-100">
|
|
<tr>
|
|
<th className="p-2 border text-sm text-center">KÜ</th>
|
|
<th className="p-2 border text-sm text-center">Bezeichnung</th>
|
|
<th className="p-2 border text-sm text-center">
|
|
Isolationsgrenzwert
|
|
</th>
|
|
<th className="p-2 border text-sm text-center">
|
|
Schleifengrenzwert
|
|
</th>
|
|
<th className="p-2 border text-sm text-center">Filterzeit</th>
|
|
<th className="p-2 border text-sm text-center">TDR Aktiv</th>
|
|
<th className="p-2 border text-sm text-center">KVZ Aktiv</th>
|
|
<th className="p-2 border text-sm">Datenlogger</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="p-2 border text-center">1</td>
|
|
<td className="p-2 border">
|
|
<input
|
|
type="text"
|
|
className="w-12 border rounded p-1 text-sm"
|
|
defaultValue="Test1"
|
|
/>
|
|
</td>
|
|
<td className="p-2 border text-center text-sm">
|
|
<input
|
|
type="number"
|
|
className="w-16 border rounded p-1 text-sm"
|
|
defaultValue="10.0"
|
|
/>{" "}
|
|
MOhm
|
|
</td>
|
|
<td className="p-2 border text-center text-sm">
|
|
<input
|
|
type="number"
|
|
className="w-16 border rounded p-1"
|
|
defaultValue="0.10"
|
|
/>{" "}
|
|
kOhm
|
|
</td>
|
|
<td className="p-2 border text-center text-sm">
|
|
{/* Flexbox für Filterzeit */}
|
|
<div className="flex items-center justify-center">
|
|
<input
|
|
type="number"
|
|
className="w-12 border rounded p-1 text-sm"
|
|
defaultValue="420"
|
|
/>
|
|
<span className="ml-1">sek.</span>
|
|
</div>
|
|
</td>
|
|
<td className="p-2 border text-center">
|
|
<input type="checkbox" defaultChecked />
|
|
</td>
|
|
<td className="p-2 border text-center">
|
|
<input type="checkbox" defaultChecked />
|
|
</td>
|
|
<td className="p-2 border">
|
|
<select className="border rounded p-1 w-full">
|
|
<option value="aus">aus</option>
|
|
<option value="ein">1 (1 min)</option>
|
|
<option value="zwei">2 (2 min)</option>
|
|
<option value="drei">3 (3 min)</option>
|
|
<option value="vier">4 (4 min)</option>
|
|
<option value="fuenf">5 (5 min)</option>
|
|
<option value="sechs">6 (6 min)</option>
|
|
<option value="sieben">7 (7 min)</option>
|
|
<option value="acht">8 (8 min)</option>
|
|
<option value="neun">9 (9 min)</option>
|
|
<option value="zehn">10 (10 min)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Modal Footer */}
|
|
<div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
|
|
<button
|
|
onClick={onClose}
|
|
className="bg-blue-500 text-white p-2 rounded flex items-center"
|
|
>
|
|
<span className="mr-2">💾</span> Speichern
|
|
</button>
|
|
</div>
|
|
</ReactModal>
|
|
);
|
|
}
|
|
|
|
export default KueModal;
|