Add walking legs to the trip plan details (#2246)

* walking leg nearly complete * update to use the latest metro * docs * format * remove extra * remove id from accordion * change gray color * mix lock * mix format more files
mbta · Dec 6, 2024 · ad2a7f2 · ad2a7f2
1 parent 557ce23
commit ad2a7f2
Show file tree

Hide file tree

Showing 29 changed files with 191 additions and 139 deletions.
diff --git a/lib/dotcom_web/components/components.ex b/lib/dotcom_web/components/components.ex
@@ -66,7 +66,7 @@ defmodule DotcomWeb.Components do
         />
         <div class="c-search-bar__autocomplete-results" />
       </div>
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </div>
     """
   end
@@ -81,8 +81,8 @@ defmodule DotcomWeb.Components do
 
     ~H"""
     <div class={"error-container rounded #{@padding_class}"}>
-      <p :if={@title} class="font-bold mb-2"><%= @title %></p>
-      <%= render_slot(@inner_block) %>
+      <p :if={@title} class="font-bold mb-2">{@title}</p>
+      {render_slot(@inner_block)}
     </div>
     """
   end

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -73,7 +73,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
               />
             </.inputs_for>
             <.error_container :for={{msg, _} <- f[field].errors} :if={used_input?(f[field])}>
-              <%= msg %>
+              {msg}
             </.error_container>
           </.algolia_autocomplete>
         </div>
@@ -93,7 +93,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
             :for={{msg, _} <- f[:datetime_type].errors}
             :if={used_input?(f[:datetime_type])}
           >
-            <%= msg %>
+            {msg}
           </.error_container>
           <.live_component
             :if={@show_datepicker}
@@ -103,14 +103,14 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
             id={:datepicker}
           />
           <.error_container :for={{msg, _} <- f[:datetime].errors} :if={used_input?(f[:datetime])}>
-            <%= msg %>
+            {msg}
           </.error_container>
         </div>
         <div>
           <.fieldset id="modes" legend="Modes">
-            <.accordion id="accordion">
+            <.accordion variant="contained">
               <:heading>
-                <%= Modes.selected_modes(input_value(f, :modes)) %>
+                {Modes.selected_modes(input_value(f, :modes))}
               </:heading>
               <:content>
                 <div class="flex flex-col gap-05 px-2">
@@ -124,12 +124,10 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
                   </.inputs_for>
                 </div>
               </:content>
-              <:extra :if={used_input?(f[:modes])}>
-                <.error_container :for={{msg, _} <- f[:modes].errors}>
-                  <%= msg %>
-                </.error_container>
-              </:extra>
             </.accordion>
+            <.error_container :for={{msg, _} <- f[:modes].errors}>
+              {msg}
+            </.error_container>
           </.fieldset>
           <div class="inline-flex items-center gap-1">
             <.input type="checkbox" field={f[:wheelchair]} label="Prefer accessible routes" />

diff --git a/lib/dotcom_web/components/live_components/trip_planner_results_section.ex b/lib/dotcom_web/components/live_components/trip_planner_results_section.ex
@@ -28,7 +28,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
       "border border-solid border-slate-400"
     ]}>
       <div :if={@error} class="w-full p-4 text-rose-400">
-        <%= inspect(@error) %>
+        {inspect(@error)}
       </div>
       <.async_result :let={results} assign={@results}>
         <div
@@ -86,13 +86,13 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
         :if={summary.tag}
         class="whitespace-nowrap leading-none font-bold font-heading text-sm uppercase bg-brand-primary-darkest text-white px-3 py-2 mb-3 -ml-4 -mt-4 rounded-br-lg w-min"
       >
-        <%= summary.tag %>
+        {summary.tag}
       </div>
       <.itinerary_summary summary={summary} />
       <div class="flex justify-end items-center">
         <div :if={Enum.count(summary.next_starts) > 0} class="grow text-sm text-grey-dark">
-          Similar trips depart at <%= Enum.map(summary.next_starts, &format_datetime_short/1)
-          |> Enum.join(", ") %>
+          Similar trips depart at {Enum.map(summary.next_starts, &format_datetime_short/1)
+          |> Enum.join(", ")}
         </div>
         <button
           class="btn-link font-semibold underline"

diff --git a/lib/dotcom_web/components/route_symbols.ex b/lib/dotcom_web/components/route_symbols.ex
@@ -68,7 +68,7 @@ defmodule DotcomWeb.Components.RouteSymbols do
 
     ~H"""
     <div class={"#{@class} #{@cva_class} font-heading whitespace-nowrap w-min font-bold inline-flex items-center justify-center leading-[1]"}>
-      <%= @route.name %>
+      {@route.name}
     </div>
     """
   end

diff --git a/lib/dotcom_web/components/trip_planner/itinerary_detail.ex b/lib/dotcom_web/components/trip_planner/itinerary_detail.ex
@@ -6,7 +6,8 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
 
   use DotcomWeb, :component
 
-  import DotcomWeb.Components.TripPlanner.Leg
+  import DotcomWeb.Components.TripPlanner.Leg, only: [leg: 1]
+  import DotcomWeb.Components.TripPlanner.WalkingLeg, only: [walking_leg: 1]
 
   alias Dotcom.TripPlan.PersonalDetail
 
@@ -30,7 +31,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
           phx-value-trip-index={index}
           phx-target={@target}
         >
-          <%= Timex.format!(itinerary.start, "%-I:%M%p", :strftime) %>
+          {Timex.format!(itinerary.start, "%-I:%M%p", :strftime)}
         </.depart_at_button>
       </div>
       <.specific_itinerary_detail itinerary={@selected_itinerary} />
@@ -55,7 +56,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -73,19 +74,23 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
     ~H"""
     <div class="mt-4">
       <div>
-        Depart at <%= Timex.format!(@itinerary.start, "%-I:%M%p", :strftime) %>
+        Depart at {Timex.format!(@itinerary.start, "%-I:%M%p", :strftime)}
         <.route_symbol :for={route <- @all_routes} route={route} class="ml-2" />
       </div>
       <div :for={leg <- @itinerary.legs}>
-        <.leg
-          start_time={leg.start}
-          end_time={leg.stop}
-          from={leg.from}
-          to={leg.to}
-          mode={leg.mode}
-          realtime={leg.realtime}
-          realtime_state={leg.realtime_state}
-        />
+        <%= if match?(%PersonalDetail{}, leg.mode) do %>
+          <.walking_leg leg={leg} />
+        <% else %>
+          <.leg
+            start_time={leg.start}
+            end_time={leg.stop}
+            from={leg.from}
+            to={leg.to}
+            mode={leg.mode}
+            realtime={leg.realtime}
+            realtime_state={leg.realtime_state}
+          />
+        <% end %>
       </div>
     </div>
     """

diff --git a/lib/dotcom_web/components/trip_planner/itinerary_summary.ex b/lib/dotcom_web/components/trip_planner/itinerary_summary.ex
@@ -11,12 +11,10 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
     <div>
       <div class="flex flex-row mb-3 font-bold text-lg justify-between">
         <div>
-          <%= format_datetime_full(@summary.first_start) %> - <%= format_datetime_full(
-            @summary.first_stop
-          ) %>
+          {format_datetime_full(@summary.first_start)} - {format_datetime_full(@summary.first_stop)}
         </div>
         <div>
-          <%= @summary.duration %> min
+          {@summary.duration} min
         </div>
       </div>
       <div class="flex flex-wrap gap-1 items-center content-center mb-3">
@@ -32,12 +30,12 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
         </div>
         <div class="inline-flex items-center gap-0.5">
           <.icon name="person-walking" class="h-3 w-3" />
-          <%= @summary.walk_distance %> mi
+          {@summary.walk_distance} mi
         </div>
         <div :if={@summary.total_cost > 0} class="inline-flex items-center gap-0.5">
           <.icon name="circle" class="h-0.5 w-0.5 mx-1" />
           <.icon name="wallet" class="h-3 w-3" />
-          <%= Fares.Format.price(@summary.total_cost) %>
+          {Fares.Format.price(@summary.total_cost)}
         </div>
       </div>
     </div>
@@ -56,7 +54,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
       @class
     ]}>
       <.icon name="person-walking" class="h-4 w-4" />
-      <span><%= @walk_minutes %> min</span>
+      <span>{@walk_minutes} min</span>
     </span>
     """
   end

diff --git a/lib/dotcom_web/components/trip_planner/leg.ex b/lib/dotcom_web/components/trip_planner/leg.ex
@@ -31,16 +31,16 @@ defmodule DotcomWeb.Components.TripPlanner.Leg do
     ~H"""
     <div class={"border-solid #{@realtime_class} p-3 m-1"}>
       <div class="flex items-center justify-between">
-        <strong><%= @from.name %></strong>
-        <span><%= format_time(@start_time) %></span>
+        <strong>{@from.name}</strong>
+        <span>{format_time(@start_time)}</span>
       </div>
       <div>
-        <p :if={@realtime_state}>Realtime data: <%= @realtime_state %></p>
+        <p :if={@realtime_state}>Realtime data: {@realtime_state}</p>
         <.mode mode={@mode} />
       </div>
       <div class="flex items-center justify-between">
-        <strong><%= @to.name %></strong>
-        <span><%= format_time(@end_time) %></span>
+        <strong>{@to.name}</strong>
+        <span>{format_time(@end_time)}</span>
       </div>
     </div>
     """
@@ -71,11 +71,11 @@ defmodule DotcomWeb.Components.TripPlanner.Leg do
   def transit(assigns) do
     ~H"""
     <div class="text-lg">
-      <.route_symbol route={@route} /> (<%= @route.name %>) on trip <%= @trip_id %>
+      <.route_symbol route={@route} /> ({@route.name}) on trip {@trip_id}
     </div>
     <ul class="list-decimal">
       <li :for={stop <- @stops} class="text-sm text-zinc-500">
-        <%= stop.name %>
+        {stop.name}
         <div :if={Stop.accessible?(stop)} class="inline-flex items-center gap-0.5">
           <.icon
             type="icon-svg"
@@ -93,7 +93,7 @@ defmodule DotcomWeb.Components.TripPlanner.Leg do
     ~H"""
     <ul class="list-decimal">
       <li :for={step <- @steps} class="text-sm text-zinc-500">
-        <%= Step.walk_summary(step) %>
+        {Step.walk_summary(step)}
       </li>
     </ul>
     """

diff --git a/lib/dotcom_web/components/trip_planner/walking_leg.ex b/lib/dotcom_web/components/trip_planner/walking_leg.ex
@@ -0,0 +1,53 @@
+defmodule DotcomWeb.Components.TripPlanner.WalkingLeg do
+  @moduledoc """
+  A walking leg of a trip.
+  Includes a summary of the walk (time and distance) and a list of steps.
+  """
+
+  use Phoenix.Component
+
+  import MbtaMetro.Components.Accordion, only: [accordion: 1]
+  import MbtaMetro.Components.Icon, only: [icon: 1]
+  import MbtaMetro.Components.List, only: [list: 1]
+
+  alias OpenTripPlannerClient.Schema.Step
+
+  @doc """
+  Renders a walking leg.
+
+  Must be given a `leg` with a:
+    - `distance` (float) in miles
+    - `duration` (integer) in minutes
+    - `mode` with a list of `steps` (list of `Step` structs)
+  """
+
+  attr :leg, :map, required: true
+
+  def walking_leg(assigns) do
+    ~H"""
+    <hr class="my-2 border-t-solid border-slate-300" />
+    <.accordion>
+      <:heading>
+        <.icon name="person-walking" class="w-5 h-5 mr-1 fill-black" />
+        <div class="text-black">
+          <div class="text-base">
+            Walk
+          </div>
+          <div class="text-sm">
+            {@leg.duration} min, {@leg.distance} mi
+          </div>
+        </div>
+      </:heading>
+      <:content>
+        <.list class="w-full m-0 ps-0">
+          <:item :for={step <- @leg.mode.steps}>
+            <span class="text-sm">
+              {Step.walk_summary(step)}
+            </span>
+          </:item>
+        </.list>
+      </:content>
+    </.accordion>
+    """
+  end
+end
diff --git a/lib/dotcom_web/live/admin.ex b/lib/dotcom_web/live/admin.ex
@@ -26,8 +26,8 @@ defmodule DotcomWeb.Live.Admin do
     <section style="display: grid; gap: .5rem; grid-template-columns: 1fr 1fr 1fr">
       <%= for feature <- @admin_features do %>
         <%= link to: feature.url, class: "btn btn-secondary", style: "white-space: inherit;" do %>
-          <header class="font-heading font-bold mb-3 text-2xl mt-0"><%= feature.title %></header>
-          <p class="mb-0"><%= feature.description %></p>
+          <header class="font-heading font-bold mb-3 text-2xl mt-0">{feature.title}</header>
+          <p class="mb-0">{feature.description}</p>
         <% end %>
       <% end %>
       <div class="btn btn-secondary disabled" style="white-space: inherit;">

diff --git a/lib/dotcom_web/live/admin/trip_plan_feedback.ex b/lib/dotcom_web/live/admin/trip_plan_feedback.ex
@@ -17,12 +17,12 @@ defmodule DotcomWeb.Live.Admin.TripPlanFeedback do
     <p>
       In March 2024, we started offering a feedback form for riders to complete after making plans via the trip planner. This button lets you download the comments, along with the list of itineraries being commented on and some context from the request. In the future this might allow some filtering by date, but for now the button will give you the entire dataset.
     </p>
-    <%= link(
+    {link(
       "Download #{Enum.count(@feedback)} #{Inflex.inflect("record", Enum.count(@feedback))} (.csv)",
       to: DotcomWeb.Router.Helpers.feedback_url(@socket, :download),
       class: "btn btn-primary",
       disabled: Enum.count(@feedback) == 0
-    ) %>
+    )}
     """
   end
 end
diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
@@ -46,13 +46,13 @@ defmodule DotcomWeb.Live.TripPlanner do
         form_values={@form_values}
       />
       <section :if={@submitted_values} class="mt-2 mb-6">
-        <p class="text-lg font-semibold mb-0"><%= submission_summary(@submitted_values) %></p>
-        <p><%= time_summary(@submitted_values) %></p>
+        <p class="text-lg font-semibold mb-0">{submission_summary(@submitted_values)}</p>
+        <p>{time_summary(@submitted_values)}</p>
         <.async_result :let={results} assign={@results}>
           <:failed :let={{:error, errors}}>
             <.error_container title="Unable to plan your trip">
               <p :for={%OpenTripPlannerClient.Error{message: message} <- errors} class="last:mb-0">
-                <%= message %>
+                {message}
               </p>
             </.error_container>
           </:failed>
@@ -64,7 +64,7 @@ defmodule DotcomWeb.Live.TripPlanner do
               <.feedback kind={:warning}>No trips found.</.feedback>
             <% else %>
               <.feedback kind={:success}>
-                Found <%= Enum.count(results) %> <%= Inflex.inflect("way", Enum.count(results)) %> to go.
+                Found {Enum.count(results)} {Inflex.inflect("way", Enum.count(results))} to go.
               </.feedback>
             <% end %>
           <% end %>
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,7 +68,7 @@ defmodule DotcomWeb.Components.RouteSymbols do @@
         ~H"""
         <div class={"#{@class} #{@cva_class} font-heading whitespace-nowrap w-min font-bold inline-flex items-center justify-center leading-[1]"}>
-          <%= @route.name %>
+          {@route.name}
         </div>
         """
       end
@@ Expand Down @@