forked from hiway/freedive
170 lines
4.3 KiB
Elixir
170 lines
4.3 KiB
Elixir
defmodule FreediveWeb.ServiceLive do
|
|
use FreediveWeb.LiliformLive
|
|
alias Freedive.Api.Service
|
|
|
|
def render(assigns) do
|
|
~H"""
|
|
<.page name="Services" filters={@filters} details={@details}>
|
|
<FreediveWeb.ServiceLive.Components.items_block
|
|
items={@items}
|
|
selected_item={@selected_item}
|
|
details={@details}
|
|
/>
|
|
</.page>
|
|
"""
|
|
end
|
|
|
|
def items() do
|
|
Service.list()
|
|
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(items, query) do
|
|
items
|
|
|> Enum.filter(fn {name, _item} ->
|
|
String.contains?(String.downcase(name), String.downcase(query))
|
|
end)
|
|
|> Enum.into(%{}, fn {name, item} -> {name, item} end)
|
|
end
|
|
end
|
|
|
|
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_media>
|
|
<:icon>
|
|
<.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
|
|
<%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
|
|
</:icon>
|
|
|
|
<.title is-4>
|
|
<%= @selected_item.name %>
|
|
</.title>
|
|
<.subtitle>
|
|
<%= @selected_item.description %>
|
|
</.subtitle>
|
|
|
|
<:actions>
|
|
<div class="columns">
|
|
<div class="column is-narrow">
|
|
<%= if @selected_item.running do %>
|
|
<.icon for="circle-play" color="green" aria-hidden="true" />
|
|
<% else %>
|
|
<.icon for="circle-stop" color="red" aria-hidden="true" />
|
|
<% end %>
|
|
<%= if @selected_item.enabled do %>
|
|
<.icon for="circle-check" color="green" aria-hidden="true" />
|
|
<% else %>
|
|
<.icon for="circle-x" color="red" aria-hidden="true" />
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</:actions>
|
|
</.panel_media>
|
|
|
|
<.panel_media>
|
|
<:icon>
|
|
<%!-- <.icon for="terminal" color="auto" size="3rem" aria-hidden="true" /> --%>
|
|
</:icon>
|
|
|
|
<:actions>
|
|
<div class="columns is-mobile">
|
|
<%= if @selected_item.running do %>
|
|
<div class="column is-narrow">
|
|
<button
|
|
class="button is-warning"
|
|
>
|
|
Restart
|
|
</button>
|
|
</div>
|
|
<div class="column">
|
|
<button class="button is-danger">
|
|
Stop
|
|
</button>
|
|
</div>
|
|
<% else %>
|
|
<div class="column">
|
|
<button class="button is-success">
|
|
Start
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</:actions>
|
|
|
|
<%= if @selected_item.commands do %>
|
|
<%= for command <- @selected_item.commands do %>
|
|
<button
|
|
class="button is-info"
|
|
phx-click="command"
|
|
phx-value-name={@selected_item.name}
|
|
phx-value-command={command}
|
|
>
|
|
<%= command %>
|
|
</button>
|
|
<% end %>
|
|
<% end %>
|
|
</.panel_media>
|
|
"""
|
|
end
|
|
|
|
def items_block(assigns) do
|
|
~H"""
|
|
<%= for {_name, item} <- @items do %>
|
|
<div>
|
|
<.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>
|
|
<div class="mt-2 ml-2">
|
|
<%= item.name %>
|
|
</div>
|
|
</.link>
|
|
</div>
|
|
<% end %>
|
|
"""
|
|
end
|
|
end
|