From e9e38397cc29503c57225f997d14104f1dedde46 Mon Sep 17 00:00:00 2001
From: Kevin Bieri <bierike@gmail.com>
Date: Sat, 7 Sep 2024 14:56:34 +0200
Subject: [PATCH] Frontend: Display amount of pictures nearby

---
 frontend/assets/css/tailwind.css |  4 ++++
 frontend/pages/index.vue         | 30 ++++++++++++++++++++++--------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index b5c61c9..0e9724c 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  background: black;
+}
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index f441867..1d2304a 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -2,16 +2,28 @@
   <div
     v-for="(radarPoint, index) in radarPoints"
     :key="index"
-    class="absolute size-4 origin-center rounded-full bg-blue-400 opacity-80"
+    class="absolute z-10 size-4 origin-center rounded-full bg-blue-400 opacity-80"
     :style="radarPoint"
   />
-  <div class="flex h-screen snap-x snap-mandatory overflow-x-auto bg-black">
-    <img
-      v-for="photoInProximity in photosInProximity"
-      :key="photoInProximity.id"
-      :src="photoInProximity.image_url"
-      class="snap-center object-contain"
-    />
+  <div class="flex h-screen flex-col items-center justify-center">
+    <span class="mb-10 font-bold text-white"
+      >{{ pointsInProximityCount }} pictures nearby</span
+    >
+    <div class="flex w-full snap-x snap-mandatory items-center overflow-x-auto">
+      <nuxt-link
+        v-for="photoInProximity in photosInProximity"
+        :key="photoInProximity.id"
+        :to="{
+          name: 'iiif',
+          query: { manifestURL: photoInProximity.iiif_url },
+        }"
+        class="flex shrink-0 snap-center flex-col"
+        style="max-width: 100%; height: auto"
+      >
+        <img :src="photoInProximity.image_url" class="object-contain" />
+        <span class="px-2 text-white">{{ photoInProximity.title }}</span>
+      </nuxt-link>
+    </div>
   </div>
   <Navigation />
 </template>
@@ -21,6 +33,7 @@ import {
   useDeviceOrientation,
   useWindowSize,
 } from "@vueuse/core";
+import { size } from "lodash-es";
 
 const { coords } = useGeolocation();
 const { alpha } = useDeviceOrientation();
@@ -58,4 +71,5 @@ const radarPoints = computed(() => {
 const photosInProximity = computed(() => {
   return (toValue(data) || []).filter((o) => o.distance <= 400);
 });
+const pointsInProximityCount = computed(() => size(toValue(photosInProximity)));
 </script>