Skip to content
Snippets Groups Projects
Commit 1170f761 authored by Endrizzi, Marco (UG - Comp Sci & Elec Eng)'s avatar Endrizzi, Marco (UG - Comp Sci & Elec Eng)
Browse files

Added SignalForm component

parent a59e5500
No related branches found
No related tags found
No related merge requests found
<template lang="pug">
q-card.full-width
//- Create Signal 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 new signal
q-chip.float-right(
@click='submitSignal()',
clickable,
color='accent',
text-color='white',
icon='done',
style='margin-top: -1px'
) Create Signal
//- Create Signal Form
q-card-section
//- Event name field
.row.q-pb-md
span.text-subtitle1.text-blue-grey-10 Type of signal:
q-select.full-width(
v-model='signalType',
:options='options',
label='Signal type',
transition-show='flip-up',
transition-hide='flip-down',
rounded,
outlined
)
template(v-slot:prepend)
q-icon(:name='icon')
//- Event details field
.row
span.text-subtitle1.text-blue-grey-10 Details:
q-input.full-width(v-model='details', rounded, outlined, autogrow, placeholder='Describe the situation')
</template>
<script>
export default {
data() {
return {
signalType: null,
options: ['Danger', 'Emergency', 'Fight Breakout', 'Free Drinks', 'Car Rental'],
details: null
}
},
methods: {
submitSignal() {
console.log(this.signalType)
}
},
computed: {
icon() {
switch (this.signalType) {
case 'Danger':
return 'warning'
case 'Emergency':
return 'medical_services'
case 'Fight Breakout':
return 'reduce_capacity'
case 'Free Drinks':
return 'liquor'
case 'Car Rental':
return 'car_rental'
default:
return 'add_location'
}
}
}
}
</script>
\ No newline at end of file
......@@ -16,7 +16,7 @@ q-layout(view='lHh Lpr lFf')
style='height: 150px'
)
.row.absolute-bottom.bg-transparent.justify-center
q-avatar(size='7em')
q-avatar(size='6.5em')
img(
src='https://avataaars.io/?avatarStyle=Circle&topType=Eyepatch&facialHairType=Blank&clotheType=ShirtVNeck&clotheColor=Pink&eyeType=Squint&eyebrowType=AngryNatural&mouthType=Default&skinColor=Light'
)
......@@ -28,6 +28,8 @@ q-layout(view='lHh Lpr lFf')
//- Bottom Drawers
q-dialog(v-model='newEvent', position='bottom')
EventForm
q-dialog(v-model='newSignal', position='bottom')
SignalForm
//- Page container and floating buttons
q-page-container
router-view
......@@ -37,13 +39,14 @@ q-layout(view='lHh Lpr lFf')
q-btn(@click='rightDrawer = !rightDrawer', fab, color='primary', icon='chat')
q-page-sticky(position='bottom', :offset='[18, 36]')
q-fab(vertical-actions-align='center', color='secondary', icon='add', direction='up')
q-fab-action(color='orange', @click='newEvent = true', icon='add_location', label='New Event')
q-fab-action(color='accent', icon='notification_add', label='New Signal')
q-fab-action(@click='newEvent = true', color='orange', icon='add_location', label='New Event')
q-fab-action(@click='newSignal = true', color='accent', icon='notification_add', label='New Signal')
</template>
<script>
import Friends from 'components/Friends.vue'
import EventForm from 'components/EventForm.vue'
import SignalForm from 'components/SignalForm.vue'
import { mapState } from 'vuex'
export default {
......@@ -51,14 +54,16 @@ export default {
components: {
Friends,
EventForm
EventForm,
SignalForm
},
data() {
return {
leftDrawer: false,
rightDrawer: false,
newEvent: false
newEvent: false,
newSignal: false
}
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment