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

Add multiselection

Browse Source
This commit is contained in:
legonzaur
2023-06-20 12:24:33 +02:00
parent 8bdfc2586a
commit a6e75006e6
3 changed files with 92 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.ts
+5 -3
View File
@@ -57,12 +57,14 @@ function registerWebSocketKill (data : websocketData) {
return objectEqual(filterWithoutPlayer, e.value.filter)
}))
if (!list) return
if (!(!list.filter.server || list.filter.server === data.servername)) return
if (!(!list.filter.server || list.filter.server.includes(data.servername))) return
const WeaponFilter = (!list.filter.weapon || list.filter.weapon === data.cause_of_death)
const CurrentWeaponFilter = list.filter.weapon === data.attacker_current_weapon
const WeaponFilter = (!list.filter.weapon || list.filter.weapon.includes(data.cause_of_death))
const CurrentWeaponFilter = list.filter.weapon?.includes(data.attacker_current_weapon)
if (!(WeaponFilter || CurrentWeaponFilter)) return
if (!(!list.filter.gamemode || list.filter.gamemode.includes(data.game_mode))) return
if (!list.data[data.victim_id]) {
list.data[data.victim_id] = ref({
deaths: 0,
src/stores/kill.ts
+34 -8
View File
@@ -3,12 +3,12 @@ import * as assert from 'assert'
import { Ref, ref, shallowRef, triggerRef, unref } from 'vue'
export interface Filters {
server?: string;
server?: string[];
player?: string;
weapon?: string;
host?: string;
map?: string;
gamemode?: string;
weapon?: string[];
host?: string[];
map?: string[];
gamemode?: string[];
}
export function removeNullEntries (a: Filters) {
@@ -155,6 +155,8 @@ export const useKillStore = defineStore('kill', {
state.weapons.find((e) => objectEqual(unref(e).filter, filters)),
getServerList: (state) => (filters: Filters) =>
state.servers.find((e) => objectEqual(unref(e).filter, filters)),
getGamemodeList: (state) => (filters: Filters) =>
state.gamemodes.find((e) => objectEqual(unref(e).filter, filters)),
getNSServers: (state) => state.nsServers
},
actions: {
@@ -167,7 +169,7 @@ export const useKillStore = defineStore('kill', {
}
fetchWithLoading(
'https://tone.sleepycat.date/v2/client/players?' +
new URLSearchParams(filter as Record<keyof Filters, string>),
new URLSearchParams(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
(progress) => {
if (entry && unref(entry).progress !== 1) {
unref(entry).progress = progress
@@ -192,7 +194,7 @@ export const useKillStore = defineStore('kill', {
fetchWithLoading(
'https://tone.sleepycat.date/v2/client/weapons?' +
new URLSearchParams(filter as Record<keyof Filters, string>),
new URLSearchParams(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
(progress) => {
if (entry && unref(entry).progress !== 1) {
unref(entry).progress = progress
@@ -216,7 +218,7 @@ export const useKillStore = defineStore('kill', {
}
fetchWithLoading(
'https://tone.sleepycat.date/v2/client/servers?' +
new URLSearchParams(filter as Record<keyof Filters, string>),
new URLSearchParams(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
(progress) => {
if (entry && unref(entry).progress !== 1) {
unref(entry).progress = progress
@@ -231,6 +233,30 @@ export const useKillStore = defineStore('kill', {
})
return entry
},
fetchGamemodes (filter: Filters) {
filter = removeNullEntries(filter)
let entry = this.gamemodes.find((e) => objectEqual(unref(e).filter, filter))
if (!entry) {
entry = shallowRef({ filter, data: {} })
this.gamemodes.push(entry)
}
fetchWithLoading(
'https://tone.sleepycat.date/v2/client/gamemodes?' +
new URLSearchParams(Object.entries(filter).map<string[][]>(e => [e[1]].flat().map(v => [e[0], v])).flat(1)),
(progress) => {
if (entry && unref(entry).progress !== 1) {
unref(entry).progress = progress
if (progress !== 1) triggerRef(entry)
}
}
).then(async response => {
if (entry) {
unref(entry).data = Object.fromEntries(Object.entries(await response?.json()).map(e => [e[0], ref(e[1] as Kill)]))
triggerRef(entry)
}
})
return entry
},
fetchNSServers () {
fetch(
'https://northstar.tf/client/servers').then(async response => {
src/views/PlayerView.vue
+53 -15
View File
@@ -8,11 +8,28 @@
v-model="model.server"
:options="sortedServerList"
:allow-empty="true"
:close-on-select="false"
:multiple="true"
>
</VueMultiselect>
<button @click="model.server = undefined" :disabled="!model.server">X</button>
</span>
<span class="multiselect-wrapper">
<VueMultiselect
selectLabel=""
deselectLabel="remove"
placeholder="Select gamemode"
v-model="model.gamemode"
:options="sortedGamemodeList"
:allow-empty="true"
:close-on-select="false"
:multiple="true"
>
</VueMultiselect>
<button @click="model.gamemode = undefined" :disabled="!model.gamemode">X</button>
</span>
<span class="multiselect-wrapper">
<VueMultiselect
selectLabel=""
@@ -40,6 +57,7 @@
></VueMultiselect>
<button @click="playerHighlighted = undefined" :disabled="!playerHighlighted">X</button>
</span>
<button @click="applyFilters" :disabled="filters.server == model.server && filters.gamemode == model.gamemode && filters.weapon == model.weapon">Apply Filters</button>
</div>
<div id="playerView">
@@ -65,7 +83,7 @@
</template>
<script lang="ts">
import { Player, Weapon, Server, useKillStore, Filters } from '@/stores/kill'
import { Player, Weapon, Server, Kill, useKillStore, Filters } from '@/stores/kill'
import PlayerList from '@/components/PlayerList.vue'
import PlayerChart from '@/components/PlayerChart.vue'
import WeaponChart from '@/components/WeaponChart.vue'
@@ -87,8 +105,9 @@ export default defineComponent({
data () {
return {
model: { server: undefined, weapon: undefined } as unknown as {
weapon: string | undefined;
server: string | undefined;
weapon: string[] | undefined;
server: string[] | undefined;
gamemode: string[] | undefined;
},
filters: {} as Filters,
store: useKillStore(),
@@ -98,10 +117,13 @@ export default defineComponent({
},
beforeCreate () {
let server
if (this.$route.query.server) server = this.$route.query.server?.toString()
if (this.$route.query.server) server = [this.$route.query.server?.toString()]
this.model = {
server,
weapon: this.$route.query.weapon?.toString()
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
weapon: [this.$route.query.weapon].flat().filter(e => e ?? false).map(e => e!.toString()),
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
gamemode: [this.$route.query.gamemode].flat().filter(e => e ?? false).map(e => e!.toString())
}
},
computed: {
@@ -140,6 +162,13 @@ export default defineComponent({
if (!data) return this.store.fetchPlayers(withoutPlayers).value.data
return data
},
gamemodes (): { [key: string]: Ref<Kill> } {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { gamemode: _, player: _1, ...withoutGamemode } = this.filters
const data = this.store.getGamemodeList(withoutGamemode)?.value.data
if (!data) return this.store.fetchGamemodes(withoutGamemode).value.data
return data
},
sortedWeaponList (): string[] {
if (!this.weapons) return []
const weapons = Object.keys(this.weapons)
@@ -150,6 +179,11 @@ export default defineComponent({
const servers = Object.keys(this.servers)
return servers.sort()
},
sortedGamemodeList (): string[] {
if (!this.gamemodes) return []
const gamemodes = Object.keys(this.gamemodes)
return gamemodes.sort()
},
sortedPlayerList (): Player[] {
if (!this.players) return []
const players = Object.entries(this.players).map((e) => ({
@@ -174,17 +208,10 @@ export default defineComponent({
this.highlight_player(player)
}
},
model: {
handler (newModel) {
this.filters.server = newModel.server
this.filters.weapon = newModel.weapon
},
deep: true
},
filters: {
handler (newValue) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { server: _, weapon: _2, ...withoutFilters } = this.$route.query
const { server: _, weapon: _2, gamemode: _3, ...withoutFilters } = this.$route.query
router.push({ query: { ...newValue, ...withoutFilters } })// .then(e => { console.log(e) })
this.store.setFilter({ player: this.store.currentFilter.player, ...newValue })
},
@@ -205,6 +232,11 @@ export default defineComponent({
}
},
methods: {
applyFilters () {
this.filters.server = this.model.server
this.filters.weapon = this.model.weapon
this.filters.gamemode = this.model.gamemode
},
highlight_player (playerid: string) {
const player = this.players[playerid]
if (player) {
@@ -221,12 +253,18 @@ export default defineComponent({
}
}
if (this.filters.weapon !== this.$route.query.weapon) {
this.model.weapon = this.$route.query.weapon?.toString()
this.model.weapon = [this.$route.query.weapon].flat().filter(e => e ?? false).map(e => e!.toString())
}
if (this.filters.server !== this.$route.query.server) {
if (this.$route.query.server) this.model.server = this.$route.query.server?.toString()
if (this.$route.query.server) this.model.server = [this.$route.query.server].flat().filter(e => e ?? false).map(e => e!.toString())
else this.model.server = undefined
}
if (this.filters.gamemode !== this.$route.query.gamemode) {
if (this.$route.query.gamemode) this.model.gamemode = [this.$route.query.gamemode].flat().filter(e => e ?? false).map(e => e!.toString())
else this.model.gamemode = undefined
}
console.log(this.model, this.$route.query)
}
}
})