arimelody.me/admin/components/tracks/addtrack.html

48 lines
1.3 KiB
HTML
Raw Permalink Normal View History

<dialog id="addtrack">
<header>
<h2>Add track</h2>
</header>
<ul>
{{range $Track := .Tracks}}
</li>
<li class="new-track"
data-id="{{$Track.ID}}"
hx-get="/admin/release/{{$.ReleaseID}}/newtrack/{{$Track.ID}}"
hx-target="#edittracks ul"
hx-swap="beforeend"
>
{{.Title}}
</li>
{{end}}
</ul>
{{if not .Tracks}}
<p class="empty">There are no more tracks to add.</p>
{{end}}
<div class="dialog-actions">
<button id="cancel" type="button">Cancel</button>
</div>
<script type="text/javascript">
(() => {
const newTrackModal = document.getElementById("addtrack")
const editTracksModal = document.getElementById("edittracks")
const cancelBtn = newTrackModal.querySelector("#cancel");
editTracksModal.addEventListener("htmx:afterSwap", () => {
newTrackModal.close();
newTrackModal.remove();
});
cancelBtn.addEventListener("click", () => {
newTrackModal.close();
newTrackModal.remove();
});
newTrackModal.showModal();
})();
</script>
</dialog>