105 lines
3.2 KiB
Plaintext
105 lines
3.2 KiB
Plaintext
package pages
|
|
|
|
import (
|
|
"fmt"
|
|
"git.hafen.run/lukas/timeshare/components/button"
|
|
"git.hafen.run/lukas/timeshare/components/label"
|
|
"git.hafen.run/lukas/timeshare/components/radio"
|
|
"git.hafen.run/lukas/timeshare/components/toast"
|
|
)
|
|
|
|
type Expiry struct {
|
|
DurationCode string
|
|
DurationName string
|
|
}
|
|
|
|
templ Upload(expirations []Expiry, uploadedLink string) {
|
|
@PageSkeleton("Upload - Time Share") {
|
|
if uploadedLink != "" {
|
|
@toast.Toast(toast.Props{
|
|
Title: "Share Created!",
|
|
Description: fmt.Sprintf(`<a class="underline" href="%s">%s</a>`, uploadedLink, uploadedLink),
|
|
Variant: toast.VariantSuccess,
|
|
Duration: 120000, // 2 min
|
|
Position: toast.PositionBottomCenter,
|
|
Dismissible: true,
|
|
Icon: true,
|
|
})
|
|
}
|
|
<div class="flex flex-col p-10 w-full h-screen justify-center items-center">
|
|
<form class="flex flex-col items-center gap-2" method="POST" enctype="multipart/form-data">
|
|
<h1 class="text-3xl font-medium pb-4">Time Share Upload</h1>
|
|
<input type="file" class="hidden" id="files" name="files" multiple/>
|
|
<div class="border-2 border-dashed rounded-xl border-gray-400 flex flex-col justify-center items-center p-10" id="drop_zone">
|
|
<p id="desc" class="w-[39ch] text-center">Drop files onto here or click to upload</p>
|
|
</div>
|
|
<script>
|
|
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();
|
|
})
|
|
drop_zone.addEventListener("drop", function (ev) {
|
|
ev.preventDefault();
|
|
drop_zone.classList.remove('dragover');
|
|
const dt = ev.dataTransfer;
|
|
if (!dt) return
|
|
|
|
const files = Array.from(dt.files); // iterable
|
|
|
|
const newDT = new DataTransfer();
|
|
files.forEach(f => newDT.items.add(f));
|
|
fileInput.files = newDT.files;
|
|
updateDescription(fileInput.files.length)
|
|
});
|
|
drop_zone.addEventListener("dragover", function (e) {
|
|
drop_zone.classList.add('dragover');
|
|
e.preventDefault();
|
|
});
|
|
drop_zone.addEventListener("dragleave", function (e) {
|
|
drop_zone.classList.remove('dragover');
|
|
e.preventDefault();
|
|
});
|
|
</script>
|
|
<style>.dragover {border-color: #00C950;}</style>
|
|
<div class="flex flex-col gap-3 w-full">
|
|
<p>Expiration:</p>
|
|
<div class="pl-2 flex flex-col gap-3">
|
|
for i, expiry := range expirations {
|
|
<div class="flex items-start gap-3">
|
|
@radio.Radio(radio.Props{
|
|
ID: expiry.DurationCode,
|
|
Name: "expiry",
|
|
Value: expiry.DurationCode,
|
|
Checked: i == 0,
|
|
})
|
|
@label.Label(label.Props{
|
|
For: expiry.DurationCode,
|
|
}) {
|
|
{ expiry.DurationName }
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
@button.Button(button.Props{
|
|
Type: "submit",
|
|
}) {
|
|
Upload
|
|
}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
}
|
|
}
|