vidarchive

queue.html

1	{{define "queue"}}
2	<div class="page-header">
3	<h2>Queue</h2>
4	<div class="actions">
5	<form method="post" action="/queue/clear" class="inline">
6	<button type="submit" class="secondary">Clear All</button>
7	</form>
8	<form method="get" action="/queue" class="inline filter-form">
9	<select name="status">
10	<option value="all" {{if eq .Data.Status "all"}}selected{{end}}>All</option>
11	<option value="queued" {{if eq .Data.Status "queued"}}selected{{end}}>Queued</option>
12	<option value="downloading" {{if eq .Data.Status "downloading"}}selected{{end}}>Active</option>
13	<option value="completed" {{if eq .Data.Status "completed"}}selected{{end}}>Completed</option>
14	<option value="error" {{if eq .Data.Status "error"}}selected{{end}}>Failed</option>
15	<option value="cancelled" {{if eq .Data.Status "cancelled"}}selected{{end}}>Cancelled</option>
16	</select>
17	<select name="sort">
18	<option value="date" {{if eq .Data.SortBy "date"}}selected{{end}}>Date</option>
19	<option value="status" {{if eq .Data.SortBy "status"}}selected{{end}}>Status</option>
20	</select>
21	<button type="submit">Filter</button>
22	</form>
23	</div>
24	</div>
25
26	<div class="queue-list">
27	{{range .Data.Items}}
28	<article class="queue-item {{.Status}}">
29	<a href="/queue/{{.ID}}" class="queue-link" aria-label="View download details"></a>
30	<div class="queue-header">
31	<div class="queue-url">{{.URL}}</div>
32	<div class="queue-status">
33	<span class="status-badge {{.Status}}">{{.Status}}</span>
34	</div>
35	<form method="post" action="/queue/{{.ID}}/delete" class="inline queue-action">
36	<button type="submit" class="small danger">Remove</button>
37	</form>
38	</div>
39	{{if .ErrorMessage.Valid}}
40	<div class="error-message">{{.ErrorMessage.String}}</div>
41	{{end}}
42	<div class="queue-meta">
43	<span>Created: {{.CreatedAt.Format "2006-01-02 15:04"}}</span>
44	{{if .StartedAt.Valid}}
45	<span>Started: {{.StartedAt.Time.Format "2006-01-02 15:04"}}</span>
46	{{end}}
47	</div>
48	</article>
49	{{else}}
50	<div class="empty-state">
51	<p>Queue is empty. <a href="/download">Start a download</a>.</p>
52	</div>
53	{{end}}
54	</div>
55	{{end}}