From a0212527bf5660ed8c7d7868da4c487afeabf644 Mon Sep 17 00:00:00 2001 From: CRBroughton Date: Sat, 18 Nov 2023 20:19:28 +0000 Subject: [PATCH] refactor: :recycle: move calendar month component to images menu --- .changeset/heavy-colts-move.md | 5 ++++ db/seeder/seeder.go | 40 +++++++++++++++++----------- src/components/AddMarker.vue | 26 ++++++++---------- src/mapbox.ts | 14 +++++----- src/pocketbase.ts | 2 ++ src/types.ts | 2 ++ src/views/settings/ImageSettings.vue | 10 ++++++- 7 files changed, 61 insertions(+), 38 deletions(-) create mode 100644 .changeset/heavy-colts-move.md diff --git a/.changeset/heavy-colts-move.md b/.changeset/heavy-colts-move.md new file mode 100644 index 0000000..a8e9fec --- /dev/null +++ b/.changeset/heavy-colts-move.md @@ -0,0 +1,5 @@ +--- +"forager": minor +--- + +move calendar month componen to images menu diff --git a/db/seeder/seeder.go b/db/seeder/seeder.go index d8cc63e..9de7106 100644 --- a/db/seeder/seeder.go +++ b/db/seeder/seeder.go @@ -52,7 +52,7 @@ func seedTestUsersMarkers(app *pocketbase.PocketBase) { Lng: "-0.13107839490911033", Lat: "50.8315128991386", Colour: "purple", - StartMonth: "January", + StartMonth: "August", EndMonth: "September", ImageURL: "https://upload.wikimedia.org/wikipedia/commons/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg", }, @@ -132,30 +132,40 @@ func seedTestUser(app *pocketbase.PocketBase) { record := models.NewRecord(collection) type image struct { - Colour string `json:"colour"` - Name string `json:"name"` - Url string `json:"url"` + Colour string `json:"colour"` + Name string `json:"name"` + Url string `json:"url"` + StartMonth string `json:"startMonth"` + EndMonth string `json:"endMonth"` } images := []image{ { - Colour: "purple", - Name: "Blackberries", - Url: "https://upload.wikimedia.org/wikipedia/commons/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg", + Colour: "purple", + Name: "Blackberries", + Url: "https://upload.wikimedia.org/wikipedia/commons/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg", + StartMonth: "August", + EndMonth: "September", }, { - Colour: "deeppink", - Name: "Hawthorn", - Url: "https://images.immediate.co.uk/production/volatile/sites/23/2019/09/GettyImages-513147101-hawthorn-Neil-Holmes-dba76ab.jpg", + Colour: "deeppink", + Name: "Hawthorn", + Url: "https://images.immediate.co.uk/production/volatile/sites/23/2019/09/GettyImages-513147101-hawthorn-Neil-Holmes-dba76ab.jpg", + StartMonth: "January", + EndMonth: "December", }, { - Name: "Rhubarb", - Url: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Rheum_rhabarbarum.2006-04-27.uellue.jpg/1280px-Rheum_rhabarbarum.2006-04-27.uellue.jpg", + Name: "Rhubarb", + Url: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Rheum_rhabarbarum.2006-04-27.uellue.jpg/1280px-Rheum_rhabarbarum.2006-04-27.uellue.jpg", + StartMonth: "January", + EndMonth: "December", }, { - Colour: "cadetblue", - Name: "Elderberries", - Url: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Sambucus-berries.jpg/1280px-Sambucus-berries.jpg", + Colour: "cadetblue", + Name: "Elderberries", + Url: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Sambucus-berries.jpg/1280px-Sambucus-berries.jpg", + StartMonth: "January", + EndMonth: "December", }, } diff --git a/src/components/AddMarker.vue b/src/components/AddMarker.vue index 052138b..bd9b798 100644 --- a/src/components/AddMarker.vue +++ b/src/components/AddMarker.vue @@ -29,10 +29,16 @@ const mapboxStore = useMapbox() const { lng, lat } = storeToRefs(mapboxStore) const pocketbaseStore = usePocketBase() const { user } = storeToRefs(pocketbaseStore) -const selectedStartMonth = ref('January') -const selectedEndMonth = ref('December') + const creatingNewItem = ref(false) +const selectedItem = reactive({ + name: '', + colour: '', + startMonth: '', + endMonth: '', + url: '', +}) const input = ref('') function hide() { input.value = '' @@ -41,13 +47,8 @@ function hide() { } -const imageURL = ref('') -const selectedColour = ref('red') - function setSelectedItem(event: UserImage) { - imageURL.value = event.url - input.value = event.name - selectedColour.value = event.colour + Object.assign(selectedItem, event) } @@ -75,7 +76,7 @@ function setSelectedItem(event: UserImage) {
- + -
- + Create diff --git a/src/mapbox.ts b/src/mapbox.ts index a9552e1..2bbf8f5 100644 --- a/src/mapbox.ts +++ b/src/mapbox.ts @@ -2,7 +2,7 @@ import type { MapMouseEvent } from 'mapbox-gl' import type { Feature } from 'geojson' import mapboxgl from 'mapbox-gl' import { usePocketBase } from './pocketbase' -import type { ItemsRecordWithID } from './types' +import type { ItemsRecordWithID, UserImage } from './types' import { createLayers } from './mapbox/layers' import { createGeolocator } from './mapbox/geoLocator' @@ -172,7 +172,7 @@ export const useMapbox = defineStore('mapbox-store', () => { }) } - const addMarker = async (lng: number, lat: number, name: string, colour: string, startMonth: string, endMonth: string, imageURL: string) => { + const addMarker = async (lng: number, lat: number, selectedImage: UserImage) => { // Create a new marker. const settingsStore = usePocketBase() @@ -181,12 +181,12 @@ export const useMapbox = defineStore('mapbox-store', () => { lastForaged: undefined, lng, lat, - name, + name: selectedImage.name, owner: settingsStore.user?.id, - colour, - startMonth, - endMonth, - imageURL, + colour: selectedImage.colour, + startMonth: selectedImage.startMonth, + endMonth: selectedImage.endMonth, + imageURL: selectedImage.url, } await settingsStore.createItem(newItem) diff --git a/src/pocketbase.ts b/src/pocketbase.ts index 13b39b6..3fb9fee 100644 --- a/src/pocketbase.ts +++ b/src/pocketbase.ts @@ -230,6 +230,8 @@ export const usePocketBase = defineStore('pocketbase-store', () => { name: string url: string colour: string + startMonth: string + endMonth: string } const createImage = async (img: UserImage) => { const images = user.value?.images ? [...user.value?.images, img] : [img] diff --git a/src/types.ts b/src/types.ts index 5c3f472..6b553f2 100644 --- a/src/types.ts +++ b/src/types.ts @@ -13,4 +13,6 @@ export interface UserImage { name: string url: string colour: string + startMonth: string + endMonth: string } diff --git a/src/views/settings/ImageSettings.vue b/src/views/settings/ImageSettings.vue index 401634c..f5ee80c 100644 --- a/src/views/settings/ImageSettings.vue +++ b/src/views/settings/ImageSettings.vue @@ -25,6 +25,9 @@ watch(() => imageSettingsRef.value, () => { createItemPopup('#imageSettings', 'Add your images here, then start creating items on the map!') }) + +const selectedStartMonth = ref('January') +const selectedEndMonth = ref('December')