mirror of
https://github.com/ClaperCo/Claper.git
synced 2025-12-15 19:37:53 +01:00
1409 lines
65 KiB
Plaintext
1409 lines
65 KiB
Plaintext
<div
|
|
id="manager"
|
|
x-data={"{date:
|
|
moment.utc('#{@event.expired_at}').local().format('lll')}"}
|
|
phx-hook="Manager"
|
|
data-max-page={@event.presentation_file.length}
|
|
data-current-page={@state.position}
|
|
>
|
|
<div
|
|
:if={@preview}
|
|
id="preview"
|
|
class="h-1/3 w-4/5 md:w-2/3 lg:w-1/3 bg-gray-200 absolute bottom-5 right-5 z-50 rounded-md shadow-base transform"
|
|
>
|
|
<button phx-click="toggle-preview" class="absolute top-2 right-2 text-white">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="h-8 w-8"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
<iframe
|
|
class="w-full h-full rounded-md pointer-events-none"
|
|
src={~p"/e/#{@event.code}/presenter?iframe"}
|
|
>
|
|
</iframe>
|
|
</div>
|
|
<div
|
|
id="settings-modal"
|
|
class={"#{if !@settings_modal, do: "hidden" } fixed z-30 inset-0 overflow-y-auto p-4 sm:p-6 md:p-24
|
|
transform transition-all duration-150"}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div
|
|
phx-click={toggle_settings_modal()}
|
|
class="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity w-full h-full"
|
|
aria-hidden="true"
|
|
>
|
|
</div>
|
|
<div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
|
<button phx-click={toggle_settings_modal()} class="absolute right-0 top-0">
|
|
<svg
|
|
class="text-gray-500 h-9 transform rotate-45"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
phx-click="toggle-preview"
|
|
class="inline-flex items-center rounded-l-md px-5 py-1 hover:bg-secondary-50 text-base font-medium text-secondary-500 transition-all duration-500"
|
|
>
|
|
<svg
|
|
:if={!@preview}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="-ml-1 mr-2 h-5 w-5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
|
|
</svg>
|
|
|
|
<svg
|
|
:if={@preview}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="-ml-1 mr-2 h-5 w-5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" />
|
|
</svg>
|
|
|
|
<span :if={!@preview}><%= gettext("Open preview") %></span>
|
|
<span :if={@preview}><%= gettext("Close preview") %></span>
|
|
</button>
|
|
<div id="settings-modal-content" class="bg-white p-4">
|
|
<.live_component
|
|
id="settings-modal-pane"
|
|
module={ClaperWeb.EventLive.ManagerSettingsComponent}
|
|
create={@create}
|
|
state={@state}
|
|
show_shortcut={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="add-modal"
|
|
class={"#{if !@create, do: "hidden" } fixed z-30 inset-0 overflow-y-auto p-4 sm:p-6 md:p-24
|
|
transform transition-all duration-150"}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div
|
|
phx-click={toggle_add_modal()}
|
|
class="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity w-full h-full"
|
|
aria-hidden="true"
|
|
>
|
|
</div>
|
|
<div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
|
<button phx-click={toggle_add_modal()} class="absolute right-0 top-0">
|
|
<svg
|
|
class="text-gray-500 h-9 transform rotate-45"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div id="modal-content">
|
|
<%= if @create==nil do %>
|
|
<ul class="scroll-py-3 overflow-y-auto p-3" id="options" role="listbox">
|
|
<li id="option-1" role="option" tabindex="-1">
|
|
<a
|
|
data-phx-link="patch"
|
|
data-phx-link-state="push"
|
|
href={~p"/e/#{@event.code}/manage/add/poll"}
|
|
class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer"
|
|
>
|
|
<div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-7 w-7"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto text-left">
|
|
<p class="font-medium text-gray-700">
|
|
<%= gettext("Poll") %>
|
|
</p>
|
|
<p class="text-gray-500">
|
|
<%= gettext("Add poll to know opinion of your public.") %>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li id="option-2" role="option" tabindex="-1">
|
|
<a
|
|
data-phx-link="patch"
|
|
data-phx-link-state="push"
|
|
href={~p"/e/#{@event.code}/manage/add/form"}
|
|
class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer"
|
|
>
|
|
<div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-7 w-7"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto text-left">
|
|
<p class="font-medium text-gray-700">
|
|
<%= gettext("Form") %>
|
|
</p>
|
|
<p class="text-gray-500">
|
|
<%= gettext("Add form to collect data from your public.") %>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li id="option-3" role="option" tabindex="-1">
|
|
<a
|
|
data-phx-link="patch"
|
|
data-phx-link-state="push"
|
|
href={~p"/e/#{@event.code}/manage/add/embed"}
|
|
class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer"
|
|
>
|
|
<div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-7 h-7"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto text-left">
|
|
<p class="font-medium text-gray-700"><%= gettext("Web content") %></p>
|
|
<p class="text-gray-500">
|
|
<%= gettext("Add a Youtube video or any web content.") %>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<% end %>
|
|
<%= if @create=="poll" do %>
|
|
<div class="scroll-py-3 overflow-y-auto bg-gray-100 p-3">
|
|
<p class="text-xl font-bold">
|
|
<%= case @create_action do
|
|
:new -> gettext("New poll")
|
|
:edit -> gettext("Edit poll")
|
|
end %>
|
|
</p>
|
|
<.live_component
|
|
module={ClaperWeb.PollLive.FormComponent}
|
|
id="poll-create"
|
|
event_uuid={@event.uuid}
|
|
presentation_file={@event.presentation_file}
|
|
poll={@poll}
|
|
live_action={@create_action}
|
|
position={@state.position}
|
|
return_to={~p"/e/#{@event.code}/manage"}
|
|
/>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @create=="form" do %>
|
|
<div class="scroll-py-3 overflow-y-auto bg-gray-100 p-3">
|
|
<p class="text-xl font-bold">
|
|
<%= case @create_action do
|
|
:new -> gettext("New form")
|
|
:edit -> gettext("Edit form")
|
|
end %>
|
|
</p>
|
|
<.live_component
|
|
module={ClaperWeb.FormLive.FormComponent}
|
|
id="form-create"
|
|
event_uuid={@event.uuid}
|
|
presentation_file={@event.presentation_file}
|
|
form={@form}
|
|
live_action={@create_action}
|
|
position={@state.position}
|
|
return_to={~p"/e/#{@event.code}/manage"}
|
|
/>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @create == "embed" do %>
|
|
<div class="scroll-py-3 overflow-y-auto bg-gray-100 p-3">
|
|
<p class="text-xl font-bold">
|
|
<%= case @create_action do
|
|
:new -> gettext("New web content")
|
|
:edit -> gettext("Edit web content")
|
|
end %>
|
|
</p>
|
|
<.live_component
|
|
module={ClaperWeb.EmbedLive.FormComponent}
|
|
id="embed-create"
|
|
event_uuid={@event.uuid}
|
|
presentation_file={@event.presentation_file}
|
|
embed={@embed}
|
|
live_action={@create_action}
|
|
position={@state.position}
|
|
return_to={~p"/e/#{@event.code}/manage"}
|
|
/>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @create == "import" do %>
|
|
<div class="scroll-py-3 overflow-y-auto bg-gray-100 p-3">
|
|
<p class="text-xl font-bold">
|
|
<%= gettext("Select presentation") %>
|
|
</p>
|
|
<ul>
|
|
<%= for event <- @events do %>
|
|
<li class="my-3">
|
|
<button
|
|
phx-click="import"
|
|
phx-value-event={event.uuid}
|
|
class="bg-blue-500 text-white flex gap-x-2 items-center px-2 py-1 rounded-md"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
<%= event.name %>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="wrapper"
|
|
class="grid grid-rows-[3.2em_1fr] h-screen max-h-screen overflow-hidden"
|
|
data-next-label={gettext("Next")}
|
|
data-prev-label={gettext("Back")}
|
|
data-finish-label={gettext("Finish")}
|
|
data-group="manage"
|
|
phx-hook="TourGuide"
|
|
>
|
|
<div class="flex items-center justify-between px-3 py-2 border-b-2 border-gray-200 w-full bg-white">
|
|
<div class="flex-1 flex gap-x-2">
|
|
<a
|
|
data-phx-link="patch"
|
|
data-phx-link-state="push"
|
|
href={~p"/events"}
|
|
class="md:px-3 rounded-md hover:bg-gray-200 flex items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</a>
|
|
<div class="flex items-center justify-start gap-x-2">
|
|
<h2 class="text-xl font-bold leading-7 text-gray-900 md:text-2xl truncate w-24 md:w-auto">
|
|
<%= @event.name %>
|
|
</h2>
|
|
<div class="flex gap-x-3 items-center">
|
|
<div class="flex items-center text-sm text-gray-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
|
|
/>
|
|
</svg>
|
|
<%= @event.code %>
|
|
</div>
|
|
<div class="flex items-center text-sm text-gray-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<%= @attendees_nb %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-x-3 justify-end">
|
|
<span class="hidden lg:block italic text-gray-400 text-sm">
|
|
<%= raw(
|
|
gettext("Press <strong>F</strong> in the presentation window to enable fullscreen")
|
|
) %>
|
|
</span>
|
|
<div class="hidden lg:flex items-center justify-center border-2 border-secondary-500 rounded-md">
|
|
<button
|
|
phx-click="toggle-preview"
|
|
class="hidden lg:inline-flex items-center rounded-l-md px-5 py-1 hover:bg-secondary-50 text-base font-medium text-secondary-500 transition-all duration-500"
|
|
>
|
|
<svg
|
|
:if={!@preview}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="-ml-1 mr-2 h-5 w-5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
|
|
</svg>
|
|
|
|
<svg
|
|
:if={@preview}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="-ml-1 mr-2 h-5 w-5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" />
|
|
</svg>
|
|
|
|
<span :if={!@preview}><%= gettext("Open preview") %></span>
|
|
<span :if={@preview}><%= gettext("Close preview") %></span>
|
|
</button>
|
|
<button
|
|
phx-hook="OpenPresenter"
|
|
id={"openPresenter-#{@event.uuid}"}
|
|
data-url={~p"/e/#{@event.code}/presenter"}
|
|
type="button"
|
|
data-tg-title={"🙌 #{gettext("Time to launch your presentation!")}"}
|
|
data-tg-order="4"
|
|
data-tg-tour={"<p>#{gettext("Click here to open the presentation window.")}</p>"}
|
|
data-tg-group="manage"
|
|
class="hidden lg:inline-flex items-center py-1 px-5 rounded-r-sm text-base font-medium text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
class="-ml-1 mr-2 h-5 w-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
|
|
/>
|
|
</svg>
|
|
<%= gettext("Open presentation") %>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-x-2 lg:hidden">
|
|
<button phx-click={toggle_settings_modal()} class="mx-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 0 1-.517.608 7.45 7.45 0 0 0-.478.198.798.798 0 0 1-.796-.064l-.453-.324a1.875 1.875 0 0 0-2.416.2l-.243.243a1.875 1.875 0 0 0-.2 2.416l.324.453a.798.798 0 0 1 .064.796 7.448 7.448 0 0 0-.198.478.798.798 0 0 1-.608.517l-.55.092a1.875 1.875 0 0 0-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 0 1-.064.796l-.324.453a1.875 1.875 0 0 0 .2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 0 1 .796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 0 1 .517-.608 7.52 7.52 0 0 0 .478-.198.798.798 0 0 1 .796.064l.453.324a1.875 1.875 0 0 0 2.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 0 1-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 0 0 1.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 0 1-.608-.517 7.507 7.507 0 0 0-.198-.478.798.798 0 0 1 .064-.796l.324-.453a1.875 1.875 0 0 0-.2-2.416l-.243-.243a1.875 1.875 0 0 0-2.416-.2l-.453.324a.798.798 0 0 1-.796.064 7.462 7.462 0 0 0-.478-.198.798.798 0 0 1-.517-.608l-.091-.55a1.875 1.875 0 0 0-1.85-1.566h-.344ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
:if={@state.position <= 0}
|
|
class="flex opacity-50 items-center justify-center px-2 py-1 text-white bg-primary-500 hover:bg-primary-600 rounded-md my-5 mx-auto text-xs"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
:if={@state.position > 0}
|
|
phx-click="current-page"
|
|
phx-value-page={@state.position - 1}
|
|
class="flex items-center justify-center px-2 py-1 text-white bg-primary-500 hover:bg-primary-600 rounded-md my-5 mx-auto text-xs"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
:if={@state.position < @event.presentation_file.length - 1}
|
|
phx-click="current-page"
|
|
phx-value-page={@state.position + 1}
|
|
class="flex items-center justify-center px-2 py-1 text-white bg-primary-500 hover:bg-primary-600 rounded-md my-5 mx-auto text-xs"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
:if={@state.position >= @event.presentation_file.length - 1}
|
|
class="flex opacity-50 items-center justify-center px-2 py-1 text-white bg-primary-500 hover:bg-primary-600 rounded-md my-5 mx-auto text-xs"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
phx-hook={"#{if @event.presentation_file.length > 0, do: "Split", else: ""}"}
|
|
data-type="row"
|
|
data-gutter=".gutter"
|
|
id="base-layout"
|
|
class={"#{if @event.presentation_file.length > 0, do: "md:grid grid-rows-[1fr_10px_1fr] overflow-y-auto", else: ""}"}
|
|
>
|
|
<div
|
|
:if={@event.presentation_file.length > 0}
|
|
id="slides-layout"
|
|
class="flex overflow-x-auto w-full md:h-full"
|
|
>
|
|
<%= for index <- 0..max(0, @event.presentation_file.length-1) do %>
|
|
<button
|
|
id={"slide-preview-#{index}"}
|
|
phx-click="current-page"
|
|
phx-value-page={index}
|
|
class="h-full w-full contents"
|
|
>
|
|
<%= if Application.get_env(:claper, :presentations) |> Keyword.get(:storage) == "local" do %>
|
|
<img
|
|
class={"#{if @state.position==index, do: "border-4 border-primary-500" , else: "opacity-20" }
|
|
transition-all object-contain"}
|
|
src={"/uploads/#{@event.presentation_file.hash}/#{index+1}.jpg"}
|
|
/>
|
|
<% else %>
|
|
<img
|
|
class={"#{if @state.position==index, do: "border-4 border-primary-500" , else: "opacity-20" }
|
|
transition-all object-contain"}
|
|
src={"https://#{Application.get_env(:claper, :presentations) |>
|
|
Keyword.get(:aws_bucket)}.s3.#{Application.get_env(:ex_aws,
|
|
:region)}.amazonaws.com/presentations/#{@event.presentation_file.hash}/#{index+1}.jpg"}
|
|
/>
|
|
<% end %>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
<div
|
|
:if={@event.presentation_file.length > 0}
|
|
class="hidden md:block gutter col-span-full cursor-row-resize z-20 row-[2] bg-gray-50 text-center text-gray-300 text-sm leading-3"
|
|
>
|
|
•••
|
|
</div>
|
|
<div
|
|
phx-hook="Split"
|
|
data-type="column"
|
|
data-gutter=".gutter-1"
|
|
id="layout"
|
|
class="md:grid grid-cols-[1fr_10px_1fr] overflow-y-auto h-full"
|
|
>
|
|
<div
|
|
id="interactions"
|
|
class="bg-gray-100 overflow-y-auto"
|
|
data-tg-order="1"
|
|
data-tg-title={"#{gettext("Your interactions")}"}
|
|
data-tg-tour={"<p class='mb-3'>#{gettext("This section contains all your interactions.")}</p><p class='opacity-50 text-xs'>#{gettext("You can add interactions to your presentation slides.")}</p>"}
|
|
data-tg-group="manage"
|
|
>
|
|
<!-- Interactions -->
|
|
<div class="h- overflow-y-auto @container">
|
|
<div
|
|
:if={length(@interactions) == 0}
|
|
class="text-center flex flex-col space-y-5 items-center justify-center text-gray-400 h-full"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-24 w-24"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 12h6l-6 8h6" /><path d="M14 4h6l-6 8h6" />
|
|
</svg>
|
|
|
|
<p class="text-lg">
|
|
<span :if={@event.presentation_file.length > 0}>
|
|
<%= gettext("This slide does not have any interactions.") %>
|
|
</span>
|
|
<span :if={@event.presentation_file.length == 0}>
|
|
<%= gettext("Create your first interaction.") %>
|
|
</span>
|
|
</p>
|
|
|
|
<button
|
|
class="flex items-center justify-center gap-x-2 px-3 py-2 text-white bg-primary-500 hover:bg-primary-600 rounded-md"
|
|
phx-click={toggle_add_modal()}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
|
</svg>
|
|
<span><%= gettext("Add interaction") %></span>
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 gap-4 p-4 overflow-y-auto">
|
|
<%= for interaction <- @interactions do %>
|
|
<div class="bg-white rounded-lg p-3 shadow-base transition-all flex flex-col justify-between relative">
|
|
<div
|
|
phx-hook="Dropdown"
|
|
id={"poll-settings-#{interaction.id}"}
|
|
class="hidden bg-white z-20 absolute text-sm w-full h-full top-0 left-0 p-3 rounded-lg overflow-y-auto"
|
|
>
|
|
<ul class="flex flex-col gap-y-2">
|
|
<li>
|
|
<button
|
|
phx-click="checked"
|
|
phx-value-key="poll_visible"
|
|
value={"#{!@state.poll_visible}"}
|
|
class="py-2 px-2 rounded text-gray-600 bg-gray-100 hover:bg-gray-200 flex justify-center items-center w-full gap-x-3"
|
|
>
|
|
<svg
|
|
:if={@state.poll_visible}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-6 w-6"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4h1m4 0h13" /><path d="M4 4v10a2 2 0 0 0 2 2h10m3.42 -.592c.359 -.362 .58 -.859 .58 -1.408v-10" /><path d="M12 16v4" /><path d="M9 20h6" /><path d="M8 12l2 -2m4 0l2 -2" /><path d="M3 3l18 18" />
|
|
</svg>
|
|
|
|
<svg
|
|
:if={!@state.poll_visible}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-6 w-6"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4l18 0" /><path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" /><path d="M12 16l0 4" /><path d="M9 20l6 0" /><path d="M8 12l3 -3l2 2l3 -3" />
|
|
</svg>
|
|
|
|
<span :if={@state.poll_visible}>
|
|
<%= gettext("Hide on presentation") %>
|
|
</span>
|
|
<span :if={!@state.poll_visible}>
|
|
<%= gettext("Show on presentation") %>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<%= case interaction do %>
|
|
<% %Claper.Polls.Poll{} -> %>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center w-full">
|
|
<div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold"><%= gettext("Poll") %></span>
|
|
</div>
|
|
|
|
<a
|
|
class="p-2 rounded text-xs font-medium text-center text-primary-500"
|
|
data-phx-link="patch"
|
|
data-phx-link-state="push"
|
|
href={~p"/e/#{@event.code}/manage/edit/poll/#{interaction.id}"}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<% %Claper.Forms.Form{} -> %>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center w-full">
|
|
<div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold"><%= gettext("Form") %></span>
|
|
</div>
|
|
<a
|
|
class="p-2 rounded text-xs font-medium text-center text-primary-500"
|
|
data-phx-link="patch"
|
|
data-phx-link-state="push"
|
|
href={~p"/e/#{@event.code}/manage/edit/form/#{interaction.id}"}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<% %Claper.Embeds.Embed{} -> %>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center w-full">
|
|
<div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 mr-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold">
|
|
<%= gettext("Web content") %>
|
|
</span>
|
|
</div>
|
|
<a
|
|
class="p-2 rounded text-xs font-medium text-center text-primary-500"
|
|
data-phx-link="patch"
|
|
data-phx-link-state="push"
|
|
href={
|
|
case interaction do
|
|
%Claper.Polls.Poll{} ->
|
|
~p"/e/#{@event.code}/manage/edit/poll/#{interaction.id}"
|
|
|
|
%Claper.Forms.Form{} ->
|
|
~p"/e/#{@event.code}/manage/edit/form/#{interaction.id}"
|
|
|
|
%Claper.Embeds.Embed{} ->
|
|
~p"/e/#{@event.code}/manage/edit/embed/#{interaction.id}"
|
|
|
|
_ ->
|
|
"#"
|
|
end
|
|
}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<% _ -> %>
|
|
<!-- Handle any other types of interactions here if needed -->
|
|
<% end %>
|
|
<div class="text-sm mb-4 flex gap-x-2 items-center">
|
|
<%= case interaction do %>
|
|
<% %Claper.Embeds.Embed{} -> %>
|
|
<%= case(interaction.provider) do %>
|
|
<% "youtube" -> %>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5"
|
|
viewBox="0 0 28.57 20"
|
|
>
|
|
<svg viewBox="0 0 28.57 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M27.973 3.123A3.578 3.578 0 0 0 25.447.597C23.22 0 14.285 0 14.285 0S5.35 0 3.123.597A3.578 3.578 0 0 0 .597 3.123C0 5.35 0 10 0 10s0 4.65.597 6.877a3.578 3.578 0 0 0 2.526 2.526C5.35 20 14.285 20 14.285 20s8.935 0 11.162-.597a3.578 3.578 0 0 0 2.526-2.526C28.57 14.65 28.57 10 28.57 10s-.002-4.65-.597-6.877Z"
|
|
fill="red"
|
|
/>
|
|
<path
|
|
d="M11.425 14.285 18.848 10l-7.423-4.285v8.57Z"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
</svg>
|
|
<% "vimeo" -> %>
|
|
<svg
|
|
class="h-5"
|
|
style="fill:#1ab7ea"
|
|
viewBox="0 0 32 32"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M31.969 8.552c-.141 3.12-2.319 7.396-6.527 12.812-4.355 5.667-8.031 8.496-11.052 8.496-1.88 0-3.437-1.724-4.74-5.172l-2.557-9.491c-.957-3.443-1.979-5.167-3.077-5.167-.24 0-1.079.5-2.511 1.505L0 9.592a408.153 408.153 0 0 0 4.667-4.167c2.104-1.828 3.688-2.781 4.74-2.88 2.489-.24 4.02 1.469 4.599 5.115.62 3.937 1.047 6.385 1.292 7.344.719 3.265 1.509 4.901 2.369 4.901.667 0 1.672-1.063 3.021-3.183 1.339-2.12 2.052-3.729 2.145-4.839.193-1.823-.527-2.745-2.151-2.745-.765 0-1.557.163-2.371.521 1.584-5.156 4.579-7.677 9.016-7.516 3.297.079 4.839 2.219 4.656 6.396z" />
|
|
</svg>
|
|
<% "canva" -> %>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 1900 1900"
|
|
class="h-5"
|
|
>
|
|
<circle cx="950" cy="950" r="950" fill="#7D2AE7" />
|
|
<circle cx="950" cy="950" r="950" fill="url(#a)" />
|
|
<circle cx="950" cy="950" r="950" fill="url(#b)" />
|
|
<circle cx="950" cy="950" r="950" fill="url(#c)" />
|
|
<circle cx="950" cy="950" r="950" fill="url(#d)" />
|
|
<path
|
|
fill="#fff"
|
|
d="M1360.14 1144.88c-7.84 0-14.74 6.62-21.92 21.08-81.08 164.41-221.12 280.74-383.174 280.74-187.38 0-303.419-169.15-303.419-402.83 0-395.834 220.548-624.697 414.263-624.697 90.52 0 145.8 56.885 145.8 147.41 0 107.439-61.04 164.324-61.04 202.216 0 17.009 10.58 27.308 31.56 27.308 84.29 0 183.22-96.855 183.22-233.682 0-132.669-115.47-230.186-309.18-230.186-320.145 0-604.665 296.804-604.665 707.471 0 317.88 181.522 527.94 461.601 527.94 297.274 0 469.164-295.77 469.164-391.77 0-21.26-10.87-31-22.21-31Z"
|
|
/>
|
|
<defs>
|
|
<radialGradient
|
|
id="a"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientTransform="rotate(-49.416 2013.483 443.185) scale(1469.49)"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#6420FF" />
|
|
<stop offset="1" stop-color="#6420FF" stop-opacity="0" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="b"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientTransform="rotate(54.703 42.717 594.194) scale(1657.12)"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#00C4CC" />
|
|
<stop offset="1" stop-color="#00C4CC" stop-opacity="0" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="c"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientTransform="matrix(1023.00018 -1030.00171 473.71139 470.4913 367 1684)"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#6420FF" />
|
|
<stop offset="1" stop-color="#6420FF" stop-opacity="0" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="d"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientTransform="matrix(595.99869 1371.99953 -2298.40601 998.43108 777 256)"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#00C4CC" stop-opacity=".726" />
|
|
<stop offset="0" stop-color="#00C4CC" />
|
|
<stop offset="1" stop-color="#00C4CC" stop-opacity="0" />
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
<% "googleslides" -> %>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 64 88"
|
|
xml:space="preserve"
|
|
class="h-5"
|
|
>
|
|
<path
|
|
d="M58 88H6c-3.3 0-6-2.7-6-6V6c0-3.3 2.7-6 6-6h36l22 22v60c0 3.3-2.7 6-6 6z"
|
|
fill="#f8bf08"
|
|
/>
|
|
<path d="m42 0 22 22H42V0z" fill="#f59307" />
|
|
<path
|
|
d="M12 34.5v28h40v-28H12zm35 23H17v-18h30v18z"
|
|
fill="#fdffff"
|
|
/>
|
|
</svg>
|
|
<% _ -> %>
|
|
<% end %>
|
|
<% _ -> %>
|
|
<% end %>
|
|
<span><%= interaction.title %></span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<%= if interaction.enabled do %>
|
|
<div class="flex gap-2">
|
|
<button
|
|
phx-click={
|
|
case interaction do
|
|
%Claper.Polls.Poll{} -> "poll-set-inactive"
|
|
%Claper.Forms.Form{} -> "form-set-inactive"
|
|
%Claper.Embeds.Embed{} -> "embed-set-inactive"
|
|
_ -> ""
|
|
end
|
|
}
|
|
phx-value-id={interaction.id}
|
|
class="bg-supporting-red-100 text-supporting-red-800 px-2 py-2 rounded text-sm font-medium w-full"
|
|
>
|
|
<%= gettext("Disable") %>
|
|
</button>
|
|
<div
|
|
:if={
|
|
case interaction do
|
|
%Claper.Polls.Poll{} -> true
|
|
_ -> false
|
|
end
|
|
}
|
|
class="w-full flex-1 relative"
|
|
>
|
|
<button
|
|
phx-click-away={JS.hide(to: "#poll-settings-#{interaction.id}")}
|
|
phx-click={JS.toggle(to: "#poll-settings-#{interaction.id}")}
|
|
class="bg-gray-100 text-gray-800 px-2 py-2 rounded text-sm font-medium relative"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="h-5 w-5"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<button
|
|
phx-click={
|
|
case interaction do
|
|
%Claper.Polls.Poll{} -> "poll-set-active"
|
|
%Claper.Forms.Form{} -> "form-set-active"
|
|
%Claper.Embeds.Embed{} -> "embed-set-active"
|
|
_ -> ""
|
|
end
|
|
}
|
|
phx-value-id={interaction.id}
|
|
class="bg-primary-100 text-primary-800 px-2 py-2 rounded text-sm font-medium w-full"
|
|
>
|
|
<%= gettext("Enable") %>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<button
|
|
:if={length(@interactions) > 0}
|
|
phx-click={toggle_add_modal()}
|
|
class="
|
|
bg-white @container rounded-lg p-3 shadow-base transition-all flex flex-col justify-center items-center transform hover:scale-105"
|
|
>
|
|
<img src="/images/interaction-icons.png" class="w-2/3 @sm:w-1/3" />
|
|
<span class="font-semibold text-secondary-800">Add interaction</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="hidden md:block gutter-1 row-span-full cursor-col-resize col-[2] bg-gray-50 text-center text-gray-300 text-sm leading-3"
|
|
style="writing-mode: vertical-rl"
|
|
>
|
|
•••
|
|
</div>
|
|
|
|
<div
|
|
id="ugc"
|
|
phx-hook="Split"
|
|
data-gutter=".gutter-2"
|
|
data-type="row"
|
|
class="md:grid grid-rows-[1fr_10px_1fr] overflow-y-auto"
|
|
>
|
|
<div
|
|
class="bg-gray-200 border-2 overflow-auto relative grid grid-rows-[auto_1fr] h-full w-full"
|
|
data-tg-title={"#{gettext("Attendees interactions")}"}
|
|
data-tg-order="2"
|
|
data-tg-tour={"<p class='mb-3'>#{gettext("Here you'll find all interactions from your attendees. You can manage messages, pinned messages, and submitted forms.")}</p><p class='opacity-50 text-xs'>#{gettext("Identify users by their unique avatars.")}</p>"}
|
|
data-tg-group="manage"
|
|
>
|
|
<ul
|
|
id="menu"
|
|
phx-update="replace"
|
|
class="flex flex-col md:flex-row md:flex items-center bg-gray-200 space-y-2 md:space-y-0 space-x-0 md:space-x-3 px-2 w-full py-3"
|
|
>
|
|
<li class={"rounded-md #{if @list_tab==:posts, do: "bg-secondary-600 text-white" ,
|
|
else: "bg-white text-gray-600" } px-2 py-0.5 text-sm shadow-sm"}>
|
|
<%= link(gettext("Messages") <> " (#{@post_count})",
|
|
to: "#",
|
|
phx_click: "list-tab",
|
|
phx_value_tab: :posts
|
|
) %>
|
|
</li>
|
|
<li class={"rounded-md #{if @list_tab==:questions, do: "bg-secondary-600 text-white" ,
|
|
else: "bg-white text-gray-600" } px-2 py-0.5 text-sm shadow-sm"}>
|
|
<%= link(gettext("Questions") <> " (#{@question_count})",
|
|
to: "#",
|
|
phx_click: "list-tab",
|
|
phx_value_tab: :questions
|
|
) %>
|
|
</li>
|
|
<li class={"rounded-md #{if @list_tab==:pinned_posts, do: "bg-secondary-600 text-white" ,
|
|
else: "bg-white text-gray-600" } px-2 py-0.5 text-sm shadow-sm"}>
|
|
<%= link(gettext("Pinned messages") <> " (#{@pinned_post_count})",
|
|
to: "#",
|
|
phx_click: "list-tab",
|
|
phx_value_tab: :pinned_posts
|
|
) %>
|
|
</li>
|
|
<li class={"rounded-md #{if @list_tab==:forms, do: "bg-secondary-600 text-white" ,
|
|
else: "bg-white text-gray-600" } px-2 py-0.5 text-sm shadow-sm"}>
|
|
<%= link(gettext("Form submissions") <> " (#{@form_submit_count})",
|
|
to: "#",
|
|
phx_click: "list-tab",
|
|
phx_value_tab: :forms
|
|
) %>
|
|
</li>
|
|
</ul>
|
|
|
|
<%= if @list_tab == :posts do %>
|
|
<div
|
|
:if={@post_count == 0}
|
|
class="text-center flex flex-col space-y-5 items-center justify-center text-gray-400"
|
|
style="height: 100%;"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-36 w-36"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
|
|
/>
|
|
</svg>
|
|
|
|
<p class="text-lg">
|
|
<%= gettext("Messages from attendees will appear here.") %>
|
|
</p>
|
|
</div>
|
|
<div
|
|
:if={@post_count > 0}
|
|
id="post-list"
|
|
class="overflow-y-auto pb-5 px-3"
|
|
phx-update="stream"
|
|
phx-hook="ScrollIntoDiv"
|
|
>
|
|
<.live_component
|
|
:for={{id, post} <- @streams.posts}
|
|
module={ClaperWeb.EventLive.ManageablePostComponent}
|
|
id={id}
|
|
event={@event}
|
|
post={post}
|
|
/>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @list_tab == :questions do %>
|
|
<div
|
|
:if={@question_count == 0}
|
|
class="text-center flex flex-col space-y-5 items-center justify-center text-gray-400 h-full"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-36 h-36"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
|
|
/>
|
|
</svg>
|
|
|
|
<p class="text-lg">
|
|
<%= gettext("Questions will appear here.") %>
|
|
</p>
|
|
</div>
|
|
|
|
<div :if={@question_count > 0} class="overflow-y-auto max-h-full">
|
|
<div class="px-5 w-full flex items-center gap-x-2">
|
|
<button
|
|
class="bg-gray-300 text-gray-700 rounded-md px-3 py-1 flex items-center gap-x-1"
|
|
phx-click="sort-questions"
|
|
phx-value-sort="likes"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path d="M2.09 15a1 1 0 0 0 1-1V8a1 1 0 1 0-2 0v6a1 1 0 0 0 1 1ZM5.765 13H4.09V8c.663 0 1.218-.466 1.556-1.037a4.02 4.02 0 0 1 1.358-1.377c.478-.292.907-.706.989-1.26V4.32a9.03 9.03 0 0 0 0-2.642c-.028-.194.048-.394.224-.479A2 2 0 0 1 11.09 3c0 .812-.08 1.605-.235 2.371a.521.521 0 0 0 .502.629h1.733c1.104 0 2.01.898 1.901 1.997a19.831 19.831 0 0 1-1.081 4.788c-.27.747-.998 1.215-1.793 1.215H9.414c-.215 0-.428-.035-.632-.103l-2.384-.794A2.002 2.002 0 0 0 5.765 13Z" />
|
|
</svg>
|
|
|
|
<p class="flex items-center gap-x-1">
|
|
<%= gettext("Sort by popularity") %>
|
|
</p>
|
|
</button>
|
|
<button
|
|
class="bg-gray-300 text-gray-700 rounded-md px-3 py-1 flex items-center gap-x-1"
|
|
phx-click="sort-questions"
|
|
phx-value-sort="date"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
|
|
<span><%= gettext("Sort by date") %></span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="question-list"
|
|
class="overflow-y-auto pb-5 px-3"
|
|
phx-update="stream"
|
|
phx-hook="ScrollIntoDiv"
|
|
>
|
|
<.live_component
|
|
:for={{id, post} <- @streams.questions}
|
|
module={ClaperWeb.EventLive.ManageablePostComponent}
|
|
id={id}
|
|
event={@event}
|
|
post={post}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @list_tab == :pinned_posts do %>
|
|
<div
|
|
:if={@pinned_post_count == 0}
|
|
class="text-center flex flex-col space-y-5 items-center justify-center text-gray-400 h-full"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-36 w-36"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" /><path d="M9 15l-4.5 4.5" /><path d="M14.5 4l5.5 5.5" />
|
|
</svg>
|
|
|
|
<p class="text-lg">
|
|
<%= gettext("Pinned messages will appear here.") %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="overflow-y-auto max-h-full">
|
|
<div
|
|
:if={@pinned_post_count > 0}
|
|
id="pinned-post-list"
|
|
class="overflow-y-auto pb-5 px-3"
|
|
phx-update="stream"
|
|
phx-hook="ScrollIntoDiv"
|
|
>
|
|
<.live_component
|
|
:for={{id, post} <- @streams.pinned_posts}
|
|
module={ClaperWeb.EventLive.ManageablePostComponent}
|
|
id={id}
|
|
event={@event}
|
|
post={post}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @list_tab == :forms do %>
|
|
<%= if @form_submit_count == 0 do %>
|
|
<div class="text-center h-full flex flex-col space-y-5 items-center justify-center text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-36 w-36"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path>
|
|
<path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path>
|
|
<path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path>
|
|
<path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path>
|
|
<path d="M17 12h.01"></path>
|
|
<path d="M13 12h.01"></path>
|
|
</svg>
|
|
|
|
<p class="text-lg">
|
|
<%= gettext("Form submissions from attendees will appear here.") %>
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
<div
|
|
id="form-list"
|
|
class="overflow-y-auto max-h-full pb-5 px-3"
|
|
phx-update="stream"
|
|
data-forms-nb={@form_submit_count}
|
|
phx-hook="ScrollIntoDiv"
|
|
>
|
|
<div :for={{id, submission} <- @streams.form_submits} id={id}>
|
|
<div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white relative shadow-md text-black break-all mt-2">
|
|
<div class="float-right mr-1">
|
|
<span class="text-red-500">
|
|
<%= link(gettext("Delete"),
|
|
to: "#",
|
|
phx_click: "delete-form-submit",
|
|
phx_value_id: submission.id,
|
|
phx_value_event_id: @event.uuid,
|
|
data: [confirm: gettext("This cannot be undone, confirm ?")]
|
|
) %>
|
|
</span>
|
|
</div>
|
|
|
|
<p>
|
|
<span class="font-semibold text-lg">
|
|
<%= gettext("Form") %>
|
|
</span>: <%= submission.form.title %>
|
|
</p>
|
|
|
|
<div class="flex space-x-3 items-center">
|
|
<%= if submission.attendee_identifier do %>
|
|
<img
|
|
class="h-8 w-8"
|
|
src={"https://api.dicebear.com/7.x/personas/svg?seed=#{submission.attendee_identifier}"}
|
|
/>
|
|
<% else %>
|
|
<img
|
|
class="h-8 w-8"
|
|
src={"https://api.dicebear.com/7.x/personas/svg?seed=#{submission.user_id}"}
|
|
/>
|
|
<% end %>
|
|
|
|
<div>
|
|
<%= for res <- submission.response do %>
|
|
<p>
|
|
<strong>
|
|
<%= elem(res, 0) %>:
|
|
</strong>
|
|
<%= elem(res, 1) %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="hidden md:block gutter-2 col-span-full cursor-row-resize z-20 row-[2] bg-gray-50 text-center text-gray-300 text-sm leading-3">
|
|
•••
|
|
</div>
|
|
|
|
<div
|
|
class="hidden md:block px-5 py-3 z-20 bg-white @container"
|
|
data-tg-title={"#{gettext("Settings")}"}
|
|
data-tg-order="3"
|
|
data-tg-tour={"<p class='mb-3'>#{gettext("You can control each setting for the presentation (showing on the big screen) and on the attendee's room.")}</p><p class='opacity-50 text-xs'>#{gettext("Use the associated keyboard shortcuts for quick toggling of these settings.")}</p>"}
|
|
data-tg-group="manage"
|
|
>
|
|
<.live_component
|
|
id="settings-pane"
|
|
module={ClaperWeb.EventLive.ManagerSettingsComponent}
|
|
create={@create}
|
|
state={@state}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|