Working JS to show weighted total as scores are entered

This commit is contained in:
Matt Young 2024-06-07 17:58:06 -05:00
parent e7fa4945d3
commit 08bed04047
1 changed files with 32 additions and 3 deletions

View File

@ -21,6 +21,7 @@
<p>{{ $subscore->name }}<span class="text-xs text-gray-500 pl-2">Max: {{ $subscore->max_score }}</span></p>
</x-table.th>
@endforeach
<x-table.th>Total</x-table.th>
</tr>
</thead>
<x-table.body :sortable="false">
@ -35,11 +36,15 @@
name="judge{{ $judge->id }}[{{ $subscore->id }}]"
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 judge{{$judge->id}}score"
@if($oldScores) value="{{ $oldScores['judge'.$judge->id][$subscore->id] }}" @endif
required >
required
{{-- onchange="judge{{$judge->id}}sum()"--}}
>
</x-table.td>
@endforeach
<x-table.td id="judge{{ $judge->id }}total" x-text="total">
<x-table.td >
<p id="judge{{ $judge->id }}total" class="pr-3">
0.000
</p>
</x-table.td>
</tr>
@endforeach
@ -51,4 +56,28 @@
</x-form.form>
</x-card.card>
<script>
function calculateTotal(judgeId) {
let total = 0;
let totalWeights = 0;
let thisSubscore
@foreach($subscores as $subscore)
thisSubscore = parseFloat(document.getElementById("j" + judgeId + "ss{{ $subscore->id }}").value) * {{ $subscore->weight }};
if (!isNaN(thisSubscore)) {
total += thisSubscore;
}
totalWeights += {{ $subscore->weight }};
@endforeach
let finalTotal = (total / totalWeights).toFixed(3);
document.getElementById('judge' + judgeId + 'total').innerHTML = finalTotal;
}
@foreach($judges as $judge)
document.querySelectorAll('.judge' + {{ $judge->id }} + 'score').forEach(function(el) {
el.addEventListener('change', function() {
calculateTotal({{ $judge->id }});
});
});
@endforeach
</script>
</x-layout.app>