start with nuxt
This commit is contained in:
lesion
65
pages/Login.vue
Normal file
65
pages/Login.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template lang='pug'>
|
||||
b-modal(@shown="$refs.email.focus()" :title='$t("Login")' hide-footer
|
||||
@hidden='$router.replace("/")' :visible='true' ref='modal')
|
||||
el-form(v-loading='loading')
|
||||
p(v-html="$t('login_explanation')")
|
||||
el-input.mb-2(v-model='email' type='email' :placeholder='$t("Email")' autocomplete='email' ref='email')
|
||||
v-icon(name='user' slot='prepend')
|
||||
el-input.mb-1(v-model='password' @keyup.enter.native="submit" type='password' :placeholder='$t("Password")')
|
||||
v-icon(name="lock" slot='prepend')
|
||||
el-button.mr-1(plain type="success" @click='submit') {{$t('Login')}}
|
||||
router-link(to='/register')
|
||||
el-button.mt-1(plain type="primary") {{$t('Not registered?')}}
|
||||
a.float-right(href='#' @click='forgot') {{$t('Forgot password?')}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import { Message } from 'element-ui'
|
||||
import api from '@/plugins/api'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data () {
|
||||
return {
|
||||
password: '',
|
||||
email: '',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['login']),
|
||||
async forgot () {
|
||||
if (!this.email) {
|
||||
Message({ message: this.$t('Insert your email'), type: 'error' })
|
||||
this.$refs.email.focus()
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
await api.forgotPassword(this.email)
|
||||
this.loading = false
|
||||
Message({ message: this.$t('Check your email!'), type: 'success' })
|
||||
},
|
||||
async submit (e) {
|
||||
e.preventDefault()
|
||||
try {
|
||||
this.loading = true
|
||||
const user = await api.login(this.email, this.password)
|
||||
this.loading = false
|
||||
if (!user) {
|
||||
Message({ message: this.$t('Login error'), type: 'error' })
|
||||
return;
|
||||
}
|
||||
this.login(user)
|
||||
Message({ message: this.$t('Logged'), type: 'success' })
|
||||
} catch (e) {
|
||||
Message({ message: this.$t('Login error'), type: 'error' })
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.email = this.password = ''
|
||||
this.$refs.modal.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
6
pages/README.md
Normal file
6
pages/README.md
Normal file
@@ -0,0 +1,6 @@
|
||||
# PAGES
|
||||
|
||||
This directory contains your Application Views and Routes.
|
||||
The framework reads all the `*.vue` files inside this directory and creates the router of your application.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
|
||||
60
pages/Register.vue
Normal file
60
pages/Register.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template lang='pug'>
|
||||
b-modal(hide-footer @hidden='$router.replace("/")' ref='modal'
|
||||
:title="$t('Register')" :visible='true' @shown='$refs.email.focus()')
|
||||
el-form
|
||||
p(v-html="$t('register_explanation')")
|
||||
el-input.mb-2(ref='email' v-model='user.email' type='email'
|
||||
:placeholder='$t("Email")' autocomplete='email')
|
||||
span(slot='prepend') @
|
||||
|
||||
el-input.mb-2(v-model='user.password' type="password" placeholder="Password")
|
||||
v-icon(name='lock' slot='prepend')
|
||||
|
||||
el-input.mb-2(v-model='user.description' type="textarea" rows='3' :placeholder="$t('Description')")
|
||||
v-icon(name='envelope-open-text')
|
||||
|
||||
|
||||
el-button.float-right(plain type="success" icon='el-icon-arrow-right' @click='register') {{$t('Send')}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '~/plugins/api'
|
||||
import { mapActions } from 'vuex';
|
||||
import { Message } from 'element-ui'
|
||||
|
||||
export default {
|
||||
name: 'Register',
|
||||
data () {
|
||||
return {
|
||||
error: {},
|
||||
user: { }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['login']),
|
||||
async register () {
|
||||
try {
|
||||
const user = await api.register(this.user)
|
||||
if (!user.is_admin) {
|
||||
this.$refs.modal.hide()
|
||||
Message({
|
||||
message: this.$t('registration_complete'),
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
Message({
|
||||
message: this.$t('admin_registration_complete'),
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
Message({
|
||||
message: e,
|
||||
type: 'error'
|
||||
})
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
121
pages/event/_id.vue
Normal file
121
pages/event/_id.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template lang="pug">
|
||||
b-modal#eventDetail(ref='eventDetail' hide-body hide-header hide-footer @hidden='$router.replace("/")' size='lg' :visible='true')
|
||||
b-card(no-body, :img-src='imgPath' v-loading='loading')
|
||||
el-button.close_button(circle icon='el-icon-close' type='success'
|
||||
@click='$refs.eventDetail.hide()')
|
||||
b-card-header
|
||||
h3 {{event.title}}
|
||||
v-icon(name='clock')
|
||||
span {{event.start_datetime|datetime}}
|
||||
br
|
||||
v-icon(name='map-marker-alt')
|
||||
//- span {{event.place.name}} - {{event.place.address}}
|
||||
br
|
||||
b-card-body(v-if='event.description || event.tags')
|
||||
pre(v-html='event.description')
|
||||
br
|
||||
el-tag.mr-1(:color='tag.color || "grey"' v-for='tag in event.tags'
|
||||
size='mini' :key='tag.tag') {{tag.tag}}
|
||||
.ml-auto(v-if='mine')
|
||||
hr
|
||||
el-button(v-if='event.is_visible' plain type='warning' @click.prevents='toggle' icon='el-icon-view') {{$t('Unconfirm')}}
|
||||
el-button(v-else plain type='success' @click.prevents='toggle' icon='el-icon-view') {{$t('Confirm')}}
|
||||
el-button(plain type='danger' @click.prevent='remove' icon='el-icon-remove') {{$t('Remove')}}
|
||||
el-button(plain type='primary' @click='$router.replace("/edit/"+event.id)') <v-icon color='orange' name='edit'/> {{$t('Edit')}}
|
||||
|
||||
//- COMMENTS ...
|
||||
//- b-navbar(type="dark" variant="dark" toggleable='lg')
|
||||
//- template(slot='footer')
|
||||
//- b-navbar-nav
|
||||
//- b-button(variant='success') {{$t('Share')}} <v-icon name='share'/>
|
||||
//- b-nav-item( {{$t('')}})
|
||||
//- b-card-footer.text-right
|
||||
//- span.mr-3 {{event.comments.length}} <v-icon name='comments'/>
|
||||
//- a(href='#', @click='remove')
|
||||
v-icon(color='orange' name='times')
|
||||
//- b-card-footer(v-for='comment in event.comments')
|
||||
strong {{comment.author}}
|
||||
div(v-html='comment.text')
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import api from '@/plugins/api'
|
||||
//import filters from '@/filters'
|
||||
|
||||
export default {
|
||||
name: 'Event',
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
imgPath () {
|
||||
return this.event.image_path && process.env.VUE_APP_API + '/uploads/' + this.event.image_path
|
||||
},
|
||||
mine () {
|
||||
return this.event.userId === this.user.id || this.user.is_admin
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
event: { comments: [], place: {}, title: ''},
|
||||
id: null,
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.id = this.$route.params.id
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['delEvent']),
|
||||
async load () {
|
||||
const event = await api.getEvent(this.id)
|
||||
this.event = event
|
||||
this.loading = false
|
||||
},
|
||||
async remove () {
|
||||
await api.delEvent(this.event.id)
|
||||
this.delEvent(this.event.id)
|
||||
this.$refs.eventDetail.hide()
|
||||
},
|
||||
async toggle () {
|
||||
try {
|
||||
if (this.event.is_visible) {
|
||||
|
||||
await api.unconfirmEvent(this.id)
|
||||
this.event.is_visible = false
|
||||
} else {
|
||||
await api.confirmEvent(this.id)
|
||||
this.event.is_visible = true
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#eventDetail .modal-body {
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#eventDetail .close_button:hover {
|
||||
background-color: rgba(200, 100, 100, 0.4);
|
||||
}
|
||||
|
||||
#eventDetail .card {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#eventDetail .close_button {
|
||||
background-color: rgba(100, 100, 100, 0.4);
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
2
pages/index.vue
Normal file
2
pages/index.vue
Normal file
@@ -0,0 +1,2 @@
|
||||
<template lang="pug">
|
||||
</template>
|
||||
215
pages/new_event.vue
Normal file
215
pages/new_event.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template lang="pug">
|
||||
b-modal(ref='modal' @hidden='$router.replace("/")' size='lg' :visible='true'
|
||||
:title="edit?$t('Edit event'):$t('New event')" hide-footer)
|
||||
el-form
|
||||
el-tabs.mb-2(v-model='activeTab' v-loading='sending')
|
||||
|
||||
//- NOT LOGGED EVENT
|
||||
el-tab-pane(v-if='!logged')
|
||||
span(slot='label') {{$t('anon_newevent')}} <v-icon name='user-secret'/>
|
||||
p(v-html="$t('anon_newevent_explanation')")
|
||||
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('Next')}}
|
||||
|
||||
//- WHERE
|
||||
el-tab-pane
|
||||
span(slot='label') {{$t('Where')}} <v-icon name='map-marker-alt'/>
|
||||
div {{$t('where_explanation')}}
|
||||
el-select.mb-3(v-model='event.place.name' @change='placeChoosed' filterable allow-create default-first-option)
|
||||
el-option(v-for='place in places_name' :label='place' :value='place' :key='place.id')
|
||||
div {{$t("Address")}}
|
||||
el-input.mb-3(ref='address' v-model='event.place.address' @keydown.native.enter='next')
|
||||
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('Next')}}
|
||||
|
||||
//- WHEN
|
||||
el-tab-pane
|
||||
span(slot='label') {{$t('When')}} <v-icon name='clock'/>
|
||||
span {{event.multidate ? $t('dates_explanation') : $t('date_explanation')}}
|
||||
el-switch.float-right(v-model='event.multidate' :active-text="$t('multidate_explanation')")
|
||||
v-date-picker.mb-3(:mode='event.multidate ? "range" : "single"' v-model='date' is-inline
|
||||
is-expanded :min-date='new Date()' @input='date ? $refs.time_start.focus() : false')
|
||||
div {{$t('time_start_explanation')}}
|
||||
el-time-select.mb-3(ref='time_start'
|
||||
v-model="time.start"
|
||||
:picker-options="{ start: '00:00', step: '00:30', end: '24:00'}")
|
||||
div {{$t('time_end_explanation')}}
|
||||
el-time-select(v-model='time.end'
|
||||
:picker-options="{start: '00:00', step: '00:30', end: '24:00'}")
|
||||
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('Next')}}
|
||||
|
||||
//- WHAT
|
||||
el-tab-pane
|
||||
span(slot='label') {{$t('What')}} <v-icon name='file-alt'/>
|
||||
span {{$t('what_explanation')}}
|
||||
el-input.mb-3(v-model='event.title' ref='title')
|
||||
span {{$t('description_explanation')}}
|
||||
el-input.mb-3(v-model='event.description' type='textarea' :rows='9')
|
||||
span {{$t('tag_explanation')}}
|
||||
br
|
||||
el-select(v-model='event.tags' multiple filterable allow-create
|
||||
default-first-option placeholder='Tag')
|
||||
el-option(v-for='tag in tags' :key='tag.tag'
|
||||
:label='tag' :value='tag')
|
||||
|
||||
el-button.float-right(@click.native='next' :disabled='!couldProceed') {{$t('Next')}}
|
||||
|
||||
el-tab-pane
|
||||
span(slot='label') {{$t('Media')}} <v-icon name='image'/>
|
||||
span {{$t('media_explanation')}}
|
||||
b-form-file.mb-2(v-model='event.image', :placeholder='$t("Poster")' accept='image/*')
|
||||
el-button.float-right(@click='done') {{edit?$t('Edit'):$t('Send')}}
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import api from '@/plugins/api'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import moment from 'dayjs'
|
||||
import Calendar from '@/components/Calendar'
|
||||
import { Message } from 'element-ui'
|
||||
export default {
|
||||
components: { Calendar },
|
||||
data() {
|
||||
return {
|
||||
event: {
|
||||
place: { name: '', address: '' },
|
||||
title: '', description: '', tags: [],
|
||||
multidate: false,
|
||||
},
|
||||
visible: true,
|
||||
id: null,
|
||||
activeTab: "0",
|
||||
date: null,
|
||||
time: { start: '20:00', end: null },
|
||||
edit: false,
|
||||
sending: false,
|
||||
}
|
||||
},
|
||||
name: 'newEvent',
|
||||
watch: {
|
||||
'time.start' (value) {
|
||||
let [h, m] = value.split(':')
|
||||
this.time.end = (Number(h)+1) + ':' + m
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
if (this.$route.params.id) {
|
||||
this.id = this.$route.params.id
|
||||
this.edit = true
|
||||
const event = await api.getEvent(this.id)
|
||||
// this.event.place = {name: event.place.name, address: event.place.address }
|
||||
this.event.place.name = event.place.name
|
||||
this.event.place.address = event.place.address || ''
|
||||
this.event.multidate = event.multidate
|
||||
this.date = event.start_datetime
|
||||
this.time.start = moment(event.start_datetime).format('HH:mm')
|
||||
this.time.end = moment(event.end_datetime).format('HH:mm')
|
||||
this.event.title = event.title
|
||||
this.event.description = event.description.replace(/(<([^>]+)>)/ig, '')
|
||||
this.event.id = event.id
|
||||
if (event.tags) {
|
||||
this.event.tags = event.tags.map(t => t.tag)
|
||||
}
|
||||
|
||||
}
|
||||
this.updateMeta()
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
tags: state => state.tags.map(t => t.tag ),
|
||||
places_name: state => state.places.map(p => p.name ),
|
||||
places: state => state.places,
|
||||
user: state => state.user,
|
||||
logged: state => state.logged
|
||||
}),
|
||||
couldProceed () {
|
||||
const t = this.logged ? -1 : 0
|
||||
switch(Number(this.activeTab)) {
|
||||
case 0+t:
|
||||
return true
|
||||
case 1+t:
|
||||
return this.event.place.name.length>0 &&
|
||||
this.event.place.address.length>0
|
||||
case 2+t:
|
||||
if (this.date && this.time.start) return true
|
||||
break
|
||||
case 3+t:
|
||||
return this.event.title.length>0
|
||||
break
|
||||
case 4+t:
|
||||
return true
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['addEvent', 'updateEvent', 'updateMeta']),
|
||||
next () {
|
||||
this.activeTab = String(Number(this.activeTab)+1)
|
||||
if (this.activeTab === "2") {
|
||||
this.$refs.title.focus()
|
||||
}
|
||||
},
|
||||
prev () {
|
||||
this.activeTab = String(Number(this.activeTab-1))
|
||||
},
|
||||
placeChoosed () {
|
||||
const place = this.places.find( p => p.name === this.event.place.name )
|
||||
if (place && place.address) {
|
||||
this.event.place.address = place.address
|
||||
}
|
||||
this.$refs.address.focus()
|
||||
},
|
||||
async done () {
|
||||
let start_datetime, end_datetime
|
||||
const [ start_hour, start_minute ] = this.time.start.split(':')
|
||||
if (!this.time.end) {
|
||||
this.time.end = this.time.start
|
||||
}
|
||||
const [ end_hour, end_minute ] = this.time.end.split(':')
|
||||
if (this.event.multidate) {
|
||||
start_datetime = moment(this.date.start)
|
||||
.set('hour', start_hour).set('minute', start_minute)
|
||||
end_datetime = moment(this.date.end)
|
||||
.set('hour', end_hour).set('minute', end_minute)
|
||||
} else {
|
||||
console.log(this.date)
|
||||
start_datetime = moment(this.date).set('hour', start_hour).set('minute', start_minute)
|
||||
end_datetime = moment(this.date).set('hour', end_hour).set('minute', end_minute)
|
||||
}
|
||||
const formData = new FormData()
|
||||
|
||||
if (this.event.image) {
|
||||
formData.append('image', this.event.image, this.event.image.name)
|
||||
}
|
||||
formData.append('title', this.event.title)
|
||||
formData.append('place_name', this.event.place.name)
|
||||
formData.append('place_address', this.event.place.address)
|
||||
formData.append('description', this.event.description)
|
||||
formData.append('multidate', this.event.multidate)
|
||||
formData.append('start_datetime', start_datetime)
|
||||
formData.append('end_datetime', end_datetime)
|
||||
if (this.edit) {
|
||||
formData.append('id', this.event.id)
|
||||
}
|
||||
if (this.event.tags)
|
||||
this.event.tags.forEach(tag => formData.append('tags[]', tag))
|
||||
this.sending = true
|
||||
try {
|
||||
if (this.edit) {
|
||||
await this.updateEvent(formData)
|
||||
} else {
|
||||
await this.addEvent(formData)
|
||||
}
|
||||
this.updateMeta()
|
||||
this.sending = false
|
||||
this.$refs.modal.hide()
|
||||
Message({ type: 'success', message: this.logged ? this.$t('new_event_added') : this.$t('new_anon_event_added')})
|
||||
} catch (e) {
|
||||
this.sending = false
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user