Display list as table

assets/css/app.scss

@@ -97,14 +97,18 @@ ul.locations-list {
 }
 
 ul.actions-list {
-  display: inline-flex;
   list-style: none;
+  display: inline-flex;
 }
 
-ul.actions-list > li ~ li {
+dl ul.actions-list > li ~ li {
   margin-left:  0.5em;
 }
 
+table ul.actions-list {
+  flex-direction: column;
+}
+
 dl.location {
   display: grid;
   grid-template-columns: min-content 1fr;

lib/vaccins_web/live/index_live.html.leex

@@ -24,8 +24,13 @@
   </form>
 <% end %>
 
-<ul class="locations-list">
-  <%= for l <- assigns |> locations_by_availability do %>
-    <li><%= live_component @socket, VaccinsWeb.LocationComponent, id: l.id, location: l %></li>
-  <% end %>
-</ul>
+<table class="locations-list">
+  <thead>
+    <tr><%= VaccinsWeb.LocationComponent.render_table_header() %></tr>
+  </thead>
+  <tbody>
+    <%= for l <- assigns |> locations_by_availability do %>
+      <tr><%= live_component @socket, VaccinsWeb.LocationComponent, id: l.id, location: l, render_as: :table_row %></tr>
+    <% end %>
+  </tbody>
+</table>

lib/vaccins_web/live/location_component.ex

@@ -12,7 +12,8 @@ defmodule VaccinsWeb.LocationComponent do
          slots_before: [],
          loading: false,
          last_refresh_date: nil,
-         last_early_slot_seen: nil
+         last_early_slot_seen: nil,
+         render_as: :description_list
        )}
 
   @impl true
@@ -45,7 +46,7 @@ defmodule VaccinsWeb.LocationComponent do
   end
 
   @impl true
-  def render(assigns) do
+  def render(assigns = %{render_as: :description_list}) do
     ~L"""
       <dl class="location">
         <dt>name</dt>
@@ -66,11 +67,11 @@ defmodule VaccinsWeb.LocationComponent do
         <%= if has_slots?(assigns) do %>
           <dt>Avant 24h</dt>
           <dd>
-            <ul class="slots-list"><%= for d <- @slots_before do %><li><%= d |> DateTime.to_string %></li><% end %></ul>
+            <ul class="slots-list"><%= for d <- @slots_before do %><li><%= d |> Calendar.strftime("%d/%m/%Y %H:%M:%S") %></li><% end %></ul>
           </dd>
           <dt>Après 24h</dt>
           <dd>
-            <ul class="slots-list"><%= for d <- @slots_after do %><li><%= d |> DateTime.to_string %></li><% end %></ul>
+            <ul class="slots-list"><%= for d <- @slots_after do %><li><%= d |> Calendar.strftime("%d/%m/%Y %H:%M:%S") %></li><% end %></ul>
           </dd>
         <% end %>
         <dt>actions</dt>
@@ -85,6 +86,45 @@ defmodule VaccinsWeb.LocationComponent do
     """
   end
 
+  @impl true
+  def render(assigns = %{render_as: :table_row}) do
+    ~L"""
+      <td><%= @location.name %></td>
+      <td><%= @location.location %></td>
+      <td><%= if @last_refresh_date, do: @last_refresh_date |> Time.to_string() %></td>
+      <td><%= cond do %>
+        <%= @loading -> %>...
+        <%= not has_slots?(assigns) -> %>Pas de créneau <%= if @last_early_slot_seen do %>(<%= @last_early_slot_seen |> DateTime.to_time() |> Time.truncate(:second) |> Time.to_string %>)<% end %>
+        <%= has_early_slots?(assigns) -> %><span class="alert-danger">Des dispos sous 24h !</span>
+        <%= has_slots?(assigns) -> %>Des dispos !
+      <% end %></td>
+      <td><%= link "Résa.", to: @location.booking_page %></td>
+      <td>
+        <ul class="slots-list"><%= for d <- @slots_before do %><li><%= d |> Calendar.strftime("%d/%m/%Y %H:%M") %></li><% end %></ul>
+      </td>
+      <td>
+        <ul class="slots-list"><%= for d <- @slots_after do %><li><%= d |> Calendar.strftime("%d/%m/%Y %H:%M") %></li><% end %></ul>
+      </td>
+      <td><ul class="actions-list">
+            <li><button phx-click="trigger_query" phx-target="<%= @myself %>">Trigger</button></li>
+            <li><a href="<%= @location |> to_json_query %>"><button>Debug</button></a></li>
+            <li><button class="alert-danger" phx-click="delete" phx-target="<%= @myself %>" data-confirm="Etes-vous sur?">Delete</button></li>
+          </ul></td>
+    """
+  end
+
+  def render_table_header(),
+    do: ~E"""
+      <th>Nom</th>
+      <th>Lieu</th>
+      <th>Dernier refresh</th>
+      <th>Status</th>
+      <th>Lien résa</th>
+      <th>Slots avant 24h</th>
+      <th>Slots après 24h</th>
+      <th>Actions</th>
+    """
+
   defp integrate_availabilities(assigns = %{availabilities: {:error, reason}}),
     do:
       assigns