First pass at basic functionality.
This PR introduces the beginnings of Sprint Padawan. Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
{{template "app-head" (dict "Title" "Dashboard" "UseHTMX" true "UseSSE"
|
||||
false)}}
|
||||
<body class="app-body">
|
||||
<div class="app-shell">
|
||||
<div class="main-content">
|
||||
<header class="topbar">
|
||||
<div class="topbar-brand">
|
||||
{{template "brand-mark" .}}
|
||||
<span class="topbar-title">Planning Rooms</span>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<button
|
||||
class="btn-primary topbar-btn"
|
||||
hx-get="/rooms/new"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Room
|
||||
</button>
|
||||
{{template "session-controls" .}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="page-content">
|
||||
<div class="welcome-hero">
|
||||
<p class="welcome-greeting">
|
||||
Welcome back, <span>{{.Username}}</span>
|
||||
</p>
|
||||
<p class="welcome-sub">
|
||||
Create or join a planning room to start estimating.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{if .Rooms}}
|
||||
<div class="rooms-grid">
|
||||
{{range .Rooms}}
|
||||
<div class="room-card">
|
||||
<a href="/rooms/{{.ID}}" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;"></a>
|
||||
<div class="room-header" style="position: relative; z-index: 2; pointer-events: none;">
|
||||
<span class="room-name">{{.Name}}</span>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
pointer-events: auto;
|
||||
"
|
||||
>
|
||||
{{if .IsOwner}}
|
||||
<span
|
||||
class="room-owner-badge"
|
||||
style="
|
||||
position: static;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0.5rem;
|
||||
"
|
||||
>
|
||||
Owner
|
||||
</span>
|
||||
{{end}}
|
||||
<span class="room-code">{{.Code}}</span>
|
||||
{{if .IsOwner}}
|
||||
<button
|
||||
type="button"
|
||||
class="story-action-btn story-action-delete"
|
||||
hx-post="/rooms/{{.ID}}/delete"
|
||||
hx-target="closest .room-card"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete this room?"
|
||||
title="Delete Room"
|
||||
aria-label="Delete Room"
|
||||
>
|
||||
<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}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-meta" style="position: relative; z-index: 2; pointer-events: none;">
|
||||
<span class="room-scale">{{.Scale}}</span>
|
||||
<span class="room-members"
|
||||
>{{.MemberCount}} members</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="empty-state">
|
||||
<p>No rooms yet. Create one to get started.</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
{{define "app-head"}}
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{.Title}} — SprintPadawan</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A lightweight real-time sprint planning tool."
|
||||
/>
|
||||
<meta property="og:title" content="{{.Title}} - SprintPadawan" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A lightweight real-time sprint planning tool."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="/static/img/logo.png" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="{{.Title}} - SprintPadawan" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A lightweight real-time sprint planning tool."
|
||||
/>
|
||||
<meta name="twitter:image" content="/static/img/logo.png" />
|
||||
<meta name="theme-color" content="#6366f1" />
|
||||
<link rel="icon" href="/static/img/favicon.ico" sizes="any" />
|
||||
<link rel="icon" type="image/svg+xml" href="/static/img/logo.webp" />
|
||||
<link rel="apple-touch-icon" href="/static/img/logo.png" />
|
||||
<link rel="stylesheet" href="/static/fonts/fonts.css" />
|
||||
<link rel="stylesheet" href="/static/styles/main.css" />
|
||||
{{if .UseHTMX}}
|
||||
<script src="/static/js/htmx.min.js" defer></script>
|
||||
{{end}} {{if .UseSSE}}
|
||||
<script src="/static/js/sse.js" defer></script>
|
||||
{{end}}
|
||||
</head>
|
||||
{{end}} {{define "auth-head"}}
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{.Title}} — SprintPadawan</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A lightweight web application for agile sprint planning."
|
||||
/>
|
||||
<meta property="og:title" content="{{.Title}} — SprintPadawan" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A lightweight web application for agile sprint planning."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="/static/img/logo.png" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="{{.Title}} — SprintPadawan" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A lightweight web application for agile sprint planning."
|
||||
/>
|
||||
<meta name="twitter:image" content="/static/img/logo.png" />
|
||||
<meta name="theme-color" content="#6366f1" />
|
||||
<link rel="icon" href="/static/img/favicon.ico" sizes="any" />
|
||||
<link rel="icon" type="image/svg+xml" href="/static/img/logo.webp" />
|
||||
<link rel="apple-touch-icon" href="/static/img/logo.png" />
|
||||
<link rel="stylesheet" href="/static/fonts/fonts.css" />
|
||||
<link rel="stylesheet" href="/static/styles/main.css" />
|
||||
</head>
|
||||
{{end}} {{define "brand-mark"}}
|
||||
<a href="/" class="brand-mark">
|
||||
<img
|
||||
src="/static/img/logo.webp"
|
||||
alt="SprintPadawan"
|
||||
height="32"
|
||||
width="32"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</a>
|
||||
{{end}} {{define "session-controls"}}
|
||||
<div class="topbar-user">
|
||||
<div class="user-avatar">{{slice .Username 0 1}}</div>
|
||||
<span class="topbar-user-name">{{.Username}}</span>
|
||||
</div>
|
||||
<form method="POST" action="/logout">
|
||||
<button class="topbar-link-btn" type="submit">Sign Out</button>
|
||||
</form>
|
||||
{{end}}
|
||||
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
{{template "auth-head" (dict "Title" "Sign In")}}
|
||||
<body>
|
||||
<div class="auth-card">
|
||||
<div class="auth-logo">
|
||||
<img
|
||||
src="/static/img/logo.webp"
|
||||
alt="SprintPadawan"
|
||||
height="56"
|
||||
width="56"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<p class="auth-subtitle">Sign in to your account</p>
|
||||
|
||||
{{if .Error}}
|
||||
<div class="form-error">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
{{.Error}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<form class="auth-form" method="POST" action="/login">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="username">Username</label>
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="your username"
|
||||
autocomplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input
|
||||
class="form-input"
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="••••••••"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn-primary" type="submit">Sign In</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-footer">
|
||||
No account? <a href="/register">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
{{template "auth-head" (dict "Title" "Register")}}
|
||||
<body>
|
||||
<div class="auth-card">
|
||||
<div class="auth-logo">
|
||||
<img
|
||||
src="/static/img/logo.webp"
|
||||
alt="SprintPadawan"
|
||||
height="56"
|
||||
width="56"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<p class="auth-subtitle">Create your account</p>
|
||||
|
||||
{{if .Error}}
|
||||
<div class="form-error">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
{{.Error}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<form class="auth-form" method="POST" action="/register">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="username">Username</label>
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="choose a username"
|
||||
autocomplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input
|
||||
class="form-input"
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="••••••••"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="confirm_password"
|
||||
>Confirm Password</label
|
||||
>
|
||||
<input
|
||||
class="form-input"
|
||||
type="password"
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
placeholder="••••••••"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn-primary" type="submit">
|
||||
Create Account
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-footer">
|
||||
Already have an account? <a href="/login">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
{{define "room.html"}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
{{template "app-head" (dict "Title" .Room.Name "UseHTMX" true "UseSSE"
|
||||
true)}}
|
||||
<body class="app-body">
|
||||
<div class="app-shell">
|
||||
<div class="main-content">
|
||||
<header class="topbar">
|
||||
<div class="topbar-brand">
|
||||
{{template "brand-mark" .}}
|
||||
<a href="/" class="back-btn">
|
||||
<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"
|
||||
>
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="topbar-title room-title"
|
||||
>{{.Room.Name}}</span
|
||||
>
|
||||
<span class="room-code-badge">{{.Room.Code}}</span>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<span class="scale-badge">{{.Room.Scale}}</span>
|
||||
{{if .IsOwner}}
|
||||
<button
|
||||
hx-get="/rooms/{{.Room.ID}}/stories/new"
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
class="btn-primary topbar-btn"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Add Story
|
||||
</button>
|
||||
{{end}} {{template "session-controls" .User}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="page-content">
|
||||
<div
|
||||
id="room-stream"
|
||||
class="room-stream"
|
||||
hx-ext="sse"
|
||||
sse-connect="/sse/{{.Room.ID}}"
|
||||
>
|
||||
<div
|
||||
hidden
|
||||
hx-get="/rooms/{{.Room.ID}}/partial/stories"
|
||||
hx-trigger="sse:stories"
|
||||
hx-target="#stories-panel"
|
||||
hx-swap="outerHTML"
|
||||
></div>
|
||||
<div
|
||||
hidden
|
||||
hx-get="/rooms/{{.Room.ID}}/partial/members"
|
||||
hx-trigger="sse:members"
|
||||
hx-target="#members-panel"
|
||||
hx-swap="outerHTML"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="room-layout">
|
||||
{{template "stories-panel" .}} {{template
|
||||
"members-panel" .}}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-container"></div>
|
||||
|
||||
{{template "sse-script"}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,31 @@
|
||||
<div class="modal-overlay" onclick="this.remove()">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h2>Create Room</h2>
|
||||
<button class="modal-close" onclick="this.closest('.modal-overlay').remove()">×</button>
|
||||
</div>
|
||||
<form method="POST" action="/rooms/create" class="auth-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Room Name</label>
|
||||
<input class="form-input" type="text" name="name" placeholder="Sprint Planning" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Voting Scale</label>
|
||||
<select class="form-input" name="scale">
|
||||
<option value="fibonacci">Fibonacci (1, 2, 3, 5, 8, 13, 21, ?)</option>
|
||||
<option value="tshirt">T-Shirt (XS, S, M, L, XL, XXL, ?)</option>
|
||||
<option value="linear">Linear (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ?)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit">Create Room</button>
|
||||
</form>
|
||||
<div class="divider" style="margin: 1.5rem 0"></div>
|
||||
<form method="POST" action="/rooms/join" class="auth-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Or Join Existing</label>
|
||||
<input class="form-input" type="text" name="code" placeholder="Room code" required />
|
||||
</div>
|
||||
<button class="btn-primary" type="submit" style="background: var(--bg-surface); border: 1px solid var(--border);">Join Room</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,316 @@
|
||||
{{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}}
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class="modal-overlay" onclick="this.remove()">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h2>Rename Story</h2>
|
||||
<button
|
||||
class="modal-close"
|
||||
onclick="this.closest('.modal-overlay').remove()"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
method="POST"
|
||||
action="/rooms/{{.RoomID}}/stories/{{.Story.ID}}/rename"
|
||||
hx-post="/rooms/{{.RoomID}}/stories/{{.Story.ID}}/rename"
|
||||
hx-target="#stories-panel"
|
||||
hx-swap="outerHTML"
|
||||
hx-on::after-request="if (event.detail.successful) document.getElementById('modal-container').innerHTML = ''"
|
||||
class="auth-form"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Story Title</label>
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
name="title"
|
||||
value="{{.Story.Title}}"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit">Save Changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class="modal-overlay" onclick="this.remove()">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h2>Add Story</h2>
|
||||
<button
|
||||
class="modal-close"
|
||||
onclick="this.closest('.modal-overlay').remove()"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
method="POST"
|
||||
action="/rooms/{{.ID}}/stories"
|
||||
hx-post="/rooms/{{.ID}}/stories"
|
||||
hx-target="#stories-panel"
|
||||
hx-swap="outerHTML"
|
||||
hx-on::after-request="if (event.detail.successful) document.getElementById('modal-container').innerHTML = ''"
|
||||
class="auth-form"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Story Title</label>
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
name="title"
|
||||
placeholder="e.g. As a user..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button class="btn-primary" type="submit">Add Story</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
{{$userVote := .UserVote}} {{$roomID := .RoomID}} {{$storyID := .Story.ID}}
|
||||
<div class="vote-form" id="vote-form-{{$storyID}}">
|
||||
{{range scaleToOptions .Scale}}
|
||||
<button
|
||||
type="button"
|
||||
hx-post="/rooms/{{$roomID}}/vote"
|
||||
hx-target="#vote-form-{{$storyID}}"
|
||||
hx-swap="outerHTML"
|
||||
hx-vals='{"story_id":"{{$storyID}}","value":"{{.}}"}'
|
||||
class="vote-option {{if eq . $userVote}}vote-selected{{end}}"
|
||||
>
|
||||
{{.}}
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user