feat: ✨ Users can now create custom colours for foragables

.changeset/strong-bugs-double.md

@@ -0,0 +1,5 @@
+---
+"forager": minor
+---
+
+Users can now create custom colours for foragables

src/components/ColourSelector.vue

@@ -1,53 +1,19 @@
 <script setup lang="ts">
-interface Props {
-  selectedColour: string
-}
-
-const props = defineProps<Props>()
-
 const emit = defineEmits<Emits>()
 interface Emits {
   (e: 'change', value: string): void
 }
-
-const colours = ['red', 'blue', 'purple', 'deeppink', 'cadetblue']
+const selectedColour = ref('#ffffff')
 </script>
 
 <template>
-  <div
-    class="my-2
-      "
-  >
-    Selected Colour: {{
-      props.selectedColour.length > 0 ? props.selectedColour : 'None selected'
-    }}
-  </div>
-
-  <div class="colour-selector">
-    <div
-      v-for="colour in colours"
-      :key="colour"
-      class="colour-choice"
-      :class="{ highlighted: colour === props.selectedColour }"
-      @click="emit('change', colour)"
-    >
-      <div
-        class="colour-dot"
-        :style="{ background: colour }"
-      />
-    </div>
+  <div class="flex flex-col gap-2">
+    <p>Colour</p>
+    <input v-model="selectedColour" class="w-full" type="color" @change="emit('change', selectedColour)">
   </div>
 </template>
 
 <style scoped>
-.colour-selector {
-  display: flex;
-  gap: .5em;
-  margin-bottom: 20px;
-  cursor: pointer;
-  margin-left: 5px;
-}
-
 .colour-choice {
   width: 50px;
   background: rgb(255, 255, 255);

src/mapbox/layers.ts

@@ -1,6 +1,6 @@
 import type mapboxgl from 'mapbox-gl'
 
-export function createLayers(map: mapboxgl.Map) {
+export function createLayers(map: mapboxgl.Map, usersSavedColours: string[]) {
   map.addLayer({
     id: 'unclustered-point',
     type: 'circle',
@@ -11,18 +11,7 @@ export function createLayers(map: mapboxgl.Map) {
       'circle-color': [
         'match',
         ['get', 'colour'],
-        'blue',
-        'blue',
-        'red',
-        'red',
-        'purple',
-        'purple',
-        'orange',
-        'orange',
-        'deeppink',
-        'deeppink',
-        'cadetblue',
-        'cadetblue',
+        ...usersSavedColours,
         /* other */ '#ccc',
       ],
       'circle-radius': 8,

src/stores/mapbox.ts

@@ -6,11 +6,11 @@ import { createLandmarks, createLayers } from '../mapbox/layers'
 import { createGeolocator } from '../mapbox/geoLocator'
 import type { LandmarksRecord } from '../pocketbase-types'
 import { usePocketBase } from '@/stores'
-import { user } from '@/utils/pocketbase'
+import { user, usersSavedColours } from '@/utils/pocketbase'
 
 export const useMapbox = defineStore('mapbox-store', () => {
   const userStore = usePocketBase()
-  mapboxgl.accessToken = userStore.user?.mapboxAPIKey
+  mapboxgl.accessToken = userStore.user.mapboxAPIKey!
   let map: mapboxgl.Map | undefined
   const lng = ref(0)
   const lat = ref(0)
@@ -95,7 +95,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
     map = new mapboxgl.Map({
       container: 'map',
       style: 'mapbox://styles/mapbox/outdoors-v12',
-      center: [user?.value?.lng, user?.value?.lat] ?? [0, 0],
+      center: [user.value.lng!, user.value.lat!] ?? [0, 0],
       zoom: user?.value?.lat === 0 && user?.value?.lng === 0 ? 2 : 14,
     })
 
@@ -155,7 +155,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
       // })
 
       if (map) {
-        createLayers(map)
+        createLayers(map, usersSavedColours.value)
         createGeolocator(map)
       }
     })
@@ -349,7 +349,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
 
   const returnHome = () => {
     const settingsStore = usePocketBase()
-    map?.flyTo({ center: [settingsStore.user?.lng, settingsStore.user?.lat], zoom: 14 })
+    map?.flyTo({ center: [settingsStore.user.lng!, settingsStore.user.lat!], zoom: 14 })
   }
 
   return {

src/stores/pocketbase.ts

@@ -33,7 +33,7 @@ export const usePocketBase = defineStore('pocketbase-store', () => {
   const health = ref<healthCheckResponse>()
   const selectedItemPocketbase = ref<ItemsRecordWithID>()
 
-  pb.authStore.onChange(() => user.value = pb.authStore.model)
+  pb.authStore.onChange(() => user.value = pb.authStore.model as UserRecordWithID)
 
   const getHealth = async () => {
     try {

src/types.ts

@@ -12,6 +12,7 @@ export interface LandmarksRecordWithID extends LandmarksRecord {
 export interface UserRecordWithID extends UsersRecord {
   email: string
   id: string
+  images: UserImage[]
 }
 
 export interface UserImage {

src/utils/pocketbase.ts

@@ -1,11 +1,25 @@
 import PocketBase from 'pocketbase'
+import type { UserRecordWithID } from '@/types'
 
 const state = useStorage('forager-store', {
   server: import.meta.env.VITE_POCKETBASE_URL,
 })
 
 export const pb = new PocketBase(state.value.server)
-export const user = ref(pb.authStore.model)
+export const user = ref(pb.authStore.model) as Ref<UserRecordWithID>
+
+export const usersSavedColours = computed(() => {
+  const colours: string[] = []
+
+  user.value.images.forEach((image) => {
+    if (colours.includes(image.colour))
+      return
+    if (image.colour === '')
+      return
+    colours.push(image.colour, image.colour)
+  })
+  return colours
+})
 
 export const errorMessage = ref<Error | undefined>(undefined)
 export function setErrorMessage(message: Error) {

src/views/settings/ImageSettings.vue

@@ -9,7 +9,7 @@ const { user } = storeToRefs(pocketbaseStore)
 
 const imageURL = ref('')
 const imageName = ref('')
-const selectedColour = ref('red')
+const selectedColour = ref('')
 
 const submitButtonDisabled = computed(() => {
   return imageURL.value.length === 0
@@ -42,14 +42,15 @@ const selectedEndMonth = ref('December')
       Saved Images
     </h2>
     <div class="grid grid-cols-3 gap-4 justify-center">
-      <div v-for="image in user?.images" :key="image" class="flex flex-col items-center justify-center gap-2">
+      <div v-for="(image, index) in user?.images" :key="index" class="flex flex-col items-center justify-center gap-2">
         <ReferenceImage :image="image" can-delete @delete="pocketbaseStore.deleteReferenceImage(image)" />
       </div>
     </div>
     <hr class="h-[1px] min-h-[1px] w-full bg-gray-400 border-0">
     <h2 class="text-md font-medium">
       Create New Image
     </h2>
+    {{ selectedColour }}
     <ColourSelector :selected-colour="selectedColour" @change="selectedColour = $event" />
     <div class="flex flex-col gap-4">
       <input v-model="imageURL" class="login-input" placeholder="Enter Image URL">