Add tap to select, second tap for details

This commit is contained in:
Harshad Sharma 2024-05-16 07:26:54 +05:30
parent 09213f5294
commit 9f6e3ddab2
3 changed files with 103 additions and 12 deletions

View file

@ -17,6 +17,8 @@ defmodule FreediveWeb.LiliformLive do
filters = filters() filters = filters()
socket = assign(socket, :opts, Keyword.get(unquote(opts), :opts, [])) socket = assign(socket, :opts, Keyword.get(unquote(opts), :opts, []))
socket = assign(socket, :items_all, items) socket = assign(socket, :items_all, items)
socket = assign(socket, :selected_item, nil)
socket = assign(socket, :details, nil)
socket = socket =
assign( assign(
@ -55,6 +57,34 @@ defmodule FreediveWeb.LiliformLive do
{:noreply, socket} {:noreply, socket}
end 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
end end
@ -68,9 +98,10 @@ defmodule FreediveWeb.LiliformLive do
items items
_ -> _ ->
Enum.filter(items, fn item -> Enum.filter(items, fn {_, item} ->
Map.get(item, key) == true Map.get(item, key) == true
end) end)
Enum.into(%{}, items)
end end
end end

View file

@ -4,14 +4,18 @@ defmodule FreediveWeb.ServiceLive do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<.page name="Services" filters={@filters}> <.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> </.page>
""" """
end end
def items() do def items() do
[ %{
%{ "sshd" => %{
name: "sshd", name: "sshd",
path: "/services/ssh", path: "/services/ssh",
icon: "blocks", icon: "blocks",
@ -19,7 +23,7 @@ defmodule FreediveWeb.ServiceLive do
enabled: true, enabled: true,
running: true running: true
}, },
%{ "pf" => %{
name: "pf", name: "pf",
path: "/services/pf", path: "/services/pf",
icon: "shield", icon: "shield",
@ -27,7 +31,7 @@ defmodule FreediveWeb.ServiceLive do
enabled: true, enabled: true,
running: true running: true
}, },
%{ "ntpdate" => %{
name: "ntpdate", name: "ntpdate",
path: "/services/ntp", path: "/services/ntp",
icon: "clock", icon: "clock",
@ -35,15 +39,16 @@ defmodule FreediveWeb.ServiceLive do
enabled: true, enabled: true,
running: false running: false
}, },
%{ "httpd" => %{
name: "httpd", name: "httpd",
path: "/services/httpd", path: "/services/httpd",
icon: "globe", icon: "globe",
description: "Hypertext Transfer Protocol Daemon", description:
"Hypertext Transfer Protocol Daemon",
enabled: false, enabled: false,
running: false running: false
} }
] }
end end
def filters() do def filters() do
@ -71,19 +76,53 @@ defmodule FreediveWeb.ServiceLive do
end end
end end
defmodule FreediveWeb.ServiceLive.Item do defmodule FreediveWeb.ServiceLive.Components do
use Liliform.Component use Liliform.Component
import Liliform.Icon import Liliform.Icon
import Liliform.Panel
import Liliform.Title
@doc """ @doc """
Returns items as panel-blocks. Returns items as panel-blocks.
""" """
attr :items, :list, default: [], doc: "items" 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 def items_block(assigns) do
~H""" ~H"""
<%= for item <- @items do %> <%= for {_name, item} <- @items do %>
<.link patch={item.path} class="panel-block pt-1"> <.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"> <span class="panel-icon">
<.icon for={item.icon} color="auto" aria-hidden="true" /> <.icon for={item.icon} color="auto" aria-hidden="true" />
</span> </span>

View file

@ -54,6 +54,26 @@ defmodule Liliform.Panel do
assigns assigns
|> set_bulma_classes() |> 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""" ~H"""
<div class={["panel-block", @class]} {@rest}> <div class={["panel-block", @class]} {@rest}>
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
@ -61,6 +81,7 @@ defmodule Liliform.Panel do
""" """
end end
@doc """ @doc """
Renders a panel-tabs. Renders a panel-tabs.
""" """