From 664dad28f20c629bda88af3b5bee5477d2c91bc7 Mon Sep 17 00:00:00 2001 From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com> Date: Wed, 2 Oct 2024 20:47:44 +1000 Subject: [PATCH] UI: Create JourneyDetailCard --- .../system/components/JourneyDetailCard.kt | 102 +++++++++++++++++- .../krail/design/system/model/JourneyLeg.kt | 21 ++++ .../ksharma/krail/design/system/model/Stop.kt | 12 +++ .../design/system/model/TransportModeLine.kt | 21 ++++ 4 files changed, 153 insertions(+), 3 deletions(-) create mode 100644 core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/JourneyLeg.kt create mode 100644 core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/Stop.kt create mode 100644 core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/TransportModeLine.kt diff --git a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/JourneyDetailCard.kt b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/JourneyDetailCard.kt index 54b5ef0c..008f4e47 100644 --- a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/JourneyDetailCard.kt +++ b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/JourneyDetailCard.kt @@ -1,15 +1,82 @@ package xyz.ksharma.krail.design.system.components +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.Layout +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import xyz.ksharma.krail.design.system.hexToComposeColor +import xyz.ksharma.krail.design.system.model.JourneyLeg +import xyz.ksharma.krail.design.system.model.Stop +import xyz.ksharma.krail.design.system.model.TransportModeLine +import xyz.ksharma.krail.design.system.model.TransportModeType import xyz.ksharma.krail.design.system.preview.ComponentPreviews import xyz.ksharma.krail.design.system.theme.KrailTheme + @Composable -fun JourneyDetailCard(modifier: Modifier = Modifier) { - Column(modifier = modifier) { +fun JourneyDetailCard( + modifier: Modifier = Modifier, + header: String, + journeyLegList: List, +) { + BasicJourneyCard(modifier = modifier) { + // TODO - consider meaningful text breaks in lines. "Platform" and Platform number text + // should be on same line. + Text(header, style = KrailTheme.typography.titleMedium) + + journeyLegList.forEach { leg -> + Row( + modifier = Modifier.padding(vertical = 12.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp) + ) { + Row( + modifier = Modifier, + horizontalArrangement = Arrangement.spacedBy(8.dp) + ) { + TransportModeIcon( + transportModeType = leg.transportLine.transportModeType, + ) + + TransportModeBadge( + backgroundColor = leg.transportLine.lineHexColorCode.hexToComposeColor(), + badgeText = leg.transportLine.lineName, + ) + } + + Text( + leg.headline, + style = KrailTheme.typography.bodyLarge, + modifier = Modifier.weight(1f) + ) + } + + Column(modifier = Modifier, verticalArrangement = Arrangement.spacedBy(4.dp)) { + leg.stops.forEach { stop -> + Row( + horizontalArrangement = Arrangement.spacedBy(16.dp) + ) { + Text( + stop.departureTime, + style = KrailTheme.typography.bodyMedium, + ) + Text( + stop.name, + style = KrailTheme.typography.bodyMedium, + modifier = Modifier.weight(1f) + ) + } + } + } + } } } @@ -19,7 +86,36 @@ fun JourneyDetailCard(modifier: Modifier = Modifier) { @Composable private fun JourneyDetailCardPreview(modifier: Modifier = Modifier) { KrailTheme { - JourneyDetailCard() + JourneyDetailCard( + header = "in 5 mins on Platform 1 (10 min)", journeyLegList = listOf( + JourneyLeg( + headline = "City Circle via Parramatta", + summary = "4 Stops (12 min)", + transportLine = TransportModeLine( + transportModeType = TransportModeType.Train, + lineName = "T1", + lineHexColorCode = "#f99d1c", + ), + stops = listOf( + Stop(name = "TownHall Station", departureTime = "8:25am"), + Stop(name = "Central Station", departureTime = "8:25am"), + ) + ), + JourneyLeg( + headline = "Dessert via Rainy Road", + summary = "4 Stops (12 min)", + transportLine = TransportModeLine( + transportModeType = TransportModeType.Bus, + lineName = "600", + lineHexColorCode = "#f91d1c", + ), + stops = listOf( + Stop(name = "Umbrella Rd.", departureTime = "8:25am"), + Stop(name = "KitKat Rd.", departureTime = "8:25am"), + ) + ), + ) + ) } } diff --git a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/JourneyLeg.kt b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/JourneyLeg.kt new file mode 100644 index 00000000..ae4a108a --- /dev/null +++ b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/JourneyLeg.kt @@ -0,0 +1,21 @@ +package xyz.ksharma.krail.design.system.model + +data class JourneyLeg( + val transportLine: TransportModeLine, + + /** + * Vehicle Headline + * Train - City Circle via Parramatta + * **/ + val headline: String, + + /** + * List of Stops with Departure Time for the Journey. + */ + val stops: List, + + /** + * 4 Stops (12 min) etc. + */ + val summary: String, +) diff --git a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/Stop.kt b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/Stop.kt new file mode 100644 index 00000000..a862981f --- /dev/null +++ b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/Stop.kt @@ -0,0 +1,12 @@ +package xyz.ksharma.krail.design.system.model +data class Stop( + /** + * E.g. TownHall Station, Platform 1 + */ + val name: String, + + /** + * Departure Time + */ + val departureTime: String, +) diff --git a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/TransportModeLine.kt b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/TransportModeLine.kt new file mode 100644 index 00000000..d48934c6 --- /dev/null +++ b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/model/TransportModeLine.kt @@ -0,0 +1,21 @@ +package xyz.ksharma.krail.design.system.model + +/** + * Reference - https://en.wikipedia.org/wiki/Module:Adjacent_stations/Sydney_Trains + */ +data class TransportModeLine( + /** + * Train / Bus / Ferry etc along with their color codes. + */ + val transportModeType: TransportModeType, + + /** + * Line number e.g. T1, T4, F1, F2 etc. + */ + val lineName: String, + + /** + * Hexadecimal color code for the Line number e.g. T1 is #f99d1c + */ + val lineHexColorCode: String, +)