Add ability to stop the morse.

ui/assets/css/ruby.css

@@ -1,42 +1,42 @@
 body {
-    background-color: lightblue;
+  background-color: lightblue;
 }
 
 h1 {
-    font-size: 30px;
-    font-family: "Verdana", Verdana, sans-serif;
+  font-size: 30px;
+  font-family: "Verdana", Verdana, sans-serif;
 }
 
 h2 {
-    font-size: 25px;
-    font-family: "Verdana", Verdana, sans-serif;
-    font-weight: normal;
+  font-size: 25px;
+  font-family: "Verdana", Verdana, sans-serif;
+  font-weight: normal;
 }
 
 p {
-    font-size: 20px;
-    font-family: "Verdana", Verdana, sans-serif;
+  font-size: 20px;
+  font-family: "Verdana", Verdana, sans-serif;
 }
 
 #buttonwrap {
-    text-align: center;
+  text-align: center;
 }
 
 .button {
-    background-color: #4CAF50; /* Green */
-    border: none;
-    color: white;
-    padding: 15px 32px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    width: 70%;
-    height: 100px;
+  background-color: #4CAF50; /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  width: 70%;
+  height: 100px;
 }
 
-.button[disabled=disabled] {
-  background-color: gray;
+.button.stop {
+  background-color: red;
 }
 
 #hintbutton {

ui/lib/ui_web/live/morse_live.ex

@@ -12,10 +12,11 @@ defmodule UiWeb.MorseLive do
     {:ok, assign(socket, default_assigns(ip))}
   end
 
-  def handle_event("start_morse", _value, %{assigns: %{ip: ip}} = socket) do
-    if :ok == Morse.Server.start_morse() do
+  def handle_event("toggle_morse", _value, %{assigns: %{ip: ip}} = socket) do
+    if Morse.Server.in_progress?() do
       spawn fn -> Ui.TelegramBot.message("#{ip} pressed the button!") end
     end
+    Morse.Server.toggle_morse()
 
     {:noreply, socket}
   end

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

@@ -4,9 +4,9 @@
 
 <div id="buttonwrap">
   <%= if @in_progress? do %>
-  <button phx-click="start_morse" class="button" <%= if @in_progress?, do: ~s(disabled=disabled) %>>In progress...</button>
+    <button phx-click="toggle_morse" class="button stop">Stop</button>
   <% else %>
-    <button phx-click="start_morse" class="button">Start</button>
+    <button phx-click="toggle_morse" class="button">Start</button>
   <% end %>
   <div id="response-block">
     <h2>Progress:</h2>