diff --git a/components/Calendar.vue b/components/Calendar.vue
index cee0d865..a0de2f25 100644
--- a/components/Calendar.vue
+++ b/components/Calendar.vue
@@ -4,7 +4,7 @@
ref='cal'
v-model='selectedDate'
title-position='left'
- :is-dark="settings['theme.is_dark']"
+ :is-dark="is_dark"
:columns="!$vuetify.breakpoint.smAndDown ? 2 : 1"
@input='click'
@update:from-page='updatePage'
@@ -15,20 +15,14 @@
aria-label='Calendar'
is-expanded
is-inline)
- //- template(v-slot="{ inputValue, inputEvents }")
- v-btn#calendarButton(v-on='inputEvents' text tile :color='selectedDate ? "primary" : "" ') {{inputValue || $t('common.calendar')}}
- v-icon(v-if='selectedDate' v-text='mdiClose' right small icon @click.prevent.stop='selectedDate = null')
- v-icon(v-else v-text='mdiChevronDown' right small icon)
.calh.d-flex.justify-center.align-center(slot='placeholder')
v-progress-circular(indeterminate)
- //- v-btn#calendarButton(text tile) {{$t('common.calendar')}}
- //- v-icon(v-text='mdiChevronDown' right small icon)
diff --git a/components/ThemeView.vue b/components/ThemeView.vue
index ff34e658..712efc9a 100644
--- a/components/ThemeView.vue
+++ b/components/ThemeView.vue
@@ -1,48 +1,31 @@
-div.p-0.m-0.d-flex.justify-end(:key='reload')
- v-icon.ml-5(@click='_is_dark()' v-text='mdiContrastCircle')
- v-icon.ml-5(@click='_hide_thumbs()' v-if="!hide_thumbs" v-text='!hide_thumbs_icon ? mdiViewList : mdiViewModule')
+div.p-0.m-0.d-flex.justify-end
+ v-icon.ml-5(@click='toggleDark' v-text='mdiContrastCircle')
+ v-icon.ml-5(@click='toggleHideThumbs' v-text='hide_thumbs ? mdiViewList : mdiViewModule')
diff --git a/layouts/default.vue b/layouts/default.vue
index 2227c6ca..29e5e22e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -19,7 +19,7 @@ import Appbar from '../components/Appbar.vue'
import Snackbar from '../components/Snackbar'
import Footer from '../components/Footer'
import Confirm from '../components/Confirm'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
export default {
head () {
@@ -32,14 +32,12 @@ export default {
},
name: 'Default',
components: { Appbar, Snackbar, Footer, Confirm },
- computed: mapState(['settings']),
+ computed: {
+ ...mapState(['settings']),
+ ...mapGetters(['is_dark'])
+ },
created () {
- const theme_is_dark = this.$cookies.get('theme.is_dark')
- if ( theme_is_dark != null ) {
- this.$vuetify.theme.dark = theme_is_dark
- } else {
- this.$vuetify.theme.dark = this.settings['theme.is_dark']
- }
+ this.$vuetify.theme.dark = this.is_dark
}
}
diff --git a/pages/index.vue b/pages/index.vue
index 3d7cd736..e02c2fa7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,7 +10,7 @@ v-container.px-2.px-sm-6.pt-0
Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
//- Events
- #events.mt-sm-4.mt-2(:key="reload_events")
+ #events.mt-sm-4.mt-2
Event(:event='event' v-for='(event, idx) in visibleEvents' :lazy='idx>2' :key='event.id')
@@ -48,7 +48,6 @@ export default {
tmpEvents: [],
selectedDay: null,
storeUnsubscribe: null,
- reload_events: 0
}
},
head () {
@@ -100,10 +99,6 @@ export default {
}
}
}})
- // this.$root.$on('search', debounce(this.search, 100))
- // this.$root.$on('layout_loaded', () => {
- // this.reload_events++
- // })
},
destroyed () {
this.$root.$off('dayclick')
diff --git a/store/index.js b/store/index.js
index a0179aa2..09a7b07e 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,6 +1,10 @@
import dayjs from 'dayjs'
export const state = () => ({
+ localSettings : {
+ hide_thumbs: null,
+ 'theme.is_dark': null
+ },
settings: {
instance_timezone: 'Europe/Rome',
instance_name: '',
@@ -21,7 +25,10 @@ export const state = () => ({
enable_trusted_instances: true,
trusted_instances: [],
trusted_instances_label: '',
- footerLinks: []
+ footerLinks: [],
+ hide_thumbs: false,
+ 'theme.is_dark': true,
+ hide_calendar: false
},
filter: {
query: '',
@@ -32,6 +39,15 @@ export const state = () => ({
events: []
})
+export const getters = {
+ hide_thumbs (state) {
+ return (state.localSettings['hide_thumbs'] === null) ? state.settings.hide_thumbs : state.localSettings.hide_thumbs
+ },
+ is_dark (state) {
+ return (state.localSettings['theme.is_dark'] === null) ? state.settings['theme.is_dark'] : state.localSettings['theme.is_dark']
+ }
+}
+
export const mutations = {
setSettings (state, settings) {
state.settings = settings
@@ -39,6 +55,9 @@ export const mutations = {
setSetting (state, setting) {
state.settings[setting.key] = setting.value
},
+ setLocalSetting(state, setting) {
+ state.localSettings[setting.key] = setting.value
+ },
setAnnouncements (state, announcements) {
state.announcements = announcements
},
@@ -53,13 +72,17 @@ export const mutations = {
export const actions = {
// this method is called server side only for each request for nuxt
// we use it to get configuration from db, set locale, etc...
- nuxtServerInit ({ commit }, { _req, res }) {
+ nuxtServerInit ({ commit }, { res, app }) {
+
if (res.locals && res.locals.settings) {
commit('setSettings', res.locals.settings)
}
commit('setFilter', { type: 'show_recurrent',
value: res.locals.settings.allow_recurrent_event && res.locals.settings.recurrent_event_visible })
+ commit('setLocalSetting', { key: 'hide_thumbs', value: app.$cookies.get('hide_thumbs') })
+ commit('setLocalSetting', { key: 'theme.is_dark', value: app.$cookies.get('theme.is_dark') })
+
if (res.locals.status === 'READY') {
commit('setAnnouncements', res.locals.announcements)
}
@@ -75,6 +98,13 @@ export const actions = {
await this.$axios.$post('/settings', setting)
commit('setSetting', setting)
},
+ async setLocalSetting ({ commit }, setting) {
+ this.$cookies.set(setting.key, setting.value, {
+ path: '/',
+ maxAge: 60 * 60 * 24 * 7
+ })
+ commit('setLocalSetting', setting)
+ },
setFilter ({ commit }, [type, value]) {
commit('setFilter', { type, value })
},