From 2cb9946faf7ed595adb50ed6e072ea1fe137e55d Mon Sep 17 00:00:00 2001
From: Pim Kunis <pim@kunis.nl>
Date: Thu, 24 Oct 2019 16:54:50 +0200
Subject: [PATCH] Disable start button if the process is in progress.

---
 ui/assets/css/ruby.css                       | 4 ++++
 ui/lib/ui_web/live/morse_live.ex             | 8 +++++++-
 ui/lib/ui_web/templates/page/morse.html.leex | 2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/ui/assets/css/ruby.css b/ui/assets/css/ruby.css
index 5ba58ec..d93be1d 100644
--- a/ui/assets/css/ruby.css
+++ b/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;
diff --git a/ui/lib/ui_web/live/morse_live.ex b/ui/lib/ui_web/live/morse_live.ex
index 7696721..e6de0cb 100644
--- a/ui/lib/ui_web/live/morse_live.ex
+++ b/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
diff --git a/ui/lib/ui_web/templates/page/morse.html.leex b/ui/lib/ui_web/templates/page/morse.html.leex
index 99ec92b..c1826cb 100644
--- a/ui/lib/ui_web/templates/page/morse.html.leex
+++ b/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>