annonce @home / admin / controller / route / api

components/Announcement.vue

@@ -0,0 +1,32 @@
+<template lang="pug">
+  .card.announcement.event.mt-1.text-white(body-style='padding: 0px;')
+    nuxt-link(:to='`/announcement/${announcement.id}`')
+      .title <i class='el-icon-info'/> {{announcement.title}}
+
+    .card-body
+      .description(v-html='description')
+
+</template>
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  props: {
+    announcement: { type: Object, default: () => ({}) }
+  },
+  computed: {
+    ...mapState(['announcements']),
+    description () {
+      return this.announcement.announcement.slice(0, 500)
+    }
+  }
+}
+</script>
+<style lang='less'>
+.announcement {
+  .title i {
+    color: orangered;
+  }
+  box-shadow: inset 0px 0px 10px 0px orangered;
+}
+</style>

components/Home.vue

@@ -9,6 +9,7 @@
         Search(past-filter recurrent-filter)
 
     #events
+      Announcement(v-for='announcement in announcements' :key='announcement.id' :announcement='announcement')
       Event(v-for='event in events' :key='event.id' :event='event')
 
 </template>
@@ -16,18 +17,19 @@
 <script>
 import { mapGetters, mapState } from 'vuex'
 import Event from '@/components/Event'
+import Announcement from '@/components/Announcement'
 import Calendar from '@/components/Calendar'
 import Search from '@/components/Search'
 
 export default {
   name: 'Home',
-  components: { Calendar, Event, Search },
+  components: { Calendar, Event, Search, Announcement },
   computed: {
     events () {
       return this.in_past ? this.filteredEventsWithPast : this.filteredEvents
     },
     ...mapGetters(['filteredEvents', 'filteredEventsWithPast']),
-    ...mapState(['settings', 'in_past'])
+    ...mapState(['settings', 'in_past', 'announcements'])
   },
   head () {
     return {

components/admin/Announcement.vue

@@ -0,0 +1,97 @@
+<template lang='pug'>
+  div
+    p(v-html="$t('admin.announcement_description')")
+    br
+    el-input(v-model='announcement.title' :placeholder='$t("common.title")')
+    Editor.mt-2(v-model='announcement.announcement' border no-save style='max-height: 400px;')
+    el-button.mt-2.float-right(@click='save' type='success' plain) {{$t(`common.${editing?'save':'send'}`)}}
+
+    el-table(:data='announcements' small)
+      el-table-column(:label="$t('common.title')" width='250')
+        template(slot-scope='data')
+          span(slot='reference') {{data.row.title}}
+
+      el-table-column(:label="$t('common.actions')")
+        template(slot-scope='data')
+          el-button-group
+            el-button(size='mini' type='primary'
+              @click='edit(data.row)') {{$t('common.edit')}}
+            el-button(size='mini'
+              :type='data.row.visible?"warning":"success"'
+              @click='toggle(data.row)') {{data.row.visible?$t('common.deactivate'):$t('common.activate')}}
+            el-button(size='mini' type='danger'
+              @click='remove(data.row)') {{$t('common.delete')}}
+
+</template>
+<script>
+import { Message, MessageBox } from 'element-ui'
+import { mapActions } from 'vuex'
+import cloneDeep from 'lodash/cloneDeep'
+import Editor from '../Editor'
+import Announcement from '../Announcement'
+
+export default {
+  components: { Editor, Announcement },
+  data () {
+    return {
+      editing: false,
+      announcements: [],
+      announcement: { title: '', announcement: '' }
+    }
+  },
+  async mounted () {
+    this.announcements = await this.$axios.$get('/announcements')
+  },
+  methods: {
+    ...mapActions(['setAnnouncements']),
+    edit (announcement) {
+      this.announcement.title = announcement.title
+      this.announcement.announcement = announcement.announcement
+      this.announcement.id = announcement.id
+      this.editing = true
+    },
+    async toggle (announcement) {
+      try {
+        announcement.visible = !announcement.visible
+        await this.$axios.$put(`/announcements/${announcement.id}`, announcement)
+        this.announcements = this.announcements.map(a => a.id === announcement.id ? announcement : a)
+        this.setAnnouncements(cloneDeep(this.announcements.filter(a => a.visible)))
+      } catch (e) {}
+    },
+    remove (announcement) {
+      MessageBox.confirm(this.$t('admin.delete_announcement_confirm'),
+        this.$t('common.confirm'), {
+          confirmButtonText: this.$t('common.ok'),
+          cancelButtonText: this.$t('common.cancel'),
+          type: 'error'
+        })
+        .then(() => this.$axios.delete(`/announcements/${announcement.id}`))
+        .then(() => {
+          Message({
+            showClose: true,
+            type: 'success',
+            message: this.$t('admin.announcement_remove_ok')
+          })
+          this.announcements = this.announcements.filter(a => a.id !== announcement.id)
+        })
+    },
+    async save () {
+      try {
+        let announcement = null
+        if (this.editing) {
+          announcement = await this.$axios.$put(`/announcements/${this.announcement.id}`, this.announcement)
+          this.announcements = this.announcements.map(a => a.id === announcement.id ? announcement : a)
+        } else {
+          announcement = await this.$axios.$post('/announcements', this.announcement)
+          this.announcements = this.announcements.concat(announcement)
+        }
+        this.setAnnouncements(cloneDeep(this.announcements))
+        this.announcement = { title: '', announcement: '' }
+        this.editing = false
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+}
+</script>

layouts/default.vue

@@ -1,5 +1,5 @@
 <template lang='pug'>
-  el-container#main(:class='{dark: $route.name==="index"}')
+  el-container#main(:class='{dark: $route.name==="index" || $route.name==="announcement-id"}')
     el-dialog(:visible.sync='showFollowMe')
       h4(slot='title') {{$t('common.follow_me_title')}}
       FollowMe

locales/it.json

@@ -76,7 +76,9 @@
     "pause": "Pausa",
     "start": "Avvia",
     "fediverse": "Fediverso",
-    "skip": "Salta"
+    "skip": "Salta",
+    "delete": "Elimina",
+    "announcements": "Annunci"
   },
   "login": {
     "description": "Entrando puoi pubblicare nuovi eventi.",
@@ -176,7 +178,10 @@
     "filter_users": "Filtra utenti",
     "instance_name": "Nome istanza",
     "favicon": "Logo",
-    "user_block_confirm": "Sicura di voler bloccare l'utente?"
+    "user_block_confirm": "Sicura di voler bloccare l'utente?",
+    "delete_announcement_confirm": "Sicura di voler eliminare l'annuncio?",
+    "announcement_remove_ok": "Annuncio rimosso",
+    "announcement_description": "In questa sezione puoi inserire annunci che rimarranno in homepage"
   },
   "auth": {
     "not_confirmed": "Non abbiamo ancora confermato questa mail...",

pages/Admin.vue

@@ -58,6 +58,13 @@
             span.ml-1 {{$t('common.moderation')}}
           Moderation
 
+        //- ANNOUNCEMENTS
+        el-tab-pane.pt-1
+          template(slot='label')
+            v-icon(name='bullhorn')
+            span.ml-1 {{$t('common.announcements')}}
+          Announcement
+
 </template>
 <script>
 import { mapState } from 'vuex'
@@ -67,10 +74,11 @@ import Places from '../components/admin/Places'
 import Settings from '../components/admin/Settings'
 import Federation from '../components/admin/Federation'
 import Moderation from '../components/admin/Moderation'
+import Announcement from '../components/admin/Announcement'
 
 export default {
   name: 'Admin',
-  components: { Users, Places, Settings, Federation, Moderation },
+  components: { Users, Places, Settings, Federation, Moderation, Announcement },
   middleware: ['auth'],
   data () {
     return {

pages/announcement/_id.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+  el-container.announcement-page.text-white
+    el-header.text-white
+      h3 <i style='color: red' class='el-icon-info'/> {{announcement.title}}
+
+    pre.mt-4(v-html='announcement.announcement')
+
+</template>
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Announcement',
+  data () {
+    return { announcement: { title: '' } }
+  },
+  asyncData ({ $axios, params, error, store }) {
+    try {
+      const id = Number(params.id)
+      const announcement = store.state.announcements.find(a => a.id === id)
+      console.error(announcement)
+      return { announcement }
+    } catch (e) {
+      error({ statusCode: 404, message: 'Announcement not found' })
+    }
+  },
+  computed: mapState(['announcements']),
+  methods: {
+    showResource (resource) {
+      this.showResources = true
+      this.selectedResource = resource
+      document.getElementById('resourceDialog').focus()
+    }
+  }
+}
+</script>
+<style lang='less'>
+.announcement-page {
+
+  .el-header {
+    padding-top: 1em;
+    border-bottom: 1px solid lightgray;
+  }
+
+  .title {
+    max-width: 80%;
+    max-height: 0.1rem;
+    overflow: hidden;
+    font-size: 1.6rem;
+    line-height: 1;
+    padding-right: 40px;
+  }
+
+  pre {
+    white-space: pre-line;
+    word-break: break-word;
+    color: #aaa;
+    font-size: 1.2em;
+    font-family: inherit;
+  }
+
+}
+
+@media only screen and (max-width: 768px) {
+  #eventDetail {
+    .title {
+      font-size: 1em;
+      font-weight: bold;
+    }
+  }
+}
+</style>

plugins/vue-awesome.js

@@ -47,6 +47,7 @@ import 'vue-awesome/icons/link'
 import 'vue-awesome/icons/hands-helping'
 import 'vue-awesome/icons/question'
 import 'vue-awesome/icons/vector-square'
+import 'vue-awesome/icons/bullhorn'
 
 import Icon from 'vue-awesome/components/Icon'
 

server/api/controller/announce.js

@@ -0,0 +1,57 @@
+const { announcement: Announcement } = require('../models')
+const debug = require('debug')('announcement:controller')
+
+const announceController = {
+  async getAll (req, res) {
+    const announces = await Announcement.findAll({ raw: true })
+    return res.json(announces)
+  },
+
+  _getVisible () {
+    return Announcement.findAll({ where: { visible: true }, raw: true })
+  },
+
+  async add (req, res) {
+    const announcementDetail = {
+      title: req.body.title,
+      announcement: req.body.announcement,
+      visible: true
+    }
+    debug('Create announcement ', req.body.title)
+    const announce = await Announcement.create(announcementDetail)
+    res.json(announce)
+  },
+
+  async update (req, res) {
+    const announceDetails = {
+      title: req.body.title,
+      announcement: req.body.announcement,
+      visible: req.body.visible
+    }
+    const announce_id = req.params.announce_id
+    try {
+      let announce = await Announcement.findByPk(announce_id)
+      announce = await announce.update(announceDetails)
+      res.json(announce)
+    } catch (e) {
+      debug('Toggle announcement failed ', e)
+      res.sendStatus(404)
+    }
+  },
+
+  async remove (req, res) {
+    debug('Remove announcement ', req.params.announce_id)
+    const announce_id = req.params.announce_id
+    try {
+      const announce = await Announcement.findByPk(announce_id)
+      await announce.destroy()
+      res.sendStatus(200)
+    } catch (e) {
+      debug('Remove announcement failed ', e)
+      res.sendStatus(404)
+    }
+  }
+
+}
+
+module.exports = announceController

server/api/index.js

@@ -11,6 +11,7 @@ const instanceController = require('./controller/instance')
 const apUserController = require('./controller/ap_user')
 const resourceController = require('./controller/resource')
 const oauthController = require('./controller/oauth')
+const announceController = require('./controller/announce')
 
 const storage = require('./storage')
 const upload = multer({ storage })
@@ -126,6 +127,12 @@ api.put('/resources/:resource_id', isAdmin, resourceController.hide)
 api.delete('/resources/:resource_id', isAdmin, resourceController.remove)
 api.get('/resources', isAdmin, resourceController.getAll)
 
+// - ADMIN ANNOUNCEMENTS
+api.get('/announcements', isAdmin, announceController.getAll)
+api.post('/announcements', isAdmin, announceController.add)
+api.put('/announcements/:announce_id', isAdmin, announceController.update)
+api.delete('/announcements/:announce_id', isAdmin, announceController.remove)
+
 api.get('/clients', hasPerm('oauth:read'), oauthController.getClients)
 api.get('/client/:client_id', hasPerm('oauth:read'), oauthController.getClient)
 api.post('/client', oauthController.createClient)

server/api/models/announcement.js

@@ -1,7 +1,7 @@
 module.exports = (sequelize, DataTypes) => {
   const announcement = sequelize.define('announcement', {
-    announce: DataTypes.STRING,
-    until: DataTypes.DATE,
+    title: DataTypes.STRING,
+    announcement: DataTypes.STRING,
     visible: DataTypes.BOOLEAN
   }, {})
 

server/firstrun.js

@@ -54,6 +54,12 @@ module.exports = {
     // add default notification
     consola.info('Add default notification')
 
+    // await db.announcement.create({
+    //   visible: true,
+    //   title: 'Welcome to Gancio',
+    //   announcement: 'TODO: HTML First presentation post'
+    // })
+
     // send confirmed event to mastodon
     await db.notification.create({ action: 'Create', type: 'ap', filters: { is_visible: true } })
     await db.notification.create({ action: 'Update', type: 'ap', filters: { is_visible: true } })

server/migrations/20200215153310-create-announcement.js

@@ -7,12 +7,10 @@ module.exports = {
         primaryKey: true,
         type: Sequelize.INTEGER
       },
-      announce: {
+      title: Sequelize.STRING,
+      announcement: {
         type: Sequelize.STRING
       },
-      until: {
-        type: Sequelize.DATE
-      },
       visible: Sequelize.BOOLEAN,
       createdAt: {
         allowNull: false,

server/routes.js

@@ -12,6 +12,7 @@ const { spamFilter } = require('./federation/helpers')
 const debug = require('debug')('routes')
 const exportController = require('./api/controller/export')
 const eventController = require('./api/controller/event')
+const announceController = require('./api/controller/announce')
 
 const helpers = require('./helpers')
 const { startOfMonth, startOfWeek, getUnixTime } = require('date-fns')
@@ -59,11 +60,12 @@ app.use((error, req, res, next) => {
 
 // remaining request goes to nuxt
 // first nuxt component is ./pages/index.vue (with ./layouts/default.vue)
-// prefill current events, tags, places (used in every path)
+// prefill current events, tags, places and announcements (used in every path)
 app.use(async (req, res, next) => {
   const start_datetime = getUnixTime(startOfWeek(startOfMonth(new Date())))
   req.events = await eventController._select(start_datetime, 100)
   req.meta = await eventController._getMeta()
+  req.announcements = await announceController._getVisible()
   next()
 })
 

store/index.js

@@ -1,6 +1,5 @@
 import moment from 'moment-timezone'
 import intersection from 'lodash/intersection'
-import find from 'lodash/find'
 
 export const state = () => ({
   locale: '',
@@ -26,7 +25,8 @@ export const state = () => ({
     show_past_events: false,
     show_recurrent_events: false,
     show_pinned_event: false
-  }
+  },
+  announcements: []
 })
 
 export const getters = {
@@ -136,6 +136,9 @@ export const mutations = {
   },
   setPast (state, in_past) {
     state.in_past = in_past
+  },
+  setAnnouncements (state, announcements) {
+    state.announcements = announcements
   }
 }
 
@@ -146,6 +149,7 @@ export const actions = {
     commit('setSettings', req.settings)
 
     commit('setEvents', req.events)
+    commit('setAnnouncements', req.announcements)
     commit('update', req.meta)
 
     // apply settings
@@ -161,6 +165,10 @@ export const actions = {
     commit('setEvents', events)
     commit('showPastEvents', in_past)
   },
+  async updateAnnouncements ({ commit }) {
+    const announcements = await this.$axios.$get('/announcements')
+    commit('setAnnouncements', announcements)
+  },
   async updateMeta ({ commit }) {
     const { tags, places } = await this.$axios.$get('/event/meta')
     commit('update', { tags, places })
@@ -177,6 +185,9 @@ export const actions = {
       commit('updateEvent', event)
     }
   },
+  setAnnouncements ({ commit }, announcements) {
+    commit('setAnnouncements', announcements)
+  },
   delEvent ({ commit }, eventId) {
     commit('delEvent', eventId)
   },