Claper/lib/claper_web/live/stat_live/index.html.heex

<div class="mx-3 md:max-w-3xl lg:max-w-5xl md:mx-auto">
  <div class="border-b border-gray-200 py-4 flex flex-col sm:flex-row sm:items-center justify-between">
    <div class="flex-1 min-w-0">
      <h1 class="text-2xl font-medium leading-6 text-gray-900 sm:truncate">
        <%= @page_title %>
      </h1>
    </div>
    <div class="flex mt-4 space-x-5 sm:mt-0 hidden">
      <!-- future actions -->
    </div>
  </div>

  <div class="mt-12 mb-3">
    <h3 class="text-lg leading-6 font-medium text-gray-900">
      <%= gettext("Event") %>: <%= @event.name %> (#<%= @event.code %>)
    </h3>

    <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-white"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
              />
            </svg>
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">
            <%= gettext("Audience peak") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900">
            <%= @event.audience_peak %>
            <span class="text-xs text-gray-500 font-normal">
              <%= ngettext("attendee", "attendees", @event.audience_peak) %>
            </span>
          </p>
        </dd>
      </div>

      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <!-- Heroicon name: outline/users -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-white"
              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>
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">
            <%= gettext("Messages") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900">
            <%= length(@posts) %>
            <span class="text-xs text-gray-500 font-normal">
              <%= ngettext(
                "from %{count} people",
                "from %{count} peoples",
                @distinct_poster_count
              ) %>
            </span>
          </p>
        </dd>
      </div>

      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <!-- Heroicon name: outline/mail-open -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-white"
              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>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">
            <%= gettext("Average voters") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900">
            <%= @average_voters %>
            <span class="text-xs text-gray-500 font-normal">
              <%= ngettext(
                "from %{count} poll",
                "from %{count} polls",
                length(@event.presentation_file.polls)
              ) %>
            </span>
          </p>
        </dd>
      </div>

      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <!-- Heroicon name: outline/cursor-click -->
            <svg
              class="h-6 w-6 text-white"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
              />
            </svg>
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">
            <%= gettext("Engagement rate") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900"><%= @engagement_rate %>%</p>
        </dd>
      </div>
    </dl>
  </div>

  <div class="pt-5 pb-5">
    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
      <%= gettext("Interactions history") %>
    </h3>
    <%= for position <- 0..max(0, @event.presentation_file.length-1) do %>
      <div class="my-10">
        <%= if @event.presentation_file.length > 0 do %>
          <%= if Application.get_env(:claper, :presentations) |> Keyword.get(:storage) == "local" do %>
            <img
              class="w-1/3 mx-auto"
              src={"/uploads/#{@event.presentation_file.hash}/#{position+1}.jpg"}
            />
          <% else %>
            <img
              class="w-1/2 md:w-1/3 mb-4"
              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}/#{position+1}.jpg"}
            />
          <% end %>
        <% end %>

        <%= for poll <- Enum.filter(@event.presentation_file.polls, fn p -> p.position == position end) do %>
          <% total = Enum.map(poll.poll_opts, fn e -> e.vote_count end) |> Enum.sum() %>
          <div class="bg-black w-full py-3 px-6 my-5 text-black shadow-lg rounded-md">
            <div class="block w-full h-full cursor-pointer">
              <p class="text-white text-lg font-semibold mb-4"><%= poll.title %></p>
            </div>
            <div>
              <div class="flex flex-col space-y-3">
                <%= if (length poll.poll_opts) > 0 do %>
                  <%= for {opt, idx} <- Enum.with_index(poll.poll_opts) do %>
                    <% percentage =
                      if total > 0,
                        do:
                          Float.round(opt.vote_count / total * 100)
                          |> :erlang.float_to_binary(decimals: 0),
                        else: 0 %>
                    <button
                      id={"poll-opt-#{idx}"}
                      class="bg-gray-500 px-3 py-2 rounded-full flex justify-between items-center relative text-white"
                    >
                      <div
                        style={"width: #{percentage}%;"}
                        class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-full #{if percentage == "100", do: 'rounded-r-full'}"}
                      >
                      </div>
                      <div class="flex space-x-3 z-10 text-left">
                        <span class="flex-1"><%= opt.content %></span>
                      </div>
                      <span class="text-sm z-10"><%= percentage %>% (<%= opt.vote_count %>)</span>
                    </button>
                  <% end %>
                <% end %>
              </div>
            </div>
          </div>
        <% end %>

        <% forms = Enum.filter(@event.presentation_file.forms, fn f -> f.position == position end) %>

        <%= for form <- forms do %>
          <span class="text-2xl font-semibold text-gray-900 mb-4">
            <%= gettext("Form") %>: <%= form.title %>
          </span>

          <%= if length(form.form_submits) > 0 do %>
            <%= link to: ~p"/export/#{form.id}", class: "text-xs text-white bg-primary-500 rounded-md px-2 py-0.5", method: :post do %>
              <%= gettext("Export all submissions") %>
            <% end %>
          <% end %>

          <%= if length(form.form_submits) == 0 do %>
            <p class="italic text-gray-500"><%= gettext("No form submission has been sent") %></p>
          <% end %>

          <%= for fs <- form.form_submits do %>
            <div id={"#{fs.id}-form"}>
              <div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white relative shadow-md text-black break-all mt-4">
                <div class="flex space-x-3 items-center">
                  <%= if fs.attendee_identifier do %>
                    <img
                      class="h-8 w-8"
                      src={"https://api.dicebear.com/7.x/personas/svg?seed=#{fs.attendee_identifier}.svg"}
                    />
                  <% else %>
                    <img
                      class="h-8 w-8"
                      src={"https://api.dicebear.com/7.x/personas/svg?seed=#{fs.user_id}.svg"}
                    />
                  <% end %>

                  <div>
                    <%= for res <- fs.response do %>
                      <p><strong><%= elem(res, 0) %>:</strong> <%= elem(res, 1) %></p>
                    <% end %>
                  </div>
                </div>
              </div>
            </div>
          <% end %>
        <% end %>

        <%= for embed <- Enum.filter(@event.presentation_file.embeds , fn e -> e.position == position end) do %>
          <span class="text-2xl font-semibold text-gray-900 mb-4">
            <%= gettext("Web content") %>: <%= embed.title %>
          </span>
          <div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white relative shadow-md text-black break-all mt-4">
            <div class="flex space-x-3 items-center">
              <%= raw(embed.content) %>
            </div>
          </div>
        <% end %>

        <% posts = Enum.filter(@posts, fn p -> p.position == position end) %>

        <span class="text-2xl font-semibold text-gray-900 mb-4">Messages</span>

        <%= if length(posts) == 0 do %>
          <p class="italic text-gray-500"><%= gettext("No messages has been sent") %></p>
        <% end %>

        <div class="h-64 pb-5 px-2 overflow-y-auto">
          <%= for post <- posts do %>
            <div id={"#{post.id}-post"}>
              <div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white relative shadow-md text-black break-all mt-4">
                <div class="flex space-x-3 items-center">
                  <%= if post.attendee_identifier do %>
                    <img
                      class="h-8 w-8"
                      src={"https://api.dicebear.com/7.x/personas/svg?seed=#{post.attendee_identifier}.svg"}
                    />
                  <% else %>
                    <img
                      class="h-8 w-8"
                      src={"https://api.dicebear.com/7.x/personas/svg?seed=#{post.user_id}.svg"}
                    />
                  <% end %>

                  <div class="flex flex-col">
                    <%= if post.name do %>
                      <p class="text-black text-sm font-semibold mr-2"><%= post.name %></p>
                    <% end %>

                    <p class="text-xl"><%= post.body %></p>
                  </div>
                </div>

                <%= if post.like_count > 0 || post.love_count > 0 || post.lol_count > 0 do %>
                  <div class="flex h-6 space-x-2 text-base text-gray-500 pb-3 items-center mt-5">
                    <div class="flex items-center">
                      <%= if post.like_count > 0 do %>
                        <img src="/images/icons/thumb.svg" class="h-4" />
                        <span class="ml-1"><%= post.like_count %></span>
                      <% end %>
                    </div>
                    <div class="flex items-center">
                      <%= if post.love_count > 0 do %>
                        <img src="/images/icons/heart.svg" class="h-4" />
                        <span class="ml-1"><%= post.love_count %></span>
                      <% end %>
                    </div>
                    <div class="flex items-center">
                      <%= if post.lol_count > 0 do %>
                        <img src="/images/icons/laugh.svg" class="h-4" />
                        <span class="ml-1"><%= post.lol_count %></span>
                      <% end %>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>