update webapp sample to use cloud storage

WebApp/src/jsMain/kotlin/main.kt

@@ -1,6 +1,7 @@
 import dev.inmo.micro_utils.coroutines.launchSafelyWithoutExceptions
 import dev.inmo.tgbotapi.types.webAppQueryIdField
 import dev.inmo.tgbotapi.webapps.*
+import dev.inmo.tgbotapi.webapps.cloud.*
 import dev.inmo.tgbotapi.webapps.haptic.HapticFeedbackStyle
 import dev.inmo.tgbotapi.webapps.haptic.HapticFeedbackType
 import dev.inmo.tgbotapi.webapps.popup.*
@@ -14,9 +15,9 @@ import kotlinx.browser.window
 import kotlinx.coroutines.*
 import kotlinx.dom.appendElement
 import kotlinx.dom.appendText
+import kotlinx.dom.clear
 import kotlinx.serialization.json.Json
-import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.*
-import org.w3c.dom.HTMLElement
 import kotlin.random.Random
 import kotlin.random.nextUBytes
 
@@ -177,7 +178,7 @@ fun main() {
             document.body ?.appendElement("button") {
                 fun updateHeaderColor() {
                     val (r, g, b) = Random.nextUBytes(3)
-                    val hex = Color.Hex("#${r.toString(16)}${g.toString(16)}${b.toString(16)}")
+                    val hex = Color.Hex(r, g, b)
                     webApp.setHeaderColor(hex)
                     (this as? HTMLButtonElement) ?.style ?.backgroundColor = hex.value
                     textContent = "Header color: ${hex.value.uppercase()} (click to change)"
@@ -190,6 +191,75 @@ fun main() {
 
             document.body ?.appendElement("p", {})
 
+            fun Element.updateCloudStorageContent() {
+                clear()
+                webApp.cloudStorage.getAll {
+                    it.onSuccess {
+                        document.body ?.log(it.toString())
+                        appendElement("label") { textContent = "Cloud storage" }
+
+                        appendElement("p", {})
+
+                        it.forEach { (k, v) ->
+                            appendElement("div") {
+                                val kInput = appendElement("input", {}) as HTMLInputElement
+                                val vInput = appendElement("input", {}) as HTMLInputElement
+
+                                kInput.value = k.key
+                                vInput.value = v.value
+
+                                appendElement("button") {
+                                    addEventListener("click", {
+                                        if (k.key == kInput.value) {
+                                            webApp.cloudStorage.set(k.key, vInput.value) {
+                                                document.body ?.log(it.toString())
+                                                this@updateCloudStorageContent.updateCloudStorageContent()
+                                            }
+                                        } else {
+                                            webApp.cloudStorage.remove(k.key) {
+                                                it.onSuccess {
+                                                    webApp.cloudStorage.set(kInput.value, vInput.value) {
+                                                        document.body ?.log(it.toString())
+                                                        this@updateCloudStorageContent.updateCloudStorageContent()
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    })
+                                    this.textContent = "Save"
+                                }
+                            }
+
+                            appendElement("p", {})
+                        }
+                        appendElement("label") { textContent = "Cloud storage: add new" }
+
+                        appendElement("p", {})
+
+                        appendElement("div") {
+                            val kInput = appendElement("input", {}) as HTMLInputElement
+
+                            appendElement("button") {
+                                textContent = "Add key"
+                                addEventListener("click", {
+                                    webApp.cloudStorage.set(kInput.value, kInput.value) {
+                                        document.body ?.log(it.toString())
+                                        this@updateCloudStorageContent.updateCloudStorageContent()
+                                    }
+                                })
+                            }
+                        }
+
+                        appendElement("p", {})
+                    }.onFailure {
+                        document.body ?.log(it.stackTraceToString())
+                    }
+                }
+            }
+            val cloudStorageContentDiv = document.body ?.appendElement("div") {} as HTMLDivElement
+
+            document.body ?.appendElement("p", {})
+
             webApp.apply {
                 onThemeChanged {
                     document.body ?.log("Theme changed: ${webApp.themeParams}")
@@ -227,6 +297,10 @@ fun main() {
                 }
             }
             webApp.ready()
+            document.body ?.appendElement("input", {
+                (this as HTMLInputElement).value = window.location.href
+            })
+            cloudStorageContentDiv.updateCloudStorageContent()
         }.onFailure {
             window.alert(it.stackTraceToString())
         }