feat: Add Lo-Fi system status widget

lib/dotcom_web/components/system_status/widget.ex

@@ -0,0 +1,74 @@
+defmodule DotcomWeb.SystemStatus.Widget do
+  @moduledoc """
+
+  A component that renders the given `@statuses` in a table.
+
+  """
+
+  use DotcomWeb, :component
+
+  @route_ids ["Red", "Orange", "Green", "Blue"]
+
+  def system_status_widget(assigns) do
+    assigns = assigns |> assign(:route_ids, @route_ids)
+
+    ~H"""
+    <div class="flex flex-col gap-2">
+      <.line_status
+        :for={route_id <- @route_ids}
+        route_id={route_id}
+        branches_with_statuses={@routes_with_statuses |> Map.get(route_id)}
+      />
+    </div>
+    """
+  end
+
+  defp line_status(assigns) do
+    ~H"""
+    <div class="border border-gray-lighter p-2">
+      <.branch_status
+        :for={branch <- @branches_with_statuses}
+        route_id={@route_id}
+        branch_ids={branch.branch_ids}
+        status_entries={branch.status_entries}
+      />
+    </div>
+    """
+  end
+
+  defp branch_status(assigns) do
+    ~H"""
+    <div class="flex gap-2">
+      <span class="font-bold">
+        {@route_id}<span :for={branch_id <- @branch_ids}>{" "}{branch_id}</span>:
+      </span>
+
+      <div class="flex flex-col">
+        <div :for={status <- @status_entries}>
+          <span :if={show_prefix?(@status_entries)}>{prefix(status)}:</span>
+          {description(status)}
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  defp description(%{status: :normal}), do: "Normal Service"
+  defp description(%{status: :delay}), do: "Delays"
+  defp description(%{status: :shuttle}), do: "Shuttle Buses"
+  defp description(%{status: :station_closure, multiple: false}), do: "Station Closure"
+  defp description(%{status: :station_closure, multiple: true}), do: "Station Closures"
+  defp description(%{status: :suspension, multiple: false}), do: "Suspension"
+  defp description(%{status: :suspension, multiple: true}), do: "Suspensions"
+  defp description(status_entry), do: status_entry.status
+
+  defp show_prefix?(status_entries) do
+    status_entries |> Enum.any?(&future?/1)
+  end
+
+  defp future?(%{time: {:future, _}}), do: true
+  defp future?(_), do: false
+
+  defp prefix(%{time: :current}), do: "Now"
+  defp prefix(%{time: {:future, time}}), do: Util.kitchen_downcase_time(time)
+end

lib/dotcom_web/live/system_status.ex

@@ -6,6 +6,8 @@ defmodule DotcomWeb.Live.SystemStatus do
 
   use DotcomWeb, :live_view
 
+  import DotcomWeb.SystemStatus.Widget
+
   alias Dotcom.SystemStatus
 
   def render(assigns) do
@@ -18,24 +20,22 @@ defmodule DotcomWeb.Live.SystemStatus do
       |> assign(:alerts, alerts)
       |> assign(:statuses, statuses)
 
+    Widget
+
     ~H"""
     <h1>System Status</h1>
-    <div>
-      <.status :for={status <- @statuses} status={status} />
-    </div>
+    <.system_status_widget routes_with_statuses={@statuses} />
+
+    <h1>Examples</h1>
+    <.system_status_widget routes_with_statuses={fake_statuses_1()} />
+
     <h1>Alerts</h1>
     <div class="flex flex-col gap-2">
       <.alert :for={alert <- @alerts} alert={alert} />
     </div>
     """
   end
 
-  defp status(assigns) do
-    ~H"""
-    <pre>{inspect @status, pretty: true}</pre>
-    """
-  end
-
   defp alert(assigns) do
     ~H"""
     <details class="border border-gray-lighter p-2">
@@ -49,4 +49,54 @@ defmodule DotcomWeb.Live.SystemStatus do
     </details>
     """
   end
+
+  defp fake_statuses_1() do
+    %{
+      "Blue" => [
+        %{
+          branch_ids: [],
+          status_entries: [%{time: :current, status: :normal, multiple: false}]
+        }
+      ],
+      "Orange" => [
+        %{
+          branch_ids: [],
+          status_entries: [
+            %{time: :current, status: :delay, multiple: false},
+            %{
+              time: {:future, Timex.now() |> Timex.set(hour: 20, minute: 30)},
+              status: :shuttle,
+              multiple: false
+            }
+          ]
+        }
+      ],
+      "Red" => [
+        %{
+          branch_ids: [],
+          status_entries: [%{time: :current, status: :normal, multiple: false}]
+        },
+        %{
+          branch_ids: ["Mattapan"],
+          status_entries: [%{time: :current, status: :suspension, multiple: false}]
+        }
+      ],
+      "Green" => [
+        %{
+          branch_ids: ["Green-D", "Green-E"],
+          status_entries: [
+            %{
+              time: {:future, Timex.now() |> Timex.set(hour: 18, minute: 0)},
+              status: :station_closure,
+              multiple: true
+            }
+          ]
+        },
+        %{
+          branch_ids: ["Green-B", "Green-C"],
+          status_entries: [%{time: :current, status: :normal, multiple: false}]
+        }
+      ]
+    }
+  end
 end