diff --git a/assets/js/app.js b/assets/js/app.js index c3a2ece1..efe8bf2c 100644 --- a/assets/js/app.js +++ b/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"); diff --git a/assets/js/clock.js b/assets/js/clock.js new file mode 100644 index 00000000..cd0e4f47 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/assets/js/countdown.js b/assets/js/countdown.js new file mode 100644 index 00000000..6372f2c2 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/assets/js/setClockCountdown.js b/assets/js/setClockCountdown.js new file mode 100644 index 00000000..c70dadc8 --- /dev/null +++ b/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 = `
` + + if (distance <= 0) { + clearInterval(interval); + } + }, 1000); + + return interval; +} + +export default setClockCountdown; \ No newline at end of file diff --git a/assets/js/setCountdown.js b/assets/js/setCountdown.js new file mode 100644 index 00000000..ecf4ec8b --- /dev/null +++ b/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; \ No newline at end of file diff --git a/lib/parzival_web/live/app/dashboard_live/index.html.heex b/lib/parzival_web/live/app/dashboard_live/index.html.heex index 16a27049..f13899d8 100644 --- a/lib/parzival_web/live/app/dashboard_live/index.html.heex +++ b/lib/parzival_web/live/app/dashboard_live/index.html.heex @@ -76,8 +76,12 @@
- <%= for post <- @posts do %> -
+ <%= for {post, index} <- Enum.with_index(@posts) do %> +
+
+
+

Countdown :

+
<%= live_redirect to: Routes.profile_show_path(@socket, :show, post.author), class: "block flex-shrink-0 group" do %>
@@ -144,14 +148,14 @@ <% end %>
-

+

Current Rankings

    - <%= 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 %> -
  • +
  • @@ -202,8 +206,8 @@
      - <%= for announcement <- @announcements do %> -
    • + <%= for {announcement, index} <- Enum.with_index(@announcements) do %> +
    • <%= live_patch to: Routes.announcement_show_path(@socket, :show, announcement), class: "group" do %>

      diff --git a/lib/parzival_web/templates/layout/live.html.heex b/lib/parzival_web/templates/layout/live.html.heex index dfbd762c..a0b8af1d 100644 --- a/lib/parzival_web/templates/layout/live.html.heex +++ b/lib/parzival_web/templates/layout/live.html.heex @@ -157,14 +157,14 @@
      -

      +

      Current Rankings

        - <%= 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 %> -
      • +
      • @@ -210,13 +210,13 @@
        -

        +

        Announcements

          - <%= for announcement <- @announcements do %> -
        • + <%= for {announcement, index} <- Enum.with_index(@announcements) do %> +
        • <%= live_patch to: Routes.announcement_show_path(@socket, :show, announcement), class: "group" do %>