Fix and improve raid editing; add confirmed role counts.

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"),

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 %}
+{% endblock scripts %}

drakul/raids/templates/raids/raid_detail.html

@@ -61,14 +61,14 @@
 {% endfor %}
 
 <div id="comments" class="card mt-4 mb-4">
-    <h5 class="card-header">Comments</h5>
+    <h6 class="card-header">Comments</h6>
     <div class="card-body">
         {% for comment in raid.comments.all %}
             <div class="card mb-2">
                 <div class="card-body">
-                    <h6 class="card-title">
+                    <p class="mb-0">
                         <strong>{{ comment.user.main.name }}</strong> <small class="text-muted">&middot; {{ comment.date_created }}</small>
-                    </h6>
+                    </p>
                     <p class="card-text">
                         {{ comment.body }}
                     </p>