Advancement tabulation #3

Merged
okorpheus merged 4 commits from advancement-tabulation into master 2024-06-26 22:20:11 +00:00
1 changed files with 36 additions and 34 deletions
Showing only changes of commit 27522e7903 - Show all commits

View File

@ -1,43 +1,45 @@
<x-layout.app> <x-layout.app>
<x-slot:page_title>{{ auditionSetting('advanceTo') }} Advancement - {{ $audition->name }}</x-slot:page_title> <x-slot:page_title>{{ auditionSetting('advanceTo') }} Advancement - {{ $audition->name }}</x-slot:page_title>
<div class="grid grid-cols-4" x-data="checkboxSelector()"> <x-form.form method="POST" action="#">
<div class="col-span-3"> <div class="grid grid-cols-4" x-data="checkboxSelector()">
@include('tabulation.advancement.results-table') <div class="col-span-3">
</div> @include('tabulation.advancement.results-table')
<div class="ml-4"> </div>
@if($scoringComplete) <div class="ml-4">
@if($scoringComplete)
<x-card.card> <x-card.card>
<x-card.heading>Pass Entries</x-card.heading> <x-card.heading>Pass Entries</x-card.heading>
<div class="mx-6 mt-3"> <div class="mx-6 mt-3">
<x-form.field name="markrows" <x-form.field name="markrows"
type="number" type="number"
label_text="Mark entries ranked 1 through" label_text="Mark entries ranked 1 through"
x-model="numberOfCheckboxes"/> x-model="numberOfCheckboxes"/>
<div class="flex justify-between mb-3"> <div class="flex justify-between mb-3">
<div></div> <div></div>
<x-form.button type="button" class="mt-2" @click="checkCheckboxes">Mark</x-form.button> <x-form.button type="button" class="mt-2" @click="checkCheckboxes">Mark</x-form.button>
</div>
</div> </div>
</div> </x-card.card>
</x-card.card>
@endif
</div>
<script> <x-form.button type="submit" class="mt-3">Pass Checked Entries</x-form.button>
function checkboxSelector() { @endif
return { </div>
numberOfCheckboxes: 0,
checkCheckboxes() { <script>
const checkboxes = document.querySelectorAll('.checkbox'); function checkboxSelector() {
checkboxes.forEach((checkbox, index) => { return {
checkbox.checked = index < this.numberOfCheckboxes; numberOfCheckboxes: 0,
}); checkCheckboxes() {
const checkboxes = document.querySelectorAll('.checkbox');
checkboxes.forEach((checkbox, index) => {
checkbox.checked = index < this.numberOfCheckboxes;
});
}
} }
} }
} </script>
</script> </div>
</div> </x-form.form>
</x-layout.app> </x-layout.app>