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;
|
const input = e.currentTarget;
|
||||||
input.value = input.value.replace(/[^0-9]/g, "");
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -647,10 +667,11 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
|||||||
bottom: "auto",
|
bottom: "auto",
|
||||||
marginRight: "-50%",
|
marginRight: "-50%",
|
||||||
transform: "translate(-50%, -50%)",
|
transform: "translate(-50%, -50%)",
|
||||||
width: "95%",
|
width: "80%", // Breite reduzieren
|
||||||
maxWidth: "75rem",
|
maxWidth: "50rem", // Maximale Breite
|
||||||
height: "40.625rem",
|
height: "30rem", // Höhe anpassen
|
||||||
padding: "0.625rem",
|
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>{" "}
|
<i className="bi bi-x-circle-fill"></i>{" "}
|
||||||
{/* Bootstrap Icon "X" */}
|
{/* Bootstrap Icon "X" */}
|
||||||
</button>
|
</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>
|
{/* Verwenden Sie die separate TDRPopup-Komponente */}
|
||||||
<div
|
<div
|
||||||
className="input-group"
|
style={{
|
||||||
style={{
|
maxHeight: "100%", // Inhalte anpassen
|
||||||
marginTop: "12px",
|
overflow: "auto", // Nur bei Bedarf Scrollen aktivieren
|
||||||
width: "125px",
|
}}
|
||||||
paddingRight: "10px",
|
>
|
||||||
}}
|
<TDRPopup />
|
||||||
>
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<li>
|
{/* Canvas für die Chart.js-Grafik */}
|
||||||
<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
|
<canvas
|
||||||
id="myChart"
|
id="myChart"
|
||||||
ref={chartRef}
|
ref={chartRef}
|
||||||
style={{ width: "100%", height: "37.5rem" }}
|
style={{ width: "100%", height: "20rem" }} // Grafikhöhe reduzieren
|
||||||
></canvas>
|
></canvas>
|
||||||
</ReactModal>
|
</ReactModal>
|
||||||
)}
|
)}
|
||||||
@@ -811,3 +730,95 @@ interface Kue705FOProps {
|
|||||||
tdrLocation: number[];
|
tdrLocation: number[];
|
||||||
alarmStatus?: boolean;
|
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