mocode-software/meldestelle
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fixing(client)

Browse Source
This commit is contained in:
Stefan Mogeritsch
2025-08-13 00:07:08 +02:00
parent 23b6708197
commit 26e826d32c
23 changed files with 3650 additions and 1077 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web-app/build.gradle.kts
+11 -23
View File
@@ -1,46 +1,34 @@
plugins {
alias(libs.plugins.kotlin.multiplatform)
alias(libs.plugins.compose.multiplatform)
alias(libs.plugins.compose.compiler)
kotlin("multiplatform")
id("org.jetbrains.compose")
id("org.jetbrains.kotlin.plugin.compose")
}
kotlin {
js(IR) {
binaries.executable()
browser {
commonWebpackConfig {
devServer = org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.DevServer(
open = true,
port = 8081
)
}
webpackTask {
cssSupport {
enabled.set(true)
}
}
runTask {
cssSupport {
enabled.set(true)
}
}
testTask {
useKarma {
useChromeHeadless()
webpackConfig.cssSupport {
enabled.set(true)
}
}
}
}
binaries.executable()
}
sourceSets {
val jsMain by getting {
dependencies {
implementation(project(":client:common-ui"))
implementation(compose.html.core)
implementation(compose.runtime)
implementation(libs.ktor.client.js)
implementation(libs.kotlinx.coroutines.core)
}
}
}
}
compose.experimental {
web.application {}
}
client/web-app/src/jsMain/kotlin/Main.kt
-11
View File
@@ -1,11 +0,0 @@
import at.mocode.client.ui.App
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.CanvasBasedWindow
@OptIn(ExperimentalComposeUiApi::class)
fun main() {
CanvasBasedWindow(canvasElementId = "root") {
App()
}
}
client/web-app/src/jsMain/kotlin/at/mocode/client/web/AppStylesheet.kt
+121
View File
@@ -0,0 +1,121 @@
@file:OptIn(org.jetbrains.compose.web.ExperimentalComposeWebApi::class)
package at.mocode.client.web
import org.jetbrains.compose.web.css.*
object AppStylesheet : StyleSheet() {
val container by style {
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Column)
minHeight(100.vh)
fontFamily("'Segoe UI', system-ui, sans-serif")
margin(0.px)
padding(0.px)
backgroundColor(Color("#f5f5f5"))
}
val header by style {
backgroundColor(Color("#1976d2"))
color(Color.white)
padding(20.px)
textAlign("center")
property("box-shadow", "0 2px 4px rgba(0,0,0,0.1)")
}
val main by style {
flex(1)
display(DisplayStyle.Flex)
justifyContent(JustifyContent.Center)
alignItems(AlignItems.Center)
padding(40.px, 20.px)
}
val footer by style {
backgroundColor(Color("#333"))
color(Color.white)
textAlign("center")
padding(20.px)
fontSize(14.px)
}
val card by style {
backgroundColor(Color.white)
borderRadius(12.px)
property("box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)")
padding(32.px)
maxWidth(500.px)
width(100.percent)
textAlign("center")
}
val button by style {
border(0.px)
borderRadius(8.px)
padding(12.px, 24.px)
fontSize(16.px)
fontWeight("bold")
cursor("pointer")
property("transition", "all 0.2s ease")
width(100.percent)
marginBottom(20.px)
}
val buttonHover by style {
transform { scale(1.02) }
}
val buttonDisabled by style {
opacity(0.6)
cursor("not-allowed")
}
val primaryButton by style {
backgroundColor(Color("#1976d2"))
color(Color.white)
hover(self) style {
backgroundColor(Color("#1565c0"))
}
}
val successMessage by style {
backgroundColor(Color("#e8f5e8"))
color(Color("#2e7d32"))
padding(16.px)
borderRadius(8.px)
marginTop(16.px)
border(1.px, LineStyle.Solid, Color("#c8e6c9"))
}
val errorMessage by style {
backgroundColor(Color("#ffebee"))
color(Color("#c62828"))
padding(16.px)
borderRadius(8.px)
marginTop(16.px)
border(1.px, LineStyle.Solid, Color("#ffcdd2"))
}
val spinner by style {
display(DisplayStyle.InlineBlock)
width(16.px)
height(16.px)
border(2.px, LineStyle.Solid, Color("#f3f3f3"))
property("border-top", "2px solid #1976d2")
borderRadius(50.percent)
property("animation", "spin 1s linear infinite")
marginRight(8.px)
property("vertical-align", "middle")
}
@Suppress("unused")
private val spinKeyframes = keyframes {
0.percent {
transform { rotate(0.deg) }
}
100.percent {
transform { rotate(360.deg) }
}
}
}
client/web-app/src/jsMain/kotlin/at/mocode/client/web/Main.kt
+95
View File
@@ -0,0 +1,95 @@
package at.mocode.client.web
import androidx.compose.runtime.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable
import at.mocode.client.ui.components.PingTestComponent
fun main() {
renderComposable(rootElementId = "root") {
Style(AppStylesheet)
MeldestelleWebApp()
}
}
@Composable
fun MeldestelleWebApp() {
val pingComponent = remember { PingTestComponent() }
var pingState by remember { mutableStateOf(pingComponent.state) }
LaunchedEffect(pingComponent) {
pingComponent.onStateChanged = { newState ->
pingState = newState
}
}
DisposableEffect(pingComponent) {
onDispose {
pingComponent.dispose()
}
}
Div(attrs = {
classes(AppStylesheet.container)
}) {
Header(attrs = { classes(AppStylesheet.header) }) {
H1 { Text("Meldestelle Web App") }
}
Main(attrs = { classes(AppStylesheet.main) }) {
PingTestWebView(
state = pingState,
onTestConnection = { pingComponent.testConnection() }
)
}
Footer(attrs = { classes(AppStylesheet.footer) }) {
P { Text("© 2025 Meldestelle - Powered by Kotlin Multiplatform") }
}
}
}
@Composable
fun PingTestWebView(
state: at.mocode.client.ui.components.PingTestState,
onTestConnection: () -> Unit
) {
Div(attrs = { classes(AppStylesheet.card) }) {
H2 { Text("Backend Verbindungstest") }
Button(
attrs = {
classes(AppStylesheet.button, AppStylesheet.primaryButton)
if (state.isLoading) {
attr("disabled", "")
}
onClick { onTestConnection() }
}
) {
if (state.isLoading) {
Span(attrs = { classes(AppStylesheet.spinner) }) {}
Text(" Testing...")
} else {
Text("Ping Backend Service")
}
}
// Status Anzeige
when {
state.isConnected -> {
Div(attrs = { classes(AppStylesheet.successMessage) }) {
Span { Text("✅ ") }
Text("Verbindung erfolgreich: ${state.response?.status}")
}
}
state.error != null -> {
Div(attrs = { classes(AppStylesheet.errorMessage) }) {
Span { Text("❌ ") }
Text("Fehler: ${state.error}")
}
}
}
}
}
client/web-app/src/jsMain/resources/index.html
+11 -4
View File
@@ -1,12 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meldestelle Pro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meldestelle Web App</title>
<meta name="description" content="Meldestelle - Vereinsverwaltung für Pferdesport">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<canvas id="root"></canvas>
<script src="MeldestelleWebApp.js"></script>
<div id="root">
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui;">
<div>Loading...</div>
</div>
</div>
<script src="web-app.js"></script>
</body>
</html>