Add tap to select, second tap for details

lib/freedive_web/live/liliform_live.ex

@@ -17,6 +17,8 @@ defmodule FreediveWeb.LiliformLive do
         filters = filters()
         socket = assign(socket, :opts, Keyword.get(unquote(opts), :opts, []))
         socket = assign(socket, :items_all, items)
+        socket = assign(socket, :selected_item, nil)
+        socket = assign(socket, :details, nil)
 
         socket =
           assign(
@@ -55,6 +57,34 @@ defmodule FreediveWeb.LiliformLive do
 
         {:noreply, socket}
       end
+
+      def(handle_event("tap", %{"name" => item_name}, socket)) do
+        # 1 tap to select, 2 taps for details
+        item = socket.assigns.items[item_name]
+        socket =
+          case socket.assigns.selected_item do
+            nil ->
+              assign(socket, :selected_item, item)
+
+            selected ->
+              case selected.name == item_name do
+                true ->
+                  case socket.assigns.details do
+                    nil ->
+                      assign(socket, :details, true)
+
+                    _ ->
+                      assign(socket, %{selected_item: item, details: nil})
+                  end
+
+                false ->
+                  assign(socket, %{selected_item: item, details: nil})
+              end
+          end
+        IO.inspect(socket.assigns.selected_item, label: "selected_item")
+        IO.inspect(socket.assigns.details, label: "details")
+        {:noreply, socket}
+      end
     end
   end
 
@@ -68,9 +98,10 @@ defmodule FreediveWeb.LiliformLive do
         items
 
       _ ->
-        Enum.filter(items, fn item ->
+        Enum.filter(items, fn {_, item} ->
           Map.get(item, key) == true
         end)
+        Enum.into(%{}, items)
     end
   end
 

lib/freedive_web/live/service_live.ex

@@ -4,14 +4,18 @@ defmodule FreediveWeb.ServiceLive do
   def render(assigns) do
     ~H"""
     <.page name="Services" filters={@filters}>
-      <FreediveWeb.ServiceLive.Item.items_block items={@items} />
+      <FreediveWeb.ServiceLive.Components.items_block
+        items={@items}
+        selected_item={@selected_item}
+        details={@details}
+      />
     </.page>
     """
   end
 
   def items() do
-    [
     %{
+      "sshd" => %{
         name: "sshd",
         path: "/services/ssh",
         icon: "blocks",
@@ -19,7 +23,7 @@ defmodule FreediveWeb.ServiceLive do
         enabled: true,
         running: true
       },
-      %{
+      "pf" => %{
         name: "pf",
         path: "/services/pf",
         icon: "shield",
@@ -27,7 +31,7 @@ defmodule FreediveWeb.ServiceLive do
         enabled: true,
         running: true
       },
-      %{
+      "ntpdate" => %{
         name: "ntpdate",
         path: "/services/ntp",
         icon: "clock",
@@ -35,15 +39,16 @@ defmodule FreediveWeb.ServiceLive do
         enabled: true,
         running: false
       },
-      %{
+      "httpd" => %{
         name: "httpd",
         path: "/services/httpd",
         icon: "globe",
-        description: "Hypertext Transfer Protocol Daemon",
+        description:
+          "Hypertext Transfer Protocol Daemon",
         enabled: false,
         running: false
       }
-    ]
+    }
   end
 
   def filters() do
@@ -71,19 +76,53 @@ defmodule FreediveWeb.ServiceLive do
   end
 end
 
-defmodule FreediveWeb.ServiceLive.Item do
+defmodule FreediveWeb.ServiceLive.Components do
   use Liliform.Component
   import Liliform.Icon
+  import Liliform.Panel
+  import Liliform.Title
 
   @doc """
   Returns items as panel-blocks.
   """
   attr :items, :list, default: [], doc: "items"
+  attr :selected_item, :string, default: nil, doc: "selected item"
+  attr :details, :string, default: nil, doc: "details"
+
+  def items_block(%{details: true} = assigns) do
+    ~H"""
+    <.link
+      class="panel-block pt-1 has-background-light"
+      phx-click="tap"
+      phx-value-name={@selected_item.name}
+    >
+      <span class="panel-icon">
+        <.icon for="arrow-left" aria-hidden="true" has-text-dark />
+      </span>
+      <div class="mt-2 ml-2">Back</div>
+    </.link>
+
+    <.panel_block_div>
+      <div class="columns">
+        <.title class="column">
+          <%= @selected_item.name %>
+        </.title>
+        <.subtitle class="column">
+          <%= @selected_item.description %>
+        </.subtitle>
+      </div>
+    </.panel_block_div>
+    """
+  end
 
   def items_block(assigns) do
     ~H"""
-    <%= for item <- @items do %>
-      <.link patch={item.path} class="panel-block pt-1">
+    <%= for {_name, item} <- @items do %>
+      <.link
+        class={"panel-block pt-1 #{if @selected_item != nil and @selected_item.name == item.name, do: "has-background-info-light"}"}
+        phx-click="tap"
+        phx-value-name={item.name}
+      >
         <span class="panel-icon">
           <.icon for={item.icon} color="auto" aria-hidden="true" />
         </span>

lib/liliform/panel.ex

@@ -54,6 +54,26 @@ defmodule Liliform.Panel do
       assigns
       |> set_bulma_classes()
 
+    ~H"""
+    <a class={["panel-block", @class]} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </a>
+    """
+  end
+
+  @doc """
+  Renders a panel-block-div.
+  """
+  attr :class, :string, default: "", doc: "additional classes"
+  attr :rest, :global
+
+  slot :inner_block, required: true
+
+  def panel_block_div(assigns) do
+    assigns =
+      assigns
+      |> set_bulma_classes()
+
     ~H"""
     <div class={["panel-block", @class]} {@rest}>
       <%= render_slot(@inner_block) %>
@@ -61,6 +81,7 @@ defmodule Liliform.Panel do
     """
   end
 
+
   @doc """
   Renders a panel-tabs.
   """