add position indicator to buttons

web/src/components/photos/carousel.astro

@@ -23,9 +23,16 @@ const getImageLink = async (record: any) => {
     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 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) {
@@ -64,15 +71,7 @@ const getImageLink = async (record: any) => {
     <!-- Hidden element to pass server data to client -->
     <div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
     
-    <!-- <div class="flex flex-col w-7/8 self-center"> -->
+    <div class="flex flex-col self-center">
-            <!-- <button id="dec-button" class="" onclick="dec()">&lt;</button>
-            <button id="inc-button" class="" onclick="inc()">&gt;</button> -->
         <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={ pb.files.getURL(photos[0], photos[0].image) } />
-        <!-- <div class="flex flex-col">
-            
-            <p id="photo-title" class="bold text-2xl">{photos[0].title === "" ? "Untitled" : photos[0].title}</p>
-            {photos[0].camera && <p id="photo-camera" class="text-sm">{photos[0].camera}</p>}
-            {photos[0].location && <p id="photo-location" class="text-sm">{photos[0].location}</p>}
-        </div> -->
     </div>
 </div>

web/src/layout/Base.astro

@@ -17,13 +17,6 @@ import Footer from "@components/footer"
             <Sidebar>
                 <slot name="sidebar" />
             </Sidebar>
-
-            <!-- <a href="/" class="b1-no-underline text-4xl">breadone dot net</a>
-            <Navbar/>
-
-            <div class="text-start mt-8">
-                <slot name="sidebar" />
-            </div>  -->
             
             <Footer/>
         </div>
@@ -31,6 +24,7 @@ import Footer from "@components/footer"
         <div class="content-panel">
             <slot name="content"/>
         </div>
+
     </main>
 </body>
 </html>

web/src/pages/photos/index.astro

@@ -18,8 +18,9 @@ const photos = await pb.collection('photos').getFullList({
         <p id="photo-camera" class="text-sm">📸 {photos[0].camera}</p>
         <p id="photo-location" class="text-sm">📌 {photos[0].location}</p>
 
-        <button id="dec-button" class="" onclick="dec()">&lt;</button>
+        <button id="dec-button" onclick="dec()">&lt;</button>
-        <button id="inc-button" class="" onclick="inc()">&gt;</button>
+        <span id="current-pos" /> of <span id="max-pos" />
+        <button id="inc-button" onclick="inc()">&gt;</button>
 
 
         <!-- <p class="text-2xl">Photography :)</p>