Piszemy aplikację we Vue.js - cz. 4. Pobieramy statystyki

Czas na kolejny etap tworzenia naszej aplikacji. Dziś pobierzemy szczegóły użytkownika i wyświetlili statystyki gier z rozpiską na czołgi.

Jak zawsze - na blogu wersja sformatowana :)

Pobierz statystyki

Poprzednią część skończyliśmy na pobieraniu użytkowników z regionu w celu wyciągnięcia Account_id, które będzie potrzebne do pobrania statystyk.

Po kliknięciu w nick użytkownika z listy przypiszę go do zmiennej selectedUser, a z niej pobiorę dane do odpytania API o statystyki użytkownika.

Funkcja, która ustawi użytkownika jest możliwie prosta:

	setUser (user) {
        this.selectedUser = user;
    	this.getUserData(); // tutaj pobieramy dane użytkownika
    },

A w HTML? Tak:

	<template v-for="user in userList">
    	    <li class="userFinder__item" :class="{'userFinder__item--active' : user.nickname == selectedUser.nickname }" @click="setUser(user)">{{ user.nickname }}</li>
    </template>

We vue.js jest taki element jak template, w którym można zrobić pętle lub warunek. Elementu nie ma w skompilowanym kodzie, a pozwala nam np. dodać klasę na element w pętli, który jest aktywny:

	:class="{'userFinder__item--active' : user.nickname == selectedUser.nickname }"

Dobra, to teraz pobieramy wszystkie dane użytkownika, które da nam adres: https://api.worldoftanks.eu/wot/account/info/?application_id=demo&acco...

		getUserData () {
                const self = this;
                axios({
                    method: 'get',
                    url: self.api + self.user.region + '/wot/account/info/?application_id=' + self.apiKey + '&account_id=' + self.selectedUser.account_id
                }).then(function (response) {
                    self.loading = false;
                    self.userStatistics = response.data.data[self.selectedUser.account_id];
                }).catch(function (error) {
                    console.log(error);
                    self.loading = false;
                });
            }

Na początek wyświetlimy podstawowe dane jak np. zadane i otrzymane uderzenia i procent trafień:

				
                <ul class="userDetails__items">
                   <li class="userDetails__item userDetails__item--red">
                       {{ userStatistics.statistics.all.damage_received.toLocaleString('pl-PL') }}
                        <span class="userDetails__label">otrzymane obrażenia</span>
                   </li>
                    <li class="userDetails__item userDetails__item--blue">
                        {{ userStatistics.statistics.all.damage_dealt.toLocaleString('pl-PL') }}
                        <span class="userDetails__label">zadane obrażenia</span>
                    </li>
                    <li class="userDetails__item userDetails__item--green">
                        {{ userStatistics.statistics.all.hits_percents }}%
                        <span class="userDetails__label">procent trafień</span>
                    </li>
                </ul>

To jest bardzo proste - normalny obiekt po którym się poruszasz.

Statystyki z podziałem na pojazdy

Samo pobranie statystyk gracza dla czogłów ogranicza się do jednego zapytania - https://api.worldoftanks.eu/wot/account/tanks/?application_id=demo&acc.... W odpowiedzi dostajemy tylko 4 informacje:

    mark_of_mastery:4
    statistics: {
        battles:481
        wins:227
    }
    tank_id:64561

Ej, ale ja chcę nazwę czogłu! No to lecimy... Dla każdego pojazdu musimy odpytać kolejny adres i pobrać o nim informację z Tankopedii ;) - https://api.worldoftanks.eu/wot/encyclopedia/tankinfo/?application_id=...

Żeby nie obciążać WG ograniczymy na start pobranie 10 pojazdów. Funkcje zainicjuj w momencie wybrania użytkownika.

    getUserTanks () {
                const self = this;
                self.loading = true;
                self.userTanks = [];
                axios({
                    method: 'get',
                    url: self.api + self.user.region + '/wot/account/tanks/?application_id=' + self.apiKey + '&account_id=' + self.selectedUser.account_id
                }).then(function (response) {
                    let tanks = response.data.data[self.selectedUser.account_id];
                    for (let key in tanks) {
                        self.getTankData(tanks[key], key);
                    }
                }).catch(function (error) {
                    console.log(error);
                    self.loading = false;
                });
            },
            getTankData (tank, key) {
                const self = this;
                let tankId = tank.tank_id;
                if (key < self.limit) {
                    axios({
                        method: 'get',
                        url: self.api + self.user.region + '/wot/encyclopedia/tankinfo/?application_id=' + self.apiKey + '&tank_id=' + tankId
                    }).then(function (response) {
                        self.loading = false;
                        self.userTanks.push({
                            tank_stats: tank,
                            tank_details: response.data.data[tankId]
                        });
                    }).catch(function (error) {
                        console.log(error);
                        self.loading = false;
                    });
                }
            }

I HTML:

	<div class="userDetails__items">
                    <template v-for="(tank, key) in userTanks">
                        <div class="userDetails__tank" v-if="key < limit">
                            <img :src="tank.tank_details.image">
                            <div class="userDetails__tankInfo">
                                <b>{{ tank.tank_details.name_i18n }}</b>
                                Wygrane: {{ tank.tank_stats.statistics.wins }}

                                Bitwy: {{ tank.tank_stats.statistics.battles }}
                            </div>
                        </div>
                    </template>
                </div>

Całość dostępna na Githubie, na odpowiednim branchu. Najprostszy etap kończymy w tym miejscu. Kolejnym razem pokażę Ci vuex, rozbijemy statystyki na podstrony i podzielimy aplikację na małe komponenty.

Na tym etapie nasza aplikacja prezentuje się następująco: