待ち行列への登録と状態表示を追加（新着からの登録、/queue、DATABASE_URL）

internal/web/templates/layout.html

@@ -20,6 +20,8 @@
   <main>
     {{if .Newer}}
       {{template "newer_page" .Newer}}
+    {{else if .Queue}}
+      {{template "queue_page" .Queue}}
     {{else}}
       <h1>{{.Title}}</h1>
     {{end}}

internal/web/templates/newer.html

@@ -21,7 +21,7 @@
 {{define "newer_results"}}
 <section id="newer-results" aria-label="新着一覧" aria-live="polite">
   {{if .Failed}}
-    <p role="status">新着を取得できませんでした</p>
+    <p role="status">{{.ErrorText}}</p>
   {{else if not .Episodes}}
     <p>表示する新着はありません</p>
   {{else}}
@@ -39,9 +39,31 @@
               <p>配信終了: <time datetime="{{.EndAtISO}}">{{.EndAtText}}</time></p>
             </div>
           </a>
+          {{template "episode_action" .}}
         </article>
       {{end}}
     </div>
   {{end}}
 </section>
 {{end}}
+
+{{define "episode_action"}}
+<div class="episode-action">
+  {{if not .Status}}
+    <form action="/episodes/enqueue" method="post" hx-post="/episodes/enqueue" hx-target="closest .episode-action" hx-swap="outerHTML">
+      <input type="hidden" name="episode_id" value="{{.ID}}">
+      <input type="hidden" name="genre" value="{{.Genre}}">
+      <button type="submit">ダウンロード</button>
+    </form>
+  {{else}}
+    <span role="status">{{.StatusText}}</span>
+    {{if or (eq .Status "failed") (eq .Status "canceled")}}
+      <form action="/episodes/retry" method="post" hx-post="/episodes/retry" hx-target="closest .episode-action" hx-swap="outerHTML">
+        <input type="hidden" name="episode_id" value="{{.ID}}">
+        <input type="hidden" name="genre" value="{{.Genre}}">
+        <button type="submit">再試行</button>
+      </form>
+    {{end}}
+  {{end}}
+</div>
+{{end}}

internal/web/templates/queue.html

@@ -0,0 +1,56 @@
+{{define "queue_page"}}
+<h1>待ち行列</h1>
+{{template "queue_list" .}}
+{{end}}
+
+{{define "queue_list"}}
+<div id="queue-list" {{if .Poll}}hx-get="/queue/list" hx-trigger="every 5s" hx-target="this" hx-swap="outerHTML"{{end}}>
+  <section aria-label="ダウンロード中">
+    <h2>ダウンロード中</h2>
+    {{range .Running}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
+  </section>
+  <section aria-label="待機中">
+    <h2>待機中</h2>
+    {{range .Queued}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
+  </section>
+  <section aria-label="失敗">
+    <h2>失敗</h2>
+    {{range .Failed}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
+  </section>
+  <section aria-label="取り消し">
+    <h2>取り消し</h2>
+    {{range .Canceled}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
+  </section>
+  <section aria-label="完了">
+    <h2>完了（直近50件）</h2>
+    {{range .Succeeded}}{{template "queue_job" .}}{{else}}<p>ありません</p>{{end}}
+  </section>
+</div>
+{{end}}
+
+{{define "queue_job"}}
+<article class="queue-job">
+  <h3>{{.SeriesTitle}} — {{.Title}}</h3>
+  <p>放送局: {{.BroadcasterName}}／登録元: {{.SourceText}}／登録日時: {{.CreatedAtText}}</p>
+  {{if eq .Status "running"}}
+    <p>段階: {{if .PhaseText}}{{.PhaseText}}{{else}}準備中{{end}}
+      {{if .PercentText}}／{{.PercentText}}{{end}}
+      {{if .SpeedText}}／{{.SpeedText}}{{end}}
+      {{if .ETAText}}／{{.ETAText}}{{end}}
+      {{if .FragmentText}}／{{.FragmentText}}{{end}}</p>
+  {{end}}
+  {{if eq .Status "failed"}}
+    <p>失敗理由: {{.ErrorKindText}}</p>
+    {{if .ErrorMessage}}<details><summary>詳細</summary><pre>{{.ErrorMessage}}</pre></details>{{end}}
+  {{end}}
+  {{if eq .Status "queued"}}
+    <form action="/jobs/{{.ID}}/cancel" method="post" hx-post="/jobs/{{.ID}}/cancel" hx-target="#queue-list" hx-swap="outerHTML">
+      <button type="submit">取り消し</button>
+    </form>
+  {{else if or (eq .Status "failed") (eq .Status "canceled")}}
+    <form action="/jobs/{{.ID}}/retry" method="post" hx-post="/jobs/{{.ID}}/retry" hx-target="#queue-list" hx-swap="outerHTML">
+      <button type="submit">再試行</button>
+    </form>
+  {{end}}
+</article>
+{{end}}