Fix and improve raid editing; add confirmed role counts.

This commit is contained in:
Casper V. Kristensen 2019-10-26 21:40:12 +02:00
parent b843b63240
commit c7460432d6
Signed by: caspervk
GPG key ID: 289CA03790535054
2 changed files with 38 additions and 19 deletions

View file

@ -70,9 +70,9 @@ class RaidForm(ModelForm):
self.helper = FormHelper() self.helper = FormHelper()
if self.instance.pk is None: 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: 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( self.helper.layout = Layout(
Field("title"), Field("title"),
Field("description"), Field("description"),

View file

@ -87,9 +87,15 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <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>
</div> </div>
<input class="btn btn-primary float-right" type="submit" name="submit" value="Save">
</form> </form>
</div> </div>
</div> </div>
@ -103,8 +109,16 @@
const STAND_BY = 3; const STAND_BY = 3;
const CONFIRMED = 4; const CONFIRMED = 4;
const TANK = 1;
const HEALER = 2;
const DAMAGE = 3;
const responseForm = document.querySelector(".responses-form"); 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() { function updateSelectTotals() {
let statusTotals = { let statusTotals = {
@ -113,16 +127,26 @@
[STAND_BY]: 0, [STAND_BY]: 0,
[CONFIRMED]: 0 [CONFIRMED]: 0
}; };
responseFormSelects.forEach((select) => { let confirmedTotals = {
if (!select.value) { [TANK]: 0,
[HEALER]: 0,
[DAMAGE]: 0
};
responseForm.querySelectorAll("tr").forEach((tr) => {
if (trIsExtra(tr)) {
return; return;
} }
if (select.classList.contains("status-select")) { let status = tr.querySelector(".status-select").value;
statusTotals[select.value] += 1; let role = tr.querySelector(".role-select").value;
} else if (select.classList.contains("role-select")) { statusTotals[status] += 1;
// TODO ? 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-off").innerHTML = statusTotals[SIGNED_OFF].toString();
document.querySelector("#total-signed-up").innerHTML = statusTotals[SIGNED_UP].toString(); document.querySelector("#total-signed-up").innerHTML = statusTotals[SIGNED_UP].toString();
document.querySelector("#total-stand-by").innerHTML = statusTotals[STAND_BY].toString(); document.querySelector("#total-stand-by").innerHTML = statusTotals[STAND_BY].toString();
@ -130,22 +154,17 @@
} }
updateSelectTotals(); updateSelectTotals();
responseFormSelects.forEach((select) => { responseForm.querySelectorAll("select").forEach((select) => {
select.addEventListener("change", updateSelectTotals); 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) { function changeSignupStatus(from, to) {
responseForm.querySelectorAll("tr").forEach((tr) => { responseForm.querySelectorAll("tr").forEach((tr) => {
if (trIsExtra(tr)) { if (trIsExtra(tr)) {
return; return;
} }
let statusSelect = tr.querySelector(".status-select"); let statusSelect = tr.querySelector(".status-select");
if (statusSelect.value == from) { if (statusSelect.value === from) {
statusSelect.value = to; statusSelect.value = to;
} }
}); });
@ -158,11 +177,11 @@
return; return;
} }
let statusSelect = tr.querySelector(".status-select"); let statusSelect = tr.querySelector(".status-select");
if (statusSelect != null && statusSelect.value == status) { if (statusSelect != null && statusSelect.value === status) {
tr.querySelector(".attendance-input").value = value; tr.querySelector(".attendance-input").value = value;
} }
}); });
updateSelectTotals(); updateSelectTotals();
} }
</script> </script>
{% endblock scripts %} {% endblock scripts %}