From 08bed0404716c3929d2e7f88612567ff6c17b024 Mon Sep 17 00:00:00 2001
From: Matt Young <matt@mattyoung.us>
Date: Fri, 7 Jun 2024 17:58:06 -0500
Subject: [PATCH] Working JS to show weighted total as scores are entered

---
 .../tabulation/entry_score_sheet.blade.php    | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/resources/views/tabulation/entry_score_sheet.blade.php b/resources/views/tabulation/entry_score_sheet.blade.php
index 6c783d9..fe0f1da 100644
--- a/resources/views/tabulation/entry_score_sheet.blade.php
+++ b/resources/views/tabulation/entry_score_sheet.blade.php
@@ -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>