start with nuxt

2019-04-03 00:25:12 +02:00
parent afa6ad2a6b
commit 88b43f9bb1
54 changed files with 2742 additions and 0 deletions
--- a/pages/event/_id.vue
+++ b/pages/event/_id.vue
@@ -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>
+