HUGE refactor. working towards web UI

This commit is contained in:
ari melody 2026-06-08 02:49:39 +01:00
parent dd54e8cc49
commit 1f94eecca9
Signed by: ari
GPG key ID: 60B5F0386E3DDB7E
29 changed files with 1669 additions and 162 deletions

18
templates/html/index.html Normal file
View file

@ -0,0 +1,18 @@
{{define "head"}}
<title>Melody VOD Manager</title>
<link rel="stylesheet" href="/style/index.css">
{{end}}
{{define "content"}}
<main>
<h1>Melody VOD Manager</h1>
<a href="/vods">Vods</a>
<p>Templates:</p>
<ul>
<li><a href="/templates/title">Title</a></li>
<li><a href="/templates/description">Description</a></li>
<li><a href="/templates/tags">Tags</a></li>
</ul>
</main>
{{end}}

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{block "head" .}}{{end}}
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/vods">Vods</a>
</nav>
</header>
{{block "content" .}}
<main>
<h1>hello, world!</h1>
<p>
this is a template page.
you probably shouldn't be seeing this!
</p>
</main>
{{end}}
</body>
</html>

View file

@ -0,0 +1,55 @@
{{define "head"}}
<title>Listing "{{.Directory}}" - Melody VOD Manager</title>
<link rel="stylesheet" href="/style/vod-list.css">
{{end}}
{{define "content"}}
<main>
<h1>VODs</h1>
<nav>&rarr; {{range Crumbs .Directory}}<a href="./{{.Path}}">{{.Name}}</a>/{{end}}</nav>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
{{range $VOD := .VODs}}
<tr>
<td>📼</td>
<td><a href="/vods{{$.Directory}}/{{$VOD.Path}}">{{$VOD.Title}}</a></td>
<td>&mdash;</td>
</tr>
{{end}}
{{range $Name := .Directories}}
<tr>
<td>📁</td>
<td><a href="/vods{{$.Directory}}/{{$Name}}">{{$Name}}</a></td>
<td>&mdash;</td>
</tr>
{{end}}
{{range $File := .Files}}
<tr>
<td>📄</td>
<td><a href="/vods{{$.Directory}}/{{$File.Name}}">{{$File.Name}}</a></td>
<td>{{$File.Size}}</td>
</tr>
{{end}}
</tbody>
</table>
<h2>Actions</h2>
<div class="actions">
<p>
<a href="/vods{{.Directory}}?init=true">Initialise as VOD Directory</a>
&mdash; Create a <code>metadata.toml</code> file here, initialising this directory as a VOD.
</p>
</div>
</main>
{{end}}

72
templates/html/vod.html Normal file
View file

@ -0,0 +1,72 @@
{{define "head"}}
<title>{{.Title}}</title>
<link rel="stylesheet" href="/style/vod.css">
{{end}}
{{define "content"}}
<main>
<h1>VOD Details</h1>
<nav>&rarr; {{range Crumbs .Directory}}<a href="./{{.Path}}">{{.Name}}</a>/{{end}}</nav>
<form method="POST">
<div class="metadata-top">
<div>
<label for="title">Title</label>
<input type="text" name="title" value="{{.Title}}" />
</div>
<div>
<label for="part">Part</label>
<input type="number" min="0" name="part" value="{{.Part}}" />
</div>
<div>
<label for="date">Date</label>
<input type="date" name="date" value="{{FormatTime .Date "2006-01-02"}}" />
</div>
</div>
<p>Formatted Title: <strong>{{.TitleFormatted}}</strong></p>
<p>Uploaded: <span id="upload-state">{{if .Uploaded}}Yes{{else}}No{{end}}</span></p>
<p>Tags:</p>
<ul>
{{range .Tags}}
<li><code>{{.}}</code></li>
{{end}}
</ul>
<p>Category:</p>
<blockquote>
<label for="category-enabled">Enabled</label>
<input type="checkbox" name="category-enabled" {{if .Category}}checked{{end}} />
<label for="category-name">Name</label>
<input type="text" name="category-name" value="{{if ne .Category nil}}{{.Category.Name}}{{end}}" />
<label for="category-type">Type</label>
<select name="category-type">
<option value="entertainment" {{if ne .Category nil}}{{if eq .Category.Type "entertainment"}}selected{{end}}{{end}}>Entertainment</option>
<option value="gaming" {{if ne .Category nil}}{{if eq .Category.Type "gaming"}}selected{{end}}{{end}}>Gaming</option>
</select>
<label for="category-url">URL</label>
<input type="text" name="category-url" value="{{if ne .Category nil}}{{.Category.Url}}{{end}}" />
</blockquote>
<p>Formatted Description:</p>
<p><pre class="description">{{.DescriptionFormatted}}</pre></p>
<button type="submit">Save</button>
</form>
<hr>
<p>Footage Directory: <code>"{{.FootageDir}}"</code></p>
<p>Footage Blocks:</p>
<ul>
{{range .Footage}}
<li><code>{{.Name}} ({{.Size}})</code></li>
{{end}}
</ul>
</main>
<script type="module" src="/script/vod.js" defer></script>
{{end}}