1
0
Fork 0
photos/web/manage/src/App.svelte

63 lines
1.3 KiB
Svelte

<script>
import { fetcher, request, listPhotos } from './http.js';
import Gallery from './Gallery.svelte';
import Uploader from './Uploader.svelte';
async function getMetadataTitle() {
const resp = await fetcher(request('GET', 'metadata/title'));
return resp.text();
}
let title = getMetadataTitle();
async function getPhotos() {
const resp = await fetcher(request('GET', listPhotos(10000)));
const text = await resp.text();
const xml = new window.DOMParser().parseFromString(text, "text/xml");
const contents = xml.querySelectorAll('ListBucketResult > Contents');
const photos = [];
contents.forEach(c => {
photos.push(c.querySelector('Key').innerHTML);
});
return photos;
}
let photos = getPhotos();
</script>
<svelte:head>
{#await title then title}
<title>{title}</title>
{:catch error}
<title>Error</title>
{/await}
</svelte:head>
<div>
<nav>
<ul>
<li><a href="..">Gallery</a></li>
</ul>
</nav>
<header>
{#await title}
<h1 class="dim">Loading...</h1>
{:then title}
<h1>{title}</h1>
{:catch error}
<h1 class="dim" title="{error}">Error getting title</h1>
{/await}
</header>
<Uploader />
{#await photos then photos}
<Gallery {photos} />
{:catch error}
<main>Unable to load photos: {error}</main>
{/await}
</div>
<!-- vim: set ft=html: -->