ATS-Doku/gui/main_gui.py

from nicegui import ui
from datetime import datetime
import database

def build_ui():
    ui.colors(primary='#e30013') 

    # 1. HAUPT-CONTAINER:
    # Spalte die exakt so hoch ist wie der Bildschirm (h-screen).
    # 'items-stretch' sorgt dafür, dass die Kinder (Header, Mitte, Footer) die volle Breite nutzen.
    with ui.column().classes('w-full h-screen no-wrap gap-0 items-stretch'):

        # ---------------------------------------------------------
        # BEREICH OBEN (Header) - Feste Höhe (h-25)
        # ---------------------------------------------------------
        with ui.card().classes("h-25 rounded-none").style("background-color: #e30013"):
            # Hinweis: rounded-none entfernt die abgerundeten Ecken, damit es nahtlos aussieht
            ui.image('gui/logo.png').classes('absolute top-4 right-4 w-55')

        # ---------------------------------------------------------
        # BEREICH MITTE (Inhalt) - Variable Höhe (flex-1)
        # ---------------------------------------------------------
        # 'flex-1' ist hier entscheidend. Es sagt: "Nimm allen Platz zwischen Header und Footer".
        # 'overflow-hidden' verhindert, dass das ganze Fenster scrollt -> wir wollen nur die Tabelle scrollen.
        with ui.row().classes("w-full flex-1 p-4 gap-4 no-wrap overflow-hidden"):

            with ui.column():
                # --- Linke Karte: Eingabemaske ---
                # 'overflow-y-auto': Falls das Formular zu lang für kleine Bildschirme wird, bekommt nur diese Karte einen Scrollbalken.
                with ui.card().classes('overflow-y-auto'):

                    traeger = database.get_ats_names()
                    input_name = ui.select(label="ATS Träger Name", options=traeger, with_input=True).classes('w-full')

                    input_location = ui.input(label='Einsatzort', placeholder='Adresse, oder Beschreibung').classes("w-full")

                    with ui.row().classes('gap-10'):
                        today = datetime.now().strftime("%Y-%m-%d")
                        with ui.input('Datum', value=today).classes('flex-1') as date_input:
                            with date_input.add_slot('append'):
                                ui.icon('event').classes('cursor-pointer') \
                                    .on('click', lambda: menu.open())
                            with ui.menu() as menu:
                                input_date = ui.date().bind_value(date_input)

                        input_time = ui.number(label="Dauer (Min)", value=0).classes('flex-1')

                    with ui.row().classes("gap-10 w-full items-center"):
                        input_type = ui.toggle(["Einsatz", "Übung"]).classes('flex-1 center')
                        input_device = ui.select(["ATS Gerät 1", "ATS Gerät 2"], label="ATS Gerät auswählen").classes('flex-1')

                    def InputDataToTable():
                        name = input_name.value
                        location = input_location.value
                        date = input_date.value
                        time = input_time.value
                        etype = input_type.value
                        device = input_device.value
                        # Hinweis: database Aufruf ist hier korrekt, sofern importiert
                        database.add_data_to_einsaetze(name, location, date, time, etype, device)

                        einsaetze_table.rows = database.get_einsaetze()
                        einsaetze_table.update()
                        ui.notify("Eintrag in Datenbank erstellt.")

                    def ClearForm():
                        input_name.value = ""
                        input_location.value = ""
                        input_date.value = today
                        input_time.value = 0
                        input_type.value = "Einsatz" # Achtung: Value sollte zum Toggle passen (String, nicht 0)
                        input_device.value = None    # Select resetten
                        ui.notify("Gelöscht.")
                        ui.notify(admin_login.value)

                    ui.separator()
                    ui.space() # Drückt die Buttons nach unten (innerhalb der Formular-Karte)
                    with ui.row().classes('w-full'):
                        ui.button(text="Leeren", on_click=ClearForm)
                        ui.space()
                        ui.button(text="Eintragen", on_click=InputDataToTable)
                
                admin_container = ui.column().classes("w-full")

                with ui.card().classes("w-full"):
                    # 1. Das Passwort-Feld
                    pw_input = ui.input("Passwort", password=True)
        
                    # Das Admin-Panel wird nur angezeigt, wenn der Wert vom Input '1234' ist.
                    # lambda v: v == '1234' ist die Prüf-Logik (True/False).

                    with ui.card().bind_visibility_from(pw_input, 'value', backward=lambda v: v == '1234').classes("w-full"):
                        ui.label("Admin Panel")
                        with ui.row().classes('w-full'):
                            ui.input(label="Neuer ATS Träger").classes('flex-1')
                            ui.button(text="Hinzufügen")

            # --- Rechte Karte: Tabelle ---
            # 'flex-1': Diese Karte nimmt die restliche Breite der Reihe ein.
            # 'h-full': Diese Karte nutzt die volle Höhe des mittleren Bereichs.
            with ui.card().classes('flex-1 h-full p-0'):
                collums = [
                    {'name': 'date', 'label': 'Datum', 'field': 'date', 'sortable': True, 'align': 'left'},
                    {'name': 'name', 'label': 'Name', 'field': 'name', 'sortable': True, 'align': 'left'},
                    {'name': 'location', 'label': 'Ort', 'field': 'location', 'align': 'left'},
                    {'name': 'time', 'label': 'Dauer', 'field': 'time'},
                    {'name': 'etype', 'label': 'Art', 'field': 'etype', "sortable": True},
                    {'name': 'device', 'label': 'Gerät', 'field': 'device', "sortable": True},
                ]
                # Die Tabelle selbst bekommt auch h-full, damit sie die Karte ausfüllt
                einsaetze_table = ui.table(
                    columns = collums,
                    rows = database.get_einsaetze(),
                    row_key = "id"
                ).classes("w-full h-full")

        # ---------------------------------------------------------
        # BEREICH UNTEN (Footer) - Automatische Höhe
        # ---------------------------------------------------------
        # Hier landet dein Switch. Durch 'flex-1' im mittleren Bereich wird dieser Teil
        # immer an den unteren Bildschirmrand geschoben.
        
        with ui.row().classes("p-2 pb-6 items-center"):
            dark = ui.dark_mode(True) 
            #Light/Dark Switch in der Leiste unten.
            ui.switch('Dark mode').bind_value(dark)