filteredEventsWithPast, check db connection

components/Calendar.vue

@@ -39,8 +39,8 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['filteredEvents']),
-    ...mapState(['tags']),
+    ...mapGetters(['filteredEventsWithPast']),
+    ...mapState(['tags', 'filters']),
     attributes () {
       const colors = ['indigo', 'orange', 'yellow', 'green', 'teal', 'blue', 'red', 'purple', 'pink', 'grey']
       const tags = take(this.tags, 10).map(t=>t.tag)
@@ -48,8 +48,9 @@ export default {
       let attributes = []
       attributes.push ({ key: 'today', dates: new Date(), highlight: { color: 'green' }})
 
+      const that = this
       function getColor(event) {
-        const color = { class: event.past ? 'past-event vc-rounded-full' : 'vc-rounded-full', color: 'blue' }
+        const color = { class: event.past && !that.filters.show_past_events ? 'past-event vc-rounded-full' : 'vc-rounded-full', color: 'blue' }
         const tag = get(event, 'tags[0].tag')
         if (!tag) return color
         const idx = tags.indexOf(tag)
@@ -58,14 +59,14 @@ export default {
         return color
       }
 
-      attributes = attributes.concat(this.filteredEvents
+      attributes = attributes.concat(this.filteredEventsWithPast
         .filter(e => !e.multidate)
         .map(e => ({
           key: e.id, 
           dot: getColor(e),
           dates: new Date(e.start_datetime*1000)})))
 
-      attributes = attributes.concat(this.filteredEvents
+      attributes = attributes.concat(this.filteredEventsWithPast
         .filter(e => e.multidate)
         .map( e => ({ key: e.id, highlight: getColor(e), dates: { 
           start: new Date(e.start_datetime*1000), end: new Date(e.end_datetime*1000) }})))

components/Home.vue

@@ -9,7 +9,7 @@
       Calendar
     .row.m-0
 
-      .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in filteredEvents' v-if='!event.past')
+      .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in filteredEvents')
         a(:id='event.newDay' v-if='event.newDay')
           .d-block.d-sm-none
             el-divider {{event.start_datetime|day}}

components/List.vue

@@ -4,7 +4,6 @@ div#list
   el-timeline
     el-timeline-item(
       v-for='event in events'
-      v-if='!event.past'
       :key='event.id'
       :timestamp='event|event_when'
       placement='top' icon='el-icon-arrow-down' size='large'