feat: Modal mit TDRPopup integriert und Layout optimiert
- TDRPopup-Komponente in Kue705FO-Modul integriert. - Modal-Dimensionen angepasst, um Scrollen zu vermeiden. - Layout von TDRPopup und Chart dynamisch skalierbar gestaltet. - Inhalte flexibler und kompakter gestaltet.
This commit is contained in:
ISA
@@ -477,6 +477,26 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
const input = e.currentTarget;
|
||||
input.value = input.value.replace(/[^0-9]/g, "");
|
||||
};
|
||||
//---------------------------------------------------
|
||||
//Auswahlmenü für Jahr, Monat und Sortierung
|
||||
const [jahr, setJahr] = useState(new Date().getFullYear());
|
||||
const [monat, setMonat] = useState(new Date().getMonth() + 1);
|
||||
const [sortAscending, setSortAscending] = useState(true);
|
||||
|
||||
const handleSortToggle = () => {
|
||||
setSortAscending(!sortAscending);
|
||||
console.log(
|
||||
"Sortierung umkehren:",
|
||||
sortAscending ? "Absteigend" : "Aufsteigend"
|
||||
);
|
||||
};
|
||||
|
||||
const handleAktualisieren = () => {
|
||||
console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
|
||||
// Logik für die Aktualisierung hinzufügen
|
||||
};
|
||||
|
||||
//---------------------------------------------------
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -647,10 +667,11 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "95%",
|
||||
maxWidth: "75rem",
|
||||
height: "40.625rem",
|
||||
padding: "0.625rem",
|
||||
width: "80%", // Breite reduzieren
|
||||
maxWidth: "50rem", // Maximale Breite
|
||||
height: "30rem", // Höhe anpassen
|
||||
padding: "1rem", // Weniger Padding
|
||||
overflow: "hidden", // Scrollen vermeiden
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -669,124 +690,22 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
<i className="bi bi-x-circle-fill"></i>{" "}
|
||||
{/* Bootstrap Icon "X" */}
|
||||
</button>
|
||||
<input
|
||||
className="input-group-field"
|
||||
id="jahrSelect"
|
||||
type="number"
|
||||
value=""
|
||||
min="2020"
|
||||
max="2030"
|
||||
onKeyUp={(e) => noLetter(e)}
|
||||
/>
|
||||
<ul className="menu">
|
||||
<li>
|
||||
<div
|
||||
className="input-group"
|
||||
style={{
|
||||
marginTop: "12px",
|
||||
width: "125px",
|
||||
paddingRight: "5px",
|
||||
}}
|
||||
>
|
||||
<span className="input-group-label">Jahr</span>
|
||||
<input
|
||||
className="input-group-field"
|
||||
id="jahrSelect"
|
||||
type="number"
|
||||
value=""
|
||||
min="2020"
|
||||
max="2030"
|
||||
onKeyUp={() => noLetter(this)}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div
|
||||
className="input-group"
|
||||
style={{
|
||||
marginTop: "12px",
|
||||
width: "125px",
|
||||
paddingRight: "10px",
|
||||
}}
|
||||
>
|
||||
<span className="input-group-label">Monat</span>
|
||||
<input
|
||||
className="input-group-field"
|
||||
id="monatSelect"
|
||||
type="number"
|
||||
value=""
|
||||
min="1"
|
||||
max="12"
|
||||
onkeyup="noLetter(this);"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
{/* Verwenden Sie die separate TDRPopup-Komponente */}
|
||||
<div
|
||||
style={{
|
||||
maxHeight: "100%", // Inhalte anpassen
|
||||
overflow: "auto", // Nur bei Bedarf Scrollen aktivieren
|
||||
}}
|
||||
>
|
||||
<TDRPopup />
|
||||
</div>
|
||||
|
||||
<li>
|
||||
<div
|
||||
className="input-group"
|
||||
style={{
|
||||
marginTop: "12px",
|
||||
width: "160px",
|
||||
paddingRight: "10px",
|
||||
height: "28px",
|
||||
}}
|
||||
>
|
||||
<select
|
||||
id="options"
|
||||
name="options"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
></select>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
style={{
|
||||
marginTop: "7px",
|
||||
paddingLeft: "5px",
|
||||
paddingRight: "5px",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="button littwin small"
|
||||
onClick={() => sortieren()}
|
||||
>
|
||||
<i
|
||||
className="fi-arrow-up"
|
||||
style={{ fontSize: "1.2em" }}
|
||||
></i>
|
||||
<i
|
||||
className="fi-arrow-down"
|
||||
style={{ fontSize: "1.2em" }}
|
||||
></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li
|
||||
style={{
|
||||
marginTop: "7px",
|
||||
paddingLeft: "5px",
|
||||
paddingRight: "5px",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="button littwin small"
|
||||
onclick="aktualisieren()"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Canvas für die Chart.js-Grafik */}
|
||||
<canvas
|
||||
id="myChart"
|
||||
ref={chartRef}
|
||||
style={{ width: "100%", height: "37.5rem" }}
|
||||
style={{ width: "100%", height: "20rem" }} // Grafikhöhe reduzieren
|
||||
></canvas>
|
||||
</ReactModal>
|
||||
)}
|
||||
@@ -811,3 +730,95 @@ interface Kue705FOProps {
|
||||
tdrLocation: number[];
|
||||
alarmStatus?: boolean;
|
||||
}
|
||||
//-------------------------------------------------------------
|
||||
// TDRPopup Komponente
|
||||
//-------------------------------------------------------------
|
||||
// Im Modal für TDR
|
||||
const TDRPopup = () => {
|
||||
const [jahr, setJahr] = useState(new Date().getFullYear());
|
||||
const [monat, setMonat] = useState(new Date().getMonth() + 1);
|
||||
const [sortAscending, setSortAscending] = useState(true);
|
||||
|
||||
const handleSortToggle = () => {
|
||||
setSortAscending(!sortAscending);
|
||||
console.log(
|
||||
"Sortierung umkehren:",
|
||||
sortAscending ? "Absteigend" : "Aufsteigend"
|
||||
);
|
||||
};
|
||||
|
||||
const handleAktualisieren = () => {
|
||||
console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
|
||||
// Logik für die Aktualisierung hinzufügen
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<label htmlFor="jahrSelect" className="text-sm font-semibold">
|
||||
Jahr
|
||||
</label>
|
||||
<select
|
||||
id="jahrSelect"
|
||||
className="border rounded px-2 py-1"
|
||||
value={jahr}
|
||||
onChange={(e) => setJahr(Number(e.target.value))}
|
||||
>
|
||||
{Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<label htmlFor="monatSelect" className="text-sm font-semibold">
|
||||
Monat
|
||||
</label>
|
||||
<select
|
||||
id="monatSelect"
|
||||
className="border rounded px-2 py-1"
|
||||
value={monat}
|
||||
onChange={(e) => setMonat(Number(e.target.value))}
|
||||
>
|
||||
{Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
|
||||
<option key={month} value={month}>
|
||||
{month}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<label htmlFor="emptySelect" className="text-sm font-semibold">
|
||||
Auswahl
|
||||
</label>
|
||||
<select
|
||||
id="emptySelect"
|
||||
className="border rounded px-2 py-1"
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="" disabled>
|
||||
Bitte wählen...
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSortToggle}
|
||||
className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
|
||||
>
|
||||
<i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
|
||||
<span className="ml-1">Sortieren</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleAktualisieren}
|
||||
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user