Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 21:07:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: loader in 2 steps

Browse source
This commit is contained in:
Valentin Kaelin 2019-12-27 22:09:24 +01:00
parent 526611a517
commit d0bd66d1f7
5 changed files with 110 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
client/src/components/Summoner/SummonerLoader.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="text-white pb-12"> <div class="text-white">
<div class="flex justify-between"> <div class="flex justify-between">
<div style="width: 517px; height: 272px;"> <div style="width: 517px; height: 244px;">
<content-loader <content-loader
:height="272" :height="272"
:width="517" :width="517"
@ -149,78 +149,6 @@
</content-loader> </content-loader>
</div> </div>
</div> </div>
<div class="mt-4 text-center">
<div
v-for="index in 10"
:key="index"
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
style="width: 1160px; height: 144px;"
>
<content-loader
:height="144"
:width="1160"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
<circle cx="862" cy="32" r="12" />
<circle cx="862" cy="52" r="12" />
<circle cx="862" cy="72" r="12" />
<circle cx="862" cy="92" r="12" />
<circle cx="862" cy="112" r="12" />
<circle cx="926" cy="32" r="12" />
<circle cx="926" cy="52" r="12" />
<circle cx="926" cy="72" r="12" />
<circle cx="926" cy="92" r="12" />
<circle cx="926" cy="112" r="12" />
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="1106" cy="50.55" r="11.88" />
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
</content-loader>
</div>
</div>
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
<content-loader
:height="40"
:width="135"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
</content-loader>
</div>
</div> </div>
</template> </template>

11
client/src/layouts/Default.vue
View file

@ -19,7 +19,7 @@
</header> </header>
<template v-if="summonerFound"> <template v-if="summonerFound">
<div class="text-white pb-12"> <div class="text-white">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<div class="flex items-center"> <div class="flex items-center">
@ -70,18 +70,19 @@
class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100" class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
exact exact
>champions</router-link> >champions</router-link>
<transition <!-- <transition
enter-active-class="transition-all transition-fast ease-out-quad" enter-active-class="transition-all transition-fast ease-out-quad"
enter-class="opacity-0 scale-90" enter-class="opacity-0 scale-90"
enter-to-class="opacity-100 scale-100" enter-to-class="opacity-100 scale-100"
> > -->
<slot></slot> <slot></slot>
</transition> <!-- </transition> -->
</div> </div>
</template> </template>
<template v-else-if="summonerLoading"> <template v-else-if="summonerLoading">
<SummonerLoader /> <SummonerLoader />
<slot></slot>
</template> </template>
<template v-else-if="summonerNotFound"> <template v-else-if="summonerNotFound">

8
client/src/store/modules/summoner.js
View file

@ -27,6 +27,7 @@ export const state = {
export const mutations = { export const mutations = {
BASIC_REQUEST(state) { BASIC_REQUEST(state) {
state.basic.status = 'loading' state.basic.status = 'loading'
state.champions.championsLoaded = false
}, },
CHAMPIONS_FOUND(state, { champions }) { CHAMPIONS_FOUND(state, { champions }) {
state.champions.list = champions state.champions.list = champions
@ -54,7 +55,6 @@ export const mutations = {
state.basic.ranked = infos.ranked state.basic.ranked = infos.ranked
state.basic.playing = infos.playing state.basic.playing = infos.playing
state.basic.status = 'found' state.basic.status = 'found'
state.champions.championsLoaded = false
}, },
SUMMONER_NOT_FOUND(state) { SUMMONER_NOT_FOUND(state) {
state.basic.status = 'error' state.basic.status = 'error'
@ -108,6 +108,12 @@ export const actions = {
}, },
async overviewRequest({ commit }) { async overviewRequest({ commit }) {
const resp = await axios(({ url: 'summoner-overview', data: { account: state.basic.account }, method: 'POST' })).catch(() => { }) const resp = await axios(({ url: 'summoner-overview', data: { account: state.basic.account }, method: 'POST' })).catch(() => { })
// setTimeout(() => {
// console.log('OVERVIEW')
// console.log(resp.data)
// resp.data.matches = createMatchData(resp.data.matchesDetails)
// commit('OVERVIEW_FOUND', resp.data)
// }, 2000)
console.log('OVERVIEW') console.log('OVERVIEW')
console.log(resp.data) console.log(resp.data)
resp.data.matches = createMatchData(resp.data.matchesDetails) resp.data.matches = createMatchData(resp.data.matchesDetails)

80
client/src/views/Summoner.vue
View file

@ -21,10 +21,84 @@
>More matches</LoadingButton> >More matches</LoadingButton>
</div> </div>
</div> </div>
<div v-else class="" style="margin-top: 1.75rem">
<div class="mt-4 text-center">
<div
v-for="index in 10"
:key="index"
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
style="width: 1160px; height: 144px;"
>
<content-loader
:height="144"
:width="1160"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
<circle cx="862" cy="32" r="12" />
<circle cx="862" cy="52" r="12" />
<circle cx="862" cy="72" r="12" />
<circle cx="862" cy="92" r="12" />
<circle cx="862" cy="112" r="12" />
<circle cx="926" cy="32" r="12" />
<circle cx="926" cy="52" r="12" />
<circle cx="926" cy="72" r="12" />
<circle cx="926" cy="92" r="12" />
<circle cx="926" cy="112" r="12" />
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="1106" cy="50.55" r="11.88" />
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
</content-loader>
</div>
</div>
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
<content-loader
:height="40"
:width="135"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
</content-loader>
</div>
</div>
</template> </template>
<script> <script>
import { ContentLoader } from 'vue-content-loader'
import { mapState, mapActions, mapGetters } from 'vuex' import { mapState, mapActions, mapGetters } from 'vuex'
import LoadingButton from '@/components/LoadingButton.vue' import LoadingButton from '@/components/LoadingButton.vue'
import Match from '@/components/Match/Match.vue' import Match from '@/components/Match/Match.vue'
@ -34,6 +108,7 @@ import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
export default { export default {
components: { components: {
ContentLoader,
LoadingButton, LoadingButton,
Match, Match,
SummonerChampions, SummonerChampions,
@ -45,11 +120,12 @@ export default {
...mapState({ ...mapState({
overview: state => state.summoner.overview overview: state => state.summoner.overview
}), }),
...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded']) ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
}, },
created() { created() {
this.overviewRequest() if(this.summonerFound)
this.overviewRequest()
}, },
methods: { methods: {

33
client/src/views/SummonerChampions.vue
View file

@ -1,24 +1,23 @@
<template> <template>
<div> <div v-if="championsLoaded" class="mt-3">
<div class="mt-3"> <div class="mt-4 flex items-center">
<template v-if="championsLoaded"> <ChampionsSearch @search-champions="updateSearch" />
<div class="mt-4 flex items-center"> <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
<ChampionsSearch @search-champions="updateSearch" />
<FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
</div>
<ChampionsTable
v-if="champions.length"
:champions="champions"
:search="searchChampions"
class="mt-6"
/>
</template>
</div> </div>
<ChampionsTable
v-if="champions.length"
:champions="champions"
:search="searchChampions"
class="mt-6"
/>
</div>
<div v-else class="mt-3">
<div class="mt-4 text-white">LOADING CHAMPIONS</div>
</div> </div>
</template> </template>
<script> <script>
import { mapActions, mapState } from 'vuex' import { mapActions, mapGetters, mapState } from 'vuex'
import { gameModes } from '@/data/data.js' import { gameModes } from '@/data/data.js'
import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue' import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue' import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
@ -53,6 +52,7 @@ export default {
}, {}) }, {})
return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues } return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues }
}, },
...mapGetters('summoner', ['summonerFound']),
...mapState({ ...mapState({
champions: state => state.summoner.champions.list, champions: state => state.summoner.champions.list,
championsLoaded: state => state.summoner.champions.championsLoaded, championsLoaded: state => state.summoner.champions.championsLoaded,
@ -61,7 +61,8 @@ export default {
}, },
created() { created() {
if (!this.championsLoaded) { console.log('HELLO')
if (!this.championsLoaded && this.summonerFound) {
console.log('FETCH CHAMPIONS') console.log('FETCH CHAMPIONS')
this.championStats() this.championStats()
} }