add device storage sample and beckground/text color config in webapps

This commit is contained in:
2025-05-25 13:01:22 +06:00
parent d203d48391
commit 7ce784d0a2
2 changed files with 67 additions and 1 deletions
WebApp/src/jsMain/kotlin
gradle.properties

@ -13,6 +13,7 @@ import dev.inmo.tgbotapi.webapps.haptic.HapticFeedbackStyle
import dev.inmo.tgbotapi.webapps.haptic.HapticFeedbackType import dev.inmo.tgbotapi.webapps.haptic.HapticFeedbackType
import dev.inmo.tgbotapi.webapps.orientation.DeviceOrientationStartParams import dev.inmo.tgbotapi.webapps.orientation.DeviceOrientationStartParams
import dev.inmo.tgbotapi.webapps.popup.* import dev.inmo.tgbotapi.webapps.popup.*
import dev.inmo.tgbotapi.webapps.storage.getWithResult
import io.ktor.client.HttpClient import io.ktor.client.HttpClient
import io.ktor.client.request.* import io.ktor.client.request.*
import io.ktor.client.statement.bodyAsText import io.ktor.client.statement.bodyAsText
@ -24,9 +25,13 @@ import kotlinx.dom.appendElement
import kotlinx.dom.appendText import kotlinx.dom.appendText
import kotlinx.serialization.json.Json import kotlinx.serialization.json.Json
import org.jetbrains.compose.web.attributes.InputType import org.jetbrains.compose.web.attributes.InputType
import org.jetbrains.compose.web.attributes.placeholder
import org.jetbrains.compose.web.css.DisplayStyle import org.jetbrains.compose.web.css.DisplayStyle
import org.jetbrains.compose.web.css.Style
import org.jetbrains.compose.web.css.StyleSheet
import org.jetbrains.compose.web.css.Color as ComposeColor import org.jetbrains.compose.web.css.Color as ComposeColor
import org.jetbrains.compose.web.css.backgroundColor import org.jetbrains.compose.web.css.backgroundColor
import org.jetbrains.compose.web.css.color
import org.jetbrains.compose.web.css.display import org.jetbrains.compose.web.css.display
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.dom.Text import org.jetbrains.compose.web.dom.Text
@ -40,6 +45,13 @@ fun HTMLElement.log(text: String) {
appendElement("p", {}) appendElement("p", {})
} }
private object RootStyleSheet : StyleSheet() {
val rootClass by style {
color(ComposeColor("var(--tg-theme-text-color)"))
backgroundColor(ComposeColor("var(--tg-theme-bg-color)"))
}
}
@OptIn(ExperimentalUnsignedTypes::class) @OptIn(ExperimentalUnsignedTypes::class)
fun main() { fun main() {
console.log("Web app started") console.log("Web app started")
@ -47,6 +59,14 @@ fun main() {
val baseUrl = window.location.origin.removeSuffix("/") val baseUrl = window.location.origin.removeSuffix("/")
renderComposable("root") { renderComposable("root") {
Style(RootStyleSheet)
DisposableEffect(null) {
scopeElement.classList.add(RootStyleSheet.rootClass)
onDispose {
scopeElement.classList.remove(RootStyleSheet.rootClass)
}
}
val scope = rememberCoroutineScope() val scope = rememberCoroutineScope()
val isSafeState = remember { mutableStateOf<Boolean?>(null) } val isSafeState = remember { mutableStateOf<Boolean?>(null) }
val logsState = remember { mutableStateListOf<Any?>() } val logsState = remember { mutableStateListOf<Any?>() }
@ -558,6 +578,52 @@ fun main() {
} }
P() P()
let { // DeviceStorage
val fieldKey = remember { mutableStateOf("") }
val fieldValue = remember { mutableStateOf("") }
val message = remember { mutableStateOf("") }
Div {
Text("Start type title of key. If value will be found in device storage, it will be shown in value input")
}
Input(InputType.Text) {
placeholder("Key")
value(fieldKey.value)
onInput {
fieldKey.value = it.value
webApp.deviceStorage.getItem(it.value) { e, v ->
fieldValue.value = v ?: ""
if (v == null) {
message.value = "Value for key \"${it.value}\" has not been found"
} else {
message.value = "Value for key \"${it.value}\" has been found: \"$v\""
}
}
}
}
Div {
Text("If you want to change value if typed key - just put it here")
}
Input(InputType.Text) {
placeholder("Value")
value(fieldValue.value)
onInput {
fieldValue.value = it.value
webApp.deviceStorage.setItem(fieldKey.value, it.value) { e, v ->
if (v == true) {
fieldValue.value = it.value
message.value = "Value \"${it.value}\" has been saved"
}
}
}
}
if (message.value.isNotEmpty()) {
Div { Text(message.value) }
}
}
P()
EventType.values().forEach { eventType -> EventType.values().forEach { eventType ->
when (eventType) { when (eventType) {
EventType.AccelerometerChanged -> webApp.onAccelerometerChanged { /*logsState.add("AccelerometerChanged") /* see accelerometer block */ */ } EventType.AccelerometerChanged -> webApp.onAccelerometerChanged { /*logsState.add("AccelerometerChanged") /* see accelerometer block */ */ }

@ -6,7 +6,7 @@ kotlin.daemon.jvmargs=-Xmx3g -Xms500m
kotlin_version=2.1.20 kotlin_version=2.1.20
telegram_bot_api_version=25.0.0-rc telegram_bot_api_version=25.0.0-rc2
micro_utils_version=0.25.3 micro_utils_version=0.25.3
serialization_version=1.8.0 serialization_version=1.8.0
ktor_version=3.1.1 ktor_version=3.1.1