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

Modal style verbessern

Browse Source
This commit is contained in:
ISA
2024-10-16 14:44:00 +02:00
parent b55fe0fa2b
commit cdd527d14b
2 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local
View File

@@ -1,5 +1,5 @@
#Next.js Webserver, bleibt localhost auf CPL bei production #Next.js Webserver, bleibt localhost auf CPL bei production
#NEXT_PUBLIC_API_BASE_URL=http://localhost:3000 #NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
#CPL Webserver für die Entwicklung , um Daten von CPL zu bekommen, hat funktioniert auf dem CPL selbst #CPL Webserver für die Entwicklung , um Daten von CPL zu bekommen, hat funktioniert auf dem CPL selbst
NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443 #NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443
#NEXT_PUBLIC_API_BASE_URL=http://localhost:3000 NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

70
components/modales/KueModal.jsx
View File

@@ -20,51 +20,57 @@ function KueModal({ showModal, onClose }) {
width: "90%", width: "90%",
maxWidth: "800px", maxWidth: "800px",
padding: "0", padding: "0",
borderRadius: "8px",
border: "none",
}, },
}} }}
> >
{/* Modal Header */} {/* Modal Header */}
<div className="flex items-center justify-between bg-blue-500 text-white p-4 rounded-t"> <div className="flex items-center justify-between bg-littwin-blue text-white p-2 rounded-t-lg">
<h2 className="text-lg font-bold">KUE Einstellung</h2> <h2 className="text-sm font-bold">KUE Einstellung</h2>
<button onClick={onClose} className="text-white text-lg font-bold"> <button onClick={onClose} className="text-white text-lg font-bold">
&times; &times;
</button> </button>
</div> </div>
{/* Modal Body */} {/* Modal Body */}
<div className="p-6"> <div className="p-2">
<table className="w-full text-left border-collapse"> <table className="w-full text-left border-collapse">
<thead className="bg-gray-100"> <thead className="bg-gray-100">
<tr> <tr>
<th className="p-2 border">KÜ</th> <th className="p-2 border text-sm text-center">KÜ</th>
<th className="p-2 border">Bezeichnung</th> <th className="p-2 border text-sm text-center">Bezeichnung</th>
<th className="p-2 border">Isolationsgrenzwert</th> <th className="p-2 border text-sm text-center">
<th className="p-2 border">Schleifengrenzwert</th> Isolationsgrenzwert
<th className="p-2 border">Filterzeit</th> </th>
<th className="p-2 border">TDR Aktiv</th> <th className="p-2 border text-sm text-center">
<th className="p-2 border">KVZ Aktiv</th> Schleifengrenzwert
<th className="p-2 border">Datenlogger</th> </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> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="p-2 border">1</td> <td className="p-2 border text-center">1</td>
<td className="p-2 border"> <td className="p-2 border">
<input <input
type="text" type="text"
className="w-full border rounded p-1" className="w-12 border rounded p-1 text-sm"
defaultValue="Test1" defaultValue="Test1"
/> />
</td> </td>
<td className="p-2 border"> <td className="p-2 border text-center text-sm">
<input <input
type="number" type="number"
className="w-16 border rounded p-1" className="w-16 border rounded p-1 text-sm"
defaultValue="10.0" defaultValue="10.0"
/>{" "} />{" "}
MOhm MOhm
</td> </td>
<td className="p-2 border"> <td className="p-2 border text-center text-sm">
<input <input
type="number" type="number"
className="w-16 border rounded p-1" className="w-16 border rounded p-1"
@@ -72,13 +78,16 @@ function KueModal({ showModal, onClose }) {
/>{" "} />{" "}
kOhm kOhm
</td> </td>
<td className="p-2 border"> <td className="p-2 border text-center text-sm">
<input {/* Flexbox für Filterzeit */}
type="number" <div className="flex items-center justify-center">
className="w-16 border rounded p-1" <input
defaultValue="420" type="number"
/>{" "} className="w-12 border rounded p-1 text-sm"
sek. defaultValue="420"
/>
<span className="ml-1">sek.</span>
</div>
</td> </td>
<td className="p-2 border text-center"> <td className="p-2 border text-center">
<input type="checkbox" defaultChecked /> <input type="checkbox" defaultChecked />
@@ -87,9 +96,18 @@ function KueModal({ showModal, onClose }) {
<input type="checkbox" defaultChecked /> <input type="checkbox" defaultChecked />
</td> </td>
<td className="p-2 border"> <td className="p-2 border">
<select className="border rounded p-1"> <select className="border rounded p-1 w-full">
<option value="aus">aus</option> <option value="aus">aus</option>
<option value="ein">ein</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> </select>
</td> </td>
</tr> </tr>
@@ -98,7 +116,7 @@ function KueModal({ showModal, onClose }) {
</div> </div>
{/* Modal Footer */} {/* Modal Footer */}
<div className="flex justify-end bg-gray-100 p-4 rounded-b"> <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
<button <button
onClick={onClose} onClick={onClose}
className="bg-blue-500 text-white p-2 rounded flex items-center" className="bg-blue-500 text-white p-2 rounded flex items-center"