317 lines
11 KiB
HTML
317 lines
11 KiB
HTML
{{define "stories-panel"}}
|
|
<div class="stories-panel" id="stories-panel">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
"
|
|
>
|
|
<h3 class="panel-title">Stories</h3>
|
|
<div class="sse-indicator">
|
|
<span class="sse-dot"></span>
|
|
<span>Live</span>
|
|
</div>
|
|
</div>
|
|
<div class="stories-list" id="stories-list">
|
|
{{template "stories-list" .}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "stories-list"}} {{range .Stories}} {{$isActive := eq (derefInt
|
|
$.Room.ActiveStoryID) .ID}}
|
|
<div
|
|
class="story-card {{if .Voted}}story-revealed{{end}} {{if $isActive}}story-active{{end}}"
|
|
id="story-{{.ID}}"
|
|
>
|
|
<div class="story-header">
|
|
<span class="story-title">{{.Title}}</span>
|
|
<div class="story-actions">
|
|
{{if $isActive}}
|
|
<span class="story-badge story-badge-active">Active</span>
|
|
{{end}} {{if $.IsOwner}} {{if .Voted}}
|
|
<form
|
|
method="POST"
|
|
action="/rooms/{{$.Room.ID}}/stories/{{.ID}}/unreveal"
|
|
hx-post="/rooms/{{$.Room.ID}}/stories/{{.ID}}/unreveal"
|
|
hx-target="#stories-panel"
|
|
hx-swap="outerHTML"
|
|
class="story-action-form"
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="story-action-btn story-action-btn-toggle"
|
|
title="Hide votes"
|
|
aria-label="Hide votes"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M10.733 5.076A10.744 10.744 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.673 2.68"
|
|
/>
|
|
<path
|
|
d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"
|
|
/>
|
|
<line x1="2" y1="2" x2="22" y2="22" />
|
|
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
{{else}}
|
|
<form
|
|
method="POST"
|
|
action="/rooms/{{$.Room.ID}}/reveal"
|
|
hx-post="/rooms/{{$.Room.ID}}/reveal"
|
|
hx-target="#stories-panel"
|
|
hx-swap="outerHTML"
|
|
class="story-action-form"
|
|
>
|
|
<input type="hidden" name="story_id" value="{{.ID}}" />
|
|
<button
|
|
type="submit"
|
|
class="story-action-btn story-action-btn-toggle"
|
|
title="Reveal votes"
|
|
aria-label="Reveal votes"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
|
|
/>
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
{{end}} {{if not $isActive}}
|
|
<form
|
|
method="POST"
|
|
action="/rooms/{{$.Room.ID}}/active"
|
|
hx-post="/rooms/{{$.Room.ID}}/active"
|
|
hx-target="#stories-panel"
|
|
hx-swap="outerHTML"
|
|
class="story-action-form"
|
|
>
|
|
<input type="hidden" name="story_id" value="{{.ID}}" />
|
|
<button
|
|
type="submit"
|
|
class="story-action-btn story-action-btn-activate"
|
|
title="Set active"
|
|
aria-label="Set active"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polygon points="10 8 16 12 10 16 10 8" />
|
|
<path d="M4 6v12" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
{{end}} {{if $.IsOwner}}
|
|
<form
|
|
method="POST"
|
|
action="/rooms/{{$.Room.ID}}/stories/{{.ID}}/reset"
|
|
hx-post="/rooms/{{$.Room.ID}}/stories/{{.ID}}/reset"
|
|
hx-target="#stories-panel"
|
|
hx-swap="outerHTML"
|
|
class="story-action-form"
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="story-action-btn story-action-btn-reset"
|
|
title="Reset votes"
|
|
aria-label="Reset votes"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M21 2v6h-6" />
|
|
<path d="M3 12a9 9 0 0 1 15.55-6.36L21 8" />
|
|
<path d="M3 22v-6h6" />
|
|
<path d="M21 12a9 9 0 0 1-15.55 6.36L3 16" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<button
|
|
type="button"
|
|
class="story-action-btn"
|
|
hx-get="/rooms/{{$.Room.ID}}/stories/{{.ID}}/edit"
|
|
hx-target="#modal-container"
|
|
hx-swap="innerHTML"
|
|
title="Rename"
|
|
aria-label="Rename story"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M12 20h9" />
|
|
<path
|
|
d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="story-action-btn story-action-delete"
|
|
hx-post="/rooms/{{$.Room.ID}}/stories/{{.ID}}/delete"
|
|
hx-target="#stories-panel"
|
|
hx-swap="outerHTML"
|
|
hx-confirm="Delete this story?"
|
|
title="Delete"
|
|
aria-label="Delete story"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M3 6h18" />
|
|
<path d="M8 6V4h8v2" />
|
|
<path d="M19 6l-1 14H6L5 6" />
|
|
<path d="M10 11v6" />
|
|
<path d="M14 11v6" />
|
|
</svg>
|
|
</button>
|
|
{{end}} {{end}}
|
|
</div>
|
|
</div>
|
|
|
|
{{if $isActive}}
|
|
<div id="vote-area">
|
|
{{template "vote-area" (dict "RoomData" $ "Story" .)}}
|
|
</div>
|
|
{{end}} {{if .Voted}}
|
|
<div class="revealed-votes">
|
|
{{range (index $.StoryVotes .ID)}}
|
|
<div class="revealed-vote">
|
|
<span class="revealed-vote-user">{{.Username}}</span>
|
|
<span class="revealed-vote-value">{{.Value}}</span>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{else}}
|
|
<div class="empty-state">
|
|
<p>No stories yet. Add one to start voting.</p>
|
|
</div>
|
|
{{end}} {{end}}
|
|
|
|
{{define "vote-area"}} {{$data := .RoomData}} {{$story := .Story}} {{$userVote
|
|
:= index $data.UserVotes $story.ID}}
|
|
<div class="vote-form" id="vote-form-{{$story.ID}}">
|
|
{{range scaleToOptions $data.Room.Scale}}
|
|
<button
|
|
type="button"
|
|
hx-post="/rooms/{{$data.Room.ID}}/vote"
|
|
hx-target="#vote-form-{{$story.ID}}"
|
|
hx-swap="outerHTML"
|
|
hx-vals='{"story_id":"{{$story.ID}}","value":"{{.}}"}'
|
|
class="vote-option {{if eq . $userVote}}vote-selected{{end}}"
|
|
>
|
|
{{.}}
|
|
</button>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "members-panel"}}
|
|
<div class="members-panel" id="members-panel">
|
|
<h3 class="panel-title">Members ({{len .Members}})</h3>
|
|
<div class="members-list">
|
|
{{range .Members}}
|
|
<div class="member-row">
|
|
<div
|
|
class="user-avatar"
|
|
style="width: 28px; height: 28px; font-size: 0.7rem"
|
|
>
|
|
{{slice .Username 0 1}}
|
|
</div>
|
|
<span class="member-name">{{.Username}}</span>
|
|
{{if .HasVoted}}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="var(--success-text)"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="margin-left: auto"
|
|
>
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "sse-script"}}
|
|
<script>
|
|
document.addEventListener("htmx:sseOpen", function() {
|
|
document.body.classList.add("sse-connected");
|
|
});
|
|
|
|
document.addEventListener("htmx:sseClose", function() {
|
|
document.body.classList.remove("sse-connected");
|
|
});
|
|
|
|
document.addEventListener("htmx:sseError", function() {
|
|
document.body.classList.remove("sse-connected");
|
|
});
|
|
</script>
|
|
{{end}}
|