mirror of
https://github.com/ClaperCo/Claper.git
synced 2025-12-15 19:37:53 +01:00
368 lines
15 KiB
Plaintext
368 lines
15 KiB
Plaintext
<%= case @live_action do %>
|
|
<% :index -> %>
|
|
<div phx-hook="CSVDownloader" id="event-list">
|
|
<div>
|
|
<div class="flex justify-between items-center mb-24">
|
|
<h1 class="text-3xl font-bold">{gettext("Events")}</h1>
|
|
<div class="flex space-x-3">
|
|
<%!-- <.link navigate={~p"/admin/events/new"} class="btn btn-primary btn-sm">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
class="w-3 h-3"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="3"
|
|
d="M12 4v16m8-8H4"
|
|
/>
|
|
</svg>
|
|
{gettext("New event")}
|
|
</.link> --%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="py-4">
|
|
<!-- Search Bar -->
|
|
<div class="mb-6">
|
|
<form phx-change="search" class="flex w-full md:w-1/2 my-3">
|
|
<label class="input">
|
|
<svg
|
|
class="h-[1em] opacity-50"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke-width="2.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
>
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.3-4.3"></path>
|
|
</g>
|
|
</svg>
|
|
<input
|
|
type="search"
|
|
name="search"
|
|
value={@search}
|
|
placeholder={gettext("Search events...")}
|
|
/>
|
|
</label>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- events Table -->
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body p-0">
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-zebra w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-left">
|
|
<button
|
|
phx-click="sort"
|
|
phx-value-field="name"
|
|
class="btn btn-ghost btn-sm"
|
|
>
|
|
{gettext("Name")} {sort_indicator(assigns |> Map.put(:field, :name))}
|
|
</button>
|
|
</th>
|
|
<th class="text-left">
|
|
<button
|
|
phx-click="sort"
|
|
phx-value-field="code"
|
|
class="btn btn-ghost btn-sm"
|
|
>
|
|
{gettext("Code")} {sort_indicator(assigns |> Map.put(:field, :code))}
|
|
</button>
|
|
</th>
|
|
<th class="text-left">
|
|
{gettext("Owner")}
|
|
</th>
|
|
<th class="text-left">
|
|
<button
|
|
phx-click="sort"
|
|
phx-value-field="started_at"
|
|
class="btn btn-ghost btn-sm"
|
|
>
|
|
{gettext("Started At")} {sort_indicator(
|
|
assigns
|
|
|> Map.put(:field, :started_at)
|
|
)}
|
|
</button>
|
|
</th>
|
|
<th class="text-left">
|
|
<button
|
|
phx-click="sort"
|
|
phx-value-field="expired_at"
|
|
class="btn btn-ghost btn-sm"
|
|
>
|
|
{gettext("Expired At")} {sort_indicator(
|
|
assigns
|
|
|> Map.put(:field, :expired_at)
|
|
)}
|
|
</button>
|
|
</th>
|
|
<th class="text-left">
|
|
<button
|
|
phx-click="sort"
|
|
phx-value-field="audience_peak"
|
|
class="btn btn-ghost btn-sm"
|
|
>
|
|
{gettext("Audience Peak")} {sort_indicator(
|
|
assigns
|
|
|> Map.put(:field, :audience_peak)
|
|
)}
|
|
</button>
|
|
</th>
|
|
<th class="text-right">
|
|
<span class="sr-only">{gettext("Actions")}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<%= if Enum.empty?(@events) do %>
|
|
<tr>
|
|
<td colspan="7" class="text-center">
|
|
{gettext("No events found")}
|
|
</td>
|
|
</tr>
|
|
<% else %>
|
|
<%= for event <- @events do %>
|
|
<tr id={"event-#{event.id}"}>
|
|
<td class="font-medium">
|
|
{event.name}
|
|
</td>
|
|
<td class="uppercase">
|
|
{event.code}
|
|
</td>
|
|
<td>
|
|
{if event.user, do: event.user.email, else: gettext("No owner")}
|
|
</td>
|
|
<td>
|
|
{if event.started_at,
|
|
do: Calendar.strftime(event.started_at, "%Y-%m-%d %H:%M"),
|
|
else: gettext("Not started")}
|
|
</td>
|
|
<td>
|
|
{if event.expired_at,
|
|
do: Calendar.strftime(event.expired_at, "%Y-%m-%d %H:%M"),
|
|
else: gettext("Not expired")}
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-outline">
|
|
{event.audience_peak || 0}
|
|
</div>
|
|
</td>
|
|
<td class="text-right">
|
|
<div class="flex justify-end gap-2">
|
|
<.link
|
|
navigate={~p"/admin/events/#{event}"}
|
|
class="btn btn-link btn-sm"
|
|
title={gettext("View event")}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
</.link>
|
|
<.link
|
|
navigate={~p"/admin/events/#{event}/edit"}
|
|
class="btn btn-link btn-sm text-primary"
|
|
title={gettext("Edit event")}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
|
|
/>
|
|
</svg>
|
|
</.link>
|
|
<a
|
|
href="#"
|
|
phx-click="delete"
|
|
phx-value-id={event.id}
|
|
data-confirm={
|
|
gettext("Are you sure you want to delete this event?")
|
|
}
|
|
class="btn btn-link btn-sm text-error"
|
|
title={gettext("Delete event")}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% :show -> %>
|
|
<div>
|
|
<div>
|
|
<div class="flex justify-between items-center mb-24">
|
|
<h1 class="text-3xl font-bold">{gettext("Event details")}</h1>
|
|
<div class="flex gap-3">
|
|
<.link navigate={~p"/admin/events"} class="btn btn-outline btn-sm">
|
|
{gettext("Back to events")}
|
|
</.link>
|
|
<.link navigate={~p"/admin/events/#{@event}/edit"} class="btn btn-primary btn-sm">
|
|
{gettext("Edit")}
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h2 class="card-title">{@event.name}</h2>
|
|
<p class="text-base-content/70 uppercase">#{@event.code}</p>
|
|
<div class="divider"></div>
|
|
<dl class="space-y-4">
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<dt class="font-medium">{gettext("Name")}</dt>
|
|
<dd class="col-span-2">{@event.name}</dd>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<dt class="font-medium">{gettext("Owner")}</dt>
|
|
<dd class="col-span-2">
|
|
{if @event.user, do: @event.user.email, else: gettext("No owner")}
|
|
</dd>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<dt class="font-medium">{gettext("Started At")}</dt>
|
|
<dd class="col-span-2">
|
|
{if @event.started_at,
|
|
do: Calendar.strftime(@event.started_at, "%Y-%m-%d %H:%M"),
|
|
else: gettext("Not started")}
|
|
</dd>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<dt class="font-medium">{gettext("Expired At")}</dt>
|
|
<dd class="col-span-2">
|
|
{if @event.expired_at,
|
|
do: Calendar.strftime(@event.expired_at, "%Y-%m-%d %H:%M"),
|
|
else: gettext("Not expired")}
|
|
</dd>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<dt class="font-medium">{gettext("Audience Peak")}</dt>
|
|
<dd class="col-span-2">
|
|
{@event.audience_peak || 0} {gettext("attendees")}
|
|
</dd>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<dt class="font-medium">{gettext("Created At")}</dt>
|
|
<dd class="col-span-2">
|
|
{Calendar.strftime(@event.inserted_at, "%Y-%m-%d %H:%M")}
|
|
</dd>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<dt class="font-medium">{gettext("Last Updated")}</dt>
|
|
<dd class="col-span-2">
|
|
{Calendar.strftime(@event.updated_at, "%Y-%m-%d %H:%M")}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% :new -> %>
|
|
<div>
|
|
<div>
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-3xl font-bold">{gettext("New event")}</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<.live_component
|
|
module={ClaperWeb.AdminLive.EventLive.FormComponent}
|
|
id="event-form"
|
|
title={gettext("New event")}
|
|
action={:new}
|
|
event={@event}
|
|
navigate={~p"/admin/events"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% :edit -> %>
|
|
<div>
|
|
<div>
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-3xl font-bold">{gettext("Edit event")}</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<.live_component
|
|
module={ClaperWeb.AdminLive.EventLive.FormComponent}
|
|
id={"event-form-#{@event.id}"}
|
|
title={gettext("Edit event")}
|
|
action={:edit}
|
|
event={@event}
|
|
navigate={~p"/admin/events"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|