Add arrival-view and instruction-view for web

common/ferrostar/src/navigation_controller/models.rs

@@ -12,6 +12,7 @@ use serde::{Deserialize, Serialize};
 #[derive(Debug, Clone, PartialEq)]
 #[cfg_attr(feature = "uniffi", derive(uniffi::Record))]
 #[cfg_attr(feature = "wasm-bindgen", derive(Serialize, Deserialize))]
+#[cfg_attr(feature = "wasm-bindgen", serde(rename_all = "camelCase"))]
 pub struct TripProgress {
     /// The distance to the next maneuver, in meters.
     pub distance_to_next_maneuver: f64,

web/index.html

@@ -17,7 +17,7 @@
       costingOptions="${{ bicycle: { use_roads: 0.2 } }}"
     ></ferrostar-core>
 
-    <p class="controls">
+    <p class="controls controls-start">
       <input type="text" id="destination" placeholder="Where do you want to go?" />
       <span>
         <button id="start">Start Navigation</button>
@@ -26,6 +26,10 @@
       </span>
     </p>
 
+    <p class="controls controls-stop">
+      <button id="stop">Stop Navigation</button>
+    </p>
+
     <script type="module">
       import { SimulatedLocationProvider, BrowserLocationProvider } from "/src/location.ts";
 
@@ -74,6 +78,9 @@
 
           core.locationProvider = locationProvider;
           core.startNavigation(route, config);
+
+          document.getElementsByClassName("controls-start")[0].style.display = "none";
+          document.getElementsByClassName("controls-stop")[0].style.display = "block";
         });
 
         simulateNavigationButton.addEventListener("click", async () => {
@@ -101,6 +108,16 @@
 
           core.locationProvider = locationProvider;
           core.startNavigation(route, config);
+
+          document.getElementsByClassName("controls-start")[0].style.display = "none";
+          document.getElementsByClassName("controls-stop")[0].style.display = "block";
+        });
+
+        document.getElementById("stop").addEventListener("click", () => {
+          core.stopNavigation();
+
+          document.getElementsByClassName("controls-start")[0].style.display = "block";
+          document.getElementsByClassName("controls-stop")[0].style.display = "none";
         });
       });
     </script>

web/src/arrival-view.ts

@@ -0,0 +1,58 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("arrival-view")
+export class ArrivalView extends LitElement {
+  @property()
+  tripState: any = null;
+
+  static styles = [
+    css`
+      .arrival-view-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        padding: 20px;
+        background-color: white;
+        border-radius: 50px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .arrival-text {
+        font-size: x-large;
+        margin: 0 15px;
+      }
+    `,
+  ];
+
+  getArrivalTime(seconds: number) {
+    const now = new Date();
+    const minutesToAdd = Math.round(seconds / 60);
+    const arrivalTime = new Date(now.getTime() + minutesToAdd * 60000);
+    const hours = arrivalTime.getHours();
+    const minutes = arrivalTime.getMinutes();
+    return `${hours}:${minutes < 10 ? "0" : ""}${minutes}`;
+  }
+
+  getDistanceRemaining(meters: number) {
+    return `${Math.round(meters).toLocaleString()}m`;
+  }
+
+  getDurationRemaining(seconds: number) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}m ${remainingSeconds}s`;
+  }
+
+  render() {
+    if (this.tripState?.Navigating) {
+      return html`
+        <div class="arrival-view-card">
+          <p class="arrival-text">${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}</p>
+          <p class="arrival-text">${this.getDistanceRemaining(this.tripState.Navigating.progress.distanceRemaining)}</p>
+          <p class="arrival-text">${this.getDurationRemaining(this.tripState.Navigating.progress.durationRemaining)}</p>
+        </div>
+      `;
+    }
+  }
+}