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

fix: display error message if the summoner has no champions stats

Browse source
This commit is contained in:
Valentin Kaelin 2019-12-05 21:24:13 +01:00
parent cccf60a9ca
commit da369edb5b
1 changed files with 51 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
client/src/components/Summoner/Overview/SummonerChampions.vue
View file

@ -30,52 +30,58 @@
</Dropdown> </Dropdown>
</div> </div>
</div> </div>
<div class="mt-3 px-4 flex items-baseline text-left text-sm text-blue-300 font-bold"> <div v-if="stats.champion.length">
<div class="ml-2 w-champion text-base text-blue-400">Champion</div> <div class="mt-3 px-4 flex items-baseline text-left text-sm text-blue-300 font-bold">
<div class="w-plays">plays</div> <div class="ml-2 w-champion text-base text-blue-400">Champion</div>
<div class="w-winrate">winrate</div> <div class="w-plays">plays</div>
<div class="w-kda">kda</div> <div class="w-winrate">winrate</div>
<div class="w-kda">kda</div>
</div>
<ul class="mt-1 text-sm text-gray-100 text-left">
<li
v-for="(champion, index) in stats.champion"
:key="index"
:class="[{'rounded-b-lg': index === stats.champion.length - 1}, {'bg-blue-760': index % 2 === 0}]"
class="relative flex items-center px-4 py-2 leading-tight"
>
<div class="absolute text-xs" style="left: 6px;">{{ index + 1 }}.</div>
<div class="ml-2 w-champion flex items-center">
<div
:style="{backgroundImage: `url('${champion.champion.icon}')`}"
class="w-8 h-8 bg-center bg-cover bg-blue-1000 rounded-full flex-shrink-0"
></div>
<div class="mx-1 truncate">{{ champion.champion.name }}</div>
</div>
<div class="w-plays">
<div class="text-blue-400 text-xs">{{ champion.count }}</div>
<div
:style="{width: widthBar(champion.count, mostPlayed)}"
class="mt-2px bg-blue-400 rounded-full h-1"
></div>
</div>
<div class="w-winrate">
<div class="text-green-400 text-xs">{{ champion.wins * 100 / champion.count|percent }}</div>
<div
:style="{width: widthBar(champion.wins, champion.count)}"
class="mt-2px bg-green-400 rounded-full h-1"
></div>
</div>
<div class="w-kda">
<div
class="text-purple-400 text-xs"
>{{ kda(champion.kills, champion.deaths, champion.assists) }}</div>
<div
:style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
class="mt-2px bg-purple-400 rounded-full h-1"
></div>
</div>
</li>
</ul>
</div>
<div v-else class="px-4 py-2">
<div>No champions have been found.</div>
<div>😕</div>
</div> </div>
<ul class="mt-1 text-sm text-gray-100 text-left">
<li
v-for="(champion, index) in stats.champion"
:key="index"
:class="[{'rounded-b-lg': index === stats.champion.length - 1}, {'bg-blue-760': index % 2 === 0}]"
class="relative flex items-center px-4 py-2 leading-tight"
>
<div class="absolute text-xs" style="left: 6px;">{{ index + 1 }}.</div>
<div class="ml-2 w-champion flex items-center">
<div
:style="{backgroundImage: `url('${champion.champion.icon}')`}"
class="w-8 h-8 bg-center bg-cover bg-blue-1000 rounded-full flex-shrink-0"
></div>
<div class="mx-1 truncate">{{ champion.champion.name }}</div>
</div>
<div class="w-plays">
<div class="text-blue-400 text-xs">{{ champion.count }}</div>
<div
:style="{width: widthBar(champion.count, mostPlayed)}"
class="mt-2px bg-blue-400 rounded-full h-1"
></div>
</div>
<div class="w-winrate">
<div class="text-green-400 text-xs">{{ champion.wins * 100 / champion.count|percent }}</div>
<div
:style="{width: widthBar(champion.wins, champion.count)}"
class="mt-2px bg-green-400 rounded-full h-1"
></div>
</div>
<div class="w-kda">
<div
class="text-purple-400 text-xs"
>{{ kda(champion.kills, champion.deaths, champion.assists) }}</div>
<div
:style="{width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda)}"
class="mt-2px bg-purple-400 rounded-full h-1"
></div>
</div>
</li>
</ul>
</div> </div>
</template> </template>