### feat(WebMainScreen, OnlineNennungFormular, index.html)

- **WebMainScreen:** Implementiere hash-basiertes Routing für URLs und Synchronisation mit Adressleiste. - **OnlineNennungFormular:** Aktualisiere Versionsanzeige mit neuer Farbe und Stil. - **index.html:** Füge Runtime-Konfiguration per JavaScript hinzu (API, Mail, Keycloak).
2026-04-23 07:16:15 +02:00
parent 6de5b55810
commit eea022b862
3 changed files with 45 additions and 3 deletions
@@ -26,6 +26,15 @@ fun WebMainScreen() {
  MainAppContent()
 }

+@OptIn(ExperimentalWasmJsInterop::class)
+private fun getWindowHash(): String = js("window.location.hash")
+
+@OptIn(ExperimentalWasmJsInterop::class)
+private fun setWindowHash(hash: String): Unit = js("window.location.hash = hash")
+
+@OptIn(ExperimentalWasmJsInterop::class)
+private fun onHashChange(onChanged: () -> Unit): Unit = js("window.addEventListener('hashchange', onChanged)")
+
@OptIn(ExperimentalMaterial3Api::class)
@Composable
 fun MainAppContent() {
@@ -34,6 +43,32 @@ fun MainAppContent() {
  val scope = rememberCoroutineScope()
  var currentScreen by remember { mutableStateOf<WebScreen>(WebScreen.Landing) }

+  // Hash-basiertes Routing zur Synchronisation mit der Adressleiste
+  LaunchedEffect(Unit) {
+    val handleHashChange = {
+      val hash = getWindowHash()
+      currentScreen = when {
+        hash.startsWith("#/nennung/") -> {
+          val tId = hash.substringAfter("#/nennung/").toLongOrNull() ?: 26128L
+          WebScreen.Nennung(1, tId)
+        }
+        else -> WebScreen.Landing
+      }
+    }
+    handleHashChange()
+    onHashChange { handleHashChange() }
+  }
+
+  // Update der Adressleiste bei Screen-Wechsel
+  LaunchedEffect(currentScreen) {
+    val targetHash = when (val screen = currentScreen) {
+      is WebScreen.Landing -> "/"
+      is WebScreen.Nennung -> "/nennung/${screen.turnierId}"
+      is WebScreen.Erfolg -> "/erfolg"
+    }
+    setWindowHash("#$targetHash")
+  }
+
  Scaffold(
    topBar = {
      TopAppBar(
@@ -19,6 +19,13 @@
      height: 100%;
    }
  </style>
+  <script>
+    // Runtime configuration injected by Docker entrypoint
+    window.API_BASE_URL = "${API_BASE_URL}";
+    window.MAIL_SERVICE_URL = "${MAIL_SERVICE_URL}";
+    window.KEYCLOAK_URL = "${KEYCLOAK_URL}";
+    console.log("App Config loaded:", { API: window.API_BASE_URL, Mail: window.MAIL_SERVICE_URL });
+  </script>
  <script type="application/javascript" src="meldestelle-web.js"></script>
 </head>
 <body>