Added validation to the summary helper.

This commit is contained in:
依瑪貓 2023-02-28 16:38:50 +08:00
parent 9f966643b5
commit d02c87602b
2 changed files with 216 additions and 5 deletions

View File

@ -163,6 +163,7 @@ class SummaryHelper {
const from = document.getElementById(this.#prefix + "-travel-from");
const directionButtons = Array.from(document.getElementsByClassName(this.#prefix + "-travel-direction"))
const to = document.getElementById(this.#prefix + "-travel-to");
const helper = this;
const updateSummary = function () {
let direction;
for (const button of directionButtons) {
@ -196,8 +197,12 @@ class SummaryHelper {
}
});
updateSummary();
helper.#validateGeneralTripTag();
};
from.onchange = function () {
updateSummary();
helper.#validateGeneralTripFrom();
};
from.onchange = updateSummary;
directionButtons.forEach(function (button) {
button.onclick = function () {
directionButtons.forEach(function (otherButton) {
@ -209,7 +214,10 @@ class SummaryHelper {
updateSummary();
};
});
to.onchange = updateSummary;
to.onchange = function () {
updateSummary();
helper.#validateGeneralTripTo();
};
}
/**
@ -223,6 +231,7 @@ class SummaryHelper {
const route = document.getElementById(this.#prefix + "-bus-route");
const from = document.getElementById(this.#prefix + "-bus-from");
const to = document.getElementById(this.#prefix + "-bus-to");
const helper = this;
const updateSummary = function () {
summary.value = tag.value + "—" + route.value + "—" + from.value + "→" + to.value;
};
@ -249,10 +258,20 @@ class SummaryHelper {
}
});
updateSummary();
helper.#validateBusTripTag();
};
route.onchange = function () {
updateSummary();
helper.#validateBusTripRoute();
};
from.onchange = function () {
updateSummary();
helper.#validateBusTripFrom();
};
to.onchange = function () {
updateSummary();
helper.#validateBusTripTo();
};
route.onchange = updateSummary;
from.onchange = updateSummary;
to.onchange = updateSummary;
}
/**
@ -294,6 +313,197 @@ class SummaryHelper {
* @return {boolean} true if valid, or false otherwise
*/
#validate() {
const tabs = Array.from(document.getElementsByClassName(this.#prefix + "-tab"));
let isValid = true;
for (const tab of tabs) {
if (tab.classList.contains("active")) {
switch (tab.dataset.tabId) {
case "general":
isValid = this.#validateGeneralTag() && isValid;
break;
case "travel":
isValid = this.#validateGeneralTrip() && isValid;
break;
case "bus":
isValid = this.#validateBusTrip() && isValid;
break;
}
}
}
return isValid;
}
/**
* Validates a general tag.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateGeneralTag() {
const field = document.getElementById(this.#prefix + "-general-tag");
const error = document.getElementById(this.#prefix + "-general-tag-error");
field.value = field.value.trim();
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}
/**
* Validates a general trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateGeneralTrip() {
let isValid = true;
isValid = this.#validateGeneralTripTag() && isValid;
isValid = this.#validateGeneralTripFrom() && isValid;
isValid = this.#validateGeneralTripTo() && isValid;
return isValid;
}
/**
* Validates the tag of a general trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateGeneralTripTag() {
const field = document.getElementById(this.#prefix + "-travel-tag");
const error = document.getElementById(this.#prefix + "-travel-tag-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the tag.");
return false;
}
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}
/**
* Validates the origin of a general trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateGeneralTripFrom() {
const field = document.getElementById(this.#prefix + "-travel-from");
const error = document.getElementById(this.#prefix + "-travel-from-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the origin.");
return false;
}
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}
/**
* Validates the destination of a general trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateGeneralTripTo() {
const field = document.getElementById(this.#prefix + "-travel-to");
const error = document.getElementById(this.#prefix + "-travel-to-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the destination.");
return false;
}
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}
/**
* Validates a bus trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateBusTrip() {
let isValid = true;
isValid = this.#validateBusTripTag() && isValid;
isValid = this.#validateBusTripRoute() && isValid;
isValid = this.#validateBusTripFrom() && isValid;
isValid = this.#validateBusTripTo() && isValid;
return isValid;
}
/**
* Validates the tag of a bus trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateBusTripTag() {
const field = document.getElementById(this.#prefix + "-bus-tag");
const error = document.getElementById(this.#prefix + "-bus-tag-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the tag.");
return false;
}
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}
/**
* Validates the route of a bus trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateBusTripRoute() {
const field = document.getElementById(this.#prefix + "-bus-route");
const error = document.getElementById(this.#prefix + "-bus-route-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the route.");
return false;
}
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}
/**
* Validates the origin of a bus trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateBusTripFrom() {
const field = document.getElementById(this.#prefix + "-bus-from");
const error = document.getElementById(this.#prefix + "-bus-from-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the origin.");
return false;
}
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}
/**
* Validates the destination of a bus trip.
*
* @return {boolean} true if valid, or false otherwise
*/
#validateBusTripTo() {
const field = document.getElementById(this.#prefix + "-bus-to");
const error = document.getElementById(this.#prefix + "-bus-to-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
error.innerText = A_("Please fill in the destination.");
return false;
}
field.classList.remove("is-invalid");
error.innerText = "";
return true;
}

View File

@ -65,6 +65,7 @@ First written: 2023/2/28
<div class="form-floating mb-2">
<input id="accounting-summary-helper-{{ summary_helper.type }}-general-tag" class="form-control accounting-summary-helper-{{ summary_helper.type }}-input" type="text" value="" placeholder=" ">
<label class="form-label" for="accounting-summary-helper-{{ summary_helper.type }}-general-tag">{{ A_("Tag") }}</label>
<div id="accounting-summary-helper-{{ summary_helper.type }}-general-tag-error" class="invalid-feedback"></div>
</div>
<div>