Abari Tournament

by Justin M

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="el">
<span v-if="loading">
  Getting tournament standings...
</span>

<span v-else-if="!players.length" v-cloak>
  ¯\_(ツ)_/¯ Something went wrong!
</span>

<div v-else v-cloak>
<table class="table">
  <thead>
    <tr>
      <th rowspan="2">Rank</th>
      <th rowspan="2">Points</th>
      <th rowspan="2">Name</th>
      <th colspan="3">IFPA Stats (updated: {{ ifpaLastUpdated() }})</th>
    </tr>
    <tr>
      <th>WPPR Rank</th>
      <th>WPPR Points</th>
      <th>NC State Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="player in players">
      <td>{{ player.position }}</td>
      <td>{{ player.points }}</td>
      <td>{{ player.name }}</td>
      <template v-if="player.ifpa_stats">
        <td>{{ player.ifpa_stats.player_stats.current_wppr_rank }}</td>
        <td>{{ player.ifpa_stats.player_stats.current_wppr_value }}</td>
        <td>{{ getNcRank(player.ifpa_stats.championshipSeries) }}</td>
      </template>
      <template v-else>
        <td></td>
        <td></td>
        <td></td>
      </template>
    </tr>
  </tbody>
</table>  
</div>

</div>

CSS

[v-cloak] {
  display: none;
}

JavaScript

var vm = new Vue({
  el: '#el',
  created () {
		this.getData()
  },
  data () {
  	return {
    	players: [],
      loading: true
    }
  },
  methods: {
  	getData: function() {
      var xhr = new XMLHttpRequest()

      xhr.onreadystatechange = function(vm) {
        if (this.readyState === XMLHttpRequest.DONE) {
          if (this.status === 200) {
            vm.players = JSON.parse(this.responseText);
          } 
    		vm.loading = false
        }
      }.bind(xhr, this)

      xhr.open("GET", 'https://pinballer.neonwine.com/matchplay_events/g2yx.json');
      xhr.send();    
    },
  	getNcRank: function(series) {
    	var nc = series.find(function(state){ 
      	return state.group_code === "NC" }
      )
      return nc ? nc.rank : ''
    },
    ifpaLastUpdated: function() {
    	var ifpa_player = this.players.find(function(standing){
      	return standing.ifpa_updated_at
      })
      return ifpa_player ? 
      	new Date(ifpa_player.ifpa_updated_at).toLocaleString() : 'No IFPA Players?'
    }
  }
})