Implemented time picker functionality for work hours selection.

Added TimePickerState composable with start and end time selection using material3 TimeInput. Updated the MainScreen to use the time picker. Added material3 dependency. Modified InfoSectionPopUps to receive time and onDismiss lambdas. Removed test composable.
alwinsDen · Jan 14, 2025 · 6e0cfd3 · 6e0cfd3
1 parent 8a79418
commit 6e0cfd3
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 4 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -114,6 +114,7 @@ android {
         implementation("com.google.android.libraries.identity.googleid:googleid:1.1.1")
         implementation("app.rive:rive-android:8.7.0")
         implementation(libs.androidx.startup.runtime)
+        implementation(libs.androidx.compose.material3)
     }
 }
 

diff --git a/composeApp/src/androidMain/kotlin/org/alwinsden/remnant/Particulars.android.kt b/composeApp/src/androidMain/kotlin/org/alwinsden/remnant/Particulars.android.kt
@@ -159,4 +159,5 @@ actual val mainScreenColumnWidth: Dp = Dp.Unspecified
 @Composable
 fun test() {
 //    PersonalInfoPopup()
+//    TimePickerState()
 }
diff --git a/...eApp/src/androidMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.android.kt b/...eApp/src/androidMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.android.kt
@@ -1,10 +1,12 @@
 package org.alwinsden.remnant.ui.PopsUps
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -14,6 +16,9 @@ import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Card
 import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TimeInput
+import androidx.compose.material3.rememberTimePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
@@ -24,7 +29,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
+import org.alwinsden.remnant.InterFontFamily
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import java.util.Calendar
 
 @Preview
 @Composable
@@ -140,6 +147,93 @@ actual fun EnterAgeNumberDialog(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-actual fun TimePickerState() {
+actual fun TimePickerState(
+    time: (startHour: Int, startMinute: Int, endHour: Int, endMinute: Int) -> Unit,
+    onDismissRequest: () -> Unit
+) {
+    val currentTime = Calendar.getInstance()
+    val timePicker = rememberTimePickerState(
+        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
+        initialMinute = currentTime.get(Calendar.MINUTE),
+        is24Hour = true
+    )
+    val timePickerEnd = rememberTimePickerState(
+        initialHour = currentTime.get(Calendar.HOUR_OF_DAY) + 1,
+        initialMinute = currentTime.get(Calendar.MINUTE),
+        is24Hour = true
+    )
+    Dialog(onDismissRequest = {
+        onDismissRequest()
+    }) {
+        Column(
+            modifier = Modifier
+                .background(
+                    color = Color(0xffffffff),
+                    shape = RoundedCornerShape(5)
+                )
+                .padding(
+                    vertical = 10.dp,
+                    horizontal = 15.dp
+                ),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(
+                text = "Work start at",
+                fontFamily = InterFontFamily,
+
+                )
+            Spacer(
+                modifier = Modifier.height(10.dp)
+            )
+            TimeInput(
+                state = timePicker
+            )
+            Text(
+                text = "End at",
+                fontFamily = InterFontFamily,
+
+                )
+            Spacer(
+                modifier = Modifier.height(10.dp)
+            )
+            TimeInput(
+                state = timePickerEnd,
+            )
+            Row(
+                horizontalArrangement = Arrangement.End,
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .fillMaxWidth(),
+            ) {
+                Button(
+                    onClick = {
+                        onDismissRequest()
+                    },
+                    colors = ButtonDefaults.buttonColors(
+                        backgroundColor = Color(0xffffffff),
+                    ),
+                    elevation = ButtonDefaults.elevation(0.dp, 0.dp),
+                    shape = RoundedCornerShape(50)
+                ) {
+                    Text(text = "Dismiss")
+                }
+                Spacer(modifier = Modifier.width(10.dp))
+                Button(
+                    onClick = {
+                        time(
+                            timePicker.hour,
+                            timePicker.minute,
+                            timePickerEnd.hour,
+                            timePickerEnd.minute
+                        )
+                    },
+                    shape = RoundedCornerShape(50)
+                ) {
+                    Text(text = "Save")
+                }
+            }
+        }
+    }
 }
diff --git a/composeApp/src/commonMain/kotlin/org/alwinsden/remnant/ui/MainScreens/MainScreen1.kt b/composeApp/src/commonMain/kotlin/org/alwinsden/remnant/ui/MainScreens/MainScreen1.kt
@@ -36,6 +36,7 @@ import org.alwinsden.remnant.mainScreenColumnWidth
 import org.alwinsden.remnant.ui.PopsUps.EnterAgeNumberDialog
 import org.alwinsden.remnant.ui.PopsUps.EnterCityNameDialog
 import org.alwinsden.remnant.ui.PopsUps.PersonalInfoPopup
+import org.alwinsden.remnant.ui.PopsUps.TimePickerState
 
 @Composable
 fun MainScreen1() {
@@ -96,7 +97,7 @@ fun MainScreen1() {
                     header = "Helps us determine how busy you are.",
                     content = "specify work hours: eg. 9am-6:30pm.",
                     onClick = {
-                        println(userBioSelection)
+                        optionEnterState.value = 3
                     }
                 )
                 SpecialColoredBckBox(
@@ -137,6 +138,21 @@ fun MainScreen1() {
                 }
             )
         }
+
+        3 -> {
+            TimePickerState(
+                time = { startHour, startMinute, endHour, endMinute ->
+                    userBioSelection["startHour"] = startHour
+                    userBioSelection["startMinute"] = startMinute
+                    userBioSelection["endHour"] = endHour
+                    userBioSelection["endMinute"] = endMinute
+                    optionEnterState.value = -1
+                },
+                onDismissRequest = {
+                    optionEnterState.value = -1
+                }
+            )
+        }
     }
 }
 

diff --git a/composeApp/src/commonMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.kt b/composeApp/src/commonMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.kt
@@ -153,7 +153,10 @@ expect fun EnterAgeNumberDialog(
 ): Unit
 
 @Composable
-expect fun TimePickerState(): Unit
+expect fun TimePickerState(
+    time: (startHour: Int, startMinute: Int, endHour: Int, endMinute: Int) -> Unit,
+    onDismissRequest: () -> Unit
+): Unit
 
 @Composable
 fun BottomControllerComponent(onOuterClick: () -> Unit, content: @Composable () -> Unit) {

diff --git a/...eApp/src/desktopMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.desktop.kt b/...eApp/src/desktopMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.desktop.kt
@@ -17,5 +17,8 @@ actual fun EnterAgeNumberDialog(
 }
 
 @Composable
-actual fun TimePickerState() {
+actual fun TimePickerState(
+    time: (startHour: Int, startMinute: Int, endHour: Int, endMinute: Int) -> Unit,
+    onDismissRequest: () -> Unit
+) {
 }
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -27,6 +27,7 @@ firebaseCommonKtx = "21.0.0"
 firebaseCommon = "21.0.0"
 androidx-data-store = "1.1.1"
 androidx-startup = "1.2.0"
+androidx-material3 = "1.4.0-alpha05"
 
 [libraries]
 androidx-activity-ktx = { module = "androidx.activity:activity-ktx", version.ref = "activityKtx" }
@@ -74,6 +75,7 @@ firebase-common-ktx = { group = "com.google.firebase", name = "firebase-common-k
 firebase-common = { group = "com.google.firebase", name = "firebase-common", version.ref = "firebaseCommon" }
 datastore-preferences-core = { module = "androidx.datastore:datastore-preferences-core", version.ref = "androidx-data-store" }
 androidx-startup-runtime = { module = "androidx.startup:startup-runtime", version.ref = "androidx-startup" }
+androidx-compose-material3 = { module = "androidx.compose.material3:material3", version.ref = "androidx-material3" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }