xeovalyte/wrbapp
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

added eigenschappen
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
xeovalyte 2023-02-13 12:46:59 +01:00
parent 3b4b53c0cf
commit c54b9aec61
1 changed files with 66 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/pages/wedstrijd/alltimes.vue
View File

@ -33,9 +33,10 @@
</form>
</div>
<div v-if="timings[0]" class="flex flex-col justify-center items-center gap-y-3 px-2 overflow-hidden">
<div class="flex gap-x-5">
<div class="relative">
<button @click.stop="showDropdown = !showDropdown" class="btn">Deelnemers <Icon size="1.2em" name="ion:arrow-down-b" /></button>
<div v-if="showDropdown" v-on-click-outside.bubble="handleDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
<button @click.stop="showDeelnemersDropdown = !showDeelnemersDropdown" class="btn">Deelnemers <Icon size="1.2em" name="ion:arrow-down-b" /></button>
<div v-if="showDeelnemersDropdown" v-on-click-outside.bubble="handleDeelnemersDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
<ul class="space-y-2 text-default">
<li v-for="competitor in competitors" @click="competitor.checked = !competitor.checked" class="flex gap-x-1 items-center hover:cursor-pointer">
<input v-model="competitor.checked" type="checkbox" class="checkbox">
@ -44,7 +45,19 @@
</ul>
</div>
</div>
<div v-for="event in events" class="container w-full max-w-md py-2 px-4">
<div class="relative">
<button @click.stop="showPropertiesDropdown = !showPropertiesDropdown" class="btn">Eigenschappen <Icon size="1.2em" name="ion:arrow-down-b" /></button>
<div v-if="showPropertiesDropdown" v-on-click-outside.bubble="handlePropertiesDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
<ul class="space-y-2 text-default">
<li v-for="property in Object.values(properties)" @click="property.enabled = !property.enabled" class="flex gap-x-1 items-center hover:cursor-pointer">
<input v-model="property.enabled" type="checkbox" class="checkbox">
<label class="hover:cursor-pointer">{{ property.name }}</label>
</li>
</ul>
</div>
</div>
</div>
<div v-for="event in events" class="container w-full max-w-2xl py-2 px-4">
<div @click="event.open = !event.open" class="flex hover:cursor-pointer">
<h2 class="font-bold">{{ event.name }}</h2>
<span v-if="filteredTimings.filter(a => a.event === event.id).length > 0" class="ml-auto">{{ filteredTimings.filter(a => a.event === event.id)[0].time.minutes }}:{{ timings.filter(a => a.event === event.id)[0].time.seconds }}:{{ timings.filter(a => a.event === event.id)[0].time.milliseconds }}</span>
@ -55,16 +68,16 @@
<table class="table-fixed text-left w-full even:bg-gray-500">
<thead class="font-bold">
<tr>
<th class="w-3/7">Tijd</th>
<th class="w-1/7">Datum</th>
<th class="w-3/7">Wie</th>
<th v-for="property in Object.values(properties).filter(a => a.enabled === true)">{{ property.name }}</th>
</tr>
</thead>
<tbody>
<tr @click="handleModel(time, event, index)" v-for="(time, index) in filteredTimings.filter(a => a.event === event.id)" class="even:dark:bg-neutral-700 even:bg-neutral-300 hover:cursor-pointer">
<td class="pl-1" :class="time.dsq ? 'line-through' : ''">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
<td>{{ time.contest.date }}</td>
<td class="overflow-hidden whitespace-nowrap truncate">{{ competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[1] + ' ' + competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[0] }}</td>
<td v-if="properties.time.enabled" class="pl-1" :class="time.dsq ? 'line-through' : ''">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
<td v-if="properties.date.enabled">{{ time.contest.date }}</td>
<td v-if="properties.name.enabled" class="overflow-hidden whitespace-nowrap truncate">{{ competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[1] + ' ' + competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[0] }}</td>
<td v-if="properties.type.enabled">{{ time.contest.type }}</td>
<td v-if="properties.contest.enabled">{{ time.contest.name }}</td>
</tr>
</tbody>
</table>
@ -79,7 +92,7 @@ import { useToast } from 'vue-toastification'
import { vOnClickOutside} from '@vueuse/components'
definePageMeta({
title: 'Eigen Tijden',
title: 'Brigade Tijden',
key: 'back'
})
@ -89,10 +102,15 @@ const toast = useToast()
const timings = ref([])
const showModel = ref(false)
const disableButtons = ref(false)
const showDropdown = ref(false)
const showDeelnemersDropdown = ref(false)
const showPropertiesDropdown = ref(false)
const handleDropdown = (x) => {
showDropdown.value = false
const handleDeelnemersDropdown = () => {
showDeelnemersDropdown.value = false
}
const handlePropertiesDropdown = () => {
showPropertiesDropdown.value = false
}
const filteredTimings = computed(() => {
@ -114,6 +132,34 @@ const modelData = ref({
}
})
const properties = ref({
time: {
enabled: true,
id: 'time',
name: 'Tijd',
},
date: {
enabled: true,
id: 'date',
name: 'Datum',
},
name: {
enabled: true,
id: 'name',
name: 'Naam',
},
type: {
enabled: false,
id: 'type',
name: 'Type zwembad',
},
contest: {
enabled: false,
id: 'contest',
name: 'Wedstrijd',
},
})
const events = ref({
obstacleSwim: {
open: false,