forked from hiway/freedive
Add tap to select, second tap for details
This commit is contained in:
parent
09213f5294
commit
9f6e3ddab2
3 changed files with 103 additions and 12 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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.
|
||||||
"""
|
"""
|
||||||
|
|
Loading…
Reference in a new issue