diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue
index aa8be1507ba48f67a0a5a007c6656874aeb673cb..8abf258b8638792b34749ddb66ab234cebeb6d55 100644
--- a/src/components/EventForm.vue
+++ b/src/components/EventForm.vue
@@ -1,6 +1,6 @@
<template lang="pug">
q-card.full-width
- //- Create Event Header
+ //- 'Create Event' Header
q-card-section.bg-blue-grey-1(style='padding: 8px')
span.text-subtitle1.text-weight-light.text-blue-grey-10.q-ml-sm Create your event
q-chip.float-right(
@@ -11,12 +11,12 @@ q-card.full-width
icon='done',
style='margin-top: -1px'
) Submit Event
- //- Create Event Form
+ //- 'Create Event' Form
q-card-section
//- Event name field
.row.q-pb-md
q-input.full-width(
- v-model='name',
+ v-model='eventData.name',
rounded,
outlined,
:dense='true',
@@ -28,9 +28,17 @@ q-card.full-width
//- Date and Time field
span.text-subtitle1.text-blue-grey-10.q-pt-sm Date and Time:
.row.q-pb-md.no-wrap
- q-input(v-model='date', rounded, outlined, type='date', :dense='true', hint='Date of Event', style='width: 60%')
+ q-input(
+ v-model='eventData.date',
+ rounded,
+ outlined,
+ type='date',
+ :dense='true',
+ hint='Date of Event',
+ style='width: 60%'
+ )
q-input.q-ml-sm(
- v-model='time',
+ v-model='eventData.time',
rounded,
outlined,
type='time',
@@ -41,63 +49,155 @@ q-card.full-width
//- Location of Event field
.row.q-pb-md
span.text-subtitle1.text-blue-grey-10 Where?:
- q-input.full-width(rounded, outlined, v-model='places', label='Search places', :dense='true')
+ q-select.full-width(
+ v-model='location',
+ @input-value='setUserInput',
+ :options='searchResults',
+ :dense='true',
+ label='Search places',
+ rounded,
+ outlined,
+ use-input,
+ input-debounce='0',
+ hide-selected,
+ fill-input
+ )
template(v-slot:prepend)
q-icon(name='place')
- template(v-slot:append)
- q-icon.cursor-pointer(name='search', @click='searchPlaces()')
//- Invite friends field
.row.q-pb-md
span.text-subtitle1.text-blue-grey-10 Invite your friends:
- q-input.full-width(rounded, outlined, v-model='friends', label='Search friends', :dense='true')
+ q-select.full-width(
+ v-model='eventData.friends',
+ :dense='true',
+ :options='this.options',
+ label='Select friends',
+ rounded,
+ outlined,
+ multiple,
+ use-chips,
+ emit-value,
+ map-options
+ )
template(v-slot:prepend)
q-icon(name='person_add')
- template(v-slot:append)
- q-icon.cursor-pointer(name='search', @click='searchFriends()')
- //- Event icon field
+ //- Event choose icon field
.text-subtitle1.text-blue-grey-10 Choose an icon for your Event:
.row.q-pb-md.justify-around
- img(src='https://img.icons8.com/dusk/50/000000/home.png')
- img(src='https://img.icons8.com/dusk/50/000000/party-baloons.png')
- img(src='https://img.icons8.com/dusk/50/000000/dancing-party.png')
- img(src='https://img.icons8.com/dusk/50/000000/champagne.png')
- img(src='https://img.icons8.com/dusk/50/000000/dj.png')
- img(src='https://img.icons8.com/dusk/50/000000/gift.png')
- //- Event details field
+ img.cursor-pointer.q-pa-xs(
+ v-for='eventType in ["Home", "Baloons", "Dancing", "Champagne", "Dj", "Gift"]',
+ @click='eventData.type = eventType',
+ :src='getEventIcon(eventType)',
+ :style='eventData.type == eventType ? "box-shadow: 0 0 1pt 2pt #03c6fc; border-radius: 30%" : ""'
+ )
+ //- Event insert details field
.row
span.text-subtitle1.text-blue-grey-10 Details:
q-input.full-width(
rounded,
outlined,
autogrow,
- v-model='details',
+ v-model='eventData.details',
placeholder='Dress code, specifications, directions etc.',
:dense='true'
)
</template>
<script>
+import { mapState, mapActions } from 'vuex'
+
export default {
data() {
return {
- name: null,
- date: null,
- time: null,
- places: null,
- friends: null,
- details: null
+ eventData: {
+ name: '',
+ date: null,
+ time: null,
+ friends: [],
+ type: '',
+ details: ''
+ },
+ location: '',
+ userInput: 'a',
+ service: null,
+ searchResults: []
}
},
+
methods: {
- searchPlaces() {
- console.log('searching places')
+ displaySuggestions(predictions, status) {
+ if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
+ this.searchResults = []
+ return
+ }
+ this.searchResults = predictions.map(prediction => prediction.description)
},
- searchFriends() {
- console.log('searching friends')
+
+ setUserInput(val) {
+ this.userInput = val
},
+
submitEvent() {
- console.log('submit event')
+ console.log(this.eventData)
+ },
+
+ getEventIcon(eventType) {
+ switch (eventType) {
+ case 'Home':
+ return 'https://img.icons8.com/dusk/50/000000/home.png'
+ case 'Baloons':
+ return 'https://img.icons8.com/dusk/50/000000/party-baloons.png'
+ case 'Dancing':
+ return 'https://img.icons8.com/dusk/50/000000/dancing-party.png'
+ case 'Champagne':
+ return 'https://img.icons8.com/dusk/50/000000/champagne.png'
+ case 'Dj':
+ return 'https://img.icons8.com/dusk/50/000000/dj.png'
+ case 'Gift':
+ return 'https://img.icons8.com/dusk/50/000000/gift.png'
+ }
+ },
+
+ placesGetPredictions() {
+ this.service.getPlacePredictions(
+ {
+ input: this.userInput,
+ location: new google.maps.LatLng(this.center),
+ radius: 5000
+ },
+ this.displaySuggestions
+ )
+ },
+ ...mapActions('firebase', ['firebaseSubmitEvent'])
+ },
+
+ computed: {
+ options() {
+ var optionsArray = []
+
+ for (const key in this.friends) {
+ let optionObject = {
+ label: this.friends[key].name,
+ value: key
+ }
+ optionsArray.push(optionObject)
+ }
+ return optionsArray
+ },
+ ...mapState('firebase', ['friends', 'center'])
+ },
+
+ watch: {
+ userInput(newValue) {
+ if (newValue) {
+ this.placesGetPredictions()
+ }
}
+ },
+
+ mounted() {
+ this.service = new window.google.maps.places.AutocompleteService()
+ this.placesGetPredictions() // Default predict with letter 'a' as input
}
}
</script>
\ No newline at end of file