From 31cfef1d89b6dbaefc3889691e64d5eaa5d46691 Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Wed, 9 Nov 2022 10:17:52 +0100
Subject: [PATCH] new hide_calendar / hide_thumbs / header_image settings

---
 components/Editor.vue             |  1 +
 components/Event.vue              |  6 +--
 components/Loading.vue            |  2 +-
 components/admin/Theme.vue        | 69 +++++++++++++++++++++++++++----
 locales/en.json                   |  5 ++-
 plugins/filters.js                |  2 +-
 server/api/controller/settings.js | 28 ++++++++++++-
 server/api/index.js               |  1 +
 server/helpers.js                 | 18 +++++---
 9 files changed, 111 insertions(+), 21 deletions(-)

diff --git a/components/Editor.vue b/components/Editor.vue
index a555d627..ecf8aefe 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -224,6 +224,7 @@ export default {
     transition: opacity .5s;
     opacity: 0;
     visibility: hidden;
+    overflow: scroll;
     // position: absolute;
   }
 
diff --git a/components/Event.vue b/components/Event.vue
index e6cf69ee..a48593b9 100644
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
 v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
   nuxt-link(:to='`/event/${event.slug || event.id}`' itemprop="url")
-    MyPicture(:event='event' thumb :lazy='lazy')
+    MyPicture(v-if='!settings.hide_thumbs' :event='event' thumb :lazy='lazy')
     v-icon.float-right.mr-1(v-if='event.parentId' color='success' v-text='mdiRepeat')
     .title.p-name(itemprop="name") {{ event.title }}
 
   v-card-text.body.pt-0.pb-0
     time.dt-start.subtitle-1(:datetime='event.start_datetime | unixFormat("YYYY-MM-DD HH:mm")' itemprop="startDate" :content="event.start_datetime | unixFormat('YYYY-MM-DDTHH:mm')")  <v-icon v-text='mdiCalendar'></v-icon> {{ event | when }}
-    .d-none.dt-end(itemprop="endDate" :content="event.end_datetime | unixFormat('YYYY-MM-DDTHH:mm')") {{ event.end_datetime | unixFormat('YYYY-MM-DD HH:mm') }}
-    nuxt-link.place.d-block.p-location.pl-0(text color='primary' :to='`/place/${encodeURIComponent(event.place.name)}`' itemprop="location" itemscope itemtype="https://schema.org/Place") <v-icon v-text='mdiMapMarker'></v-icon> <span itemprop='name'>{{ event.place.name }}</span>
+    .d-none.dt-end(v-if='event.end_datetime' itemprop="endDate" :content="event.end_datetime | unixFormat('YYYY-MM-DDTHH:mm')") {{ event.end_datetime | unixFormat('YYYY-MM-DD HH:mm') }}
+    nuxt-link.place.d-block.p-location.pl-0(text :to='`/place/${encodeURIComponent(event.place.name)}`' itemprop="location" itemscope itemtype="https://schema.org/Place") <v-icon v-text='mdiMapMarker'></v-icon> <span itemprop='name'>{{ event.place.name }}</span>
       .d-none(itemprop='address') {{ event.place.address }}
 
   v-card-actions.pt-0.actions.justify-space-between
diff --git a/components/Loading.vue b/components/Loading.vue
index 316d1245..beaaf077 100644
--- a/components/Loading.vue
+++ b/components/Loading.vue
@@ -23,7 +23,7 @@ export default {
   .loading-page {
     z-index: -10;
     position: fixed;
-    top: 0;
+    top: 178px;
     left: 0;
     width: 100%;
     height: 100%;
diff --git a/components/admin/Theme.vue b/components/admin/Theme.vue
index e33ebdb7..42c1877b 100644
--- a/components/admin/Theme.vue
+++ b/components/admin/Theme.vue
@@ -6,9 +6,19 @@ v-container
     v-switch.mt-5(v-model='is_dark'
       inset
       :label="$t('admin.is_dark')")
+      
+    v-switch.mt-5(v-model='hide_thumbs'
+      inset
+      :label="$t('admin.hide_thumbs')")
 
+    v-switch.mt-5(v-model='hide_calendar'
+      inset
+      :label="$t('admin.hide_calendar')")
+
+  v-card-title {{$t('admin.default_images')}}
+  v-card-text
     v-row
-      v-col(cols='6')
+      v-col(cols='4')
         //- LOGO
         v-file-input.mt-5(ref='upload'
           :label="$t('admin.favicon')"
@@ -18,16 +28,29 @@ v-container
             v-btn(color='warning' text @click='resetLogo') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
         v-img.mt-2(:src='`/logo.png?${logoKey}`' max-height="60px" contain)
 
-      v-col(cols='6')
-        //- NOIMG
+      v-col(cols='4')
+        //- FALLBACK IMAGE
         v-file-input.mt-5(ref='upload'
-          :label="$t('admin.fallbackImage')"
+          :label="$t('admin.fallback_image')"
           persistent-hint
           @change='uploadFallbackImage'
           accept='image/*')
           template(slot='append-outer')
             v-btn(color='warning' text @click='resetFallbackImage') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
-        v-img.mt-2(:src='`/fallbackimage.png?${fallbackImageKey}`' max-height="150px" contain)          
+        v-img.mt-2(:src='`/fallbackimage.png?${fallbackImageKey}`' max-height="150px" contain)
+
+      v-col(cols='4')
+        //- HEADER IMAGE
+        v-file-input.mt-5(ref='upload'
+          :label="$t('admin.header_image')"
+          persistent-hint
+          @change='uploadHeaderImage'
+          accept='image/*')
+          template(slot='append-outer')
+            v-btn(color='warning' text @click='resetHeaderImage') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
+        v-img.mt-2(:src='`/headerimage.png?${headerImageKey}`' max-height="150px" contain)          
+
+
 
     //- TODO choose theme colors
     //- v-row
@@ -91,6 +114,7 @@ export default {
       valid: false,
       logoKey: 0,
       fallbackImageKey: 0,
+      headerImageKey: 0,
       link: { href: '', label: '' },
       linkModal: false
       // menu: [false, false, false, false]
@@ -111,7 +135,15 @@ export default {
         this.$vuetify.theme.dark = value
         this.setSetting({ key: 'theme.is_dark', value })
       }
-    }
+    },
+    hide_thumbs: {
+      get () { return this.settings.hide_thumbs },
+      set (value) { this.setSetting({ key: 'hide_thumbs', value }) }
+    },
+    hide_calendar: {
+      get () { return this.settings.hide_calendar },
+      set (value) { this.setSetting({ key: 'hide_calendar', value }) }
+    },
   //   'colors[0]': {
   //     get () {
   //       return this.settings['theme.colors'] || [0, 0]
@@ -144,16 +176,24 @@ export default {
     forceFallbackImageReload () {
       this.fallbackImageKey++
     },
+    forceHeaderImageReload () {
+      this.headerImageKey++
+    },    
     resetLogo (e) {
       this.setSetting({ key: 'logo', value: null })
         .then(this.forceLogoReload)
       e.stopPropagation()
     },
     resetFallbackImage (e) {
-      this.setSetting({ key: 'fallbackImage', value: null })
+      this.setSetting({ key: 'fallback_image', value: null })
         .then(this.forceFallbackImageReload)
       e.stopPropagation()
     },
+    resetHeaderImage (e) {
+      this.setSetting({ key: 'header_image', value: null })
+        .then(this.forceHeaderImageReload)
+      e.stopPropagation()
+    },    
     updateColor (i, v) {
       this.colors[i] = v.hex
       this.$vuetify.theme.themes.dark[i] = v.hex
@@ -210,8 +250,21 @@ export default {
         this.forceFallbackImageReload()
       } catch (e) {
 
-      }    
+      }
     },
+    async uploadHeaderImage (file) {
+      const formData = new FormData()
+      formData.append('headerImage', file)
+      try {
+        await this.$axios.$post('/settings/headerImage', formData)
+        this.$root.$emit('message', {
+          message: 'Header image updated'
+        })
+        this.forceHeaderImageReload()
+      } catch (e) {
+
+      }
+    },    
     save (key, value) {
       if (this.settings[key] !== value) {
         this.setSetting({ key, value })
diff --git a/locales/en.json b/locales/en.json
index 0b81d7e0..3c441916 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -247,7 +247,10 @@
     "edit_collection": "Edit Collection",
     "config_plugin": "Plugin configuration",
     "plugins_description": "",
-    "fallbackImage": "Fallback image"
+    "fallback_image": "Fallback image",
+    "header_image": "Header image",
+    "hide_thumbs": "Hide thumbs",
+    "hide_calendar": "Hide calendar"
   },
   "auth": {
     "not_confirmed": "Not confirmed yet…",
diff --git a/plugins/filters.js b/plugins/filters.js
index 675b8eaf..98be524e 100644
--- a/plugins/filters.js
+++ b/plugins/filters.js
@@ -81,7 +81,7 @@ export default ({ app, store }) => {
 
     let time = start.format('dddd D MMMM HH:mm')
     if (end) {
-      time += event.multidate ? `-${end.format('dddd D MMMM HH:mm')}` : `-${end.format('HH:mm')}`
+      time += event.multidate ? ` → ${end.format('dddd D MMMM HH:mm')}` : `-${end.format('HH:mm')}`
     }
     return time
   })
diff --git a/server/api/controller/settings.js b/server/api/controller/settings.js
index 0e20039c..fba1ab22 100644
--- a/server/api/controller/settings.js
+++ b/server/api/controller/settings.js
@@ -36,6 +36,8 @@ const defaultSettings = {
   trusted_instances: [],
   'theme.is_dark': true,
   'theme.primary': '#FF4500',
+  hide_thumbs: false,
+  hide_calendar: false,
   footerLinks: [
     { href: '/', label: 'home' },
     { href: '/about', label: 'about' }
@@ -180,7 +182,7 @@ const settingsController = {
 
   setFallbackImage (req, res) {
     if (!req.file) {
-      settingsController.set('fallbackImage', false)
+      settingsController.set('fallback_image', false)
       return res.status(200)
     }
 
@@ -195,7 +197,29 @@ const settingsController = {
         if (err) {
           log.error('[FALLBACK IMAGE] ' + err)
         }
-        settingsController.set('fallbackImage', baseImgPath)
+        settingsController.set('fallback_image', baseImgPath)
+        res.sendStatus(200)
+      })
+  },
+
+  setHeaderImage (req, res) {
+    if (!req.file) {
+      settingsController.set('header_image', false)
+      return res.status(200)
+    }
+
+    const uploadedPath = path.join(req.file.destination, req.file.filename)
+    const baseImgPath = path.resolve(config.upload_path, 'fallbackImage.png')
+
+    // convert and resize to png
+    return sharp(uploadedPath)
+      .resize(600)
+      .png({ quality: 99 })
+      .toFile(baseImgPath, (err) => {
+        if (err) {
+          log.error('[HEADER IMAGE] ' + err)
+        }
+        settingsController.set('header_image', baseImgPath)
         res.sendStatus(200)
       })
   }
diff --git a/server/api/index.js b/server/api/index.js
index 12729205..c3d829c6 100644
--- a/server/api/index.js
+++ b/server/api/index.js
@@ -142,6 +142,7 @@ if (config.status !== 'READY') {
   api.get('/settings', isAdmin, settingsController.getAll)
   api.post('/settings/logo', isAdmin, multer({ dest: config.upload_path }).single('logo'), settingsController.setLogo)
   api.post('/settings/fallbackImage', isAdmin, multer({ dest: config.upload_path }).single('fallbackImage'), settingsController.setFallbackImage)
+  api.post('/settings/headerImage', isAdmin, multer({ dest: config.upload_path }).single('headerImage'), settingsController.setHeaderImage)
   api.post('/settings/smtp', isAdmin, settingsController.testSMTP)
   api.get('/settings/smtp', isAdmin, settingsController.getSMTPSettings)
 
diff --git a/server/helpers.js b/server/helpers.js
index a0fadb6f..f58f3634 100644
--- a/server/helpers.js
+++ b/server/helpers.js
@@ -88,7 +88,10 @@ module.exports = {
       trusted_instances: settings.trusted_instances,
       'theme.is_dark': settings['theme.is_dark'],
       'theme.primary': settings['theme.primary'],
-      footerLinks: settings.footerLinks
+      hide_thumbs: settings.hide_thumbs,
+      hide_calendar: settings.hide_calendar,
+      footerLinks: settings.footerLinks,
+      about: settings.about
     }
     // set user locale
     res.locals.user_locale = settingsController.user_locale[res.locals.acceptedLocale]
@@ -114,18 +117,23 @@ module.exports = {
     })
 
     router.use('/fallbackimage.png', (req, res, next) => {
-      const fallbackImagePath =  settingsController.settings.fallbackImage || './static/noimg.svg'
-      return express.static(fallbackImagePath)(req, res, next)      
+      const fallbackImagePath =  settingsController.settings.fallback_image || './static/noimg.svg'
+      return express.static(fallbackImagePath, { maxAge: '1d' })(req, res, next)
     })
 
+    router.use('/headerimage.png', (req, res, next) => {
+      const headerImagePath =  settingsController.settings.header_image || './static/noimg.svg'
+      return express.static(headerImagePath)(req, res, next)
+    })    
+
     router.use('/logo.png', (req, res, next) => {
       const logoPath = settingsController.settings.logo || './static/gancio'
-      return express.static(logoPath + '.png')(req, res, next)
+      return express.static(logoPath + '.png', {maxAge: '1d'})(req, res, next)
     })
 
     router.use('/favicon.ico', (req, res, next) => {
       const faviconPath = res.locals.settings.logo ? res.locals.settings.logo + '.png' : './assets/favicon.ico'
-      return express.static(faviconPath)(req, res, next)
+      return express.static(faviconPath, {maxAge: '1d'})(req, res, next)
     })
 
     return router