feat: Add Lo-Fi system status widget

lib/dotcom_web/components/system_status/widget.ex

@@ -0,0 +1,60 @@
+defmodule DotcomWeb.SystemStatus.Widget do
+  @moduledoc """
+
+  A component that renders the given `@statuses` in a table.
+
+  """
+
+  use DotcomWeb, :component
+
+  def system_status_widget(assigns) do
+    ~H"""
+    <div class="flex flex-col gap-2">
+      <.status_entry
+        :for={route_with_statuses <- @routes_with_statuses}
+        route_with_statuses={route_with_statuses}
+      />
+    </div>
+    """
+  end
+
+  defp status_entry(%{route_with_statuses: %{branches_with_statuses: _}} = assigns) do
+    ~H"""
+    <.status_entry_for_route
+      route_with_statuses={@route_with_statuses}
+      route_id={@route_with_statuses.route_id}
+      branches_with_statuses={@route_with_statuses.branches_with_statuses}
+    />
+    """
+  end
+
+  defp status_entry_for_route(assigns) do
+    ~H"""
+    <div class="border border-gray-lighter p-2">
+      <.status_entry_for_branches
+        :for={branch <- @branches_with_statuses}
+        route_id={@route_id}
+        branch_ids={branch.branch_ids}
+        statuses={branch.statuses}
+      />
+    </div>
+    """
+  end
+
+  defp status_entry_for_branches(assigns) do
+    ~H"""
+    <div class="flex gap-2">
+      <span class="font-bold">
+        {@route_id}<span :for={sub_route <- @branch_ids}>{" "}{sub_route}</span>:
+      </span>
+
+      <div class="flex flex-col">
+        <div :for={status <- @statuses}>
+          <span :if={status.time}>{status.time}:</span>
+          {status.description}
+        </div>
+      </div>
+    </div>
+    """
+  end
+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
   alias Dotcom.SystemStatus.Groups
 
@@ -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,52 @@ defmodule DotcomWeb.Live.SystemStatus do
     </details>
     """
   end
+
+  defp fake_statuses_1() do
+    [
+      %{
+        route_id: "Blue",
+        branches_with_statuses: [
+          %{
+            branch_ids: [],
+            statuses: [%{time: nil, description: "Normal Service"}]
+          }
+        ]
+      },
+      %{
+        route_id: "Orange",
+        branches_with_statuses: [
+          %{
+            branch_ids: [],
+            statuses: [
+              %{time: "Now", description: "Delays"},
+              %{time: "8:30pm", description: "Shuttle Buses"}
+            ]
+          }
+        ]
+      },
+      %{
+        route_id: "Red",
+        branches_with_statuses: [
+          %{
+            branch_ids: [],
+            statuses: [%{time: nil, description: "Normal Service"}]
+          }
+        ]
+      },
+      %{
+        route_id: "Green",
+        branches_with_statuses: [
+          %{
+            branch_ids: ["Green-D", "Green-E"],
+            statuses: [%{time: "6:00pm", description: "Station Closure"}]
+          },
+          %{
+            branch_ids: ["Green-B", "Green-C"],
+            statuses: [%{time: nil, description: "Normal Service"}]
+          }
+        ]
+      }
+    ]
+  end
 end