june
3c0e9dc0dd
Finally! Using an Astro API Route to handle all the queries which works like a dream. Also created a custom function to get the relative path for image files, fixing any external access issues. Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>
58 lines
1.8 KiB
Plaintext
58 lines
1.8 KiB
Plaintext
---
|
|
import client from "@/data/pocketbase";
|
|
const { class: className, recipe } = Astro.props
|
|
|
|
async function getLink(img: string) {
|
|
const record = await client.collection("images").getOne(img)
|
|
const link = await client.files.getRelativeURL(record, record.image)
|
|
return link
|
|
}
|
|
|
|
// Use Promise.all to wait for all async operations to complete
|
|
const links = await Promise.all(
|
|
recipe.images.map((img: string) => getLink(img))
|
|
)
|
|
|
|
---
|
|
|
|
<script>
|
|
let pos = 0;
|
|
const dataElement = document.getElementById('carousel-data');
|
|
const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
|
|
const cap = links.length - 1;
|
|
const img = document.getElementById('carousel-img') as HTMLImageElement;
|
|
|
|
if (cap == 0) {
|
|
const b0 = document.getElementById('dec-button')
|
|
const b1 = document.getElementById('inc-button')
|
|
|
|
b0!.hidden = true
|
|
b1!.hidden = true
|
|
}
|
|
|
|
function inc() {
|
|
pos = pos === cap ? 0 : pos + 1;
|
|
if (img) img.src = links[pos];
|
|
}
|
|
|
|
function dec() {
|
|
pos = pos === 0 ? cap : pos - 1;
|
|
if (img) img.src = links[pos];
|
|
}
|
|
|
|
// make functions globally accessible
|
|
(window as any).inc = inc;
|
|
(window as any).dec = dec;
|
|
</script>
|
|
|
|
<div class={className}>
|
|
<!-- Hidden element to pass server data to client -->
|
|
<div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
|
|
|
|
<div class="relative flex items-center w-full h-60">
|
|
<button id="dec-button" class="absolute left-2" onclick="dec()"><</button>
|
|
<img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={links[0]} />
|
|
<!-- <div class="w-70 h-60 bg-green-600" /> -->
|
|
<button id="inc-button" class="absolute right-2" onclick="inc()">></button>
|
|
</div>
|
|
</div> |