feat: live updates

assets/js/hooks/countdown.js

@@ -1,6 +1,7 @@
 export const Countdown = {
     mounted() {
         const timeReceived = (start_time) => {
+            console.log(start_time);
             if(this.clock !== undefined) {
                 clearInterval(this.clock);
             }
@@ -17,11 +18,13 @@ export const Countdown = {
                     clearInterval(this.clock);
                     window.location.reload();
                 }
-            }, 1000);
+            }, 100);
         };
 
-        window.addEventListener("phx:highlight", (e) => 
-            timeReceived(new Date(e.detail.start_time).getTime()));
+        window.addEventListener("phx:highlight", (e) => {
+            console.log("Highlight");
+            timeReceived(new Date(e.detail.start_time).getTime())
+        });
     }
 }
 

lib/safira/accounts/roles/permissions.ex

@@ -13,11 +13,11 @@ 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"],
-      "mailer" => ["send"],
-      "event" => ["edit"]
+      "mailer" => ["send"]
     }
   end
 

lib/safira/event.ex

@@ -4,6 +4,74 @@ 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
+    Constants.set("start_time", DateTime.to_iso8601(start_time))
+    broadcast_start_time_update("start_time", start_time)
+  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/components/table.ex

@@ -5,7 +5,7 @@ defmodule SafiraWeb.Components.Table do
   use Phoenix.Component
 
   alias Plug.Conn.Query
-  use Gettext, backend: SafiraWeb.Gettexttext
+  use Gettext, backend: SafiraWeb.Gettext
   import SafiraWeb.CoreComponents
 
   attr :id, :string, required: true

lib/safira_web/config.ex

@@ -3,45 +3,51 @@ defmodule SafiraWeb.Config do
   Web configuration for the app.
   """
 
+  alias Safira.Event
+
   def app_pages do
-    [
-      %{
-        key: :badgedex,
-        title: "Badgedex",
-        icon: "hero-check-badge",
-        url: "/app/badgedex"
-      },
-      %{
-        key: :wheel,
-        title: "Wheel",
-        icon: "hero-circle-stack",
-        url: "/app/wheel"
-      },
-      %{
-        key: :leaderboard,
-        title: "Leaderboard",
-        icon: "hero-trophy",
-        url: "/app/leaderboard"
-      },
-      %{
-        key: :store,
-        title: "Store",
-        icon: "hero-shopping-bag",
-        url: "/app/store"
-      },
-      %{
-        key: :vault,
-        title: "Vault",
-        icon: "hero-archive-box",
-        url: "/app/vault"
-      },
-      %{
-        key: :credential,
-        title: "Credential",
-        icon: "hero-ticket",
-        url: "/app/credential"
-      }
-    ]
+    if Event.event_started?() do
+      [
+        %{
+          key: :badgedex,
+          title: "Badgedex",
+          icon: "hero-check-badge",
+          url: "/app/badgedex"
+        },
+        %{
+          key: :wheel,
+          title: "Wheel",
+          icon: "hero-circle-stack",
+          url: "/app/wheel"
+        },
+        %{
+          key: :leaderboard,
+          title: "Leaderboard",
+          icon: "hero-trophy",
+          url: "/app/leaderboard"
+        },
+        %{
+          key: :store,
+          title: "Store",
+          icon: "hero-shopping-bag",
+          url: "/app/store"
+        },
+        %{
+          key: :vault,
+          title: "Vault",
+          icon: "hero-archive-box",
+          url: "/app/vault"
+        },
+        %{
+          key: :credential,
+          title: "Credential",
+          icon: "hero-ticket",
+          url: "/app/credential"
+        }
+      ]
+    else
+      []
+    end
   end
 
   def backoffice_pages(user) do

lib/safira_web/helpers.ex

@@ -2,7 +2,6 @@ defmodule SafiraWeb.Helpers do
   @moduledoc """
   Helper functions for web views.
   """
-  alias Safira.Constants
   alias Timex.Format.DateTime.Formatters.Relative
 
   require Timex.Translator
@@ -162,22 +161,4 @@ defmodule SafiraWeb.Helpers do
     |> QRCodeEx.encode()
     |> QRCodeEx.svg(background_color: "#FFFFFF", color: "#04041C", width: 200)
   end
-
-  def registrations_open? do
-    {:ok, registrations_open} = Constants.get("registrations_open")
-    string_to_bool(registrations_open)
-  end
-
-  def get_start_time! do
-    {:ok, start_str} = Constants.get("start_time")
-    {:ok, start_time, _} = DateTime.from_iso8601(start_str)
-    start_time
-  end
-
-  defp string_to_bool(str) do
-    case String.downcase(str) do
-      "true" -> true
-      _ -> false
-    end
-  end
 end

lib/safira_web/live/app/waiting_live/index.ex

@@ -1,30 +1,48 @@
 defmodule SafiraWeb.App.WaitingLive.Index do
-  use SafiraWeb, :live_view
+  use SafiraWeb, :app_view
 
-  alias SafiraWeb.Helpers
+  alias Safira.Event
 
   @impl true
   def render(assigns) do
     ~H"""
     <div>
-      <h1>Countdown Timer</h1>
-      <div id="seconds-remaining" phx-hook="Countdown"></div>
+      <img class="w-52 h-52 m-auto block" src={~p"/images/sei.svg"} />
+      <h1 class="font-terminal uppercase text-4xl sm:text-6xl text-center mt-24">
+        You are registered for SEI'25!
+      </h1>
+      <h2 class="font-terminal text-xl sm:text-2xl text-center mt-4">We are almost ready</h2>
+      <div
+        id="seconds-remaining"
+        class="font-terminal text-center text-2xl sm:text-4xl mt-12"
+        phx-hook="Countdown"
+      >
+      </div>
     </div>
     """
   end
 
   @impl true
   def mount(_params, _session, socket) do
-    start_time = Helpers.get_start_time!()
-
-    if DateTime.compare(start_time, DateTime.utc_now()) == :lt do
+    if Event.event_started?() do
       {:ok,
        socket
        |> push_navigate(to: ~p"/app")}
     else
+      if connected?(socket) do
+        Event.subscribe_to_start_time_update("start_time")
+      end
+
       {:ok,
        socket
-       |> push_event("highlight", %{start_time: start_time})}
+       |> push_event("highlight", %{start_time: Event.get_event_start_time!()})}
     end
   end
+
+  @impl true
+  def handle_info({"start_time", value}, socket) do
+    {:noreply,
+     socket
+     |> push_event("highlight", %{start_time: value})}
+  end
 end

lib/safira_web/live/auth/user_login_live.ex

@@ -1,6 +1,8 @@
 defmodule SafiraWeb.UserLoginLive do
   use SafiraWeb, :live_view
 
+  alias Safira.Event
+
   def render(assigns) do
     ~H"""
     <div class="mx-auto max-w-sm">
@@ -45,7 +47,7 @@ defmodule SafiraWeb.UserLoginLive do
     email = Phoenix.Flash.get(socket.assigns.flash, :email)
     form = to_form(%{"email" => email}, as: "user")
 
-    {:ok, assign(socket, form: form) |> assign(registrations_open: registrations_open?()),
+    {:ok, assign(socket, form: form) |> assign(registrations_open: Event.registrations_open?()),
      temporary_assigns: [form: form]}
   end
 end

lib/safira_web/live/backoffice/event_live/form_component.ex

@@ -3,7 +3,7 @@ defmodule SafiraWeb.Backoffice.EventLive.FormComponent do
 
   import SafiraWeb.Components.Forms
 
-  alias Safira.Constants
+  alias Safira.Event
 
   @impl true
   def render(assigns) do
@@ -61,8 +61,8 @@ defmodule SafiraWeb.Backoffice.EventLive.FormComponent do
   end
 
   def handle_event("save", params, socket) do
-    Constants.set("registrations_open", params["registrations_open"])
-    Constants.set("start_time", DateTime.to_iso8601(parse_date(params["start_time"])))
+    Event.change_registrations_open(string_to_bool(params["registrations_open"]))
+    Event.change_event_start_time(parse_date(params["start_time"]))
 
     {:noreply,
      socket
@@ -74,4 +74,11 @@ defmodule SafiraWeb.Backoffice.EventLive.FormComponent do
     {:ok, date, _} = DateTime.from_iso8601("#{date_str}:00Z")
     date
   end
+
+  defp string_to_bool(str) do
+    case String.downcase(str) do
+      "true" -> true
+      _ -> false
+    end
+  end
 end

lib/safira_web/live/backoffice/event_live/index.ex

@@ -1,12 +1,14 @@
 defmodule SafiraWeb.Backoffice.EventLive.Index do
   use SafiraWeb, :backoffice_view
 
-  alias SafiraWeb.Helpers
+  alias Safira.Event
+
+  on_mount {SafiraWeb.StaffRoles, show: %{"event" => ["show"]}, edit: %{"event" => ["edit"]}}
 
   @impl true
   def mount(_params, _session, socket) do
-    registrations_open = Helpers.registrations_open?()
-    start_time = Helpers.get_start_time!() |> parse_date()
+    registrations_open = Event.registrations_open?()
+    start_time = Event.get_event_start_time!()
     form = to_form(%{"registrations_open" => registrations_open, "start_time" => start_time})
 
     {:ok,
@@ -19,10 +21,4 @@ defmodule SafiraWeb.Backoffice.EventLive.Index do
   def handle_params(_params, _url, socket) do
     {:noreply, socket}
   end
-
-  defp parse_date(date) do
-    base_str = DateTime.to_iso8601(date)
-    len = String.length(base_str)
-    String.slice(base_str, 0, len - 4)
-  end
 end