feat: block routes based on event start time (#431)

Author: ruioliveira02

.env.dev.sample

@@ -4,4 +4,4 @@ DB_HOST=localhost
 DB_PORT=5432
 DB_NAME=safira_dev
 HOST_URL=http://localhost:4000
-ASSET_HOST=http://localhost:4000
+ASSET_HOST=http://localhost:4000

.gitignore

@@ -37,4 +37,5 @@ safira-*.tar
 npm-debug.log
 /assets/node_modules/
 
-.env.dev
+.env.*
+.env

assets/js/app.js

@@ -22,12 +22,13 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 import live_select from "live_select"
-import { QrScanner, Wheel, Confetti, Sorting } from "./hooks";
+import { QrScanner, Wheel, Confetti, Countdown, Sorting } from "./hooks";
 
 let Hooks = {
   QrScanner: QrScanner,
   Wheel: Wheel,
   Confetti: Confetti,
+  Countdown: Countdown,
   Sorting: Sorting,
   ...live_select
 };

assets/js/hooks/countdown.js

@@ -0,0 +1,50 @@
+export const Countdown = {
+    mounted() {
+        let countdownInterval = null;
+
+        const startCountdown = (startTime) => {
+            if (countdownInterval) {
+                clearInterval(countdownInterval);
+            }
+
+            const textElement = document.getElementById("seconds-remaining");
+            if (!textElement) {
+                console.warn("Countdown element not found!");
+                return;
+            }
+
+            countdownInterval = setInterval(() => {
+                const now = Date.now();
+                const secondsLeft = Math.round((startTime - now) / 1000);
+
+                if (secondsLeft >= 0) {
+                    textElement.textContent = formatTime(secondsLeft);
+                } else {
+                    clearInterval(countdownInterval);
+                    textElement.textContent = "00";
+                    window.location.reload();
+                }
+            }, 100);
+        };
+
+        window.addEventListener("phx:highlight", (e) => {
+            const startTime = new Date(e.detail.start_time).getTime();
+            startCountdown(startTime);
+        });
+    }
+};
+
+function formatTime(totalSeconds) {
+    const dayToSeconds = 86400;
+    const days = Math.floor(totalSeconds / dayToSeconds);
+    const hours = Math.floor((totalSeconds % dayToSeconds) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    const formattedTime = [
+        days > 0 ? `${days} days` : null,
+        `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+    ].filter(Boolean).join(", ");
+
+    return formattedTime;
+}

assets/js/hooks/index.js

@@ -1,4 +1,5 @@
 export { QrScanner } from "./qr_reading.js";
 export { Wheel } from "./wheel.js";
 export { Confetti } from "./confetti.js";
-export { Sorting } from "./sorting.js";
+export { Sorting } from "./sorting.js";
+export { Countdown } from "./countdown.js";

lib/safira/accounts/roles/permissions.ex

@@ -13,6 +13,7 @@ defmodule Safira.Accounts.Roles.Permissions do
       "purchases" => ["show", "redeem", "refund"],
       "badges" => ["show", "edit", "delete", "give", "revoke", "give_without_restrictions"],
       "minigames" => ["show", "edit", "simulate"],
+      "event" => ["show", "edit"],
       "spotlights" => ["edit"],
       "schedule" => ["edit"],
       "statistics" => ["show"],

lib/safira/event.ex

@@ -4,6 +4,75 @@ defmodule Safira.Event do
   """
   alias Safira.Constants
 
+  @pubsub Safira.PubSub
+
+  @doc """
+  Returns whether the registrations for the event are open
+
+  ## Examples
+
+      iex> registrations_open?()
+      false
+  """
+  def registrations_open? do
+    case Constants.get("registrations_open") do
+      {:ok, registrations_open} ->
+        case String.downcase(registrations_open) do
+          "true" -> true
+          _ -> false
+        end
+
+      _ ->
+        false
+    end
+  end
+
+  def change_registrations_open(registrations_open) do
+    Constants.set(
+      "registrations_open",
+      if registrations_open do
+        "true"
+      else
+        "false"
+      end
+    )
+  end
+
+  def get_event_start_time! do
+    with {:ok, start_time_str} <- Constants.get("start_time") do
+      with {:ok, start_time, _} <- DateTime.from_iso8601(start_time_str) do
+        start_time
+      end
+    end
+  end
+
+  def change_event_start_time(start_time) do
+    result = Constants.set("start_time", DateTime.to_iso8601(start_time))
+    broadcast_start_time_update("start_time", start_time)
+    result
+  end
+
+  @doc """
+  Subscribes the caller to the start time's updates.
+
+  ## Examples
+
+      iex> subscribe_to_start_time_update("start_time")
+      :ok
+  """
+  def subscribe_to_start_time_update(config) do
+    Phoenix.PubSub.subscribe(@pubsub, config)
+  end
+
+  defp broadcast_start_time_update(config, value) do
+    Phoenix.PubSub.broadcast(@pubsub, "start_time", {config, value})
+  end
+
+  def event_started? do
+    start_time = get_event_start_time!()
+    DateTime.compare(start_time, DateTime.utc_now()) == :lt
+  end
+
   @doc """
   Returns the event's start date.
   If the date is not set, it will be set to today's date by default.

lib/safira_web.ex

@@ -43,7 +43,7 @@ defmodule SafiraWeb do
         layouts: [html: SafiraWeb.Layouts]
 
       import Plug.Conn
-      import SafiraWeb.Gettext
+      use Gettext, backend: SafiraWeb.Gettext
 
       unquote(verified_routes())
     end
@@ -119,7 +119,7 @@ defmodule SafiraWeb do
       # Core UI components and translation
       import SafiraWeb.CoreComponents
       import SafiraWeb.Components.Page
-      import SafiraWeb.Gettext
+      use Gettext, backend: SafiraWeb.Gettext
 
       import SafiraWeb.Helpers
 

lib/safira_web/components/core_components.ex

@@ -19,7 +19,7 @@ defmodule SafiraWeb.CoreComponents do
   alias Phoenix.HTML.Form
   alias Phoenix.LiveView.JS
 
-  import SafiraWeb.Gettext
+  use Gettext, backend: SafiraWeb.Gettext
 
   @doc """
   Renders a modal.

lib/safira_web/components/layouts/app.html.heex

@@ -1,20 +1,22 @@
 <div class="relative h-screen flex overflow-hidden">
-  <.sidebar
-    current_user={@current_user}
-    pages={SafiraWeb.Config.app_pages()}
-    current_page={Map.get(assigns, :current_page, nil)}
-    background="bg-primaryDark"
-    border="border-darkShade"
-    logo_padding="px-16 pt-8 pb-4"
-    logo_images={%{light: "/images/sei.svg", dark: "/images/sei.svg"}}
-    logo_url={~p"/app/"}
-    user_dropdown_name_color="text-light"
-    user_dropdown_handle_color="text-lightMuted"
-    user_dropdown_icon_color="text-lightShade"
-    link_class="px-3 group flex items-center py-2 text-sm font-medium rounded-md transition-colors"
-    link_active_class="bg-light text-primaryDark"
-    link_inactive_class="hover:bg-primary-500/10 text-light"
-  />
+  <%= if Map.get(assigns, :event_started, true) do %>
+    <.sidebar
+      current_user={@current_user}
+      pages={SafiraWeb.Config.app_pages()}
+      current_page={Map.get(assigns, :current_page, nil)}
+      background="bg-primaryDark"
+      border="border-darkShade"
+      logo_padding="px-16 pt-8 pb-4"
+      logo_images={%{light: "/images/sei.svg", dark: "/images/sei.svg"}}
+      logo_url={~p"/app/"}
+      user_dropdown_name_color="text-light"
+      user_dropdown_handle_color="text-lightMuted"
+      user_dropdown_icon_color="text-lightShade"
+      link_class="px-3 group flex items-center py-2 text-sm font-medium rounded-md transition-colors"
+      link_active_class="bg-light text-primaryDark"
+      link_inactive_class="hover:bg-primary-500/10 text-light"
+    />
+  <% end %>
   <div class="flex flex-col flex-1 overflow-hidden">
     <div class="bg-primaryDark flex justify-end lg:hidden px-4 sm:px-6 py-2">
       <button