238 lines
9.0 KiB
Elixir
238 lines
9.0 KiB
Elixir
|
defmodule Rsh26poolWeb.ManageLive do
|
||
|
|
@moduledoc """
|
||
|
|
The owner's management page: rename the room, end voting, and watch results
|
||
|
|
(with vote counts) and participants update in real time. In grouping mode the
|
||
|
|
computed teams are shown once voting has ended.
|
||
|
|
"""
|
||
|
|
use Rsh26poolWeb, :live_view
|
||
|
|
|
||
|
|
alias Rsh26pool.JST
|
||
|
|
alias Rsh26pool.Voting
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def mount(%{"room_number" => number}, _session, socket) do
|
||
|
|
room = number |> Voting.get_room_by_number() |> Voting.ensure_closed()
|
||
|
|
|
||
|
|
if connected?(socket), do: Voting.subscribe(room.id)
|
||
|
|
|
||
|
|
{:ok,
|
||
|
|
socket
|
||
|
|
|> assign(:room, room)
|
||
|
|
|> assign(:participant, socket.assigns.current_participant)
|
||
|
|
|> assign(:page_title, "管理 - #{room.name}")
|
||
|
|
|> assign(:name_form, to_form(Voting.change_room_settings(room)))
|
||
|
|
|> load_state()}
|
||
|
|
end
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def handle_event("rename", %{"room" => params}, socket) do
|
||
|
|
case Voting.update_room_settings(socket.assigns.room, params) do
|
||
|
|
{:ok, room} ->
|
||
|
|
{:noreply,
|
||
|
|
socket
|
||
|
|
|> assign(:room, room)
|
||
|
|
|> assign(:name_form, to_form(Voting.change_room_settings(room)))
|
||
|
|
|> put_flash(:info, "ルーム名を変更しました。")}
|
||
|
|
|
||
|
|
{:error, changeset} ->
|
||
|
|
{:noreply, assign(socket, :name_form, to_form(changeset))}
|
||
|
|
end
|
||
|
|
end
|
||
|
|
|
||
|
|
def handle_event("close", _params, socket) do
|
||
|
|
{:ok, room} = Voting.close_room(socket.assigns.room)
|
||
|
|
|
||
|
|
{:noreply,
|
||
|
|
socket
|
||
|
|
|> assign(:room, room)
|
||
|
|
|> put_flash(:info, "投票を終了しました。")
|
||
|
|
|> load_state()}
|
||
|
|
end
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def handle_info({:voting, :room_updated}, socket) do
|
||
|
|
room =
|
||
|
|
socket.assigns.room.room_number |> Voting.get_room_by_number() |> Voting.ensure_closed()
|
||
|
|
|
||
|
|
{:noreply, socket |> assign(:room, room) |> load_state()}
|
||
|
|
end
|
||
|
|
|
||
|
|
def handle_info({:voting, _event}, socket) do
|
||
|
|
{:noreply, load_state(socket)}
|
||
|
|
end
|
||
|
|
|
||
|
|
## State ---------------------------------------------------------------
|
||
|
|
|
||
|
|
defp load_state(socket) do
|
||
|
|
room = socket.assigns.room
|
||
|
|
open? = Voting.room_open?(room)
|
||
|
|
|
||
|
|
socket
|
||
|
|
|> assign(:open?, open?)
|
||
|
|
|> assign(:results, Voting.results(room))
|
||
|
|
|> assign(:participants, Voting.list_participants(room))
|
||
|
|
|> assign(:grouping, if(not open? and room.grouping_mode, do: Voting.group_assignments(room)))
|
||
|
|
end
|
||
|
|
|
||
|
|
## Render --------------------------------------------------------------
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def render(assigns) do
|
||
|
|
~H"""
|
||
|
|
<Layouts.app flash={@flash} current_participant={@current_participant}>
|
||
|
|
<.header>
|
||
|
|
管理ページ
|
||
|
|
<:subtitle>{@room.name}</:subtitle>
|
||
|
|
<:actions>
|
||
|
|
<span :if={@open?} class="badge badge-success gap-1">
|
||
|
|
<.icon name="hero-hand-raised" class="size-4" /> 投票受付中
|
||
|
|
</span>
|
||
|
|
<span :if={not @open?} class="badge badge-neutral gap-1">
|
||
|
|
<.icon name="hero-lock-closed" class="size-4" /> 終了
|
||
|
|
</span>
|
||
|
|
</:actions>
|
||
|
|
</.header>
|
||
|
|
|
||
|
|
<div class="card bg-base-100 border border-base-200 shadow-sm">
|
||
|
|
<div class="card-body py-4">
|
||
|
|
<p class="text-sm text-base-content/70">参加者に伝えるルーム番号</p>
|
||
|
|
<p class="text-3xl font-mono font-bold tracking-widest">{@room.room_number}</p>
|
||
|
|
<p class="text-sm text-base-content/60">
|
||
|
|
投票ページ：<span class="font-mono">{url(~p"/vote/#{@room.room_number}")}</span>
|
||
|
|
</p>
|
||
|
|
<p :if={@room.closes_at} class="text-sm text-base-content/70 flex items-center gap-1 mt-1">
|
||
|
|
<.icon name="hero-clock" class="size-4" /> 自動終了予定：{JST.format(@room.closes_at)}（日本時間）
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
||
|
|
<div class="card bg-base-100 border border-base-200 shadow-sm">
|
||
|
|
<div class="card-body py-4">
|
||
|
|
<h2 class="card-title text-base">
|
||
|
|
<.icon name="hero-pencil-square" class="size-5" /> ルーム名を変更
|
||
|
|
</h2>
|
||
|
|
<.form for={@name_form} phx-submit="rename" id="rename-form" class="flex flex-col gap-2">
|
||
|
|
<.input field={@name_form[:name]} type="text" />
|
||
|
|
<div class="flex justify-end">
|
||
|
|
<button type="submit" class="btn btn-primary btn-sm">保存</button>
|
||
|
|
</div>
|
||
|
|
</.form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card bg-base-100 border border-base-200 shadow-sm">
|
||
|
|
<div class="card-body py-4">
|
||
|
|
<h2 class="card-title text-base">
|
||
|
|
<.icon name="hero-lock-closed" class="size-5" /> 投票の終了
|
||
|
|
</h2>
|
||
|
|
<%= if @open? do %>
|
||
|
|
<p class="text-sm text-base-content/70">
|
||
|
|
投票を終了すると、参加者は投票できなくなります。 <span :if={@room.grouping_mode}>終了時にグループ分けが行われます。</span>
|
||
|
|
</p>
|
||
|
|
<div class="flex justify-end">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
phx-click="close"
|
||
|
|
data-confirm="投票を終了しますか？この操作は取り消せません。"
|
||
|
|
class="btn btn-error btn-sm"
|
||
|
|
>
|
||
|
|
投票を終了する
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<% else %>
|
||
|
|
<p class="text-sm text-base-content/70">この投票は終了しています。</p>
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2 class="font-semibold mb-2 flex items-center gap-2">
|
||
|
|
<.icon name="hero-trophy" class="size-5 text-warning" /> 現在の結果
|
||
|
|
<span class="badge badge-sm">{length(@results)} 件</span>
|
||
|
|
</h2>
|
||
|
|
<p :if={@results == []} class="text-base-content/60 text-sm">まだ投稿がありません。</p>
|
||
|
|
<ol class="space-y-2">
|
||
|
|
<li
|
||
|
|
:for={{result, index} <- Enum.with_index(@results)}
|
||
|
|
class={[
|
||
|
|
"flex items-center justify-between gap-3 p-3 rounded-box border",
|
||
|
|
index == 0 && @results != [] && "border-warning bg-warning/10",
|
||
|
|
index != 0 && "border-base-200 bg-base-100"
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<div class="flex items-center gap-3 min-w-0">
|
||
|
|
<span class="font-bold text-lg w-6 text-center">{index + 1}</span>
|
||
|
|
<div class="min-w-0">
|
||
|
|
<p class="truncate">{result.idea.text}</p>
|
||
|
|
<p :if={@room.grouping_mode} class="text-xs text-base-content/60">
|
||
|
|
提案者：{result.idea.participant.name}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="badge badge-lg gap-1">
|
||
|
|
<.icon name="hero-hand-thumb-up" class="size-4" /> {result.count}
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div :if={@grouping}>
|
||
|
|
<h2 class="font-semibold mb-2 flex items-center gap-2">
|
||
|
|
<.icon name="hero-user-group" class="size-5 text-primary" /> グループ分けの結果
|
||
|
|
</h2>
|
||
|
|
<p :if={@grouping.groups == []} class="text-base-content/70 text-sm">
|
||
|
|
リーダーになる人が決まりませんでした（十分な票を集めた意見がありません）。
|
||
|
|
</p>
|
||
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
||
|
|
<div
|
||
|
|
:for={group <- @grouping.groups}
|
||
|
|
class="card bg-base-100 border border-base-200 shadow-sm"
|
||
|
|
>
|
||
|
|
<div class="card-body py-4">
|
||
|
|
<h3 class="font-bold flex items-center gap-2">
|
||
|
|
<.icon name="hero-user-group" class="size-5 text-primary" />
|
||
|
|
{group.leader.name} グループ
|
||
|
|
</h3>
|
||
|
|
<p class="text-sm text-base-content/70">テーマ：{group.opinion && group.opinion.text}</p>
|
||
|
|
<ul class="mt-2 space-y-1 text-sm">
|
||
|
|
<li class="flex items-center gap-2 font-semibold">
|
||
|
|
<.icon name="hero-trophy" class="size-4 text-warning" /> {group.leader.name}（リーダー）
|
||
|
|
</li>
|
||
|
|
<li :for={member <- group.members} class="flex items-center gap-2 pl-6">
|
||
|
|
{member.name}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p :if={@grouping.ungrouped != []} class="text-sm text-base-content/60 mt-2">
|
||
|
|
未割り当て：{Enum.map_join(@grouping.ungrouped, "、", & &1.name)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2 class="font-semibold mb-2 flex items-center gap-2">
|
||
|
|
<.icon name="hero-users" class="size-5" /> 参加者
|
||
|
|
<span class="badge badge-sm">{length(@participants)} 人</span>
|
||
|
|
</h2>
|
||
|
|
<div class="flex flex-wrap gap-2">
|
||
|
|
<span
|
||
|
|
:for={p <- @participants}
|
||
|
|
class={[
|
||
|
|
"badge badge-lg",
|
||
|
|
p.role == "owner" && "badge-primary",
|
||
|
|
p.role != "owner" && "badge-ghost"
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
{p.name}
|
||
|
|
<span :if={p.role == "owner"} class="ml-1 text-xs">(オーナー)</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Layouts.app>
|
||
|
|
"""
|
||
|
|
end
|
||
|
|
end
|