diff --git a/__pycache__/database.cpython-312.pyc b/__pycache__/database.cpython-312.pyc index b2e32f7..6c928f9 100644 Binary files a/__pycache__/database.cpython-312.pyc and b/__pycache__/database.cpython-312.pyc differ diff --git a/database.py b/database.py index 22928a7..38e5e5e 100644 --- a/database.py +++ b/database.py @@ -10,7 +10,8 @@ def initialize_db(): cursor.execute(''' CREATE TABLE IF NOT EXISTS ats ( id INTEGER PRIMARY KEY AUTOINCREMENT, - name TEXT UNIQUE + name TEXT UNIQUE, + code TEXT UNIQUE ) ''') diff --git a/gui/__pycache__/main_gui.cpython-312.pyc b/gui/__pycache__/main_gui.cpython-312.pyc index 0764cc4..ee1f4d8 100644 Binary files a/gui/__pycache__/main_gui.cpython-312.pyc and b/gui/__pycache__/main_gui.cpython-312.pyc differ diff --git a/gui/main_gui.py b/gui/main_gui.py index 1efa9a8..cfa350c 100644 --- a/gui/main_gui.py +++ b/gui/main_gui.py @@ -2,95 +2,109 @@ from nicegui import ui from datetime import datetime import database - def build_ui(): - ui.colors(primary='#e30013') #Firetruck Red - with ui.card().classes("w-full h-25").style("background-color: #e30013"): - dark = ui.dark_mode(True) + 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"): + + # --- 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.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) + + # --- 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'}, + {'name': 'device', 'label': 'Gerät', 'field': 'device'}, + ] + # 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. - ui.image('gui/logo.png').classes('absolute top-4 right-4 w-55') - with ui.row().classes("w-full"): - with ui.card(): - # ATS Träger Dropdown Menü - traeger = database.get_ats_names() - input_name = ui.select(label="ATS Träger Name", options=traeger, with_input=True).classes('w-full') - # Einsatzname - input_location = ui.input(label='Einsatzort', placeholder='Adresse, oder Beschreibung').classes("w-full") + with ui.row().classes("p-2 pb-6 items-center"): + dark = ui.dark_mode(True) + # Der Switch ist nun schön in einer Leiste unten + ui.switch('Dark mode').bind_value(dark) - with ui.row().classes('gap-10'): - # --- Der DATUMS-PICKER (Pop-Up) --- - today = datetime.now().strftime("%Y-%m-%d") - - with ui.input('Datum', value=today).classes('flex-1') as date_input: - # Das Icon im Eingabefeld (zum Klicken) - with date_input.add_slot('append'): - ui.icon('event').classes('cursor-pointer') \ - .on('click', lambda: menu.open()) # Öffnet das Menü - # Das Pop-Up Menü mit dem Kalender - with ui.menu() as menu: - input_date = ui.date().bind_value(date_input) - - # --- Zeit Eingabe in Minuten --- - 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 - database.add_data_to_einsaetze(name, location, date, time, etype, device) - print (name, location, date, time) - - 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 = 0 - input_device.value = 0 - ui.notify("Gelöscht.") - - ui.separator() - ui.space() - with ui.row().classes('w-full'): - ui.button(text="Leeren", on_click=ClearForm) - ui.space() - ui.button(text="Eintragen", on_click=InputDataToTable) - - - with ui.card().classes('flex-1 h-[85vh] 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'}, - {'name': 'device', 'label': 'Gerät', 'field': 'device'}, - ] - einsaetze_table = ui.table( - columns = collums, - rows = database.get_einsaetze(), - row_key = "id" - ).classes("w-full h-full") - - ui.switch('Dark mode').bind_value(dark) - - - - - - - - -