Fix thick divider lines between alert days, and persist current spot/alert page across navigations

src/components/AlertsList.vue

@@ -17,7 +17,7 @@
       </template>
     </CardPagination>
     <p v-else-if="!$mq.desktop && cardAlerts.length === 0">No matching alerts found.</p>
-    <b-table v-else default-sort="dateActivated" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :row-class="rowClass">
+    <b-table v-else default-sort="dateActivated" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :current-page.sync="curPage" :row-class="rowClass">
       <template slot-scope="props">
         <b-table-column field="dateActivated" class="timestamp" label="Date/Time" sortable>
           <span v-html="formatDateTimeRelative(props.row.dateActivated)" />
@@ -136,10 +136,11 @@ export default {
       return (!prevRow || !moment.utc(prevRow.dateActivated).isSame(moment.utc(row.dateActivated), 'day'))
     },
     rowClass (row, index) {
-      if (index === 0 || index === this.data.length) {
+      let realIndex = (this.curPage - 1) * this.perPage + index
+      if (index === 0 || realIndex === 0 || realIndex === this.data.length) {
         return ''
       }
-      if (!moment.utc(this.data[index - 1].dateActivated).isSame(moment.utc(row.dateActivated), 'day')) {
+      if (!moment.utc(this.data[realIndex - 1].dateActivated).isSame(moment.utc(row.dateActivated), 'day')) {
         return 'date-change'
       } else {
         return ''
@@ -194,6 +195,14 @@ export default {
           return 0
         }
       })
+    },
+    curPage: {
+      get () {
+        return this.$store.state.alertPage
+      },
+      set (val) {
+        this.$store.commit('setAlertPage', val)
+      }
     }
   },
   data () {

src/components/SpotsList.vue

@@ -13,7 +13,7 @@
         </SpotCard>
       </template>
     </CardPagination>
-    <b-table v-else :default-sort="['timeStamp', 'desc']" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :row-class="rowClass">
+    <b-table v-else :default-sort="['timeStamp', 'desc']" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :current-page.sync="curPage" :row-class="rowClass">
       <template slot-scope="props">
         <b-table-column field="timeStamp" class="timestamp" label="Time" sortable>
           <span v-html="formatTimeDay(props.row.timeStamp)" />
@@ -135,6 +135,14 @@ export default {
           return 0
         }
       })
+    },
+    curPage: {
+      get () {
+        return this.$store.state.spotPage
+      },
+      set (val) {
+        this.$store.commit('setSpotPage', val)
+      }
     }
   },
   methods: {

src/mixins/utils.js

@@ -131,7 +131,7 @@ export default {
     formatDateTimeRelative (date) {
       let dmoment = moment.utc(date)
       let dateFormatted
-      if (dmoment.diff(moment.utc()) < 6 * 86400 * 1000) {
+      if (dmoment.diff(moment.utc(), 'days') < 7) {
         dateFormatted = dmoment.format('ddd')
       } else {
         if (dmoment.isSame(moment.utc(), 'year')) {

src/store.js

@@ -33,7 +33,9 @@ const store = new Vuex.Store({
     myActivatedSummits: null,
     myChasedSummits: null,
     myActivatedSummitsThisYear: null,
-    homeQth: null
+    homeQth: null,
+    spotPage: 1,
+    alertPage: 1
   },
   mutations: {
     SOCKET_ONOPEN (state, event) {
@@ -100,6 +102,12 @@ const store = new Vuex.Store({
     },
     setHomeQth (state, newHomeQth) {
       state.homeQth = newHomeQth
+    },
+    setSpotPage (state, newSpotPage) {
+      state.spotPage = newSpotPage
+    },
+    setAlertPage (state, newAlertPage) {
+      state.alertPage = newAlertPage
     }
   },
   actions: {