diff --git a/.changeset/empty-yaks-dream.md b/.changeset/empty-yaks-dream.md new file mode 100644 index 0000000..56d26f5 --- /dev/null +++ b/.changeset/empty-yaks-dream.md @@ -0,0 +1,5 @@ +--- +"forager": minor +--- + +Users can now create landmarks diff --git a/src/components/ItemDetails.vue b/src/components/ItemDetails.vue index 37d4bae..bd2caa7 100644 --- a/src/components/ItemDetails.vue +++ b/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(() => { -
+

Last Foraged: {{ selectedItemPocketbase.lastForaged ? new Date(selectedItemPocketbase.lastForaged!).toDateString() : 'Never' }}

Start Month: {{ selectedItemPocketbase.startMonth || 'Not Set' }}

End Month: {{ selectedItemPocketbase.endMonth || 'Not Set' }}

@@ -60,7 +60,7 @@ const previewImg = computed(() => { Delete - + Forage Now diff --git a/src/mapbox.ts b/src/mapbox.ts index 6537aea..fc378dc 100644 --- a/src/mapbox.ts +++ b/src/mapbox.ts @@ -16,6 +16,7 @@ export const useMapbox = defineStore('mapbox-store', () => { const lat = ref(0) const markerUIHidden = ref(true) const selectedItem = ref(undefined) + const selectedCollection = ref('') const detailsHidden = ref(true) const items = ref(null) const landmarks = ref([]) @@ -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) => { @@ -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([]) + items.value = await getItems() - // Get the GeoJSON source by ID - const source = map?.getSource('items') as mapboxgl.GeoJSONSource + const itemLayer = ref([]) - 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([]) + + // 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, } }) diff --git a/src/mapbox/layers.ts b/src/mapbox/layers.ts index 0ceeac7..15b6b47 100644 --- a/src/mapbox/layers.ts +++ b/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, diff --git a/src/pocketbase.ts b/src/pocketbase.ts index e1c9c62..4ac168d 100644 --- a/src/pocketbase.ts +++ b/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) {