From 6e0cfd368533c762f453bacd61933fc6c64f989a Mon Sep 17 00:00:00 2001 From: alwinsDen Date: Tue, 14 Jan 2025 21:33:35 +0530 Subject: [PATCH] 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. --- composeApp/build.gradle.kts | 1 + .../alwinsden/remnant/Particulars.android.kt | 1 + .../ui/PopsUps/InfoSectionPopUps.android.kt | 96 ++++++++++++++++++- .../remnant/ui/MainScreens/MainScreen1.kt | 18 +++- .../remnant/ui/PopsUps/InfoSectionPopUps.kt | 5 +- .../ui/PopsUps/InfoSectionPopUps.desktop.kt | 5 +- gradle/libs.versions.toml | 2 + 7 files changed, 124 insertions(+), 4 deletions(-) diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts index 3008a67..0895183 100644 --- 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 index 6af039d..de6eced 100644 --- 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() } \ No newline at end of file diff --git a/composeApp/src/androidMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.android.kt b/composeApp/src/androidMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.android.kt index 2a51067..837ef97 100644 --- a/composeApp/src/androidMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.android.kt +++ b/composeApp/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") + } + } + } + } } \ No newline at end of file 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 index 40da04d..07f8644 100644 --- 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 index c8f3e72..5d72c94 100644 --- 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/composeApp/src/desktopMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.desktop.kt b/composeApp/src/desktopMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.desktop.kt index 4f66133..f55ac28 100644 --- a/composeApp/src/desktopMain/kotlin/org/alwinsden/remnant/ui/PopsUps/InfoSectionPopUps.desktop.kt +++ b/composeApp/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 +) { } \ No newline at end of file diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 90c374a..5a62ca8 100644 --- 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" }