From c7460432d66fac3074b3a359d015e76e187c3d29 Mon Sep 17 00:00:00 2001
From: "Casper V. Kristensen" <c@spervk.com>
Date: Sat, 26 Oct 2019 21:40:12 +0200
Subject: [PATCH] Fix and improve raid editing; add confirmed role counts.

---
 drakul/raids/forms.py                         |  4 +-
 drakul/raids/templates/raids/raid_change.html | 53 +++++++++++++------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/drakul/raids/forms.py b/drakul/raids/forms.py
index e787210..7fc452a 100644
--- a/drakul/raids/forms.py
+++ b/drakul/raids/forms.py
@@ -70,9 +70,9 @@ class RaidForm(ModelForm):
         self.helper = FormHelper()
 
         if self.instance.pk is None:
-            submit_button = Submit("submit", "Create", css_class="btn btn-success")
+            submit_button = Submit("submit", "Create", css_class="btn btn-success float-right")
         else:
-            submit_button = Submit("submit", "Update", css_class="btn btn-primary")
+            submit_button = Submit("submit", "Update", css_class="btn btn-primary float-right")
         self.helper.layout = Layout(
             Field("title"),
             Field("description"),
diff --git a/drakul/raids/templates/raids/raid_change.html b/drakul/raids/templates/raids/raid_change.html
index ad190db..8a9f4dc 100644
--- a/drakul/raids/templates/raids/raid_change.html
+++ b/drakul/raids/templates/raids/raid_change.html
@@ -87,9 +87,15 @@
                     </div>
                 </div>
                 <div class="col-md-6">
-                    <input type="submit" name="submit" value="Save" class="btn btn-primary btn-lg btn-block">
+                    <div class="alert alert-success d-flex justify-content-around" role="alert">
+                        <div class="font-weight-bolder">Confirmed</div>
+                        <div><span id="total-confirmed-tank" class="font-weight-bold">?</span> Tanks</div>
+                        <div><span id="total-confirmed-healer" class="font-weight-bold">?</span> Healers</div>
+                        <div><span id="total-confirmed-damage" class="font-weight-bold">?</span> Damage</div>
+                    </div>
                 </div>
             </div>
+            <input class="btn btn-primary float-right" type="submit" name="submit" value="Save">
         </form>
     </div>
 </div>
@@ -103,8 +109,16 @@
     const STAND_BY = 3;
     const CONFIRMED = 4;
 
+    const TANK = 1;
+    const HEALER = 2;
+    const DAMAGE = 3;
+
     const responseForm = document.querySelector(".responses-form");
-    const responseFormSelects = responseForm.querySelectorAll("select");
+
+    function trIsExtra(tr) {
+        let characterSelect = tr.querySelector(".character-select");
+        return characterSelect == null || characterSelect.value === "";  // the "--------" character has value=""
+    }
 
     function updateSelectTotals() {
         let statusTotals = {
@@ -113,16 +127,26 @@
             [STAND_BY]: 0,
             [CONFIRMED]: 0
         };
-        responseFormSelects.forEach((select) => {
-            if (!select.value) {
+        let confirmedTotals = {
+            [TANK]: 0,
+            [HEALER]: 0,
+            [DAMAGE]: 0
+        };
+        responseForm.querySelectorAll("tr").forEach((tr) => {
+            if (trIsExtra(tr)) {
                 return;
             }
-            if (select.classList.contains("status-select")) {
-                statusTotals[select.value] += 1;
-            } else if (select.classList.contains("role-select")) {
-                // TODO ?
+            let status = tr.querySelector(".status-select").value;
+            let role = tr.querySelector(".role-select").value;
+            statusTotals[status] += 1;
+            if (status == CONFIRMED) {
+                confirmedTotals[role] += 1;
             }
         });
+        document.querySelector("#total-confirmed-tank").innerHTML = confirmedTotals[TANK].toString();
+        document.querySelector("#total-confirmed-healer").innerHTML = confirmedTotals[HEALER].toString();
+        document.querySelector("#total-confirmed-damage").innerHTML = confirmedTotals[DAMAGE].toString();
+
         document.querySelector("#total-signed-off").innerHTML = statusTotals[SIGNED_OFF].toString();
         document.querySelector("#total-signed-up").innerHTML = statusTotals[SIGNED_UP].toString();
         document.querySelector("#total-stand-by").innerHTML = statusTotals[STAND_BY].toString();
@@ -130,22 +154,17 @@
     }
 
     updateSelectTotals();
-    responseFormSelects.forEach((select) => {
+    responseForm.querySelectorAll("select").forEach((select) => {
         select.addEventListener("change", updateSelectTotals);
     });
 
-    function trIsExtra(tr) {
-        let characterSelect = tr.querySelector(".character-select");
-        return characterSelect == null || characterSelect.value === "";  // the "--------" character has value=""
-    }
-
     function changeSignupStatus(from, to) {
         responseForm.querySelectorAll("tr").forEach((tr) => {
             if (trIsExtra(tr)) {
                 return;
             }
             let statusSelect = tr.querySelector(".status-select");
-            if (statusSelect.value == from) {
+            if (statusSelect.value === from) {
                 statusSelect.value = to;
             }
         });
@@ -158,11 +177,11 @@
                 return;
             }
             let statusSelect = tr.querySelector(".status-select");
-            if (statusSelect != null && statusSelect.value == status) {
+            if (statusSelect != null && statusSelect.value === status) {
                 tr.querySelector(".attendance-input").value = value;
             }
         });
         updateSelectTotals();
     }
 </script>
-{% endblock scripts %}
\ No newline at end of file
+{% endblock scripts %}