mirror of
https://github.com/InsanusMokrassar/TelegramBotAPI-examples.git
synced 2025-07-09 20:10:58 +00:00
add device storage sample and beckground/text color config in webapps
This commit is contained in:
@ -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
|
||||||
|
Reference in New Issue
Block a user