Fetch Cítov items from rhinventory API

src/lib/AssetBox.svelte

@@ -16,9 +16,11 @@
             </div>
             <p>{@html data.description}</p>
         </div>
-        <div class="asset-photo">
-            <img src="{ data.picture.url }" class="asset-img" alt="">
-        </div>
+        {#if data.picture.url}
+            <div class="asset-photo">
+                <img src="{ data.picture.url }" class="asset-img" alt="">
+            </div>
+        {/if}
     </div>
 </Box>
 

src/lib/InterviewBox.svelte

@@ -4,7 +4,7 @@
 
     interface Props {
         data: InterviewData;
-        compact: boolean;
+        compact?: boolean;
     }
 
     let { data, compact=false }: Props = $props();

src/lib/rhinventory_api.ts

@@ -0,0 +1,32 @@
+import type { AssetData } from "$src/types";
+
+type RHInventoryAPIAsset = {
+    id: number;
+    name: string;
+    note: string;
+    primary_image_path: string;
+    primary_document_path: string;
+    primary_dump_path: string;
+}
+
+type RHInventoryAssetsResponse = {
+    assets: RHInventoryAPIAsset[];
+}
+
+export async function loadRHInventoryAssetData(params: {tagId: number, page: number}): Promise<AssetData[]> {
+    // TODO handle page
+    const url = `https://api.inventory.herniarchiv.cz/asset/list-by-tag?tag_id=${params.tagId}`;
+    const response = await fetch(url);
+    const APIAssets = (await response.json()) as RHInventoryAssetsResponse;
+
+    console.log(APIAssets);
+
+    return APIAssets.assets.map(APIAsset => {
+        return {
+            name: APIAsset.name,
+            picture: {url: APIAsset.primary_image_path},
+            description: APIAsset.note,
+            inventory_url: `https://inventory.herniarchiv.cz/asset/${APIAsset.id}` /* TODO use slug */
+        }
+    });
+}

src/routes/+layout.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	export const prerender = true;
-
 	import { lang } from '../stores.js';
 	import Meta from '$lib/Meta.svelte';
 	import Header from '$lib/Header.svelte';

src/routes/projects/atari-klub-citov/+page.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
+	import type { PageData } from './$types';
+
 	import Meta from "$lib/Meta.svelte";
     import type { AssetData, InterviewData } from "$src/types";
     import InterviewBox from "$lib/InterviewBox.svelte";
     import { data as havelka_data } from '$src/routes/interviews/josef-havelka/interview';
-    import { data as asset07859_data } from '$src/routes/assets/asset_07859';
-    import { data as asset07860_data } from '$src/routes/assets/asset_07860';
-    import { data as asset08107_data } from '$src/routes/assets/asset_08107';
-    import { data as asset08077_data } from '$src/routes/assets/asset_08077';
 	import AssetBox from "$src/lib/AssetBox.svelte";
+	import { loadRHInventoryAssetData } from '$src/lib/rhinventory_api';
+
+	let { pageData }: { pageData: PageData } = $props();
 
     let interviews: InterviewData[] = [havelka_data];
-    let assets: AssetData[] = [asset07859_data, asset07860_data, asset08077_data, asset08107_data];
+
+    let assetPage = $state(0);
+    const assetTagId = 16;
+    let assetsPromise: Promise<AssetData[]> = $derived(loadRHInventoryAssetData({tagId: assetTagId, page: assetPage}))
 </script>
 
 <Meta title="Atari klub Cítov" />
@@ -41,13 +45,20 @@
 
     <h3>Rozhovory</h3>
     {#each interviews as data}
-        <InterviewBox {data} />
+        <InterviewBox {data}/>
     {/each}
 
     <h3 id="Predmety">Předměty</h3>
-    <!-- {#each assets as data}
-        <AssetBox {data} />
-    {/each} -->
+
+    {#await assetsPromise }
+        <p><em>Načítá se...</em></p>
+    {:then assets}
+        {#each assets as asset }
+            <AssetBox data={asset} />
+        {/each}
+    {:catch error}
+        <p><em>Chyba při načítání předmětů: {error.message}</em></p>
+    {/await}
 
     <!-- <h3>Články</h3>
     <p><em>Sem přijdou případné články.</em> -->