133 lines
3.8 KiB
Elixir
133 lines
3.8 KiB
Elixir
defmodule CanneryWeb.ViewHelpers do
|
|
@moduledoc """
|
|
Contains common helpers that can be used in liveviews and regular views. These
|
|
are automatically imported into any Phoenix View using `use CanneryWeb,
|
|
:view`
|
|
"""
|
|
|
|
import Phoenix.Component
|
|
|
|
@id_length 16
|
|
|
|
@doc """
|
|
Returns a <time> element that renders the naivedatetime in the user's local
|
|
timezone with Alpine.js
|
|
"""
|
|
@spec display_datetime(NaiveDateTime.t() | nil) :: Phoenix.LiveView.Rendered.t()
|
|
def display_datetime(nil), do: ""
|
|
|
|
def display_datetime(datetime) do
|
|
assigns = %{
|
|
id: :crypto.strong_rand_bytes(@id_length) |> Base.url_encode64(),
|
|
datetime: datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
|
|
}
|
|
|
|
~H"""
|
|
<time
|
|
id={@id}
|
|
datetime={@datetime}
|
|
x-data={"{
|
|
date:
|
|
Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
|
|
.format(new Date(\"#{@datetime}\"))
|
|
}"}
|
|
x-text="date"
|
|
>
|
|
<%= @datetime %>
|
|
</time>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Returns a <date> element that renders the Date in the user's local
|
|
timezone with Alpine.js
|
|
"""
|
|
@spec display_date(Date.t() | nil) :: Phoenix.LiveView.Rendered.t()
|
|
def display_date(nil), do: ""
|
|
|
|
def display_date(date) do
|
|
assigns = %{
|
|
id: :crypto.strong_rand_bytes(@id_length) |> Base.url_encode64(),
|
|
date: date |> Date.to_iso8601(:extended)
|
|
}
|
|
|
|
~H"""
|
|
<time
|
|
id={@id}
|
|
datetime={@date}
|
|
x-data={"{
|
|
date:
|
|
Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'}).format(new Date(\"#{@date}\"))
|
|
}"}
|
|
x-text="date"
|
|
>
|
|
<%= @date %>
|
|
</time>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Displays emoji as text emoji if SHIBAO_MODE is set to true :)
|
|
"""
|
|
@spec display_emoji(String.t()) :: String.t()
|
|
def display_emoji("😔"),
|
|
do:
|
|
if(Application.get_env(:cannery, CanneryWeb.ViewHelpers)[:shibao_mode], do: "q_q", else: "😔")
|
|
|
|
def display_emoji(other_emoji), do: other_emoji
|
|
|
|
@doc """
|
|
A toggle button element that can be directed to a liveview or a
|
|
live_component's `handle_event/3`.
|
|
|
|
## Examples
|
|
|
|
<.toggle_button action="my_liveview_action" value={@some_value}>
|
|
<span>Toggle me!</span>
|
|
</.toggle_button>
|
|
<.toggle_button action="my_live_component_action" target={@myself} value={@some_value}>
|
|
<span>Whatever you want</span>
|
|
</.toggle_button>
|
|
"""
|
|
def toggle_button(assigns) do
|
|
assigns = assigns |> assign_new(:id, fn -> assigns.action end)
|
|
|
|
~H"""
|
|
<label for={@id} class="inline-flex relative items-center cursor-pointer">
|
|
<input
|
|
id={@id}
|
|
type="checkbox"
|
|
value={@value}
|
|
checked={@value}
|
|
class="sr-only peer"
|
|
data-qa={@id}
|
|
{
|
|
if assigns |> Map.has_key?(:target),
|
|
do: %{"phx-click" => @action, "phx-value-value" => @value, "phx-target" => @target},
|
|
else: %{"phx-click" => @action, "phx-value-value" => @value}
|
|
}
|
|
/>
|
|
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-1 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600">
|
|
</div>
|
|
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
|
|
<%= render_slot(@inner_block) %>
|
|
</span>
|
|
</label>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Get a random color in `#ffffff` hex format
|
|
|
|
## Examples
|
|
|
|
iex> random_color()
|
|
"#cc0066"
|
|
"""
|
|
@spec random_color() :: <<_::7>>
|
|
def random_color do
|
|
["#cc0066", "#ff6699", "#6666ff", "#0066cc", "#00cc66", "#669900", "#ff9900", "#996633"]
|
|
|> Enum.random()
|
|
end
|
|
end
|