Disable start button if the process is in progress.

ui/assets/css/ruby.css

@@ -35,6 +35,10 @@ p {
     height: 100px;
 }
 
+.button[disabled=disabled] {
+  background-color: gray;
+}
+
 #hintbutton {
     background-color: white;
     font-size: 15px;

ui/lib/ui_web/live/morse_live.ex

@@ -9,7 +9,7 @@ defmodule UiWeb.MorseLive do
 
   def mount(_session, socket) do
     UiWeb.Endpoint.subscribe(@topic)
-    {:ok, assign(socket, progress: Morse.Server.progress())}
+    {:ok, assign(socket, default_assigns())}
   end
 
   def handle_event("start_morse", _value, socket) do
@@ -20,4 +20,10 @@ defmodule UiWeb.MorseLive do
   def handle_info(progress, socket) do
     {:noreply, assign(socket, progress: progress)}
   end
+
+  defp default_assigns do
+    [
+      progress: Morse.Server.progress(),
+    ]
+  end
 end

ui/lib/ui_web/templates/page/morse.html.leex

@@ -3,7 +3,7 @@
 <h2>nl:<br>Druk op de Start knop hieronder om <span style="color:red">UVW</span><span style="color:blue">XYZ</span> te vinden. Je kunt dan de geocache vinden op N 52&deg; 40.<span style="color:red">UVW</span>' E 004&deg; 53.<span style="color:blue">XYZ</span>'</h2>
 
 <div id="buttonwrap">
-  <button phx-click="start_morse" class="button">Start</button>
+  <button phx-click="start_morse" class="button" <%= if @progress != 100, do: ~s(disabled=disabled) %>>Start</button>
   <div id="response-block">
     <h2>Response status:</h2>
     <p id="response"></p>