Format realtime data in stop view

Adjust zoom level when stop is selected
dellisd · Mar 15, 2024 · 77c4b6b · 77c4b6b
1 parent 0cc0ae3
commit 77c4b6b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 9 deletions.
diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
@@ -2886,7 +2886,7 @@ [email protected]:
     iconv-lite "^0.6.3"
     source-map-js "^1.0.2"
 
-source-map-support@0.5.21, source-map-support@~0.5.20:
+source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -3092,11 +3092,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
   integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
 
-[email protected]:
-  version "4.7.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
-  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
-
 [email protected]:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"

diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/map/MapView.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/map/MapView.kt
@@ -37,7 +37,7 @@ class MapView : View<MapViewModel, MapViewEvent> {
         val (longitude, latitude) = target.position
         mapState.flyTo(
           center = LngLat(longitude, latitude),
-          zoom = 16.0,
+          zoom = 14.0,
           padding = jsObject { right = 512 },
         )
       } else {

diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/stops/StopPresenter.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/stops/StopPresenter.kt
@@ -52,7 +52,7 @@ class StopPresenter(
 
     if (routesAtStop == null || stopList == null) return StopViewModel.Loading
 
-    val realtimeData by produceState<RealtimeMessage?>(initialValue = null) {
+    val realtimeData by produceState<RealtimeMessage?>(initialValue = null, args) {
       whenWindowFocused {
         while (true) {
           value = client.nextTripsSingle(args.code)

diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/stops/StopView.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/stops/StopView.kt
@@ -1,16 +1,28 @@
 package ca.derekellis.reroute.stops
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import ca.derekellis.reroute.realtime.NextTrip
 import ca.derekellis.reroute.ui.InfoPanel
 import ca.derekellis.reroute.ui.View
+import org.jetbrains.compose.web.css.DisplayStyle
+import org.jetbrains.compose.web.css.FlexDirection
 import org.jetbrains.compose.web.css.Style
 import org.jetbrains.compose.web.css.StyleSheet
+import org.jetbrains.compose.web.css.display
+import org.jetbrains.compose.web.css.flexDirection
+import org.jetbrains.compose.web.css.marginLeft
+import org.jetbrains.compose.web.css.marginRight
+import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.H1
 import org.jetbrains.compose.web.dom.H2
 import org.jetbrains.compose.web.dom.H3
 import org.jetbrains.compose.web.dom.Hr
+import org.jetbrains.compose.web.dom.Span
 import org.jetbrains.compose.web.dom.Text
+import kotlin.js.Date
+import kotlin.time.Duration.Companion.milliseconds
 
 class StopView : View<StopViewModel, StopViewEvent> {
   @Composable
@@ -45,6 +57,38 @@ private fun RouteInfo(route: RouteSection) {
     H3 {
       Text("${route.identifier} ${route.name}")
     }
-    Text(route.nextTrips.toString())
+    if (route.nextTrips == null) {
+      Text("No upcoming trips")
+    } else {
+      route.nextTrips.forEach {
+        UpcomingTrip(it)
+      }
+    }
   }
 }
+
+private fun currentTimeOfDay(): Int {
+  val date = Date()
+  return date.getHours() * 3_600_000 + date.getMinutes() * 60_000 + date.getSeconds() * 1000
+}
+
+@Composable
+private fun UpcomingTrip(nextTrip: NextTrip) {
+  Div(attrs = {
+    style {
+      display(DisplayStyle.Flex)
+      flexDirection(FlexDirection.Row)
+    }
+  }) {
+    val time = remember { (nextTrip.adjustedScheduleTime.toMillisecondOfDay() - currentTimeOfDay()).milliseconds }
+
+    Span { Text("${time.inWholeMinutes} min") }
+    Span(attrs = {
+      style {
+        marginLeft(4.px)
+        marginRight(4.px)
+      }
+    }) { Text("→") }
+    Span { Text(nextTrip.destination) }
+  }
+}
diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/utils/WhenWindowFocused.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/utils/WhenWindowFocused.kt
@@ -18,6 +18,7 @@ suspend fun whenWindowFocused(block: suspend () -> Unit): Nothing = coroutineSco
   }
 
   try {
+    job = launch { block() }
     window.addEventListener("focus", focusListener)
     window.addEventListener("blur", blurListener)