Migrate from channel to phoenix live view.

Move phoenix config to ui project.
Sync progress on page load.

ui/lib/ui_web/channels/morse_progress_channel.ex

@@ -1,7 +0,0 @@
-defmodule UiWeb.MorseProgressChannel do
-  use UiWeb, :channel
-
-  def join(channel_name, _params, socket) do
-    {:ok, %{channel: channel_name}, socket}
-  end
-end

ui/lib/ui_web/channels/user_socket.ex

@@ -1,37 +0,0 @@
-defmodule UiWeb.UserSocket do
-  use Phoenix.Socket
-
-  ## Channels
-  channel "morse:progress", UiWeb.MorseProgressChannel
-
-  # Socket params are passed from the client and can
-  # be used to verify and authenticate a user. After
-  # verification, you can put default assigns into
-  # the socket that will be set for all channels, ie
-  #
-  #     {:ok, assign(socket, :user_id, verified_user_id)}
-  #
-  # To deny connection, return `:error`.
-  #
-  # See `Phoenix.Token` documentation for examples in
-  # performing token verification on connect.
-  def connect(_params, socket, _connect_info) do
-    {:ok, socket}
-  end
-
-  # Socket id's are topics that allow you to identify all sockets for a given user:
-  #
-  #     def id(socket), do: "user_socket:#{socket.assigns.user_id}"
-  #
-  # Would allow you to broadcast a "disconnect" event and terminate
-  # all active sockets and channels for a given user:
-  #
-  #     UiWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
-  #
-  # Returning `nil` makes this socket anonymous.
-  def id(_socket), do: nil
-
-  def broadcast_progress(progress) do
-    UiWeb.Endpoint.broadcast("morse:progress", "update", %{value: progress})
-  end
-end

ui/lib/ui_web/controllers/page_controller.ex

@@ -1,25 +1,17 @@
 defmodule UiWeb.PageController do
   use UiWeb, :controller
+  alias Phoenix.LiveView
 
   def index(conn, _params) do
-    conn |> send_resp(204, "")
+    send_resp(conn, 204, "")
   end
 
   def instructions(conn, _params) do
-    conn |> render(:instructions)
+    render(conn, :instructions)
   end
 
   def morse(conn, _params) do
-    conn |> render(:morse)
+    LiveView.Controller.live_render(conn, UiWeb.MorseLive, session: %{})
   end
 
-  def start(conn, _params) do
-    response =
-      case Morse.Server.start_morse() do
-        :ok -> "Started."
-        {:error, :already_started} -> "The process is still in progress..."
-      end
-
-    conn |> text(response)
-  end
 end

ui/lib/ui_web/endpoint.ex

@@ -1,9 +1,7 @@
 defmodule UiWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :ui
 
-  socket "/socket", UiWeb.UserSocket,
-    websocket: true,
-    longpoll: false
+  socket "/live", Phoenix.LiveView.Socket
 
   # Serve at "/" the static files from "priv/static" directory.
   #
@@ -17,7 +15,6 @@ defmodule UiWeb.Endpoint do
 
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.
-  IO.inspect code_reloading?
   if code_reloading? do
     socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
     plug Phoenix.LiveReloader

ui/lib/ui_web/live/morse_live.ex

@@ -0,0 +1,23 @@
+defmodule UiWeb.MorseLive do
+  use Phoenix.LiveView
+
+  @topic "morse_progress"
+
+  def render(assigns) do
+    UiWeb.PageView.render("morse.html", assigns)
+  end
+
+  def mount(_session, socket) do
+    UiWeb.Endpoint.subscribe(@topic)
+    {:ok, assign(socket, progress: Morse.Server.progress())}
+  end
+
+  def handle_event("start_morse", _value, socket) do
+    Morse.Server.start_morse()
+    {:noreply, socket}
+  end
+
+  def handle_info(progress, socket) do
+    {:noreply, assign(socket, progress: progress)}
+  end
+end

ui/lib/ui_web/router.ex

@@ -5,6 +5,7 @@ defmodule UiWeb.Router do
     plug :accepts, ["html"]
     plug :fetch_session
     plug :fetch_flash
+    plug Phoenix.LiveView.Flash
     plug :protect_from_forgery
     plug :put_secure_browser_headers
   end
@@ -26,6 +27,6 @@ defmodule UiWeb.Router do
     get "/OB13", PageController, :morse
     get "/seinlamp", PageController, :morse
 
-    get "/start", PageController, :start
+    # get "/start", PageController, :start
   end
 end

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

@@ -3,12 +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">
-  <input onclick="start()" value="Start" type="button" class="button">
-  <div id="response-block" style="visibility:hidden">
+  <button phx-click="start_morse" class="button">Start</button>
+  <div id="response-block">
     <h2>Response status:</h2>
     <p id="response"></p>
     <h2>Progress:</h2>
-    <progress id="morse-progress" max="100" value="0">0%</progress>
+    <progress max="100" value="<%= @progress %>"><%= @progress %>%</progress>
   </div>
 </div>
 
@@ -24,22 +24,6 @@
 </div>
 
 <script>
-  var responseP = document.getElementById("response");
-  var xhttp = new XMLHttpRequest();
-
-  xhttp.onreadystatechange = function () {
-    if (this.readyState == 4 && this.status == 200) {
-      responseP.innerHTML = this.responseText;
-    }
-  };
-
-  function start() {
-    responseP.innerHTML = "Starting...";
-    document.getElementById("response-block").style.visibility = "visible";
-    xhttp.open("GET", "/start", true);
-    xhttp.send();
-  }
-
   function givehint() {
     document.getElementById("givehint").style.visibility = "visible";
   }