feat: ✨ users can now create landmarks

.changeset/empty-yaks-dream.md

@@ -0,0 +1,5 @@
+---
+"forager": minor
+---
+
+Users can now create landmarks

src/components/ItemDetails.vue

@@ -3,14 +3,14 @@ import { usePocketBase } from '@/pocketbase'
 import { useMapbox } from '@/mapbox'
 
 const mapboxStore = useMapbox()
-const { selectedItem } = storeToRefs(mapboxStore)
+const { selectedItem, selectedCollection } = storeToRefs(mapboxStore)
 
 const pocketbaseStore = usePocketBase()
 const {  selectedItemPocketbase } = storeToRefs(pocketbaseStore)
 
 watch(() => selectedItem.value, () => {
   if (selectedItem.value !== undefined)
-    pocketbaseStore.getSelectedItem(selectedItem.value)
+    pocketbaseStore.getSelectedItem(selectedItem.value, selectedCollection.value)
 })
 
 function clearSelected() {
@@ -51,7 +51,7 @@ const previewImg = computed(() => {
         </div>
       </Teleport>
     </div>
-    <div class="item-forage-details">
+    <div v-if="selectedCollection === 'items'" class="item-forage-details">
       <p>Last Foraged: {{ selectedItemPocketbase.lastForaged ? new Date(selectedItemPocketbase.lastForaged!).toDateString() : 'Never' }}</p>
       <p> Start Month: {{ selectedItemPocketbase.startMonth || 'Not Set' }}</p>
       <p>End Month: {{ selectedItemPocketbase.endMonth || 'Not Set' }}</p>
@@ -60,7 +60,7 @@ const previewImg = computed(() => {
       <BaseButton @click="deleteItem">
         Delete
       </BaseButton>
-      <BaseButton @click="forageItem">
+      <BaseButton v-if="selectedCollection === 'items'" @click="forageItem">
         Forage Now
       </BaseButton>
       <BaseButton @click="clearSelected">

src/mapbox.ts

@@ -16,6 +16,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
   const lat = ref(0)
   const markerUIHidden = ref(true)
   const selectedItem = ref<string | undefined>(undefined)
+  const selectedCollection = ref('')
   const detailsHidden = ref(true)
   const items = ref<ItemsRecordWithID[] | null>(null)
   const landmarks = ref<LandmarksRecordWithID[]>([])
@@ -203,6 +204,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
       markerUIHidden.value = true
       detailsHidden.value = false
       selectedItem.value = e.features![0].properties!.id
+      selectedCollection.value = 'items'
     })
 
     // Change the cursor to a pointer when the mouse is over the places layer.
@@ -216,6 +218,22 @@ export const useMapbox = defineStore('mapbox-store', () => {
       if (map)
         map.getCanvas().style.cursor = ''
     })
+
+    map.on('click', 'landmark', async (e) => {
+      markerUIHidden.value = true
+      detailsHidden.value = false
+      selectedItem.value = e.features![0].properties!.id
+      selectedCollection.value = 'landmarks'
+    })
+    map.on('mouseenter', 'landmark', () => {
+      if (map) 
+        map.getCanvas().style.cursor = 'pointer'
+    })
+
+    map.on('mouseleave', 'landmark', () => {
+      if (map) 
+        map.getCanvas().style.cursor = ''
+    })
   }
 
   const addLandmark = async (landmark: Omit<LandmarksRecord, 'owner'>) => {
@@ -281,24 +299,43 @@ export const useMapbox = defineStore('mapbox-store', () => {
   }
 
   const deleteMarker = async (id: string) => {
-    const { getItems, deleteItem } = usePocketBase()
+    const { getItems, getLandmarks, deleteItem } = usePocketBase()
 
-    await deleteItem(id)
+    await deleteItem(id, selectedCollection.value)
 
-    items.value = await getItems()
+    if (selectedCollection.value === 'items') {
 
-    const itemLayer = ref<Feature[]>([])
+      items.value = await getItems()
 
-    // Get the GeoJSON source by ID
-    const source = map?.getSource('items') as mapboxgl.GeoJSONSource
+      const itemLayer = ref<Feature[]>([])
 
-    if (items.value)
-      itemLayer.value = translateItemToLayerItem(items.value)
+      // Get the GeoJSON source by ID
+      const source = map?.getSource(selectedCollection.value) as mapboxgl.GeoJSONSource
 
-    source.setData({
-      type: 'FeatureCollection',
-      features: itemLayer.value,
-    })
+      if (items.value)
+        itemLayer.value = translateItemToLayerItem(items.value)
+
+      source.setData({
+        type: 'FeatureCollection',
+        features: itemLayer.value,
+      })
+    }
+    if (selectedCollection.value === 'landmarks') {
+      landmarks.value = await getLandmarks()
+
+      const itemLayer = ref<Feature[]>([])
+
+      // Get the GeoJSON source by ID
+      const source = map?.getSource(selectedCollection.value) as mapboxgl.GeoJSONSource
+
+      if (landmarks.value)
+        itemLayer.value = translateItemToLayerItem(landmarks.value)
+
+      source.setData({
+        type: 'FeatureCollection',
+        features: itemLayer.value,
+      })
+    }
   }
 
   const updateMarkerLayer = async () => {
@@ -338,5 +375,6 @@ export const useMapbox = defineStore('mapbox-store', () => {
     items,
     updateMarkerLayer,
     addLandmark,
+    selectedCollection,
   }
 })

src/mapbox/layers.ts

@@ -109,7 +109,7 @@ export function createLayers(map: mapboxgl.Map) {
 
 export function createLandmarks(map: mapboxgl.Map) {
   map.addLayer({
-    id: 'unclustered-landmark',
+    id: 'landmark',
     type: 'symbol',
     source: 'landmarks',
     minzoom: 14,

src/pocketbase.ts

@@ -162,10 +162,10 @@ export const usePocketBase = defineStore('pocketbase-store', () => {
     return response
   }
 
-  const getSelectedItem = async (id: string) => {
+  const getSelectedItem = async (id: string, collection: string) => {
     try {
       // or fetch only the first record that matches the specified filter
-      selectedItemPocketbase.value = await pb.collection('items').getOne(id)
+      selectedItemPocketbase.value = await pb.collection(collection).getOne(id)
     }
     catch (error: unknown) {
       if (isError(error)) 
@@ -203,9 +203,9 @@ export const usePocketBase = defineStore('pocketbase-store', () => {
     }
   }
 
-  const deleteItem = async (id: string) => {
+  const deleteItem = async (id: string, collection: string) => {
     try {
-      await pb.collection('items').delete(id)
+      await pb.collection(collection).delete(id)
       await getItems()
     }
     catch (error: unknown) {