feat: add download page

pages/share_list.templ

@@ -0,0 +1,143 @@
+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>
+	}
+}

pages/upload.templ

@@ -37,6 +37,16 @@ templ Upload(expirations []Expiry, uploadedLink string) {
 					let drop_zone = document.getElementById("drop_zone");
 					let desc = document.getElementById("desc");
 					let fileInput = document.getElementById("files");
+					function updateDescription(len) {
+						desc.innerText = `${len} File`
+						if (len > 1) {
+							desc.innerText += "s"
+						}
+						desc.innerText += " Attached"
+					}
+					fileInput.addEventListener("change", () => {
+						updateDescription(fileInput.files.length)
+					});
 					drop_zone.addEventListener("click", function (ev) {
 							fileInput.click();
 						})
@@ -51,11 +61,7 @@ templ Upload(expirations []Expiry, uploadedLink string) {
 						const newDT = new DataTransfer();
 						files.forEach(f => newDT.items.add(f));
 						fileInput.files = newDT.files;
-						desc.innerText = `${fileInput.files.length} File`
-						if (fileInput.files.length > 1) {
-							desc.innerText += "s"
-						}
-
+						updateDescription(fileInput.files.length)
 					});
 					drop_zone.addEventListener("dragover", function (e) {
 						drop_zone.classList.add('dragover');