Show if a photo has GPS info or not

GeniJaho · Jan 21, 2025 · 7547be3 · 7547be3
1 parent 874510e
commit 7547be3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/resources/js/Components/LocationIcon.vue b/resources/js/Components/LocationIcon.vue
@@ -0,0 +1,5 @@
+<template>
+<span class="flex items-center justify-center bg-gray-50 w-8 h-8 rounded-full">
+    <i class="fas fa-location-dot text-green-700"></i>
+</span>
+</template>
diff --git a/resources/js/Pages/Photos/Index.vue b/resources/js/Pages/Photos/Index.vue
@@ -16,6 +16,7 @@ import ToggleInput from "@/Components/ToggleInput.vue";
 import InputLabel from "@/Components/InputLabel.vue";
 import DropdownLink from "@/Components/DropdownLink.vue";
 import BulkRemoveItemsAndTags from "@/Pages/Photos/Partials/BulkRemoveItemsAndTags.vue";
+import LocationIcon from "@/Components/LocationIcon.vue";
 
 const props = defineProps({
     photos: Object,
@@ -325,7 +326,10 @@ const exportData = (format) => {
 
                                     <ZoomIcon @click="zoomedImage = photo" class="absolute top-0 left-0"/>
 
-                                    <TaggedIcon v-if="photo.items_exists" class="absolute top-2 right-2" />
+                                    <div class="absolute top-2 right-2 flex gap-2">
+                                        <LocationIcon v-if="photo.latitude && photo.longitude"/>
+                                        <TaggedIcon v-if="photo.items_exists"/>
+                                    </div>
 
                                     <ConfirmDeleteButton
                                         v-if="! isSelecting"

diff --git a/resources/js/Pages/Photos/Show.vue b/resources/js/Pages/Photos/Show.vue
@@ -17,6 +17,7 @@ import ZoomIcon from "@/Components/ZoomIcon.vue";
 import Modal from "@/Components/Modal.vue";
 import VueMagnifier from '@websitebeaver/vue-magnifier';
 import '@websitebeaver/vue-magnifier/styles.css';
+import LocationIcon from "@/Components/LocationIcon.vue";
 
 const props = defineProps({
     photoId: Number,
@@ -292,7 +293,10 @@ const adjustZoomLevelWithMouseWheel = (event) => {
 
                             <ZoomIcon @click="zoomedPhoto = true" class="absolute top-0 left-0" />
 
-                            <TaggedIcon v-if="photo.photo_items.length" class="absolute top-2 right-2" />
+                            <div class="absolute top-2 right-2 flex gap-2">
+                                <LocationIcon v-if="photo.latitude && photo.longitude"/>
+                                <TaggedIcon v-if="photo.photo_items.length"/>
+                            </div>
 
                             <ConfirmDeleteButton
                                 @delete="deletePhoto"