Group messages by date

3 files changed, 114 insertions, 28 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index 4bfd6cb..1650646 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -39,10 +39,13 @@ body {
 }
 
 .row {
-  margin-top: 10px;
+  margin-top: 6px;
   display: flex;
   align-items: center;
 }
+.row--padded {
+  margin-top: 12px;
+}
 .row-left {
   flex-direction: row;
 }
@@ -50,6 +53,14 @@ body {
   flex-direction: row-reverse;
 }
 
+.date-box {
+  background-color: #666;
+  color: white;
+  padding: 4px 12px 4px 12px;
+  border-radius: 12px;
+  box-shadow: 1px 1px 2px grey;
+}
+
 .white-box {
   background-color: white;
   border-radius: 5px;
diff --git a/lib/waev_web/templates/exports/show.html.eex b/lib/waev_web/templates/exports/show.html.eex
index c61d4e5..a63a01b 100644
--- a/lib/waev_web/templates/exports/show.html.eex
+++ b/lib/waev_web/templates/exports/show.html.eex
@@ -3,37 +3,47 @@
   <%= party_peek(assigns, @export.right) %>
 </div>
 
-<%= for message <- @export.messages do %>
-  <%= case message.side do %>
-    <% :left -> %>
-<div class="row row-left">
-  <%= party_avatar(assigns, @export.left, :tiny) %>
-    <% :right -> %>
-<div class="row row-right">
-  <%= party_avatar(assigns, @export.right, :tiny) %>
-  <% end %>
-
-  <div class="message white-box">
-    <%= case message.attachment do %>
-      <% %Waev.Export.Message.File{filename: filename, type: :image} -> %>
-    <img class="message-photo" alt="<%= filename %>" src="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>" />
-      <% _ -> %>
-    <% end %>
-    <div class="message-box">
-      <%= case message.attachment do %>
-        <% %Waev.Export.Message.File{filename: filename, type: :file} -> %>
-      <a class="message-text" href="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>"><%= filename %></a>
-        <% _ -> %>
+<%= for {date, blocks} <- process_messages(@export.messages) do %>
+  <div class="row row--padded">
+    <div class="date-box">
+      <%= date %>
+    </div>
+  </div>
+  <%= for {side, block} <- blocks do %>
+    <div class="row--padded"></div>
+    <%= for message <- block do %>
+      <%= case message.side do %>
+        <% :left -> %>
+    <div class="row row-left">
+      <%= party_avatar(assigns, @export.left, :tiny) %>
+        <% :right -> %>
+    <div class="row row-right">
+      <%= party_avatar(assigns, @export.right, :tiny) %>
       <% end %>
 
-      <div><%= message.text |> highlight_urls() |> nl_to_br() |> raw() %></div>
-      <div class="message-date">
-        <%= message.date %>
+      <div class="message white-box">
+        <%= case message.attachment do %>
+          <% %Waev.Export.Message.File{filename: filename, type: :image} -> %>
+        <img class="message-photo" alt="<%= filename %>" src="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>" />
+          <% _ -> %>
+        <% end %>
+        <div class="message-box">
+          <%= case message.attachment do %>
+            <% %Waev.Export.Message.File{filename: filename, type: :file} -> %>
+          <a class="message-text" href="<%= Routes.exports_path(@conn, :get_media, @id, filename) %>"><%= filename %></a>
+            <% _ -> %>
+          <% end %>
+
+          <div><%= message.text |> highlight_urls() |> nl_to_br() |> raw() %></div>
+          <div class="message-date">
+            <%= message.date %>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
 
-</div>
+    </div>
+    <% end %>
+  <% end %>
 <% end %>
 
 <%= pagination_bar(assigns, @page, @size) %>
diff --git a/lib/waev_web/views/exports_view.ex b/lib/waev_web/views/exports_view.ex
index 3e0195f..bbdc2c7 100644
--- a/lib/waev_web/views/exports_view.ex
+++ b/lib/waev_web/views/exports_view.ex
@@ -1,6 +1,71 @@
 defmodule WaevWeb.ExportsView do
   use WaevWeb, :view
 
+  defp consolidate_block({side, messages}), do: {side, Enum.reverse(messages)}
+
+  defp consolidate_day({datestr, blocks}) do
+    # TODO use timex to pretty-print dates (translations??)
+    [d, m, y] = String.split(datestr, "/") |> Enum.map(&String.to_integer/1)
+    y = 2000 + y
+
+    m =
+      Enum.at(
+        [
+          "enero",
+          "febrero",
+          "marzo",
+          "abril",
+          "mayo",
+          "junio",
+          "julio",
+          "agosto",
+          "septiembre",
+          "octubre",
+          "noviembre",
+          "diciembre"
+        ],
+        m - 1
+      )
+
+    date = "#{d} de #{m} de #{y}"
+    {date, Enum.reverse(blocks)}
+  end
+
+  # Organize messages to make them easier to display
+  # [Waev.Export.Message] -> [{Date, [{Side, [Waev.Export.Message]}]}]
+  # Naming:                  ^-Days  ^-Blocks^-Block
+  def process_messages(messages) do
+    messages
+    |> Enum.reduce([], fn message, days ->
+      [datestr, timestr] = String.split(message.date, " ")
+      side = message.side
+
+      case days do
+        # Insert message on the last block (same date, same side)
+        [{^datestr, [{^side, block} | old_blocks]} | old_days] ->
+          [{datestr, [{side, [message | block]} | old_blocks]} | old_days]
+
+        # Insert message on new block (same date)
+        # Old block must be reversed to keep messages in the correct order
+        [{^datestr, [{old_side, old_block} | old_blocks]} | old_days] ->
+          [
+            {datestr, [{side, [message]}, consolidate_block({old_side, old_block}) | old_blocks]}
+            | old_days
+          ]
+
+        # Insert message on new date
+        # Old blocks must be reversed to keep days in the correct order
+        [{old_datestr, old_blocks} | old_days] ->
+          [{datestr, [{side, [message]}]}, consolidate_day({old_datestr, old_blocks}) | old_days]
+
+        # Ez.
+        [] ->
+          [{datestr, [{side, [message]}]}]
+      end
+    end)
+    |> Enum.reverse()
+  end
+
   def party_peek(assigns, party) do
     ~E"""
     <div class="party-peek">