feat: timer working

Author: AfonsoMartins26

assets/js/app.js

@@ -24,12 +24,14 @@ import topbar from "../vendor/topbar"
 import { Sorting } from "./hooks/sorting"
 import { EmojiPicker } from "./hooks/emoji"
 import { QRCodeGenerator } from "./hooks/qrcode-generator"
+import { Timer } from "./hooks/timer"
 
 // JS Hooks
 let Hooks = {}
 Hooks.Sorting = Sorting;
 Hooks.EmojiPicker = EmojiPicker;
 Hooks.QRCodeGenerator = QRCodeGenerator;
+Hooks.Timer = Timer;
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {

assets/js/hooks/timer.js

@@ -0,0 +1,35 @@
+export const Timer = {
+    mounted() {
+        const finishTime = parseInt(this.el.dataset.finishTime, 10);
+        const timerElement = this.el;
+
+        const updateTimer = () => {
+            const now = Math.floor(Date.now() / 1000);
+            const remainingTime = Math.max(0, finishTime - now);
+
+            if (remainingTime <= 0) {
+                clearInterval(timerInterval);
+                timerElement.textContent = "00:00:00";
+                this.pushEvent("end-time", {});
+                return;
+            }
+
+            const hours = Math.floor(remainingTime / 3600);
+            const minutes = Math.floor((remainingTime % 3600) / 60);
+            const seconds = remainingTime % 60;
+
+            timerElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        };
+
+        const timerInterval = setInterval(updateTimer, 1000);
+        updateTimer(); 
+
+        this.cleanup = () => {
+            clearInterval(timerInterval);
+        };
+    },
+
+    destroyed() {
+        this.cleanup();
+    },
+};

lib/cesium_link_web/live/link_live/index.ex

@@ -66,4 +66,15 @@ defmodule CesiumLinkWeb.LinkLive.Index do
 
     {:noreply, socket}
   end
+
+  def handle_event("end-time",_, socket) do
+    {:noreply, socket |> push_navigate(to: ~p"/admin/links")}
+  end
+
+  def publish_in_future?(link) do
+    case link.publish_at do
+      nil -> false
+      publish_at -> DateTime.compare(publish_at, DateTime.utc_now()) == :gt
+    end
+  end
 end

lib/cesium_link_web/live/link_live/index.html.heex

@@ -15,50 +15,72 @@
 </.header>
 
 <.table id="links" rows={@streams.links} phx-hook="Sorting">
-  <:col :let={{_id, _link}}>
-    <% publish_future = _link.publish_at && DateTime.compare(_link.publish_at, DateTime.utc_now()) == :gt %>
+  <:col :let={{_id, link}} >
+    <% publish_future = publish_in_future?(link) %>
     <.icon name="hero-bars-3 cursor-pointer ml-4" class={"handle w-5 h-5 #{if publish_future, do: "opacity-50"}"} />
   </:col>
+  
   <:col :let={{_id, link}} label="Name">
-    <% publish_future = link.publish_at && DateTime.compare(link.publish_at, DateTime.utc_now()) == :gt %>
+    <% publish_future = publish_in_future?(link) %>
     <p class={"font-semibold text-zinc-900 #{if publish_future, do: "opacity-50"}"}><%= link.name %></p>
   </:col>
+  
   <:col :let={{_id, link}} label="Emoji">
-    <% publish_future = link.publish_at && DateTime.compare(link.publish_at, DateTime.utc_now()) == :gt %>
+    <% publish_future = publish_in_future?(link) %>
     <span class={if publish_future, do: "opacity-50"}>
       <.emoji code={link.emoji} />
     </span>
   </:col>
+  
   <:col :let={{_id, link}} label="URL">
-    <% publish_future = link.publish_at && DateTime.compare(link.publish_at, DateTime.utc_now()) == :gt %>
+    <% publish_future = publish_in_future?(link) %>
     <.link target="_blank" class={"hover:text-brand hover:underline #{if publish_future, do: "opacity-50"}"} navigate={link.url}>
       <%= truncate_elipsis(link.url, 50) %>
     </.link>
   </:col>
+
+  <:col :let={{_id, link}} label="Time Left">
+    <% publish_future = publish_in_future?(link) %>
+    <%= if publish_future do %>
+    <div 
+    id="timer-countdown"
+    phx-hook="Timer"
+    data-finish-time={DateTime.to_unix(link.publish_at)}>
+    00:00:00
+    </div>
+    <% else %>
+      <h1>No time</h1>
+    <% end %>
+  </:col>
+  
   <:col :let={{_id, link}} label="Clicks">
-    <% publish_future = link.publish_at && DateTime.compare(link.publish_at, DateTime.utc_now()) == :gt %>
+    <% publish_future = publish_in_future?(link) %>
     <p class={if publish_future, do: "opacity-50"}>
       <%= link.visits %>
     </p>
   </:col>
+  
   <:col :let={{_id, link}} label="Attention">
-    <% publish_future = link.publish_at && DateTime.compare(link.publish_at, DateTime.utc_now()) == :gt %>
+    <% publish_future = publish_in_future?(link) %>
     <input type="checkbox" disabled={true} checked={link.attention} class={"self-center block rounded-md text-gray-600 #{if publish_future, do: "opacity-50"}"} />
-  </:col>
-  <:action :let={{_id, link}}>
-    <% publish_future = link.publish_at && DateTime.compare(link.publish_at, DateTime.utc_now()) == :gt %>
+    </:col>
+  
+  <:action :let={{_id, link}} >
+    <% publish_future = publish_in_future?(link) %>
     <.link patch={~p"/admin/links/#{link}/edit"}>
       <.icon name="hero-pencil" class={"w-5 h-5 #{if publish_future, do: "opacity-50"}"} />
     </.link>
   </:action>
-  <:action :let={{_id, link}}>
-    <% publish_future = link.publish_at && DateTime.compare(link.publish_at, DateTime.utc_now()) == :gt %>
+  
+  <:action :let={{_id, link}} >
+    <% publish_future = publish_in_future?(link) %>
     <.link patch={~p"/admin/links/#{link}/archive"}>
       <.icon name="hero-archive-box" class={"w-5 h-5 #{if publish_future, do: "opacity-50"}"} />
     </.link>
   </:action>
 </.table>
 
+
 <.modal :if={@live_action in [:new, :edit]} id="link-modal" show on_cancel={JS.patch(~p"/admin/links")}>
   <.live_component module={CesiumLinkWeb.LinkLive.FormComponent} id={@link.id || :new} title={@page_title} action={@live_action} link={@link} patch={~p"/admin/links"} />
 </.modal>