feat: close button and maximize modal

This commit is contained in:
ISA
2025-08-14 09:42:24 +02:00
parent c3fc8e0a4a
commit 2db9da2394
6 changed files with 77 additions and 19 deletions

View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.715 NEXT_PUBLIC_APP_VERSION=1.6.716
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.715 NEXT_PUBLIC_APP_VERSION=1.6.716
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

View File

@@ -1,3 +1,8 @@
## [1.6.716] 2025-08-14
- Messkurve Modal in Messwerteingänge
---
## [1.6.715] 2025-08-14 ## [1.6.715] 2025-08-14
- fix: KÜ Version 4.20 in daschboard KÜs Status anzeigen - fix: KÜ Version 4.20 in daschboard KÜs Status anzeigen

View File

@@ -21,6 +21,7 @@ export default function AnalogInputsChartModal({
const selectedId = useSelector( const selectedId = useSelector(
(state: RootState) => state.analogInputsHistory.selectedId (state: RootState) => state.analogInputsHistory.selectedId
); );
const [isFullscreen, setIsFullscreen] = React.useState(false);
if (!isOpen) return null; if (!isOpen) return null;
@@ -34,21 +35,73 @@ export default function AnalogInputsChartModal({
<div className="fixed inset-0 bg-black/50" aria-hidden="true" /> <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
{/* Centered panel */} {/* Centered panel */}
<div className="fixed inset-0 flex items-center justify-center p-4"> <div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="bg-white w-[95vw] h-[85vh] max-w-6xl rounded-xl shadow-xl border border-gray-200 p-4 flex flex-col"> <Dialog.Panel className="relative">
<div className="flex items-center justify-between mb-3"> <div
<Dialog.Title className="text-lg font-semibold text-gray-700"> className="bg-white rounded-xl shadow-xl border border-gray-200"
Messkurve Messwerteingang {selectedId ?? ""} style={{
</Dialog.Title> width: isFullscreen ? "90vw" : "70rem",
<button height: isFullscreen ? "90vh" : "35rem",
className="text-xl text-gray-500 hover:text-gray-700" padding: "1rem",
onClick={() => dispatch(setIsChartModalOpen(false))} transition: "all 0.3s ease-in-out",
aria-label="Modal schließen" display: "flex",
flexDirection: "column",
}}
>
{/* Controls top-right (fullscreen + close) */}
<div
style={{
position: "absolute",
top: "0.625rem",
right: "0.625rem",
display: "flex",
gap: "0.75rem",
}}
> >
<button
</button> onClick={() => setIsFullscreen((v) => !v)}
</div> style={{
<div className="flex-1 min-h-0"> background: "transparent",
<AnalogInputsChart loading={loading} setLoading={setLoading} /> 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 */}
<div className="flex items-center justify-between mb-3 pr-14">
<Dialog.Title className="text-lg font-semibold text-gray-700">
Messkurve Messwerteingang {selectedId ?? ""}
</Dialog.Title>
</div>
{/* Chart */}
<div className="flex-1 min-h-0">
<AnalogInputsChart loading={loading} setLoading={setLoading} />
</div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</div> </div>

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.715", "version": "1.6.716",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.715", "version": "1.6.716",
"dependencies": { "dependencies": {
"@fontsource/roboto": "^5.1.0", "@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4", "@headlessui/react": "^2.2.4",

View File

@@ -1,6 +1,6 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.715", "version": "1.6.716",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",