73 lines
2.3 KiB
Plaintext
73 lines
2.3 KiB
Plaintext
---
|
|
import { authPB } from "src/utils/pocketbase";
|
|
import type { RecordModel } from 'pocketbase'
|
|
|
|
// export const prerender = false
|
|
|
|
const pb = await authPB()
|
|
const photos = await pb.collection('photos').getFullList({
|
|
sort: '-created'
|
|
})
|
|
|
|
const getImageLink = async (record: any) => {
|
|
return pb.files.getURL(record, record.image)
|
|
}
|
|
---
|
|
|
|
<script>
|
|
let pos = 0;
|
|
const dataElement = document.getElementById('carousel-data');
|
|
const photos = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
|
|
const cap = photos.length - 1;
|
|
const img = document.getElementById('carousel-img') as HTMLImageElement;
|
|
const titleEl = document.getElementById('photo-title');
|
|
const cameraEl = document.getElementById('photo-camera');
|
|
const locationEl = document.getElementById('photo-location');
|
|
const currentPosIndicator = document.getElementById('current-pos');
|
|
const maxPosIndicator = document.getElementById('max-pos');
|
|
|
|
maxPosIndicator!.innerText = (cap + 1) as string
|
|
currentPosIndicator!.innerText = (pos + 1) as string
|
|
|
|
function updatePhoto() {
|
|
const currentPhoto = photos[pos];
|
|
|
|
currentPosIndicator!.innerText = (pos + 1) as string
|
|
|
|
// Update image src
|
|
if (img && currentPhoto) {
|
|
const imageUrl = `/api/files/photos/${currentPhoto.id}/${currentPhoto.image}`;
|
|
img.src = imageUrl;
|
|
}
|
|
|
|
// Update metadata
|
|
if (titleEl) {
|
|
titleEl.textContent = currentPhoto.title || "Untitled";
|
|
}
|
|
if (cameraEl) {
|
|
cameraEl.textContent = `📸 ${currentPhoto.camera}`
|
|
}
|
|
if (locationEl) {
|
|
locationEl.textContent = `📌 ${currentPhoto.location}`
|
|
}
|
|
}
|
|
|
|
function inc() {
|
|
pos = pos === cap ? 0 : pos + 1;
|
|
updatePhoto();
|
|
}
|
|
|
|
function dec() {
|
|
pos = pos === 0 ? cap : pos - 1;
|
|
updatePhoto();
|
|
}
|
|
|
|
// make functions globally accessible
|
|
(window as any).inc = inc;
|
|
(window as any).dec = dec;
|
|
</script>
|
|
|
|
<!-- Hidden element to pass server data to client -->
|
|
<div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
|
|
|
|
<img id="carousel-img" class="rounded-lg w-full h-[calc(100vh-7rem)] object-contain" src={ pb.files.getURL(photos[0], photos[0].image) } /> |