blossom-cloudron/public/open-blob-form.js
2024-11-04 16:09:32 +01:00

64 lines
1.7 KiB
JavaScript

import { html, LitElement } from "./lib/lit.min.js";
export class GetBlobForm extends LitElement {
static properties = {
hasBlob: { state: true },
};
createRenderRoot() {
return this;
}
async submit(e) {
e.preventDefault();
const formData = new FormData(e.target);
const sha256 = formData.get("sha256");
this.hasBlob = await fetch("/" + sha256, { method: "HEAD" }).then((res) => res.ok);
if (this.hasBlob) {
window.open("/" + sha256, "_blank");
}
}
renderResults() {
return html`<div class="flex gap-2 flex-col max-h-xl overflow-auto">
${this.blobs.map(
(blob) => html`
<div class="flex gap-2">
<a href=${blob.url} class="hover:underline" target="_blank">${blob.sha256}</a>
</div>
`,
)}
</div>`;
}
renderForm() {
return html`<form class="gap-2" @submit="${this.submit}">
<label class="text-sm font-bold text-gray-500 tracking-wide flex flex-col">
<span class="block">View Blob (sha256)</span>
<div class="flex gap-2">
<input name="sha256" type="text" class="rounded-md border-2 w-full p-2 h-10" required />
<button
type="submit"
class="flex bg-blue-500 text-gray-100 py-2 px-4 rounded-md tracking-wide font-semibold hover:bg-blue-600 cursor-pointer transition ease-in duration-300"
>
Open
</button>
</div>
</label>
${this.hasBlob === false ? html`<p class="text-red-500 mb-4">Blob missing</p>` : null}
</form>`;
}
render() {
if (this.blob) {
return this.renderResults();
}
return this.renderForm();
}
}
customElements.define("get-blob-form", GetBlobForm);