Refactor service live for clarity

lib/freedive/api/service/server.ex

@@ -81,9 +81,7 @@ defmodule Freedive.Api.Service do
         broadcast(:stdlog, %{name: name, log: std_to_log(reason)})
     end
 
-    if command in ["start", "stop", "restart"] do
+    broadcast(:refreshed, service_details(name))
-      broadcast(:refreshed, service_details(name))
-    end
 
     {:noreply, state}
   end

lib/freedive_web/live/service_live.ex

@@ -107,8 +107,7 @@ defmodule FreediveWeb.ServiceLive do
             socket
             |> assign(:selected_item, %{
               socket.assigns.selected_item
-              | log: socket.assigns.selected_item.log ++ payload.log,
+              | log: socket.assigns.selected_item.log ++ payload.log
-                busy: false
             })
           else
             socket
@@ -137,6 +136,24 @@ defmodule FreediveWeb.ServiceLive.Components do
   attr :details, :string, default: nil, doc: "details"
 
   def items_block(%{details: true} = assigns) do
+    ~H"""
+    <.back_link selected_item={@selected_item} />
+    <.service_header selected_item={@selected_item} />
+    <.std_log selected_item={@selected_item} />
+    <.basic_commands selected_item={@selected_item} />
+    <.extra_commands selected_item={@selected_item} />
+    """
+  end
+
+  def items_block(assigns) do
+    ~H"""
+    <%= for {_name, item} <- @items do %>
+      <.service_preview item={item} selected_item={@selected_item} />
+    <% end %>
+    """
+  end
+
+  def back_link(assigns) do
     ~H"""
     <.link
       class="panel-block pt-1 has-background-light"
@@ -148,9 +165,12 @@ defmodule FreediveWeb.ServiceLive.Components do
       </span>
       <div class="mt-2 ml-2">Back</div>
     </.link>
+    """
+  end
 
+  def service_header(assigns) do
+    ~H"""
     <.panel_block>
-      <%!-- <.icon_raw for={@selected_item.icon} color="auto" size="3rem" class="" aria-hidden="true" /> --%>
       <.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
       <div class="column">
         <.title is-4>
@@ -171,13 +191,39 @@ defmodule FreediveWeb.ServiceLive.Components do
         </.subtitle>
       </div>
     </.panel_block>
+    """
+  end
 
-    <%= if Map.has_key?(@selected_item, :log) and @selected_item.log != [] do %>
+  def service_preview(assigns) do
-      <.panel_block>
+    ~H"""
-        <pre><code><%= Enum.join(@selected_item.log, "\n") %></code></pre>
+    <.panel_block
-      </.panel_block>
+      class={"#{if @selected_item != nil and @selected_item.name == @item.name, do: "pt-2 has-background-info-light", else: "pt-2"}"}
-    <% end %>
+      phx-click="tap"
+      phx-value-name={@item.name}
+    >
 
+      <.icon_raw for={@item.icon} color="auto" size="1.8rem" aria-hidden="true" />
+
+      <span class="is-size-5 px-4">
+        <%= @item.name %>
+      </span>
+
+      <%= if @item.running do %>
+        <.icon for="circle-play" size="1rem" color="lightgreen" aria-hidden="true" />
+      <% else %>
+        <.icon for="circle-stop" size="1rem" color="gray" aria-hidden="true" />
+      <% end %>
+      <%= if @item.enabled do %>
+        <.icon for="circle-check" size="1rem" color="lightgreen" aria-hidden="true" />
+      <% else %>
+        <.icon for="circle-x" size="1rem" color="gray" aria-hidden="true" />
+      <% end %>
+    </.panel_block>
+    """
+  end
+
+  def basic_commands(assigns) do
+    ~H"""
     <.panel_block_div>
       <%= if @selected_item.running do %>
         <.icon_raw for="power" color="lightgreen" size="2rem" class="ml-2 mr-5" aria-hidden="true" />
@@ -186,47 +232,58 @@ defmodule FreediveWeb.ServiceLive.Components do
       <% end %>
       <div class="columns is-fullwidth mr-4">
         <%= if @selected_item.running do %>
-            <button
+          <button
-              class="button is-warning column is-2 m-2 is-fullwidth"
+            class="button is-warning column is-2 m-2 is-fullwidth"
-              phx-click="action:restart"
+            phx-click="action:restart"
-              phx-value-name={@selected_item.name}
+            phx-value-name={@selected_item.name}
-              {if @selected_item.busy, do: [disabled: true], else: []}
+            {if @selected_item.busy, do: [disabled: true], else: []}
-            >
+          >
-              Restart
+            Restart
-            </button>
+          </button>
-            <button
+          <button
-              class="button is-danger column is-2 m-2 is-fullwidth"
+            class="button is-danger column is-2 m-2 is-fullwidth"
-              phx-click="action:stop"
+            phx-click="action:stop"
-              phx-value-name={@selected_item.name}
+            phx-value-name={@selected_item.name}
-              {if @selected_item.busy, do: [disabled: true], else: []}
+            {if @selected_item.busy, do: [disabled: true], else: []}
-            >
+          >
-              Stop
+            Stop
-            </button>
+          </button>
         <% else %>
-            <button
+          <button
-              class="button is-success column is-2 m-2 is-fullwidth"
+            class="button is-success column is-2 m-2 is-fullwidth"
-              phx-click="action:start"
+            phx-click="action:start"
-              phx-value-name={@selected_item.name}
+            phx-value-name={@selected_item.name}
-              {if @selected_item.busy, do: [disabled: true], else: []}
+            {if @selected_item.busy, do: [disabled: true], else: []}
-            >
+          >
-              Start
+            Start
-            </button>
+          </button>
         <% end %>
       </div>
     </.panel_block_div>
+    """
+  end
+
+  def extra_commands(assigns) do
+    ~H"""
     <%= if @selected_item.commands != [] and @selected_item.commands != nil do %>
       <.panel_block_div>
-        <.icon_raw for="inspection-panel" color="auto" size="2rem" class="ml-1 mr-5" aria-hidden="true" />
+        <.icon_raw
+          for="inspection-panel"
+          color="auto"
+          size="2rem"
+          class="ml-1 mr-5"
+          aria-hidden="true"
+        />
         <div class="columns is-fullwidth mr-4">
           <%= for command <- @selected_item.commands do %>
-              <button
+            <button
-                class="button is-info column is-2 m-2 is-fullwidth"
+              class="button is-info column is-2 m-2 is-fullwidth"
-                phx-click={"command:#{command}"}
+              phx-click={"command:#{command}"}
-                phx-value-name={@selected_item.name}
+              phx-value-name={@selected_item.name}
-                {if @selected_item.busy, do: [disabled: true], else: []}
+              {if @selected_item.busy, do: [disabled: true], else: []}
-              >
+            >
-                <%= command %>
+              <%= command %>
-              </button>
+            </button>
           <% end %>
         </div>
       </.panel_block_div>
@@ -234,23 +291,10 @@ defmodule FreediveWeb.ServiceLive.Components do
     """
   end
 
-  def items_block(assigns) do
+  def std_log(assigns) do
     ~H"""
-    <%= for {_name, item} <- @items do %>
+    <%= if Map.has_key?(@selected_item, :log) and @selected_item.log != [] do %>
-      <div>
+      <pre class="panel-block is-fullwidth"><code><%= Enum.join(@selected_item.log, "\n") %></code></pre>
-        <.panel_block
-          class={"panel-block pt-3 #{if @selected_item != nil and @selected_item.name == item.name, do: "has-background-info-light"}"}
-          phx-click="tap"
-          phx-value-name={item.name}
-        >
-          <.icon_raw for={item.icon} color="auto" size="1.8rem" aria-hidden="true" />
-          <%!-- <div class="mt-2 ml-2"> --%>
-          <.subtitle class="ml-3">
-            <%= item.name %>
-          </.subtitle>
-          <%!-- </div> --%>
-        </.panel_block>
-      </div>
     <% end %>
     """
   end

lib/liliform/page.ex

@@ -37,7 +37,9 @@ defmodule Liliform.Page do
                 phx-click="filter"
                 phx-value-key={filter.key}
               >
-                <%= filter.title %>
+                <span class="is-size-5">
+                  <%= filter.title %>
+                </span>
               </a>
             <% end %>
           </.panel_tabs>
@@ -50,7 +52,11 @@ defmodule Liliform.Page do
                 phx-click="filter"
                 phx-value-key={filter.key}
               >
-                <.icon for={filter.icon} color={if filter.active, do: "gray", else: "auto"} />
+                <.icon_raw
+                  for={filter.icon}
+                  size="2rem"
+                  color={if filter.active, do: "gray", else: "auto"}
+                />
               </a>
             <% end %>
           </.panel_tabs>