ToneAPI/ToneAPI_webclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed virtualList to be modulable

Browse Source
This commit is contained in:
legonzaur
2023-05-05 21:00:29 +02:00
parent d55897964c
commit c95590931f
2 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/List/VirtualList.vue
+3 -35
View File
@@ -1,23 +1,13 @@
<template>
<div ref="vlist" class="vlist" @scroll="scroll">
<div ref="vscroll" class="vscroll" :style="`padding: ${(vIndex*$props.rowHeight!)}px 0px ${(list.length*$props.rowHeight!)-(vIndex*$props.rowHeight!)}px;`">
<div :class="'playerRow ' + (player.id === $props.highlighted ? 'selected' : '')" v-for="(player, index) in visibleList"
v-bind:key="player.id" v-on:click="$emit('highlightPlayer', player.id)" :ref="`player:` + player.id">
<div><span>{{ index + 1 + vIndex }}</span></div>
<div><span>{{ player.value.username }}</span></div>
<div><span>{{ player.value.kills }}</span></div>
<div><span>{{ player.value.deaths }}</span></div>
<div><span>{{ Math.round(player.value.kills / Math.max(1, player.value.deaths) * 100) / 100 }}</span></div>
<div><span>{{ player.value.max_distance }}</span></div>
<div><span>{{ Math.round(((player.value.total_distance / player.value.kills) || 0) * 100) / 100 }}</span></div>
</div>
<slot v-for="(data, index) in visibleList" :data="data" :index="index"></slot>
</div>
</div>
</template>
<script lang="ts">
import { Player } from '@/stores/kill'
import { defineComponent, PropType, Ref } from 'vue'
import { defineComponent, PropType } from 'vue'
export default defineComponent({
data () {
@@ -28,11 +18,10 @@ export default defineComponent({
}
},
props: {
list: { type: Array as PropType<(Ref<Player> & { id: string })[]>, default: () => [] },
list: { type: Array as PropType<any[]>, default: () => [] },
rowHeight: { type: Number, default: () => 32 },
highlighted: String
},
emits: ['highlightPlayer'],
mounted () {
if (this.$props.list) {
this.vlistHeight = (this.$refs.vlist as HTMLElement)?.getBoundingClientRect().height || 0
@@ -83,25 +72,4 @@ export default defineComponent({
height: calc(100% - 3em);
}
.playerRow:nth-child(2n+1) {
background: var(--accent);
}
.playerRow:nth-child(2n) {
background: var(--bg-color);
}
.playerRow:hover {
background: var(--current-line);
}
.playerRow>div:not(:last-child){
border-right: solid var(--bg-color) 2px;
}
.playerRow>div {
padding: .5em .8em 0 .25em;
overflow: hidden;
}
</style>
src/components/PlayerList.vue
+32 -1
View File
@@ -12,7 +12,17 @@
<span v-on:click="updateSort('avg_distance')"
:class="sortingData.argument == 'avg_distance' ? 'selected' : ''">average distance</span>
</div>
<VirtualList :list="playerList" :row-height="32" @highlightPlayer="$emit('highlightPlayer', $event)" :highlighted="playerHighlighted"></VirtualList>
<VirtualList :list="playerList" :row-height="32" @highlightPlayer="$emit('highlightPlayer', $event)" :highlighted="playerHighlighted" v-slot="slotProps">
<div :class="'playerRow ' + (slotProps.data.id === $props.playerHighlighted ? 'selected' : '')" v-on:click="$emit('highlightPlayer', slotProps.data.id)">
<div><span>{{ slotProps.index+1 }}</span></div>
<div><span>{{ slotProps.data.value.username }}</span></div>
<div><span>{{ slotProps.data.value.kills }}</span></div>
<div><span>{{ slotProps.data.value.deaths }}</span></div>
<div><span>{{ Math.round(slotProps.data.value.kills / Math.max(1, slotProps.data.value.deaths) * 100) / 100 }}</span></div>
<div><span>{{ slotProps.data.value.max_distance }}</span></div>
<div><span>{{ Math.round(((slotProps.data.value.total_distance / slotProps.data.value.kills) || 0) * 100) / 100 }}</span></div>
</div>
</VirtualList>
<!-- <div :class="'playerRow ' + (player.id === $props.playerHighlighted ? 'selected' : '')"
v-on:click="$emit('highlightPlayer', player.id)"
:ref="`player:` + player.id">
@@ -180,6 +190,27 @@ export default defineComponent({
height: 2em;
}
.playerRow:nth-child(2n+1) {
background: var(--accent);
}
.playerRow:nth-child(2n) {
background: var(--bg-color);
}
.playerRow:hover {
background: var(--current-line);
}
.playerRow>div:not(:last-child){
border-right: solid var(--bg-color) 2px;
}
.playerRow>div {
padding: .5em .8em 0 .25em;
overflow: hidden;
}
.playerHeaders {
position: sticky;
top: 0;