feat: watchos

- added buttons on tile
makeevrserg · Aug 15, 2023 · 99b4b2a · 99b4b2a
1 parent 99ad893
commit 99b4b2a
Show file tree

Hide file tree

Showing 7 changed files with 277 additions and 79 deletions.
diff --git a/.../src/main/java/com/makeevrserg/empireprojekt/mobile/wear/features/components/AstraChip.kt b/.../src/main/java/com/makeevrserg/empireprojekt/mobile/wear/features/components/AstraChip.kt
@@ -1,11 +1,19 @@
 package com.makeevrserg.empireprojekt.mobile.wear.features.components
 
+import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.wear.compose.material.Chip
 import androidx.wear.compose.material.ChipDefaults
+import androidx.wear.compose.material.Icon
+import androidx.wear.compose.material.Text
 import com.makeevrserg.empireprojekt.mobile.core.ui.theme.AppTheme
 
 @Composable
@@ -32,3 +40,39 @@ fun AstraChip(
         ),
     )
 }
+
+@Composable
+fun IconTextChip(
+    text: String,
+    imageVector: ImageVector,
+    modifier: Modifier = Modifier,
+    textColor: Color = AppTheme.materialColor.onPrimary,
+    iconColor: Color = Color.Unspecified,
+    onClick: () -> Unit = { }
+) {
+    AstraChip(
+        modifier = modifier,
+        label = {
+            Crossfade(targetState = text, label = "LABEL") { text ->
+                Text(
+                    text = text,
+                    style = AppTheme.typography.caption,
+                    color = textColor
+                )
+            }
+        },
+        onClick = onClick,
+        icon = {
+            Crossfade(targetState = imageVector, label = "LABEL") { imageVector ->
+                Icon(
+                    imageVector = imageVector,
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(ChipDefaults.LargeIconSize)
+                        .wrapContentSize(align = Alignment.Center),
+                    tint = iconColor
+                )
+            }
+        }
+    )
+}
diff --git a/...src/main/java/com/makeevrserg/empireprojekt/mobile/wear/features/status/StatusesScreen.kt b/...src/main/java/com/makeevrserg/empireprojekt/mobile/wear/features/status/StatusesScreen.kt
@@ -1,8 +1,19 @@
 package com.makeevrserg.empireprojekt.mobile.wear.features.status
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.WifiTethering
+import androidx.compose.material.icons.filled.WifiTetheringError
+import androidx.compose.material.icons.filled.WifiTetheringOff
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.wear.compose.foundation.lazy.AutoCenteringParams
 import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
@@ -14,10 +25,13 @@ import androidx.wear.compose.material.Text
 import androidx.wear.compose.material.Vignette
 import androidx.wear.compose.material.VignettePosition
 import com.makeevrserg.empireprojekt.mobile.core.ui.theme.AppTheme
+import com.makeevrserg.empireprojekt.mobile.wear.features.components.IconTextChip
 import com.makeevrserg.empireprojekt.mobile.wear.features.status.components.StatusWidget
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun StatusesScreen(wearStatusComponent: WearStatusComponent) {
+    val mergedState by wearStatusComponent.mergedState.collectAsState()
     val listState = rememberScalingLazyListState()
     Scaffold(
         modifier = Modifier.background(AppTheme.materialColor.primaryVariant),
@@ -43,9 +57,37 @@ fun StatusesScreen(wearStatusComponent: WearStatusComponent) {
                         color = AppTheme.materialColor.onPrimary
                     )
                 }
-            }
-            items(wearStatusComponent.statuses) {
-                StatusWidget(it)
+            } else {
+                item {
+                    FlowRow(
+                        horizontalArrangement = Arrangement.Center,
+                        verticalArrangement = Arrangement.spacedBy(AppTheme.dimens.XS)
+                    ) {
+                        IconTextChip(
+                            modifier = Modifier.weight(1f),
+                            text = mergedState.successCount.toString(),
+                            imageVector = Icons.Filled.WifiTethering,
+                            iconColor = AppTheme.alColors.colorPositive
+                        )
+                        Spacer(modifier = Modifier.size(AppTheme.dimens.S))
+                        IconTextChip(
+                            modifier = Modifier.weight(1f),
+                            text = mergedState.loadingCount.toString(),
+                            imageVector = Icons.Filled.WifiTetheringError,
+                            iconColor = AppTheme.alColors.astraOrange
+                        )
+                        Spacer(modifier = Modifier.size(AppTheme.dimens.S))
+                        IconTextChip(
+                            modifier = Modifier.weight(1f),
+                            text = mergedState.failureCount.toString(),
+                            imageVector = Icons.Filled.WifiTetheringOff,
+                            iconColor = AppTheme.alColors.colorNegative
+                        )
+                    }
+                }
+                items(wearStatusComponent.statuses) {
+                    StatusWidget(it)
+                }
             }
         }
     }

diff --git a/...ain/java/com/makeevrserg/empireprojekt/mobile/wear/features/status/WearStatusComponent.kt b/...ain/java/com/makeevrserg/empireprojekt/mobile/wear/features/status/WearStatusComponent.kt
@@ -2,13 +2,39 @@ package com.makeevrserg.empireprojekt.mobile.wear.features.status
 
 import com.makeevrserg.empireprojekt.mobile.features.status.StatusComponent
 import com.makeevrserg.empireprojekt.mobile.features.status.StubStatusComponent
+import kotlinx.coroutines.flow.StateFlow
+import ru.astrainteractive.klibs.mikro.core.util.combineStates
 
 interface WearStatusComponent {
     val statuses: List<StatusComponent>
+    val mergedState: StateFlow<Model>
+
+    data class Model(
+        val loadingCount: Int = 0,
+        val successCount: Int = 0,
+        val failureCount: Int = 0
+    )
 
     class Stub : WearStatusComponent {
         override val statuses: List<StatusComponent> = List(10) {
             StubStatusComponent()
         }
+        override val mergedState: StateFlow<Model> = combineStates(
+            *statuses.map { it.model }.toTypedArray(),
+            transform = { statuses ->
+                val associated = statuses.map {
+                    if (it.isLoading) {
+                        StatusComponent.Model.LoadingStatus.LOADING
+                    } else {
+                        it.status
+                    }
+                }
+                Model(
+                    loadingCount = associated.count { it == StatusComponent.Model.LoadingStatus.LOADING },
+                    successCount = associated.count { it == StatusComponent.Model.LoadingStatus.SUCCESS },
+                    failureCount = associated.count { it == StatusComponent.Model.LoadingStatus.ERROR }
+                )
+            }
+        )
     }
 }
diff --git a/wearApp/src/main/java/com/makeevrserg/empireprojekt/mobile/wear/tile/ComposeTileService.kt b/wearApp/src/main/java/com/makeevrserg/empireprojekt/mobile/wear/tile/ComposeTileService.kt
@@ -1,13 +1,14 @@
 package com.makeevrserg.empireprojekt.mobile.wear.tile
 
+import android.content.Context
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.glance.GlanceId
 import androidx.glance.GlanceModifier
 import androidx.glance.Image
 import androidx.glance.ImageProvider
-import androidx.glance.LocalContext
 import androidx.glance.action.actionStartActivity
 import androidx.glance.action.clickable
 import androidx.glance.layout.Alignment
@@ -24,17 +25,10 @@ import androidx.glance.wear.tiles.GlanceTileService
 import androidx.glance.wear.tiles.LocalTimeInterval
 import androidx.glance.wear.tiles.TimeInterval
 import androidx.glance.wear.tiles.TimelineMode
-import androidx.wear.protolayout.ActionBuilders
-import androidx.wear.protolayout.DeviceParametersBuilders
-import androidx.wear.protolayout.DimensionBuilders
-import androidx.wear.protolayout.ModifiersBuilders
-import androidx.wear.protolayout.material.ChipColors
-import androidx.wear.protolayout.material.TitleChip
-import com.makeevrserg.empireprojekt.mobile.core.ui.theme.AppTheme
+import androidx.glance.wear.tiles.action.ActionCallback
 import com.makeevrserg.empireprojekt.mobile.resources.R
 import com.makeevrserg.empireprojekt.mobile.wear.MainActivity
 import java.time.Instant
-import java.util.UUID
 
 /**
  * Just a sample
@@ -57,32 +51,11 @@ class ComposeTileService : GlanceTileService() {
         )
     )
 
-    @Composable
-    private fun Chip(text: String, theme: AppTheme): TitleChip {
-        val context = LocalContext.current
-        return TitleChip.Builder(
-            context,
-            text,
-            ModifiersBuilders.Clickable.Builder()
-                .setId(UUID.randomUUID().toString())
-                .setOnClick(
-                    ActionBuilders.LaunchAction.Builder()
-                        .setAndroidActivity(
-                            ActionBuilders.AndroidActivity.Builder()
-                                .setClassName(MainActivity::class.java.name)
-                                .setPackageName(context.packageName)
-                                .build()
-                        ).build()
-                ).build(),
-            DeviceParametersBuilders.DeviceParameters.Builder().build()
-        ).setWidth(DimensionBuilders.expand()).setChipColors(
-            ChipColors(
-                theme.materialColor.primaryVariant.colorProp,
-                theme.materialColor.onPrimary.colorProp,
-                theme.materialColor.onPrimary.colorProp,
-                theme.materialColor.primary.colorProp,
-            )
-        ).build()
+    object EmptyAction : ActionCallback {
+        override suspend fun onAction(
+            context: Context,
+            glanceId: GlanceId
+        ) = Unit
     }
 
     @Composable
@@ -117,15 +90,13 @@ class ComposeTileService : GlanceTileService() {
             }
 
             Spacer(GlanceModifier.height(15.dp))
-            Chip(text = "Text", theme = AppTheme.DefaultDarkTheme)
             Image(
                 provider = ImageProvider(R.drawable.esmptelegram),
                 modifier = GlanceModifier
                     .size(24.dp)
                     .clickable(actionStartActivity(MainActivity::class.java)),
                 contentScale = ContentScale.Fit,
                 contentDescription = "launch calendar activity"
-
             )
         }
     }