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

Add remove filter button

Browse Source
This commit is contained in:
legonzaur
2023-05-01 17:50:01 +02:00
parent ac57843c48
commit f815cb3d1a
1 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/PlayerView.vue
+30 -19
View File
@@ -11,25 +11,36 @@
<option></option> <option></option>
<option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option> <option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
</select> --> </select> -->
<span class="multiselect-wrapper">
<VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select server" v-model="model.server" <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select server" v-model="model.server"
:options="groupedServers" group-values="servers" group_label="id" :group-select="false" :allow-empty="true" :multiple="false" :custom-label="((e:any) => e.name)" track-by="name" label="name" :options="groupedServers" group-values="servers" group_label="id" :group-select="false" :allow-empty="true"
></VueMultiselect> :multiple="false" :custom-label="((e: any) => e.name)" track-by="name" label="name">
</VueMultiselect>
<button @click="model.server = undefined">X</button>
</span>
<VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select weapon" v-model="model.weapon" :custom-label="((e:any) => weaponLocale[e] || e)" <span class="multiselect-wrapper">
:options="sortedWeaponList" :allow-empty="true" <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select weapon" v-model="model.weapon"
></VueMultiselect> :custom-label="((e: any) => weaponLocale[e] || e)" :options="sortedWeaponList" :allow-empty="true">
</VueMultiselect>
<button @click="model.weapon = undefined">X</button>
</span>
<VueMultiselect :options-limit="20" selectLabel="" deselectLabel="remove" placeholder="Search player" v-model="playerHighlighted" <span class="multiselect-wrapper">
:options="sortedPlayerList" :allow-empty="true" :custom-label="((e:Player) => e?.username)"></VueMultiselect> <VueMultiselect :options-limit="20" selectLabel="" deselectLabel="remove" placeholder="Search player"
v-model="playerHighlighted" :options="sortedPlayerList" :allow-empty="true"
:custom-label="((e: Player) => e?.username)"></VueMultiselect>
<button @click="playerHighlighted = undefined">X</button>
</span>
</div> </div>
<div id="playerView"> <div id="playerView">
<PlayerList :filters="filters" v-on:highlightPlayer="highlight_player" <PlayerList :filters="filters" v-on:highlightPlayer="highlight_player" :playerHighlighted="playerHighlighted?.id">
:playerHighlighted="playerHighlighted?.id"></PlayerList> </PlayerList>
<PlayerChart :filters="filters" v-on:highlightPlayer="highlight_player" <PlayerChart :filters="filters" v-on:highlightPlayer="highlight_player" :playerHighlighted="playerHighlighted?.id">
:playerHighlighted="playerHighlighted?.id"></PlayerChart> </PlayerChart>
<WeaponChart :filters="{player: playerHighlighted?.id, ...filters}" :playerHighlighted="playerHighlighted?.id"></WeaponChart> <WeaponChart :filters="{ player: playerHighlighted?.id, ...filters }" :playerHighlighted="playerHighlighted?.id">
</WeaponChart>
</div> </div>
</template> </template>
@@ -51,11 +62,11 @@ export default defineComponent({
data () { data () {
return { return {
model: { server: undefined, weapon: undefined } as unknown as {weapon:Weapon | Weapon[], server: (Server& {name?:string}) | (Server& {name?:string})[]}, model: { server: undefined, weapon: undefined } as unknown as { weapon: Weapon | Weapon[] | undefined, server: (Server & { name?: string }) | (Server & { name?: string })[] | undefined },
filters: {} as Filters, filters: {} as Filters,
store: useKillStore(), store: useKillStore(),
playerHighlighted: undefined as (Player & {id:string}) | undefined, playerHighlighted: undefined as (Player & { id: string }) | undefined,
weaponLocale: weapons as {[key:string]:string} weaponLocale: weapons as { [key: string]: string }
} }
}, },
computed: { computed: {
@@ -67,7 +78,7 @@ export default defineComponent({
return data return data
}, },
groupedServers () { groupedServers () {
const hosts = [] as {id:string, servers:(Server& {name?:string})[] }[] const hosts = [] as { id: string, servers: (Server & { name?: string })[] }[]
Object.entries(this.servers).forEach((e) => { Object.entries(this.servers).forEach((e) => {
if (!hosts.find(host => host.id === e[1].host + 'sfdsdfsd')) hosts.push({ id: e[1].host + 'sfdsdfsd', servers: [] as Server[] }) if (!hosts.find(host => host.id === e[1].host + 'sfdsdfsd')) hosts.push({ id: e[1].host + 'sfdsdfsd', servers: [] as Server[] })
hosts.find(host => host.id === e[1].host + 'sfdsdfsd')?.servers.push({ name: e[0], ...e[1] }) hosts.find(host => host.id === e[1].host + 'sfdsdfsd')?.servers.push({ name: e[0], ...e[1] })
@@ -93,7 +104,7 @@ export default defineComponent({
const weapons = Object.keys(this.weapons) const weapons = Object.keys(this.weapons)
return weapons.sort() return weapons.sort()
}, },
sortedServerList ():string[] { sortedServerList (): string[] {
if (!this.servers) return [] if (!this.servers) return []
const servers = Object.keys(this.servers) const servers = Object.keys(this.servers)
return servers.sort() return servers.sort()
@@ -122,7 +133,7 @@ export default defineComponent({
} }
}, },
methods: { methods: {
highlight_player (playerid:string) { highlight_player (playerid: string) {
const player = this.players[playerid] const player = this.players[playerid]
if (player) { if (player) {
this.playerHighlighted = { id: playerid, ...player } this.playerHighlighted = { id: playerid, ...player }