deploy-local.sh

@@ -1,8 +0,0 @@
-#!/bin/sh
-
-doas service freedive onestop
-doas pkg remove -y freedive
-mix package
-doas pkg install -U -y freedive-0.1.0.pkg
-doas service freedive onestart
-doas tail -f /var/log/freedive/freedive.log

lib/freedive/api/service/server.ex

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

lib/freedive_web/live/service_live.ex

@@ -107,7 +107,8 @@ 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
@@ -136,24 +137,6 @@ 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"
@@ -165,136 +148,125 @@ 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" aria-hidden="true" />
-      <div class="column">
-        <.title is-4>
-          <%= @selected_item.name %>
+    <.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>
+
+    <%= if Map.has_key?(@selected_item, :log) and @selected_item.log != [] do %>
+      <.panel_media>
+        <:icon>
+          <.icon for="terminal" color="gray" aria-hidden="true" />
+        </:icon>
+        <:actions></:actions>
+        <pre><code><%= Enum.join(@selected_item.log, "\n") %></code></pre>
+      </.panel_media>
+    <% end %>
+
+    <.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 %>
-            <.icon for="circle-play" color="lightgreen" aria-hidden="true" />
+            <div class="column is-narrow">
+              <button
+                class="button is-warning"
+                phx-click="action:restart"
+                phx-value-name={@selected_item.name}
+                {if @selected_item.busy, do: [disabled: true], else: []}
+              >
+                Restart
+              </button>
+            </div>
+            <div class="column">
+              <button
+                class="button is-danger"
+                phx-click="action:stop"
+                phx-value-name={@selected_item.name}
+                {if @selected_item.busy, do: [disabled: true], else: []}
+              >
+                Stop
+              </button>
+            </div>
           <% else %>
-            <.icon for="circle-stop" color="gray" aria-hidden="true" />
-          <% end %>
-          <%= if @selected_item.enabled do %>
-            <.icon for="circle-check" color="lightgreen" aria-hidden="true" />
-          <% else %>
-            <.icon for="circle-x" color="gray" aria-hidden="true" />
-          <% end %>
-        </.title>
-        <.subtitle>
-          <%= @selected_item.description %>
-        </.subtitle>
-      </div>
-    </.panel_block>
-    """
-  end
-
-  def service_preview(assigns) do
-    ~H"""
-    <.panel_block
-      class={"#{if @selected_item != nil and @selected_item.name == @item.name, do: "pt-2 has-background-info-light", else: "pt-2"}"}
-      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" />
-      <% else %>
-        <.icon_raw for="power" color="gray" size="2rem" class="ml-2 mr-5" aria-hidden="true" />
-      <% end %>
-      <div class="columns is-fullwidth mr-4">
-        <%= if @selected_item.running do %>
-          <button
-            class="button is-warning column is-2 m-2 is-fullwidth"
-            phx-click="action:restart"
-            phx-value-name={@selected_item.name}
-            {if @selected_item.busy, do: [disabled: true], else: []}
-          >
-            Restart
-          </button>
-          <button
-            class="button is-danger column is-2 m-2 is-fullwidth"
-            phx-click="action:stop"
-            phx-value-name={@selected_item.name}
-            {if @selected_item.busy, do: [disabled: true], else: []}
-          >
-            Stop
-          </button>
-        <% else %>
-          <button
-            class="button is-success column is-2 m-2 is-fullwidth"
-            phx-click="action:start"
-            phx-value-name={@selected_item.name}
-            {if @selected_item.busy, do: [disabled: true], else: []}
-          >
-            Start
-          </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"
-        />
-        <div class="columns is-fullwidth mr-4">
-          <%= for command <- @selected_item.commands do %>
-            <button
-              class="button is-info column is-2 m-2 is-fullwidth"
-              phx-click={"command:#{command}"}
-              phx-value-name={@selected_item.name}
-              {if @selected_item.busy, do: [disabled: true], else: []}
-            >
-              <%= command %>
-            </button>
+            <div class="column">
+              <button
+                class="button is-success"
+                phx-click="action:start"
+                phx-value-name={@selected_item.name}
+                {if @selected_item.busy, do: [disabled: true], else: []}
+              >
+                Start
+              </button>
+            </div>
           <% end %>
         </div>
-      </.panel_block_div>
-    <% end %>
+      </:actions>
+
+      <%= if @selected_item.commands do %>
+        <%= for command <- @selected_item.commands do %>
+          <button
+            class="button is-info"
+            phx-disable-with="..."
+            phx-click={"command:#{command}"}
+            phx-value-name={@selected_item.name}
+            {if @selected_item.busy, do: [disabled: true], else: []}
+          >
+            <%= command %>
+          </button>
+        <% end %>
+      <% end %>
+    </.panel_media>
     """
   end
 
-  def std_log(assigns) do
+  def items_block(assigns) do
     ~H"""
-    <%= if Map.has_key?(@selected_item, :log) and @selected_item.log != [] do %>
-      <pre class="panel-block is-fullwidth"><code><%= Enum.join(@selected_item.log, "\n") %></code></pre>
+    <%= 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

lib/freedive_web/live/user_login_live.ex

@@ -5,14 +5,14 @@ defmodule FreediveWeb.UserLoginLive do
     ~H"""
     <.hero>
       <.container>
-        <.section>
+        <.block>
           <.title is-4>
             Log in to account
           </.title>
           <.subtitle is-6 has-text-grey>
             freedive@hostname
           </.subtitle>
-        </.section>
+        </.block>
 
         <.column is-6-desktop>
           <.simple_form for={@form} id="login_form" action={~p"/users/log_in"} phx-update="ignore">

lib/liliform/page.ex

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

lib/liliform/panel.ex

@@ -99,11 +99,11 @@ defmodule Liliform.Panel do
 
     ~H"""
     <div class={["panel-block", @class]} {@rest}>
-      <.media>
+      <.media class="is-fullwidth">
         <.media_left>
           <%= render_slot(@icon) %>
         </.media_left>
-        <.media_content>
+        <.media_content class="is-fullwidth">
           <%= render_slot(@inner_block) %>
         </.media_content>
         <.media_right>