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
+25 -14
View File
@@ -11,25 +11,36 @@
<option></option>
<option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
</select> -->
<span class="multiselect-wrapper">
<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"
></VueMultiselect>
: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">
</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)"
:options="sortedWeaponList" :allow-empty="true"
></VueMultiselect>
<span class="multiselect-wrapper">
<VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select weapon" v-model="model.weapon"
: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"
:options="sortedPlayerList" :allow-empty="true" :custom-label="((e:Player) => e?.username)"></VueMultiselect>
<span class="multiselect-wrapper">
<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 id="playerView">
<PlayerList :filters="filters" v-on:highlightPlayer="highlight_player"
:playerHighlighted="playerHighlighted?.id"></PlayerList>
<PlayerChart :filters="filters" v-on:highlightPlayer="highlight_player"
:playerHighlighted="playerHighlighted?.id"></PlayerChart>
<WeaponChart :filters="{player: playerHighlighted?.id, ...filters}" :playerHighlighted="playerHighlighted?.id"></WeaponChart>
<PlayerList :filters="filters" v-on:highlightPlayer="highlight_player" :playerHighlighted="playerHighlighted?.id">
</PlayerList>
<PlayerChart :filters="filters" v-on:highlightPlayer="highlight_player" :playerHighlighted="playerHighlighted?.id">
</PlayerChart>
<WeaponChart :filters="{ player: playerHighlighted?.id, ...filters }" :playerHighlighted="playerHighlighted?.id">
</WeaponChart>
</div>
</template>
@@ -51,7 +62,7 @@ export default defineComponent({
data () {
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,
store: useKillStore(),
playerHighlighted: undefined as (Player & { id: string }) | undefined,