Add click + double click for start/stop + reset

addcninblue · Apr 1, 2021 · d403fec · d403fec
1 parent 9cd6f48
commit d403fec
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 7 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -2,6 +2,7 @@
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
 import "../css/app.scss"
+import Alpine from "alpinejs";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -17,8 +18,25 @@ import {Socket} from "phoenix"
 import NProgress from "nprogress"
 import {LiveSocket} from "phoenix_live_view"
 
+const Hooks = {}
+Hooks.PushEvent = {
+  mounted() {
+    window.pushEventHook = this
+  }
+}
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: {_csrf_token: csrfToken},
+  dom: {
+    onBeforeElUpdated(from, to) {
+      if (from.__x) {
+        Alpine.clone(from.__x, to);
+      }
+    },
+  },
+  hooks: Hooks
+})
 
 // Show progress bar on live navigation and form submits
 window.addEventListener("phx:page-loading-start", info => NProgress.start())

diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -7,10 +7,11 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "alpinejs": "^2.8.2",
+    "nprogress": "^0.2.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
-    "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "nprogress": "^0.2.0"
+    "phoenix_live_view": "file:../deps/phoenix_live_view"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

diff --git a/lib/pomodoro_web/live/room_live.ex b/lib/pomodoro_web/live/room_live.ex
@@ -60,6 +60,26 @@ defmodule PomodoroWeb.RoomLive do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event(
+        "click",
+        %{},
+        %Phoenix.LiveView.Socket{assigns: %{id: id}} = socket
+      ) do
+    Pomodoro.Rooms.pause_or_resume(id)
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event(
+        "dblclick",
+        %{},
+        %Phoenix.LiveView.Socket{assigns: %{id: id}} = socket
+      ) do
+    Pomodoro.Rooms.reset(id)
+    {:noreply, socket}
+  end
+
   @impl true
   def handle_info(
         {:state, %Pomodoro.Room{state: state, end_time: end_time} = _state},

diff --git a/lib/pomodoro_web/live/room_live.html.leex b/lib/pomodoro_web/live/room_live.html.leex
@@ -23,20 +23,24 @@
   <div class="m-auto text-center">
     <%= case @state do %>
       <% :start -> %>
-        <div class="text-black dark:text-white text-5xl font-medium font-mono py-4 underline text-gray-600"><button>start</button></div>
+        <div class="text-black dark:text-white text-5xl font-medium font-mono py-4">start</div>
         <div class="text-black dark:text-white text-5xl font-medium font-mono py-4"><button phx-click="time-55">55:00</button></div>
         <div class="text-black dark:text-white text-5xl font-medium font-mono py-4"><button phx-click="time-25">25:00</button></div>
         <div class="text-black dark:text-white text-5xl font-medium font-mono py-4"><button phx-click="time-20">20:00</button></div>
         <div class="text-black dark:text-white text-5xl font-medium font-mono py-4"><button phx-click="time-10">10:00</button></div>
       <% state when state in [:timer, :timer_paused] -> %>
-        <div class="text-black dark:text-white text-5xl font-medium font-mono"> <%= @time_remaining %> </div>
+        <div id="time" class="text-black dark:text-white text-5xl font-medium font-mono" phx-hook="PushEvent" x-data="{}">
+          <button x-on:dblclick="pushEventHook.pushEvent('dblclick', {})"
+                  x-on:click.debounce.500="pushEventHook.pushEvent('click', {})">
+            <%= @time_remaining %>
+          </button>
+        </div>
       <% :start_break -> %>
-        <div class="text-black dark:text-white text-5xl font-medium font-mono py-4 underline text-gray-600"><button>break</button></div>
+        <div class="text-black dark:text-white text-5xl font-medium font-mono py-4">break</div>
         <div class="text-black dark:text-white text-5xl font-medium font-mono py-4"><button phx-click="break-15">15:00</button></div>
         <div class="text-black dark:text-white text-5xl font-medium font-mono py-4"><button phx-click="break-10">10:00</button></div>
         <div class="text-black dark:text-white text-5xl font-medium font-mono py-4"><button phx-click="break-5">05:00</button></div>
       <% state when state in [:break_timer, :break_timer_paused] -> %>
         <div class="text-black dark:text-white text-5xl font-medium font-mono"> <%= @time_remaining %> </div>
     <% end %>
   </div>
-</div>