Added test button to apprise input (#226)

lib/pinchflat_web/controllers/settings/setting_html.ex

@@ -6,6 +6,7 @@ defmodule PinchflatWeb.Settings.SettingHTML do
   @doc """
   Renders a setting form.
   """
+  attr :conn, Plug.Conn, required: true
   attr :changeset, Ecto.Changeset, required: true
   attr :action, :string, required: true
 

lib/pinchflat_web/controllers/settings/setting_html/apprise_server_live.ex

@@ -0,0 +1,55 @@
+defmodule Pinchflat.Settings.AppriseServerLive do
+  use PinchflatWeb, :live_view
+
+  alias PinchflatWeb.Settings.SettingHTML
+
+  def render(assigns) do
+    ~H"""
+    <.input
+      type="text"
+      id="setting_apprise_server"
+      name="setting[apprise_server]"
+      value={@value}
+      label="Apprise Server"
+      help={SettingHTML.apprise_server_help()}
+      html_help={true}
+      inputclass="font-mono text-sm mr-4"
+      placeholder="https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}"
+      phx-change="apprise_server_changed"
+    >
+      <:input_append>
+        <.icon_button icon_name={@icon_name} class="h-12 w-12" phx-click="send_apprise_test" tooltip={@tooltip} />
+      </:input_append>
+    </.input>
+    """
+  end
+
+  def mount(_params, session, socket) do
+    new_assigns = %{
+      value: session["value"],
+      icon_name: "hero-paper-airplane",
+      tooltip: "Send Test"
+    }
+
+    {:ok, assign(socket, new_assigns)}
+  end
+
+  def handle_event("send_apprise_test", _params, %{assigns: assigns} = socket) do
+    backend_runner().run([assigns.value], title: "Pinchflat Test", body: "This is a test message from Pinchflat")
+    Process.send_after(self(), :reset_button_icon, 4_000)
+
+    {:noreply, assign(socket, %{icon_name: "hero-check", tooltip: "Sent!"})}
+  end
+
+  def handle_event("apprise_server_changed", %{"setting" => setting}, socket) do
+    {:noreply, assign(socket, %{value: setting["apprise_server"]})}
+  end
+
+  def handle_info(:reset_button_icon, socket) do
+    {:noreply, assign(socket, %{icon_name: "hero-paper-airplane", tooltip: "Send Test"})}
+  end
+
+  defp backend_runner do
+    Application.get_env(:pinchflat, :apprise_runner)
+  end
+end

lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex

@@ -7,15 +7,13 @@
     Notification Settings
   </h3>
 
-  <.input
-    field={f[:apprise_server]}
-    type="text"
-    label="Apprise Server"
-    help={apprise_server_help()}
-    html_help={true}
-    inputclass="font-mono text-sm"
-    placeholder="https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}"
-  />
+  <section>
+    <%= live_render(
+      @conn,
+      Pinchflat.Settings.AppriseServerLive,
+      session: %{"value" => f[:apprise_server].value}
+    ) %>
+  </section>
 
   <.button class="mt-10 mb-4 sm:mb-8 w-full sm:w-auto" rounding="rounded-lg">Save Settings</.button>
 </.simple_form>

lib/pinchflat_web/controllers/settings/setting_html/show.html.heex

@@ -7,6 +7,6 @@
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
   <div class="max-w-full">
-    <.setting_form changeset={@changeset} action={~p"/settings"} />
+    <.setting_form conn={@conn} changeset={@changeset} action={~p"/settings"} />
   </div>
 </div>

lib/pinchflat_web/controllers/sources/source_html/media_item_table_live.ex

@@ -12,13 +12,7 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
   def render(%{records: []} = assigns) do
     ~H"""
     <div class="mb-4 flex items-center">
-      <button
-        class="flex justify-center items-center rounded-lg bg-form-input border-2 border-strokedark h-10 w-10"
-        phx-click="reload_page"
-        type="button"
-      >
-        <.icon name="hero-arrow-path" class="text-stroke" />
-      </button>
+      <.icon_button icon_name="hero-arrow-path" class="h-10 w-10" phx-click="reload_page" />
       <p class="ml-2">Nothing Here!</p>
     </div>
     """
@@ -28,13 +22,7 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
     ~H"""
     <div>
       <span class="mb-4 flex items-center">
-        <button
-          class="flex justify-center items-center rounded-lg bg-form-input border-2 border-strokedark h-10 w-10"
-          phx-click="reload_page"
-          type="button"
-        >
-          <.icon name="hero-arrow-path" class="text-stroke" />
-        </button>
+        <.icon_button icon_name="hero-arrow-path" class="h-10 w-10" phx-click="reload_page" tooltip="Refresh" />
         <span class="ml-2">Showing <%= length(@records) %> of <%= @total_record_count %></span>
       </span>
       <.table rows={@records} table_class="text-white">