100 lines
2.9 KiB
Django/Jinja
100 lines
2.9 KiB
Django/Jinja
{% extends 'layout.html.j2' %}
|
|
{% block content %}
|
|
<h1>{{ feed.name }}</h1>
|
|
<a href="/admin/{{ id }}/edit">Edit</a>
|
|
<h2>Info</h2>
|
|
<p><b>Description:</b> {{ feed.description }}</p>
|
|
<p>
|
|
Subscribe at:
|
|
</p>
|
|
<pre><code>{{ feed_uri }}</code></pre>
|
|
<h2>Upload</h2>
|
|
<div>
|
|
<label for="fileInput">Choose file to upload</label>
|
|
<input type="file" id="fileInput" name="fileInput" onchange="reset()">
|
|
<input type="button" id="submitButton" value="Upload" onclick="go()">
|
|
<p id="response"></p>
|
|
</div>
|
|
<h2>Episodes</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Published</th>
|
|
<th scope="col">Length</th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for episode in feed.episodes %}
|
|
<tr>
|
|
<th scope="row">{{ episode.name }}</th>
|
|
<td>{{ episode.publish_date.strftime("%H:%M %d/%m/%Y") }}</td>
|
|
<td>
|
|
{% if episode.duration %}
|
|
{{ (episode.duration / 60) | round | int }}min
|
|
{% else %}
|
|
?
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<a href="/admin/{{ id }}/{{ episode.id }}/delete">Delete</a>
|
|
<a href="/admin/{{ id }}/{{ episode.id }}/edit">Edit</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<script type="module">
|
|
import HugeUploader from "https://cdn.skypack.dev/huge-uploader";
|
|
|
|
const resp = document.getElementById("response");
|
|
const fileInput = document.getElementById("fileInput");
|
|
const submitButton = document.getElementById("submitButton");
|
|
|
|
window.reset = () => {
|
|
resp.innerHTML = "";
|
|
}
|
|
|
|
function setFormEnabled(enabled) {
|
|
submitButton.disabled = !enabled;
|
|
fileInput.disabled = !enabled;
|
|
}
|
|
|
|
window.go = () => {
|
|
const file = fileInput.files[0];
|
|
if (!file) {
|
|
return
|
|
}
|
|
|
|
setFormEnabled(false);
|
|
|
|
const uploader = new HugeUploader({
|
|
endpoint: "/admin/{{ id }}/upload",
|
|
file: file,
|
|
headers: {
|
|
"name": encodeURI(file.name)
|
|
}
|
|
});
|
|
|
|
uploader.on("error", (err) => {
|
|
console.error("Upload error", err);
|
|
resp.innerHTML = "Something has gone wrong!";
|
|
setFormEnabled(true);
|
|
});
|
|
|
|
uploader.on("progress", (progress) => {
|
|
if (progress.detail == 100) return;
|
|
resp.innerHTML = `Uploading ${progress.detail}%...`;
|
|
});
|
|
|
|
uploader.on("finish", (body) => {
|
|
console.log("Upload complete", body);
|
|
resp.innerHTML = "Upload complete! The episode will be processed in the background. This may take a few minutes but it's safe to navigate away.";
|
|
setFormEnabled(true);
|
|
fileInput.value = "";
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|