Skip to content

Commit

Permalink
Add DateSelection logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@ksharma-xyz
ksharma-xyz committed Nov 29, 2024
1 parent 1ab718e commit 2fffccd
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 41 deletions.
30 changes: 19 additions & 11 deletions core/date-time/src/commonMain/kotlin/xyz/ksharma/krail/core/datetime/DateTimePickerInfo.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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) 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"
}
3 changes: 2 additions & 1 deletion ...src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateSelection.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down
120 changes: 91 additions & 29 deletions ...nMain/kotlin/xyz/ksharma/krail/trip/planner/ui/datetimeselector/DateTimeSelectorScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -24,14 +26,29 @@ 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.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)
Expand All @@ -41,70 +58,115 @@ 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",
modifier = Modifier
.padding(10.dp)
.background(color = themeBackgroundColor(), shape = RoundedCornerShape(50))
.padding(4.dp)
.clickable {
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 {
JourneyTimeOptionsGroup(
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),
)
}

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),
)
}
}
Expand Down

0 comments on commit 2fffccd

Please sign in to comment.