index.vue

<template>
<main class="container">
  <h2 class="text-center mb-5 font-weight-light">Entrées et sorties de la toile de confiance des 2 derniers jours</h2>
  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
  <transition name="fade">
    <div class="alert alert-danger" v-if="error">{{ error }}</div>
    <div class="result" v-if="newMembers">
      <div class="row text-center">
        <div class="col-lg-6">
          <h2 class="h4 text-success">Bienvenue à</h2>
          <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
        </div>
        <div class="col-lg-6">
          <h2 class="h4 text-danger">Au revoir à</h2>
          <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
        </div>
      </div>
    </div>
  </transition>
</main>
</template>

<script>
import {LAST_EVENTS} from '@/graphql/queries.js'

const today = Math.round(Date.now() /1000)

export default {
  data() {
    return {
      breadcrumb: [
        {
          text: 'Accueil',
          to: '/'
        }
      ],
      error: null
    }
  },
  apollo: {
    newMembers : {
      query: LAST_EVENTS,
      variables() {return {start:today-86400*2,end:today}},
      update (data) {
        let result = {'entrees':[],'sorties':[]}

        for (let i = 0; i < data.membersCount.length; i++) {
          for (let j =0; j < data.membersCount[i].idList.length; j++) {
            let member = data.membersCount[i].idList[j]
            member.member.inOut = member.inOut

            if (member.inOut || member.member.status=='MEMBER') {
              if (result['entrees'].filter(function(e) { return e.hash === member.member.hash; }).length == 0) {
                result['entrees'].push(member.member)
              }
            } else {
              result['sorties'].push(member.member)
            }
          }
        }

        for (let list in result) {
          result[list].sort((a, b) => (a.uid.toLowerCase() > b.uid.toLowerCase()) ? 1 : -1)
        }
        
        return result
      },
      error (err) {this.error = err.message}
    }
  },
  mounted () {
    // Mise à jour du fil d'ariane au chargement
    $nuxt.$emit('changeRoute',this.breadcrumb)
  }
}
</script>