From d912ae289d28f5bf3173d3fe612c4dbdaf58da8a Mon Sep 17 00:00:00 2001
From: Pim Kunis <pim@kunis.nl>
Date: Thu, 24 Oct 2019 21:07:26 +0200
Subject: [PATCH] Put status in button, and gray it out if morse is in
 progress. Fix hint button.

---
 morse/lib/morse/server.ex                    | 18 +++++++++++++---
 ui/lib/ui_web/live/morse_live.ex             |  8 ++++++-
 ui/lib/ui_web/templates/page/morse.html.leex | 22 ++++++++++----------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/morse/lib/morse/server.ex b/morse/lib/morse/server.ex
index a8975d8..a27bf4d 100644
--- a/morse/lib/morse/server.ex
+++ b/morse/lib/morse/server.ex
@@ -17,6 +17,10 @@ defmodule Morse.Server do
     GenServer.call(__MODULE__, :progress)
   end
 
+  def in_progress? do
+    GenServer.call(__MODULE__, :in_progress?)
+  end
+
   @impl true
   def init(state) do
     {:ok, state}
@@ -24,11 +28,11 @@ defmodule Morse.Server do
 
   @impl true
   def handle_call(:start, _from, {pid, _progress} = state) do
-    if pid == nil or not Process.alive?(pid) do
+    if worker_alive?(pid) do
+      {:reply, {:error, :already_started}, state}
+    else
       pid = spawn(&Morse.Worker.signal/0)
       {:reply, :ok, {pid, 0}}
-    else
-      {:reply, {:error, :already_started}, state}
     end
   end
 
@@ -36,6 +40,10 @@ defmodule Morse.Server do
     {:reply, progress, state}
   end
 
+  def handle_call(:in_progress?, _from, {pid, _progress} = state) do
+    {:reply, worker_alive?(pid), state}
+  end
+
   @impl true
   def handle_cast({:progress, new_progress}, {pid, _progress}) do
     apply(pubsub(), :broadcast, [Ui.PubSub, "morse_progress", new_progress])
@@ -45,4 +53,8 @@ defmodule Morse.Server do
   defp pubsub do
     Application.fetch_env!(:morse, :pubsub)
   end
+
+  defp worker_alive?(pid) do
+    pid != nil and Process.alive?(pid)
+  end
 end
diff --git a/ui/lib/ui_web/live/morse_live.ex b/ui/lib/ui_web/live/morse_live.ex
index e6de0cb..5556730 100644
--- a/ui/lib/ui_web/live/morse_live.ex
+++ b/ui/lib/ui_web/live/morse_live.ex
@@ -17,13 +17,19 @@ defmodule UiWeb.MorseLive do
     {:noreply, socket}
   end
 
+  def handle_event("toggle_hint", _value, socket) do
+    {:noreply, update(socket, :hints_visible, &(not &1))}
+  end
+
   def handle_info(progress, socket) do
-    {:noreply, assign(socket, progress: progress)}
+    {:noreply, assign(socket, progress: progress, in_progress?: Morse.Server.in_progress?())}
   end
 
   defp default_assigns do
     [
       progress: Morse.Server.progress(),
+      in_progress?: Morse.Server.in_progress?(),
+      hints_visible: false
     ]
   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 c1826cb..80efaaf 100644
--- a/ui/lib/ui_web/templates/page/morse.html.leex
+++ b/ui/lib/ui_web/templates/page/morse.html.leex
@@ -3,10 +3,12 @@
 <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" <%= if @progress != 100, do: ~s(disabled=disabled) %>>Start</button>
+  <%= if @in_progress? do %>
+  <button phx-click="start_morse" class="button" <%= if @in_progress?, do: ~s(disabled=disabled) %>>In progress...</button>
+  <% else %>
+    <button phx-click="start_morse" class="button">Start</button>
+  <% end %>
   <div id="response-block">
-    <h2>Response status:</h2>
-    <p id="response"></p>
     <h2>Progress:</h2>
     <progress max="100" value="<%= @progress %>"><%= @progress %>%</progress>
   </div>
@@ -15,16 +17,14 @@
 <a href="http://www.geochecker.com/index.php?code=d9dbdc4542a4911a5f81a51bc9312a35&amp;action=check&amp;wp=47433743363432&amp;name=4573726f6d">en: check your coordinate on GeoChecker.com nl: controleer je co&ouml;rdinaat op GeoChecker.</a>
 <br>
 <br>
-<input type="button" onclick="givehint()" value="Click here for a hint!" id="hintbutton">
-<div id="givehint" style="visibility:hidden">
+<button phx-click="toggle_hint" id="hintButton">Click here for a hint!</button>
+<%= if @hints_visible do %>
+  <div id="givehint">
+<% else %>
+  <div id="givehint" style="visibility: hidden">
+<% end %>
   <p>en: Position yourself on the bridge. Watch carefully around to windows of houses, remember this is a nightly geocache. During daytime it is quite hard to see, but not impossible. After pushing the button, it takes 3
   seconds to start. The whole process takes about 35 sec. During the process it cannot be stopped nor restarted. You can start it all over again as much as you like. In case you are really stuck, you could try to contact me via WhatsApp on number +31 6 41633689. Best of luck to you!</p>
   <p>nl: Ga op de brug staan. Kijk goed om je heen naar ramen van woningen en realiseer je dat dit een een nachtcache is. Overdag is het slecht te zien, maar niet onmogelijk. Na het indrukken van de knop duurt het 3 seconden
   voordat het begint. Het hele proces duurt ongeveer 35 sec. Het proces kan niet gestopt of herstart worden. Je kunt het zo vaak starten als je wilt. Als het helemaal niet lukt zou je me kunnen proberen te bereiken via WhatsApp nummer 06-41633689. Veel plezier!</p>
 </div>
-
-<script>
-  function givehint() {
-    document.getElementById("givehint").style.visibility = "visible";
-  }
-</script>