64 lines
1.7 KiB
JavaScript
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);
|