Google Sheets progress

src/jsMain/kotlin/Main.kt

@@ -2,6 +2,7 @@ import androidx.compose.runtime.*
 import gapi.initGapi
 import gapi.loadGapi
 import kotlinx.browser.document
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import org.jetbrains.compose.web.attributes.disabled
 import org.jetbrains.compose.web.dom.*
@@ -12,76 +13,6 @@ import ui.State
 
 
 fun main() {
-    val row = document.querySelector("#content-main > div.uk-clearfix.uk-margin-bottom")
-        ?: throw Error("couldn't find button row")
-    val rootDiv = document.createElement("div")
-    rootDiv.id = "kemence-root"
-    row.appendChild(rootDiv)
-
-    document.title = document.title.replace("PéK", "PéK \uD83D\uDC68\u200D\uD83C\uDF73")
-
-    renderComposable(root = rootDiv) {
-        var google by remember { mutableStateOf(false) }
-        var state by remember { mutableStateOf<State>(Ready) }
-        val scope = rememberCoroutineScope()
-        scope.launch {
-            loadGapi()
-            initGapi()
-            google = true
-        }
-
-        divFloatRight {
-            val magicId = "csv-magic"
-            Button({
-                classes("uk-button", "uk-button-small", "uk-button-success")
-                attr("data-uk-ui.modal", "{ target: '#$magicId' }")
-                if (state != Ready)
-                    disabled()
-            }){
-                var txt = "..."
-                val curState = state
-                if (curState == Ready) {
-                    txt = "CSV import \uD83D\uDC68\u200D\uD83C\uDF73"
-                } else if (curState is ImportInProgress) {
-                    val progress = (curState.progress * 100.0).format()
-                    txt = "Importálás ($progress%)"
-                }
-
-                Text(txt)
-            }
-            Div({
-                id(magicId)
-                classes("uk-ui.modal")
-            }) {
-                csvModal { state = it }
-            }
-        }
-        divFloatRight {
-            val magicId = "google-magic"
-            Button({
-                classes("uk-button", "uk-button-small", "uk-button-success")
-                attr("data-uk-ui.modal", "{ target: '#$magicId' }")
-                if (state != Ready || !google)
-                    disabled()
-            }){
-                var txt = "..."
-                val curState = state
-                if (curState == Ready) {
-                    txt = "Google Sheets import \uD83D\uDC68\u200D\uD83C\uDF73"
-                } else if (curState is ImportInProgress) {
-                    val progress = (curState.progress * 100.0).format()
-                    txt = "Importálás ($progress%)"
-                }
-
-                Text(txt)
-            }
-            Div({
-                id(magicId)
-                classes("uk-ui.modal")
-            }) {
-                sheetsModal { state = it }
-            }
-        }
-    }
+    pontozas()
 }
 

src/jsMain/kotlin/gapi/Gapi.kt

 package gapi
 
+import kotlinx.coroutines.delay
 import kotlin.coroutines.resume
+import kotlin.coroutines.resumeWithException
 import kotlin.coroutines.suspendCoroutine
 
 object authObj: client.AuthType {
@@ -17,7 +19,13 @@ fun listenForLoginEvents(callback: (Boolean) -> Unit) {
 }
 
 suspend fun loadGapi() = suspendCoroutine<Unit> { cont ->
-    gapi.load(apiName = "gapi.client:gapi.auth2") { cont.resume(Unit) }
+    try {
+        gapi.load(apiName = "client:auth2") { cont.resume(Unit) }
+    } catch (e: dynamic) {
+        cont.resumeWithException(
+            e as? Throwable ?: Error("$e")
+        )
+    }
 }
 
 private fun handleLoginEvent(isSignedIn: Boolean) {
@@ -46,6 +54,14 @@ suspend fun initGapi() = suspendCoroutine<Unit> { cont ->
             gapi.auth2.getAuthInstance().isSignedIn.get()
         }
 
+        username = {
+            gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile().getName()
+        }
+
+        email = {
+            gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile().getEmail()
+        }
+
         handleLoginEvent(isSignedIn())
     }, { error: Throwable ->
         println(error)
@@ -54,6 +70,13 @@ suspend fun initGapi() = suspendCoroutine<Unit> { cont ->
     Unit
 }
 
-var logIn: () -> Unit = { throw Error("gapi.getGapi has not been initialized yet") }
-var logOut: () -> Unit = { throw Error("gapi.getGapi has not been initialized yet") }
+var logIn: () -> Unit = { throw Error("Gapi has not been initialized yet") }
+    private set
+var logOut: () -> Unit = { throw Error("Gapi has not been initialized yet") }
+    private set
 var isSignedIn: () -> Boolean = { false }
+    private set
+var username: () -> String = { "" }
+    private set
+var email: () -> String = { "" }
+    private set
\ No newline at end of file

src/jsMain/kotlin/pontozas.kt

+import androidx.compose.runtime.*
+import gapi.initGapi
+import gapi.loadGapi
+import kotlinx.browser.document
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import org.jetbrains.compose.web.attributes.disabled
+import org.jetbrains.compose.web.dom.Button
+import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.Text
+import org.jetbrains.compose.web.renderComposable
+import org.w3c.dom.HTMLStyleElement
+import processing.format
+import ui.*
+import ui.State
+
+fun pontozas() {
+    val row = document.querySelector("#content-main > div.uk-clearfix.uk-margin-bottom")
+        ?: throw Error("couldn't find button row")
+    val rootDiv = document.createElement("div")
+    rootDiv.id = "kemence-root"
+    row.appendChild(rootDiv)
+
+    fixNameSpacing()
+
+    document.title = document.title.replace("PéK", "PéK \uD83D\uDC68\u200D\uD83C\uDF73")
+
+    renderComposable(root = rootDiv) {
+        var google by remember { mutableStateOf(false) }
+        var state by remember { mutableStateOf<State>(Ready) }
+        val scope = rememberCoroutineScope()
+        scope.launch {
+            while (true) {
+                try {
+                    loadGapi()
+                    break
+                } catch (e: Throwable) {
+                    console.error("Error loading Google API: $e, trying again...")
+                    delay(100)
+                }
+            }
+            initGapi()
+            google = true
+        }
+
+        divFloatRight {
+            val magicId = "csv-magic"
+            Button({
+                classes("uk-button", "uk-button-small", "uk-button-success")
+                attr("data-uk-modal", "{ target: '#$magicId' }")
+                if (state != Ready)
+                    disabled()
+            }){
+                var txt = "..."
+                val curState = state
+                if (curState == Ready) {
+                    txt = "CSV import \uD83D\uDC68\u200D\uD83C\uDF73"
+                } else if (curState is ImportInProgress) {
+                    val progress = (curState.progress * 100.0).format()
+                    txt = "Importálás ($progress%)"
+                }
+
+                Text(txt)
+            }
+            Div({
+                id(magicId)
+                classes("uk-modal")
+            }) {
+                csvModal { state = it }
+            }
+        }
+        divFloatRight {
+            val magicId = "google-magic"
+            Button({
+                classes("uk-button", "uk-button-small", "uk-button-success")
+                attr("data-uk-modal", "{ target: '#$magicId' }")
+                if (state != Ready || !google)
+                    disabled()
+            }){
+                var txt = "..."
+                val curState = state
+                if (curState == Ready) {
+                    txt = "Google Sheets import \uD83D\uDC68\u200D\uD83C\uDF73"
+                } else if (curState is ImportInProgress) {
+                    val progress = (curState.progress * 100.0).format()
+                    txt = "Importálás ($progress%)"
+                }
+
+                Text(txt)
+            }
+            Div({
+                id(magicId)
+                classes("uk-modal")
+            }) {
+                sheetsModal { state = it }
+            }
+        }
+    }
+}
+
+fun fixNameSpacing() {
+    val tbody = document.querySelector("#points-table > tbody")
+    val tfoot = document.querySelector("#points-table > tfoot")
+    if (
+        tbody == null ||
+        tfoot == null
+    ) throw Error("Not in pontozo view")
+
+    val children = tbody.childElementCount + tfoot.childElementCount
+    val height = tbody.clientHeight.toDouble() + tfoot.clientHeight.toDouble()
+
+    val liHeight = height/children - 10 // padding
+
+    val style = document.createElement("style") as HTMLStyleElement
+    style.type = "text/css"
+
+    style.appendChild(document.createTextNode("""
+        #name-list > li {
+            height: ${liHeight}px !important;
+        }
+    """.trimIndent()))
+
+    document.head!!.appendChild(style)
+}
+

src/jsMain/kotlin/ui/Modal.kt

@@ -2,7 +2,6 @@ package ui
 
 import pekstuff.PekTable
 import androidx.compose.runtime.*
-import clear
 import kotlinx.browser.document
 import kotlinx.coroutines.launch
 import org.jetbrains.compose.web.attributes.disabled
@@ -11,6 +10,7 @@ import org.jetbrains.compose.web.css.color
 import org.jetbrains.compose.web.css.rgb
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLElement
+import pekstuff.clear
 
 interface ModalType {
     val title: String
@@ -21,12 +21,12 @@ interface ModalType {
 @Composable
 fun modal(type: ModalType, setState: (State) -> Unit) {
     Div({
-        classes("uk-ui.modal-dialog", "uk-text-justify")
+        classes("uk-modal-dialog", "uk-text-justify")
     }) {
-        val closeId = "kemence${type::class.simpleName}-ui.modal-close"
+        val closeId = "kemence${type::class.simpleName}-modal-close"
         A(attrs = {
             id(closeId)
-            classes("uk-ui.modal-close", "uk-close")
+            classes("uk-modal-close", "uk-close")
         }) {  }
         H2 {
             Text(type.title)

src/jsMain/kotlin/ui/SheetsModal.kt

@@ -2,12 +2,9 @@ package ui
 
 import datasources.GSheet
 import androidx.compose.runtime.*
-import gapi.isSignedIn
+import gapi.*
 import kotlinx.browser.document
 import kotlinx.coroutines.launch
-import gapi.listenForLoginEvents
-import gapi.logIn
-import gapi.logOut
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.disabled
 import org.jetbrains.compose.web.dom.*
@@ -26,8 +23,14 @@ private object SheetsModal: ModalType {
         val scope = rememberCoroutineScope()
 
         var signedIn by remember { mutableStateOf(isSignedIn()) }
+        var username by remember { mutableStateOf(username()) }
+        var email by remember { mutableStateOf(email()) }
         SideEffect {
             listenForLoginEvents { signedIn = it }
+            scope.launch {
+                username = username()
+                email = email()
+            }
         }
 
         var sheet by remember { mutableStateOf<GSheet?>(null) }
@@ -38,7 +41,12 @@ private object SheetsModal: ModalType {
             else ""
         )
 
+        withLabel(
+            if (signedIn) "$username ($email)"
+            else "Google Fiók"
+        ) { id ->
             Button({
+                id(id)
                 if (signedIn) {
                     classes("uk-button", "uk-button-danger")
                 } else {
@@ -53,25 +61,26 @@ private object SheetsModal: ModalType {
                 }
             }) {
                 Text(
-                if(signedIn) { "Kijelentkezés" } else { "Bejelentkezés" }
+                    if (signedIn) {
+                        "Kijelentkezés"
+                    } else {
+                        "Bejelentkezés"
+                    }
                 )
             }
+        }
 
         Br {}
 
-        val inputId = "kemence-sheet-input"
-        Label(inputId, {
-            classes("form-label-required", "uk-margin-right")
-        }) {
-            Text("Google Sheet URL")
-        }
         var sheetUrl by remember { mutableStateOf("") }
+        withLabel("Google Sheet URL") { id ->
             Input(type = InputType.Text, attrs = {
-            id(inputId)
+                id(id)
                 classes("uk-input")
                 onChange { sheetUrl = it.value }
                 value(sheetUrl)
             })
+        }
         Hr {  }
         divFloatRight {
             Button({

src/jsMain/kotlin/ui/Params.kt → src/jsMain/kotlin/ui/Utils.kt

@@ -4,32 +4,25 @@ import androidx.compose.runtime.*
 import org.jetbrains.compose.web.dom.*
 
 @Composable
-fun inputWithLabel(
-    name: String,
-    value: String,
-    updated: (String) -> Unit,
+fun withLabel(
+    label: String,
+    content: @Composable (id: String) -> Unit,
 ) {
     Tr {
-        val id = "kemence-${id++}"
+        val id = remember { "kemence-${id++}" }
         Td({
             style {
                 property("vertical-align", "middle")
             }
         }) {
             Label(forId = id, {
-                classes("uk-form-label")
+                classes("uk-form-label", "uk-margin-right")
             }) {
-                Text(name)
+                Text(label)
             }
         }
         Td {
-            TextInput(value) {
-                id(id)
-                classes("uk-input", "uk-input-width-1-1")
-                onInput {
-                    updated(it.value)
-                }
-            }
+            content(id)
         }
     }
 }