style: AnalogInputsChartModal dark mode
This commit is contained in:
ISA
@@ -367,9 +367,9 @@ export default function AnalogInputsChart({
|
||||
<div
|
||||
className={`flex flex-col gap-2 h-full ${loading ? "cursor-wait" : ""}`}
|
||||
>
|
||||
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||||
<div className="flex justify-between items-center p-2 rounded-lg space-x-2 bg-[var(--color-surface-alt)] border border-base">
|
||||
<div className="flex justify-start">
|
||||
<Dialog.Title className="text-lg font-semibold text-gray-700">
|
||||
<Dialog.Title className="text-lg font-semibold text-fg">
|
||||
Eingang {selectedId ?? "–"}
|
||||
</Dialog.Title>
|
||||
</div>
|
||||
@@ -385,7 +385,7 @@ export default function AnalogInputsChart({
|
||||
{/* ✅ Zeitraum-Auswahl (Listbox nur lokal) */}
|
||||
<Listbox value={localZeitraum} onChange={setLocalZeitraum}>
|
||||
<div className="relative w-48">
|
||||
<Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm">
|
||||
<Listbox.Button className="w-full border border-base px-3 py-1 rounded bg-[var(--color-surface)] text-fg flex justify-between items-center text-sm">
|
||||
<span>
|
||||
{localZeitraum === "DIA0"
|
||||
? "Alle Messwerte"
|
||||
@@ -393,14 +393,14 @@ export default function AnalogInputsChart({
|
||||
? "Stündlich"
|
||||
: "Täglich"}
|
||||
</span>
|
||||
<i className="bi bi-chevron-down text-gray-400" />
|
||||
<i className="bi bi-chevron-down text-[var(--color-muted)]" />
|
||||
</Listbox.Button>
|
||||
<Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm">
|
||||
<Listbox.Options className="absolute z-10 mt-1 w-full border border-base bg-[var(--color-surface)] shadow rounded text-sm">
|
||||
{["DIA0", "DIA1", "DIA2"].map((option) => (
|
||||
<Listbox.Option
|
||||
key={option}
|
||||
value={option}
|
||||
className="px-4 py-1 cursor-pointer hover:bg-gray-200"
|
||||
className="px-4 py-1 cursor-pointer hover:bg-[var(--color-surface-alt)] text-fg"
|
||||
>
|
||||
{option === "DIA0"
|
||||
? "Alle Messwerte"
|
||||
@@ -416,7 +416,7 @@ export default function AnalogInputsChart({
|
||||
{/* ✅ Button: lädt die Daten & aktualisiert Redux */}
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
|
||||
className="btn-primary px-4 py-1 rounded text-sm"
|
||||
>
|
||||
Daten laden
|
||||
</button>
|
||||
@@ -427,11 +427,9 @@ export default function AnalogInputsChart({
|
||||
{/* Chart-Anzeige */}
|
||||
<div className="flex-1 min-h-0 w-full">
|
||||
{!selectedAnalogInput?.id ? (
|
||||
<div className="flex items-center justify-center h-full text-gray-500 text-lg gap-2">
|
||||
<div className="flex items-center justify-center h-full text-fg-secondary text-lg gap-2">
|
||||
<i className="bi bi-info-circle text-2xl mr-2" />
|
||||
<span>
|
||||
Bitte wählen Sie einen Eingang aus, um die Messkurve anzuzeigen
|
||||
</span>
|
||||
<span>Bitte Eingang auswählen</span>
|
||||
</div>
|
||||
) : (
|
||||
<Line
|
||||
|
||||
@@ -35,82 +35,50 @@ export default function AnalogInputsChartModal({
|
||||
<div className="fixed inset-0 bg-black/50" aria-hidden="true" />
|
||||
{/* Centered panel */}
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||||
<Dialog.Panel className="relative">
|
||||
<Dialog.Panel className="relative outline-none">
|
||||
<div
|
||||
className="bg-white rounded-xl shadow-xl border border-gray-200"
|
||||
className={`rounded-xl shadow-xl border border-base bg-[var(--color-surface)] text-fg flex flex-col transition-all duration-300 overflow-hidden`}
|
||||
style={{
|
||||
width: isFullscreen ? "90vw" : "70rem",
|
||||
height: isFullscreen ? "90vh" : "35rem",
|
||||
padding: "1rem",
|
||||
transition: "all 0.3s ease-in-out",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: isFullscreen ? "90vh" : "38rem",
|
||||
}}
|
||||
>
|
||||
{/* Controls top-right (fullscreen + close) */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0.625rem",
|
||||
right: "0.625rem",
|
||||
display: "flex",
|
||||
gap: "0.75rem",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsFullscreen((v) => !v)}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
|
||||
aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
|
||||
>
|
||||
<i
|
||||
className={
|
||||
isFullscreen
|
||||
? "bi bi-fullscreen-exit"
|
||||
: "bi bi-arrows-fullscreen"
|
||||
}
|
||||
></i>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => dispatch(setIsChartModalOpen(false))}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
title="Schließen"
|
||||
aria-label="Modal schließen"
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Title row (align like IsoChartView) */}
|
||||
<div className="flex justify-between items-center mb-2 pr-24">
|
||||
<Dialog.Title className="text-lg font-semibold text-gray-700">
|
||||
{/* Header */}
|
||||
<header className="flex items-center justify-between px-6 py-4 border-b border-base select-none">
|
||||
<h2 className="text-base font-bold">
|
||||
Messkurve Messwerteingang {selectedId ?? "–"}
|
||||
</Dialog.Title>
|
||||
</div>
|
||||
|
||||
{/* Chart container (structure similar to IsoChartView) */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "90%",
|
||||
}}
|
||||
>
|
||||
{/* Optional: place an action bar here if needed */}
|
||||
<div style={{ flex: 1, height: "90%" }}>
|
||||
<AnalogInputsChart loading={loading} setLoading={setLoading} />
|
||||
</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setIsFullscreen((v) => !v)}
|
||||
className="icon-btn text-xl"
|
||||
aria-label={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
|
||||
type="button"
|
||||
title={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
|
||||
>
|
||||
<i
|
||||
className={
|
||||
isFullscreen
|
||||
? "bi bi-fullscreen-exit"
|
||||
: "bi bi-arrows-fullscreen"
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => dispatch(setIsChartModalOpen(false))}
|
||||
className="icon-btn text-2xl"
|
||||
aria-label="Modal schließen"
|
||||
type="button"
|
||||
title="Schließen"
|
||||
>
|
||||
<i className="bi bi-x-circle-fill" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 min-h-0 px-4 pt-3 pb-4 bg-[var(--color-surface)]">
|
||||
<AnalogInputsChart loading={loading} setLoading={setLoading} />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
|
||||
Reference in New Issue
Block a user