mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
feat: add search input in champions tab
This commit is contained in:
Valentin Kaelin
parent
de4369baee
commit
d181eb644b
5 changed files with 81 additions and 15 deletions
|
|
@ -17,6 +17,7 @@
|
|||
<symbol id="rank-master" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M57 25c-7.4269-8.5723-13.5-15-13.5-15S37.4269 16.4277 30 25c3.7607-2.6881 8.4362-4.283 13.5-4.283 5.0638 0 9.7393 1.5949 13.5 4.283z" fill="#A5584E" /><path d="M56.6082 25.3539L85 10c0 15.3572-2.1852 30.7111-2.1852 30.7111l-17.4722 7.8974 15.2902 3.0701c-6.5525 4.3863-16.3812 12.0666-16.3812 20.8393l-12.0139-8.776C52.2377 65.9367 45.6852 78 43.5 78s-8.7377-12.0666-8.7377-14.2581c-1.0156 1.2438-12.0139 8.776-12.0139 8.776 0-8.776-9.8287-16.453-16.38119-20.8393l15.29019-3.0701-17.47215-7.8974S2 25.3539 2 10l28.3918 15.3539c-5.3042 4.0013-8.7344 10.3752-8.7344 17.552 0 8.7924 5.1502 16.3772 12.5873 19.8751 2.811 1.3228 5.9463 2.0599 9.2553 2.0599 12.0631 0 21.8426-9.8224 21.8426-21.9383 0-7.1768-3.4302-13.5474-8.7344-17.552v.0033z" fill="#A5584E" /><path d="M43.5 56C50.9554 56 57 50.1793 57 43s-6.0446-13-13.5-13S30 35.8207 30 43s6.0446 13 13.5 13z" fill="#9D48E0" /></symbol>
|
||||
<symbol id="rank-grandmaster" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M57.1993 25.3498C49.9397 16.5776 44.0033 10 44.0033 10s-5.9364 6.5776-13.196 15.3498c3.676-2.7507 8.2463-4.3828 13.196-4.3828 4.9498 0 9.52 1.6321 13.196 4.3828zm.0033.0033L88 10c0 15.3564-2.201 30.7096-2.201 30.7096L66 48.6066l17.598 3.07s-5.5008 12.066-23.0988 20.8383l-7.6985-8.7756c0 .0888-.0363.3159-.0891.6581-.3663 2.3098-1.5477 9.7758 2.2901 13.6026h-22c3.8443-3.8334 2.6497-11.3388 2.2867-13.6224-.0528-.329-.0891-.5528-.0891-.635-1.0229 1.2438-7.6985 8.7755-7.6985 8.7755C9.9028 63.7426 4.40198 51.6799 4.40198 51.6799L22 48.6099l-19.79901-7.897S0 25.3564 0 10.0033l30.7974 15.3531C25.4549 29.3576 22 35.7311 22 42.9076c0 8.792 5.1873 16.3764 12.678 19.8742 2.8312 1.3227 5.9892 2.0598 9.322 2.0598 12.15 0 22-9.822 22-21.9373 0-7.1764-3.4549-13.5467-8.7974-17.5512z" fill="#756572" /><path d="M43.5 56C50.4031 56 56 50.4031 56 43.5S50.4031 31 43.5 31 31 36.5969 31 43.5 36.5969 56 43.5 56z" fill="#CD4545" /></symbol>
|
||||
<symbol id="rank-challenger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M56 24C49.1233 15.4277 43.5 9 43.5 9S37.8767 15.4277 31 24c3.4821-2.6881 7.8113-4.283 12.5-4.283S52.5179 21.3119 56 24z" fill="#F4C874" /><path d="M56.6025 23.8464L86 9c0 14.8495-2.1009 29.6959-2.1009 29.6959L65 46.3323l16.7981 2.9686s-7.3486 11.6677-22.0489 22.2727l-7.3486-10.605C52.4006 68.0036 46.1009 79 44 79c-2.1009 0-8.4006-11.0186-8.4006-18.0314-.9765 1.2028-7.3486 10.605-7.3486 10.605C13.5505 60.9686 6.20189 49.3009 6.20189 49.3009L23 46.3323 4.10095 38.6959S2 23.8464 2 9l29.3975 14.8464C26.2979 27.7155 23 33.8786 23 40.8182c0 8.5018 4.9516 15.8359 12.1017 19.2182 2.7026 1.2791 5.717 1.9918 8.8983 1.9918 11.5977 0 21-9.4977 21-21.2132 0-6.9395-3.2979-13.0995-8.3975-16.9718v.0032z" fill="#F4C874" /><path d="M44.5 54C51.4031 54 57 48.4031 57 41.5S51.4031 29 44.5 29 32 34.5969 32 41.5 37.5969 54 44.5 54z" fill="#3FBFDD" /></symbol>
|
||||
<symbol id="search" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" /></symbol>
|
||||
<symbol id="time" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></symbol>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -59,14 +59,8 @@
|
|||
class="absolute right-0 z-30 h-full hover:text-teal-200"
|
||||
type="submit"
|
||||
>
|
||||
<svg
|
||||
class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
|
||||
/>
|
||||
<svg class="absolute vertical-center horizontal-center w-4 h-4">
|
||||
<use xlink:href="#search" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
42
client/src/components/Summoner/Champions/ChampionsSearch.vue
Normal file
42
client/src/components/Summoner/Champions/ChampionsSearch.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<Ripple color="rgba(44, 82, 130, 0.7)" class="relative inline-block rounded-lg bg-blue">
|
||||
<input
|
||||
v-model="championName"
|
||||
@input="search"
|
||||
class="input-color px-2 pl-10 py-2 rounded-lg outline-none focus:bg-blue-1000"
|
||||
type="text"
|
||||
placeholder="Search Champions"
|
||||
/>
|
||||
<svg class="ml-3 absolute left-0 vertical-center w-4 h-4">
|
||||
<use xlink:href="#search" />
|
||||
</svg>
|
||||
</Ripple>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Ripple from '@/components/Ripple.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Ripple,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
championName: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
search() {
|
||||
this.$emit('search-champions', this.championName)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-color::placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
</thead>
|
||||
<tbody class="bg-blue-760">
|
||||
<tr
|
||||
v-for="(champion, index) in championsFull"
|
||||
v-for="(champion, index) in championsToDisplay"
|
||||
:key="champion._id"
|
||||
:class="{'rounded-b-lg': index === championsFull.length - 1}"
|
||||
:class="{'rounded-b-lg': index === championsToDisplay.length - 1}"
|
||||
>
|
||||
<td
|
||||
:class="{'rounded-bl-lg': index === championsFull.length - 1}"
|
||||
:class="{'rounded-bl-lg': index === championsToDisplay.length - 1}"
|
||||
class="relative px-2 py-3 bg-blue-800 border-t-table border-t-table-70 text-white text-sm"
|
||||
>{{ champion.index + 1 }}</td>
|
||||
<td class="relative px-2 py-3 bg-blue-800 border-t-table text-white text-sm">
|
||||
|
|
@ -103,6 +103,10 @@ export default {
|
|||
champions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
search: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -163,6 +167,7 @@ export default {
|
|||
}
|
||||
],
|
||||
championsFull: [],
|
||||
championsToDisplay: [],
|
||||
sortProps: 'index',
|
||||
order: -1
|
||||
}
|
||||
|
|
@ -174,6 +179,14 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
search() {
|
||||
this.championsToDisplay = this.championsFull.filter(c => {
|
||||
return c.champion.name.toLowerCase().includes(this.search.toLowerCase())
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.championsFull = this.champions.map((champ, index) => {
|
||||
return {
|
||||
|
|
@ -182,15 +195,18 @@ export default {
|
|||
playrate: champ.count * 100 / this.totalGames,
|
||||
kda: (champ.kills + champ.assists) / champ.deaths,
|
||||
index,
|
||||
lastPlayed: timeDifference(champ.date)
|
||||
lastPlayed: timeDifference(champ.date),
|
||||
show: true
|
||||
}
|
||||
})
|
||||
|
||||
this.championsToDisplay = this.championsFull
|
||||
},
|
||||
|
||||
methods: {
|
||||
bgColor(champion, rgb, stats) {
|
||||
const value = parseFloat(champion[stats])
|
||||
const biggestValue = Math.max(...this.championsFull.map(c => parseFloat(c[stats])), 0)
|
||||
const biggestValue = Math.max(...this.championsToDisplay.map(c => parseFloat(c[stats])), 0)
|
||||
const opacity = (value / biggestValue).toFixed(2)
|
||||
|
||||
return {
|
||||
|
|
@ -205,7 +221,7 @@ export default {
|
|||
this.order = -1
|
||||
}
|
||||
|
||||
this.championsFull.sort((a, b) => {
|
||||
this.championsToDisplay.sort((a, b) => {
|
||||
const aProp = props.split('.').reduce((p, c) => p && p[c] || null, a)
|
||||
const bProp = props.split('.').reduce((p, c) => p && p[c] || null, b)
|
||||
let order = aProp > bProp ? this.order : this.order * -1
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mt-3 min-h-screen">
|
||||
<ChampionsSearch @search-champions="updateSearch" class="mt-4" />
|
||||
<ChampionsTable
|
||||
v-if="champions.length && championsLoaded"
|
||||
:champions="champions"
|
||||
class="mt-8"
|
||||
:search="searchChampions"
|
||||
class="mt-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,13 +14,21 @@
|
|||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
|
||||
import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChampionsSearch,
|
||||
ChampionsTable,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
searchChampions: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
champions: state => state.summoner.infos.champions,
|
||||
|
|
@ -34,6 +44,9 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
updateSearch(search) {
|
||||
this.searchChampions = search
|
||||
},
|
||||
...mapActions('summoner', ['championStats']),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue