diff --git a/core/date-time/src/commonMain/kotlin/xyz/ksharma/krail/core/datetime/DateTimePickerInfo.kt b/core/date-time/src/commonMain/kotlin/xyz/ksharma/krail/core/datetime/DateTimePickerInfo.kt index ba74931a..a6b968ca 100644 --- a/core/date-time/src/commonMain/kotlin/xyz/ksharma/krail/core/datetime/DateTimePickerInfo.kt +++ b/core/date-time/src/commonMain/kotlin/xyz/ksharma/krail/core/datetime/DateTimePickerInfo.kt @@ -27,22 +27,14 @@ fun rememberCurrentDateTime(): DateTimePickerInfo { formatDate(currentDateTime.date) } - // Extracting hour and minute in 12-hour format - val hour = remember(currentDateTime.time.hour) { - (currentDateTime.time.hour % 12).takeIf { it != 0 } ?: 12 // Convert 24-hour to 12-hour - } - val minute = remember(currentDateTime.time.minute) { - currentDateTime.time.minute - } - return DateTimePickerInfo( date = formattedDate, - hour = hour, - minute = minute + hour = currentDateTime.hour, + minute = currentDateTime.minute, ) } -private fun formatDate(date: LocalDate): String { +fun formatDate(date: LocalDate): String { val today = Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault()).date val tomorrow = today.plus(1, DateTimeUnit.DAY) @@ -56,3 +48,19 @@ private fun formatDate(date: LocalDate): String { } } } + +fun incrementDateByOneDay(date: LocalDate): LocalDate { + return date.plus(1, DateTimeUnit.DAY) +} + +fun decrementDateByOneDay(date: LocalDate): LocalDate { + return date.plus(-1, DateTimeUnit.DAY) +} + +@Composable +fun formatTime(hour: Int, minute: Int): String { + val displayHour = if (hour == 0 || hour == 12) 12 else hour % 12 + val amPm = if (hour < 12) "AM" else "PM" + val formattedMinute = if (minute < 10) "0$minute" else minute.toString() + return "$displayHour:$formattedMinute $amPm" +} diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateSelection.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateSelection.kt index aa9f20c7..56f78713 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateSelection.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateSelection.kt @@ -6,6 +6,7 @@ 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.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import krail.feature.trip_planner.ui.generated.resources.Res import krail.feature.trip_planner.ui.generated.resources.ic_chevron_left @@ -32,7 +33,7 @@ fun DateSelection( ) Text( text = date, - style = KrailTheme.typography.bodyLarge, + style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal), color = KrailTheme.colors.onSurface, modifier = Modifier.weight(1f), textAlign = TextAlign.Center, diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt index 0fc89358..31c720be 100644 --- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt +++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt @@ -3,6 +3,7 @@ package xyz.ksharma.krail.trip.planner.ui.datetimeselector import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues @@ -12,6 +13,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material3.ExperimentalMaterial3Api @@ -24,14 +26,30 @@ import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.semantics.Role +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp +import kotlinx.datetime.Clock +import kotlinx.datetime.DateTimeUnit +import kotlinx.datetime.LocalDateTime +import kotlinx.datetime.TimeZone +import kotlinx.datetime.plus +import kotlinx.datetime.toLocalDateTime +import xyz.ksharma.krail.core.datetime.decrementDateByOneDay +import xyz.ksharma.krail.core.datetime.formatDate +import xyz.ksharma.krail.core.datetime.formatTime +import xyz.ksharma.krail.core.datetime.incrementDateByOneDay import xyz.ksharma.krail.core.datetime.rememberCurrentDateTime import xyz.ksharma.krail.taj.LocalThemeColor import xyz.ksharma.krail.taj.components.Text import xyz.ksharma.krail.taj.components.TitleBar import xyz.ksharma.krail.taj.theme.KrailTheme import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor +import xyz.ksharma.krail.trip.planner.ui.components.themeBackgroundColor +import xyz.ksharma.krail.trip.planner.ui.components.themeContentColor import xyz.ksharma.krail.trip.planner.ui.timetable.ActionButton @OptIn(ExperimentalMaterial3Api::class) @@ -41,39 +59,62 @@ fun DateTimeSelectorScreen( onBackClick: () -> Unit = {}, onDateTimeSelected: () -> Unit = {}, ) { + // Colors val themeColorHex by LocalThemeColor.current - val themeColor = remember(themeColorHex) { - themeColorHex.hexToComposeColor() - } - val currentDateTime = rememberCurrentDateTime() + val themeColor = remember(themeColorHex) { themeColorHex.hexToComposeColor() } + + // Journey Time Options var journeyTimeOption by rememberSaveable { mutableStateOf(JourneyTimeOptions.LEAVE) } + + // Time Selection + val currentDateTime = rememberCurrentDateTime() val timePickerState = rememberTimePickerState( initialHour = currentDateTime.hour, initialMinute = currentDateTime.minute, is24Hour = false, ) + // Date selection + val today = + remember { Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault()).date } + val maxDate = remember { today.plus(7, DateTimeUnit.DAY) } + var selectedDate by remember { mutableStateOf(today) } + Column( - modifier = modifier - .fillMaxSize() - .background(color = KrailTheme.colors.surface), + modifier = modifier.fillMaxSize().background(color = KrailTheme.colors.surface), ) { - TitleBar( - title = { Text(text = "Plan your trip") }, - navAction = { - ActionButton( - onClick = onBackClick, - contentDescription = "Back", - ) { - Image( - imageVector = Icons.AutoMirrored.Filled.ArrowBack, - contentDescription = null, - colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface), - modifier = Modifier.size(24.dp), - ) - } - }, - ) + TitleBar(title = { Text(text = "Plan your trip") }, navAction = { + ActionButton( + onClick = onBackClick, + contentDescription = "Back", + ) { + Image( + imageVector = Icons.AutoMirrored.Filled.ArrowBack, + contentDescription = null, + colorFilter = ColorFilter.tint(KrailTheme.colors.onSurface), + modifier = Modifier.size(24.dp), + ) + } + }, actions = { + Text( + text = "Reset", + style = KrailTheme.typography.titleSmall.copy(fontWeight = FontWeight.Normal), + modifier = Modifier + .padding(10.dp) + .background(color = themeBackgroundColor(), shape = RoundedCornerShape(50)) + .padding(horizontal = 12.dp, vertical = 6.dp) + .clickable( + role = Role.Button, + interactionSource = remember { MutableInteractionSource() }, + indication = null + ) { + val now: LocalDateTime = + Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault()) + selectedDate = now.date + timePickerState.hour = now.time.hour + timePickerState.minute = now.time.minute + }) + }) LazyColumn(contentPadding = PaddingValues(vertical = 16.dp)) { item { @@ -81,14 +122,14 @@ fun DateTimeSelectorScreen( selectedOption = journeyTimeOption, themeColor = themeColor, onOptionSelected = { journeyTimeOption = it }, - modifier = Modifier.padding(horizontal = 16.dp, vertical = 20.dp) + modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp) ) } item { TimeSelection( timePickerState = timePickerState, - modifier = Modifier.padding(horizontal = 16.dp, vertical = 20.dp) + modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp) .align(Alignment.CenterHorizontally), ) } @@ -96,15 +137,42 @@ fun DateTimeSelectorScreen( item { DateSelection( themeColor = themeColor, - date = "Today, 12th July", + date = "${formatDate(selectedDate)}, ${ + formatTime( + hour = timePickerState.hour, + minute = timePickerState.minute, + ) + }", + onNextClicked = { + if (selectedDate < maxDate) { + selectedDate = incrementDateByOneDay(selectedDate) + } + }, + onPreviousClicked = { + if (selectedDate > today) { + selectedDate = decrementDateByOneDay(selectedDate) + } + }, modifier = Modifier.padding(horizontal = 16.dp), ) } item { - SelectedDateTimeRow( - dateTimeText = "Today, 12th July, 10:30 AM", - onResetClick = {}, + Text( + text = "Done", + textAlign = TextAlign.Center, + color = themeContentColor(), + style = KrailTheme.typography.titleMedium, + modifier = Modifier.fillMaxWidth() + .padding(horizontal = 24.dp, vertical = 16.dp) + .clip(RoundedCornerShape(50)) + .background(color = themeColor).clickable( + role = Role.Button, + interactionSource = remember { MutableInteractionSource() }, + indication = null, + ) { + onDateTimeSelected() + }.padding(vertical = 10.dp), ) } }