Live Helpers for DateTime

live_helpers.ex

defmodule QuiqupFleetWeb.LiveHelpers do
  @moduledoc """
  Helpers for Web components used in live view
  """
  import Phoenix.LiveView
  import Phoenix.LiveView.Helpers

  @doc """
  Renders a datetime using the browser based toLocaleString methods.

  You must include the datetime you want to use as value can optionally provide format

  - datetime (the full datetime)
  - date (just the date)
  - timeshort (just the time without seconds)
  - time (just the time with seconds)

  ## Examples

  <.datetime value="2022-04-14T22:00:00Z" format="datetime" />

  14/4/2022 22:00

  <.datetime value="2022-04-14T22:00:00Z" format="timeshort" />

  22:00

  """
  def datetime(%{value: datetime} = assigns) do
    format = Map.get(assigns, :format, "datetime")

    locale_fn =
      case format do
        "datetime" -> "toLocaleString([],{dateStyle: 'short', timeStyle: 'short'})"
        "date" -> "toLocaleDateString()"
        "timeshort" -> "toLocaleTimeString([],{timeStyle: 'short'})"
        "time" -> "toLocaleTimeString()"
        _ -> "toLocaleString()"
      end

    ~H"""
    <span class="datetime" id={assigns.id} phx-update="ignore" x-data={"{date: new Date('#{datetime}')}"} x-text={"date.#{locale_fn}"}>
    </span>
    """
  end

  def datetime(assigns) do
    ~H"""

    """
  end
end