Liga-System/gui/match_gui.py

from nicegui import ui, app
from gui import gui_style
from data import data_api
from match_calculations import calc_match
from gui.info_text import info_system

def setup_routes():

    # 1. Die {}-Klammern definieren eine dynamische Variable in der URL
    @ui.page('/add-match/{systemname}', dark=True)
    def match_form_page(systemname: str): # <--- WICHTIG: Hier fangen wir das Wort aus der URL auf!
        gui_style.apply_design()

        # --- SICHERHEITS-CHECK ---
        if not app.storage.user.get('authenticated', False):
            ui.label('Access Denied. Please log in first.').classes('text-red-500')
            ui.button('Back to Home', on_click=lambda: ui.navigate.to('/'))
            return

        # ÄNDERUNG: w-full (für Handy) + max-w-md (für PC) + mx-auto (Zentrieren) + p-6 (Innenabstand)
        with ui.card().classes('w-full max-w-md mx-auto items-center mt-10 p-6 shadow-xl'):

            # Text-Center hinzugefügt, falls der Systemname sehr lang ist und auf dem Handy umbricht
            ui.label(f'Neues Spiel für {systemname} eintragen').classes('text-2xl font-bold text-center mb-6')
            ui.label("Meine Punkte:").classes('text-xl font-bold w-full text-left')

            with ui.column().classes("w-full items-center gap-6"):
                # 1. Daten aus der DB holen
                raw_players = data_api.get_all_players_from_system(systemname)
                my_id = app.storage.user.get('db_id')

                dropdown_options = {}
                for p in raw_players:
                    if p['player_id'] == my_id:
                        continue  
                    dropdown_options[p['player_id']] = f"{p['display_name']} 'aka' {p['discord_name']}"

                with ui.row().classes("w-full items-center justify-between"):
                    p1_points = ui.slider(min=0, max=100, value=10).classes("w-70")
                    ui.label().bind_text_from(p1_points, 'value').classes("text-lg text-normaltext")

                ui.separator().classes('w-full mt-4') # Ein schöner Trennstrich für die Optik

                
                ui.label("Gegner:").classes('text-xl font-bold w-full text-left')
                opponent_select = ui.select(options=dropdown_options, label='Gegner auswählen').classes('w-full')
                with ui.row().classes("w-full items-center justify-between"):
                    p2_points = ui.slider(min=0, max=100, value=10).classes("w-70")
                    ui.label().bind_text_from(p2_points, 'value').classes("text-lg text-normaltext")

            ui.space()

            # Das Match in die Datenbank eintragen lassen und die MMR Berechnung triggern.
            def input_match_to_database():
                p2_id = opponent_select.value
                if p2_id is None:
                    ui.notify("Bitte wähle zuerst einen Gegner aus!", color="red", position="top")
                    return 

                score_p1 = p1_points.value
                score_p2 = p2_points.value

                match_id = data_api.add_new_match(systemname, my_id, p2_id, score_p1, score_p2)

                # 4. Erfolgsmeldung und Berechnung
                ui.notify("Match erfolgreich eingetragen!", color="green")
                ui.navigate.to(f'/statistic/{systemname}')

            # Buttons ganz unten in einer Reihe
            with ui.row().classes("w-full items-center justify-between mt-8"):
                ui.button(icon="close", on_click=lambda: ui.navigate.to(f'/statistic/{systemname}')).classes("w-10 h-8 rounded-full")
                info_system.create_info_button("match_form_info")
                ui.button(text="Absenden", color="positive", on_click=lambda: input_match_to_database())