freedive/lib/freedive_web/live/service_live.ex

defmodule FreediveWeb.ServiceLive do
  use FreediveWeb.LiliformLive

  def render(assigns) do
    ~H"""
    <.block class="px-2 py-4">
      <.page name="Services" filters={@filters}>
        <FreediveWeb.ServiceLive.Item.items_block items={@items} />
      </.page>
    </.block>
    """
  end

  def items() do
    [
      %{
        name: "sshd",
        path: "/services/ssh",
        icon: "blocks",
        description: "Secure Shell Daemon",
        enabled: true,
        running: true
      },
      %{
        name: "pf",
        path: "/services/pf",
        icon: "shield",
        description: "Packet Filter",
        enabled: true,
        running: true
      },
      %{
        name: "ntpdate",
        path: "/services/ntp",
        icon: "clock",
        description: "Network Time Protocol Daemon",
        enabled: true,
        running: false
      },
      %{
        name: "httpd",
        path: "/services/httpd",
        icon: "globe",
        description: "Hypertext Transfer Protocol Daemon",
        enabled: false,
        running: false
      }
    ]
  end

  def filters() do
    [
      %{
        title: "Running",
        key: :running,
        icon: "circle-play",
        active: true
      },
      %{
        title: "Enabled",
        key: :enabled,
        icon: "circle-check",
        active: false
      }
    ]
  end

  def search(query) do
    items()
    |> Enum.filter(fn item ->
      String.contains?(String.downcase(item.name), String.downcase(query))
    end)
  end
end

defmodule FreediveWeb.ServiceLive.Item do
  use Liliform.Component
  import Liliform.Icon

  @doc """
  Returns a list of items.
  """
  attr :items, :list, default: [], doc: "items"

  def items_block(assigns) do
    ~H"""
    <%= for item <- @items do %>
      <.link patch={item.path} class="panel-block pt-1">
        <span class="panel-icon">
          <.icon for={item.icon} color="auto" aria-hidden="true" />
        </span>
        <div class="mt-2 ml-2"><%= item.name %></div>
      </.link>
    <% end %>
    """
  end
end