Add timer

assets/js/app.js

@@ -22,9 +22,14 @@ import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import "../vendor/alpine.js";
 import topbar from "../vendor/topbar.js";
+import countdown from "./countdown.js"
+import clock from "./clock.js"
 
 let Hooks = {};
 
+Hooks.Countdown = countdown
+Hooks.Clock = clock
+
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");

assets/js/clock.js

@@ -0,0 +1,18 @@
+import setClockCountdown from './setClockCountdown';
+
+const Clock = {
+  mounted() {
+    this.timer = setClockCountdown(this);
+  },
+  beforeUpdate() {
+    clearInterval(this.timer);
+  },
+  updated() {
+    this.timer = setClockCountdown(this);
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+};
+
+export default Clock;

assets/js/countdown.js

@@ -0,0 +1,18 @@
+import setCountdown from './setCountdown';
+
+const Countdown = {
+  mounted() {
+    this.timer = setCountdown(this);
+  },
+  beforeUpdate() {
+    clearInterval(this.timer);
+  },
+  updated() {
+    this.timer = setCountdown(this);
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+};
+
+export default Countdown;

assets/js/setClockCountdown.js

@@ -0,0 +1,26 @@
+function setClockCountdown(hook) {
+  var timerStart = hook.el.dataset.start_date;
+  var timerEnd = hook.el.dataset.end_date;
+
+  var countdownDate = new Date(timerEnd);
+
+  var interval = setInterval(function () {
+    var now = new Date().getTime();
+
+    var interval = new Date(timerEnd) - new Date(timerStart)
+
+    var distance = countdownDate.getTime() - now;
+
+    var percentage = ((distance / interval) * 100) % 360
+
+    document.getElementById(hook.el.id).innerHTML = `<div style="background: conic-gradient(red 0deg, red ${percentage}deg, yellow 0deg, yellow 360deg); width: 2.5rem; height: 2.5rem; border-radius: 0.5rem"/>`
+
+    if (distance <= 0) {
+      clearInterval(interval);
+    }
+  }, 1000);
+
+  return interval;
+}
+
+export default setClockCountdown;

assets/js/setCountdown.js

@@ -0,0 +1,33 @@
+function msToTime(duration) {
+  var seconds = Math.floor((duration / 1000) % 60),
+      minutes = Math.floor((duration / (1000 * 60)) % 60),
+      hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+  hours = (hours < 10) ? "0" + hours : hours;
+  minutes = (minutes < 10) ? "0" + minutes : minutes;
+  seconds = (seconds < 10) ? "0" + seconds : seconds;
+
+  return hours + ":" + minutes + ":" + seconds;
+}
+
+function setCountdown(hook) {
+  var timerEnd = hook.el.dataset.end_date;
+
+  var countdownDate = new Date(timerEnd);
+
+  var interval = setInterval(function () {
+    var now = new Date().getTime();
+
+    var distance = countdownDate.getTime() - now;
+
+    document.getElementById(hook.el.id).innerHTML = msToTime(distance);
+
+    if (distance < 0) {
+      clearInterval(interval);
+    }
+  }, 1000);
+
+  return interval;
+}
+
+export default setCountdown;

lib/parzival_web/live/app/dashboard_live/index.html.heex

@@ -76,8 +76,12 @@
         </div>
         <!-- Feed -->
         <div x-bind:class="option =='feed' ? 'block' : 'hidden'">
-          <%= for post <- @posts do %>
-            <div class="py-4 px-4 mx-auto max-w-5xl border-b border-gray-200 sm:px-6 lg:px-8">
+          <%= for {post, index} <- Enum.with_index(@posts) do %>
+            <div id={"index-#{index}"} class="py-4 px-4 mx-auto max-w-5xl border-b border-gray-200 sm:px-6 lg:px-8">
+              <div phx-hook="Clock" phx-update="ignore" id={"clock-#{index}"} data-start_date={NaiveDateTime.utc_now()} data-end_date={~N[2023-03-25 23:40:58.861338]} />
+              <div>
+                <p>Countdown : <span id={"countdown-#{index}"} phx-hook="Countdown" phx-update="ignore" data-end_date={~N[2023-03-25 23:40:58.861338]} /></p>
+              </div>
               <div class="flex flex-shrink-0">
                 <%= live_redirect to: Routes.profile_show_path(@socket, :show, post.author), class: "block flex-shrink-0 group" do %>
                   <div class="flex items-center">
@@ -144,14 +148,14 @@
         <% end %>
         <!-- Rankings -->
         <div x-bind:class="option =='rankings' ? 'block max-w-5xl px-4 py-4 mx-auto border-b border-gray-200 sm:px-6 lg:px-8' : 'hidden'">
-          <h2 class="pt-6 text-base font-medium text-gray-900" id="rankings-title">
+          <h2 class="pt-6 text-base font-medium text-gray-900">
             Current Rankings
           </h2>
           <div class="flow-root mt-1">
             <ul role="list" class="divide-y divide-gray-200">
-              <%= for user <- @users do %>
+              <%= for {user, index} <- Enum.with_index(@users) do %>
                 <%= live_patch to: Routes.profile_show_path(@socket, :show, user), class: "group" do %>
-                  <li id={"user-#{user.id}"} class="relative">
+                  <li id={"user-#{index}"} class="relative">
                     <div class="flex justify-between">
                       <div class="py-4 text-sm whitespace-nowrap">
                         <div class="flex items-center">
@@ -202,8 +206,8 @@
           </h2>
           <div class="flow-root mt-1">
             <ul role="list" class="divide-y divide-gray-200">
-              <%= for announcement <- @announcements do %>
-                <li class="py-5">
+              <%= for {announcement, index} <- Enum.with_index(@announcements) do %>
+                <li class="py-5" id={"announcement_#{index}"}>
                   <%= live_patch to: Routes.announcement_show_path(@socket, :show, announcement), class: "group" do %>
                     <div>
                       <h3 class="text-sm font-semibold text-gray-800 group-hover:underline group-focus:outline-none">

lib/parzival_web/templates/layout/live.html.heex

@@ -157,14 +157,14 @@
         <section aria-labelledby="rankings-title">
           <div class="overflow-hidden">
             <div class="">
-              <h2 class="pt-6 text-base font-medium text-gray-900" id="rankings-title">
+              <h2 class="pt-6 text-base font-medium text-gray-900">
                 Current Rankings
               </h2>
               <div class="flow-root mt-1">
                 <ul role="list" class="divide-y divide-gray-200">
-                  <%= for user <- @users do %>
+                  <%= for {user, index} <- Enum.with_index(@users) do %>
                     <%= live_patch to: Routes.profile_show_path(@socket, :show, user), class: "group" do %>
-                      <li id={"user-#{user.id}"} class="relative">
+                      <li id={"user_live-#{index}"} class="relative">
                         <div class="flex justify-between">
                           <div class="py-4 text-sm whitespace-nowrap">
                             <div class="flex items-center">
@@ -210,13 +210,13 @@
         <section aria-labelledby="announcements-title">
           <div class="overflow-hidden">
             <div class="">
-              <h2 class="pt-6 text-base font-medium text-gray-900" id="announcements-title">
+              <h2 class="pt-6 text-base font-medium text-gray-900">
                 Announcements
               </h2>
               <div class="flow-root mt-1">
                 <ul role="list" class="divide-y divide-gray-200">
-                  <%= for announcement <- @announcements do %>
-                    <li class="py-5">
+                  <%= for {announcement, index} <- Enum.with_index(@announcements) do %>
+                    <li id={"announcement_live-#{index}"} class="py-5">
                       <%= live_patch to: Routes.announcement_show_path(@socket, :show, announcement), class: "group" do %>
                         <div>
                           <h3 class="text-sm font-semibold text-gray-800 group-hover:underline group-focus:outline-none">