From 8b8ea11c530e01c1167c289354375847e7fc9f2f Mon Sep 17 00:00:00 2001
From: Pascal Schmid <psschmid@gmx.de>
Date: Thu, 10 Oct 2024 11:19:16 +0200
Subject: [PATCH] Style upload form

---
 lib/mihainator_web/live/upload_live.ex        | 23 +++---
 lib/mihainator_web/live/upload_live.html.heex | 73 +++++++++++--------
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/lib/mihainator_web/live/upload_live.ex b/lib/mihainator_web/live/upload_live.ex
index ef66271..2622a0a 100644
--- a/lib/mihainator_web/live/upload_live.ex
+++ b/lib/mihainator_web/live/upload_live.ex
@@ -4,27 +4,26 @@ defmodule MihainatorWeb.UploadLive do
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     {:ok,
-      socket
-      |> assign(:uploaded_files, [])
-      |> allow_upload(:avatar, accept: ~w(.csv .jpeg))}
+     socket
+     |> assign(:uploaded_files, [])
+     |> assign(:submit_disabled?, true)
+     |> allow_upload(:history, accept: ~w(.csv))}
   end
 
   @impl Phoenix.LiveView
   def handle_event("validate", _params, socket) do
-    {:noreply, socket}
-  end
-
-  @impl Phoenix.LiveView
-  def handle_event("cancel-upload", %{"ref" => ref}, socket) do
-    {:noreply, cancel_upload(socket, :avatar, ref)}
+    {:noreply,
+     socket
+     |> assign(:submit_disabled?, false)}
   end
 
   @impl Phoenix.LiveView
   def handle_event("save", _params, socket) do
     uploaded_files =
-      consume_uploaded_entries(socket, :avatar, fn %{path: path}, _entry ->
-        line_count = File.stream!(path)
-        |> Enum.count()
+      consume_uploaded_entries(socket, :history, fn %{path: path}, _entry ->
+        line_count =
+          File.stream!(path)
+          |> Enum.count()
 
         IO.puts(line_count)
 
diff --git a/lib/mihainator_web/live/upload_live.html.heex b/lib/mihainator_web/live/upload_live.html.heex
index 86a3dcd..14a895f 100644
--- a/lib/mihainator_web/live/upload_live.html.heex
+++ b/lib/mihainator_web/live/upload_live.html.heex
@@ -1,39 +1,52 @@
-<form id="upload-form" phx-submit="save" phx-change="validate">
-    <label class="block mb-2 text-sm font-medium text-gray-900" for={@uploads.avatar.ref}>Avatar</label>
+<div class="flex flex-col space-y-8">
+  <h1 class="text-5xl">Threema history checker</h1>
 
-    <.live_file_input upload={@uploads.avatar} class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />
-    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">
-        Upload
+  <p class="text-lg">Upload a Threema chat history file (.csv) and see who's more interactive!</p>
+
+  <form id="upload-form" phx-submit="save" phx-change="validate" class="flex flex-col space-y-4">
+    <div>
+      <label class="block mb-2 text-sm font-bold text-gray-900" for={@uploads.history.ref}>
+        CSV file
+      </label>
+
+      <.live_file_input
+        upload={@uploads.history}
+        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+      />
+    </div>
+
+    <button
+      :if={@submit_disabled?}
+      disabled={@submit_disabled?}
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end disabled:opacity-75"
+      type="submit"
+    >
+      Upload
     </button>
-</form>
 
-<%!-- use phx-drop-target with the upload ref to enable file drag and drop --%>
-<section phx-drop-target={@uploads.avatar.ref}>
-    <%= for entry <- @uploads.avatar.entries do %>
+    <button
+      :if={not @submit_disabled?}
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end"
+      type="submit"
+    >
+      Upload
+    </button>
+  </form>
+
+  <%= for entry <- @uploads.history.entries do %>
     <article class="upload-entry">
-
-        <figure>
-            <.live_img_preview entry={entry} />
-            <figcaption><%= entry.client_name %></figcaption>
-        </figure>
-
-        <%!-- entry.progress will update automatically for in-flight entries --%>
-        <progress value={entry.progress} max="100"> <%= entry.progress %>% </progress>
-
-        <%!-- a regular click event whose handler will invoke Phoenix.LiveView.cancel_upload/3 --%>
-        <button type="button" phx-click="cancel-upload" phx-value-ref={entry.ref} aria-label="cancel">&times;</button>
-
-        <%!-- Phoenix.Component.upload_errors/2 returns a list of error atoms --%>
-        <%= for err <- upload_errors(@uploads.avatar, entry) do %>
+      <%!-- Phoenix.Component.upload_errors/2 returns a list of error atoms --%>
+      <%= for err <- upload_errors(@uploads.history, entry) do %>
         <p class="alert alert-danger"><%= error_to_string(err) %></p>
-        <% end %>
-
+      <% end %>
     </article>
-    <% end %>
+  <% end %>
 
+  <%!-- use phx-drop-target with the upload ref to enable file drag and drop --%>
+  <section phx-drop-target={@uploads.history.ref}>
     <%!-- Phoenix.Component.upload_errors/1 returns a list of error atoms --%>
-    <%= for err <- upload_errors(@uploads.avatar) do %>
-    <p class="alert alert-danger"><%= error_to_string(err) %></p>
+    <%= for err <- upload_errors(@uploads.history) do %>
+      <p class="alert alert-danger"><%= error_to_string(err) %></p>
     <% end %>
-
-</section>
+  </section>
+</div>