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 @@ 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 }) },