timeshare/pages/share_list.templ
2025-08-30 22:14:57 -07:00

144 lines
3.8 KiB
Plaintext

package pages
import (
"git.hafen.run/lukas/timeshare/components/badge"
"git.hafen.run/lukas/timeshare/components/button"
"git.hafen.run/lukas/timeshare/components/checkbox"
"git.hafen.run/lukas/timeshare/components/icon"
"git.hafen.run/lukas/timeshare/components/table"
"path"
"time"
)
type File struct {
Filename string
Key string
}
templ filetypeIcon(filename string) {
switch path.Ext(filename) {
case ".jpg",".jpeg", ".png",".heic", ".webp", ".avif", ".gif", ".tiff":
@icon.FileImage()
case ".mp3",".flac", ".m4a",".m4b", ".wav", ".midi":
@icon.FileAudio()
case ".mov",".mp4":
@icon.FileVideo()
case ".txt",".md":
@icon.FileText()
case ".zip":
@icon.FileArchive()
case ".xlsx", ".csv":
@icon.FileSpreadsheet()
case ".pdf", ".docx", ".doc":
@icon.FileText()
case ".epub":
@icon.BookMarked()
case ".stl", ".3mf", ".step":
@icon.FileAxis3d()
case ".json":
@icon.FileJson()
default:
@icon.File()
}
}
templ ListShareContents(expires time.Time, shareid string, files []File) {
@PageSkeleton("Download - Time Share") {
<div class="flex flex-col p-10 w-full">
<div class="flex justify-between">
<div class="sm:flex gap-2 items-center">
<h1 class="text-2xl">Download from Share</h1>
@badge.Badge(badge.Props{
Class: "flex gap-2 items-center dark:text-white",
}) {
@icon.Timer()
{ expires.Format("03:04PM Jan 2") }
}
</div>
<a href={ "/download/" + shareid + "/zip" } id="download-link">
@button.Button(button.Props{ID: "download-button"}) {
@icon.FolderDown()
Download All
}
</a>
</div>
<div class="flex flex-col justify-center items-center">
<div class="w-full md:w-3/4">
@table.Table() {
@table.Header() {
@table.Row() {
@table.Head()
@table.Head() {
Filename
}
}
}
@table.Body() {
for _, file := range files {
@table.Row() {
@table.Cell(table.CellProps{Class: "w-2"}) {
@checkbox.Checkbox(checkbox.Props{
Name: file.Key,
Value: file.Key,
})
}
@table.Cell() {
<span class="flex gap-2 items-center">
@filetypeIcon(file.Filename)
{ file.Filename }
</span>
}
}
}
}
}
</div>
</div>
</div>
<script>
let checkedIds = [];
let downloadButton;
let downloadLink;
let downloadLinkZip;
let downloadIcon;
let share_id;
window.onload = () => {
downloadButton = document.querySelector("#download-button");
downloadLink = document.querySelector("#download-link");
downloadLinkZip = document.querySelector("#download-link").href;
downloadIcon = downloadLink.querySelector("svg").outerHTML;
share_id = window.location.pathname;
};
document.querySelectorAll("input[type=checkbox]").forEach(el=>{
el.addEventListener("click", el=>{
checkedIds = Array.from(document.querySelectorAll("input[type=checkbox]:checked").values().map(el=>el.value))
if (checkedIds.length == 0) {
// nothing selected. download all
downloadButton.innerHTML = downloadIcon + "Download All";
downloadLink.href = downloadLinkZip;
downloadButton.onclick = () => {};
} else {
// things selected!
downloadButton.innerHTML = downloadIcon + "Download Selected";
downloadLink.href = "#";
downloadButton.onclick = () => {
let delay = 0;
for (const id of checkedIds) {
console.log(id);
const a = document.createElement("a");
a.href = "/download" + share_id + "/" + id;
document.body.appendChild(a);
setTimeout(() => {
a.click();
a.remove();
}, delay);
delay += 200;
}
};
}
})
})
</script>
}
}