Replaced parsing the HTML element ID with the HTML custom data attributes in the JavaScripts.

This commit is contained in:
依瑪貓 2020-08-07 22:31:08 +08:00
parent d6e68717fd
commit 09c1f453f4
10 changed files with 81 additions and 103 deletions

View File

@ -30,7 +30,7 @@ $(function () {
});
$(".record-summary")
.on("click", function () {
startSummaryHelper(this);
startSummaryHelper($(this));
});
$("#summary-summary")
.on("change", function () {
@ -39,7 +39,7 @@ $(function () {
});
$(".summary-tab")
.on("click", function () {
switchSummaryTab(this);
switchSummaryTab($(this));
});
// The general categories
$("#summary-general-category")
@ -136,17 +136,17 @@ function loadSummaryCategoryData() {
/**
* Starts the summary helper.
*
* @param {HTMLInputElement} summary the summary input element
* @param {jQuery} summary the summary input element
*/
function startSummaryHelper(summary) {
const type = summary.id.substring(0, summary.id.indexOf("-"));
const no = parseInt(summary.id.substring(type.length + 1, summary.id.indexOf("-", type.length + 1)));
$("#summary-record").get(0).value = type + "-" + no;
$("#summary-summary").get(0).value = summary.value;
const type = summary.data("type");
const no = summary.data("no");
$("#summary-record").val(type + "-" + no);
$("#summary-summary").val(summary.val());
// Loads the know summary categories into the summary helper
loadKnownSummaryCategories(type);
// Parses the summary and sets up the summary helper
parseSummaryForHelper(summary.value);
parseSummaryForHelper(summary.val());
// Focus on the summary input
setTimeout(function () {
$("#summary-summary").get(0).focus();
@ -274,7 +274,7 @@ function parseSummaryForCategoryHelpers(summary) {
$("#summary-bus-route").get(0).value = matchBus[2];
$("#summary-bus-from").get(0).value = matchBus[3];
$("#summary-bus-to").get(0).value = matchBus[4];
switchSummaryTab($("#summary-tab-bus").get(0));
switchSummaryTab($("#summary-tab-bus"));
return;
}
@ -288,12 +288,12 @@ function parseSummaryForCategoryHelpers(summary) {
$("#summary-travel-direction").get(0).value = matchTravel[3];
setSummaryTravelDirectionButtons(matchTravel[3]);
$("#summary-travel-to").get(0).value = matchTravel[4];
switchSummaryTab($("#summary-tab-travel").get(0));
switchSummaryTab($("#summary-tab-travel"));
return;
}
// A general category
const generalCategoryTab = $("#summary-tab-category").get(0);
const generalCategoryTab = $("#summary-tab-category");
const matchCategory = summary.match(/^(.+)—.+(?:×[0-9]+)?$/);
if (matchCategory !== null) {
$("#summary-general-category").get(0).value = matchCategory[1];
@ -312,26 +312,15 @@ function parseSummaryForCategoryHelpers(summary) {
/**
* Switch the summary helper to tab.
*
* @param {HTMLElement} tab the navigation tab corresponding to a type
* of helper
* @param {jQuery} tab the navigation tab corresponding to a type
* of helper
* @private
*/
function switchSummaryTab(tab) {
const tabName = tab.id.substr("summary-tab-".length); // "summary-tab-"
$(".summary-tab-content").each(function () {
if (this.id === "summary-tab-content-" + tabName) {
this.classList.remove("d-none");
} else {
this.classList.add("d-none");
}
});
$(".summary-tab").each(function () {
if (this.id === tab.id) {
this.classList.add("active");
} else {
this.classList.remove("active");
}
});
$(".summary-tab-content").addClass("d-none");
$("#summary-tab-content-" + tab.data("tab")).removeClass("d-none");
$(".summary-tab").removeClass("active");
tab.addClass("active");
}
/**

View File

@ -45,7 +45,7 @@ $(function () {
validateAmount(this);
})
.on("change", function () {
updateTotalAmount(this);
updateTotalAmount($(this));
validateBalance();
});
$("#txn-note")
@ -58,11 +58,11 @@ $(function () {
});
$(".btn-new")
.on("click", function () {
addNewRecord(this);
addNewRecord($(this));
});
$(".btn-del-record")
.on("click", function () {
deleteRecord(this);
deleteRecord($(this));
});
});
@ -95,7 +95,7 @@ function getAccountOptions() {
if (this.readyState === 4 && this.status === 200) {
accountOptions = JSON.parse(this.responseText);
$(".record-account").each(function () {
initializeAccountOptions(this);
initializeAccountOptions($(this));
});
}
};
@ -106,27 +106,26 @@ function getAccountOptions() {
/**
* Initialize the account options.
*
* @param {HTMLSelectElement} account the account select element
* @param {jQuery} account the account select element
* @private
*/
function initializeAccountOptions(account) {
const jAccount = $(account);
const type = account.id.substring(0, account.id.indexOf("-"));
const selectedAccount = account.value;
const type = account.data("type");
const selectedAccount = account.val();
let isCash = false;
if (type === "debit") {
isCash = ($(".credit-record").length === 0);
} else if (type === "credit") {
isCash = ($(".debit-record").length === 0);
}
jAccount.html("");
account.html("");
if (selectedAccount === "") {
jAccount.append($("<option/>"));
account.append($("<option/>"));
}
const headerInUse = $("<option/>")
.attr("disabled", "disabled")
.text(accountOptions["header_in_use"]);
jAccount.append(headerInUse);
account.append(headerInUse);
accountOptions[type + "_in_use"].forEach(function (item) {
// Skips the cash account on cash transactions.
if (item["code"] === 1111 && isCash) {
@ -138,12 +137,12 @@ function initializeAccountOptions(account) {
if (String(item["code"]) === selectedAccount) {
option.attr("selected", "selected");
}
jAccount.append(option);
account.append(option);
});
const headerNotInUse = $("<option/>")
.attr("disabled", "disabled")
.text(accountOptions["header_not_in_use"]);
jAccount.append(headerNotInUse);
account.append(headerNotInUse);
accountOptions[type + "_not_in_use"].forEach(function (item) {
const option = $("<option/>")
.attr("value", item["code"])
@ -151,7 +150,7 @@ function initializeAccountOptions(account) {
if (String(item["code"]) === selectedAccount) {
option.attr("selected", "selected");
}
jAccount.append(option);
account.append(option);
});
}
@ -172,16 +171,12 @@ function removeBlankOption(select) {
/**
* Updates the total amount.
*
* @param {HTMLButtonElement|HTMLInputElement} element the amount
* element that
* changed, or the
* button that
* was hit to
* delete a record
* @param {jQuery} element the amount element that changed, or the
* button that was hit to delete a record
* @private
*/
function updateTotalAmount(element) {
const type = element.id.substring(0, element.id.indexOf("-"));
const type = element.data("type")
let total = 0;
$("." + type + "-to-sum").each(function () {
if (this.value !== "") {
@ -198,16 +193,16 @@ function updateTotalAmount(element) {
/**
* Adds a new accounting record.
*
* @param {HTMLButtonElement} button the button element that was hit
* to add a new record
* @param {jQuery} button the button element that was hit to add a
* new record
* @private
*/
function addNewRecord(button) {
const type = button.id.substring(0, button.id.indexOf("-"));
const type = button.data("type");
// Finds the new number that is the maximum number plus 1.
let newNo = 0;
$("." + type + "-record").each(function () {
const no = parseInt(this.id.substring(type.length + 1));
const no = parseInt($(this).data("no"));
if (newNo < no) {
newNo = no;
}
@ -242,7 +237,7 @@ function insertNewRecord(type, newNo) {
validateAccount(this);
})
.each(function () {
initializeAccountOptions(this);
initializeAccountOptions($(this));
});
$("#" + type + "-" + newNo + "-summary")
.on("blur", function () {
@ -258,25 +253,30 @@ function insertNewRecord(type, newNo) {
validateAmount(this);
})
.on("change", function () {
updateTotalAmount(this);
updateTotalAmount($(this));
validateBalance();
});
$("#" + type + "-" + newNo + "-delete")
.on("click", function () {
deleteRecord(this);
deleteRecord($(this));
});
$("#" + type + "-" + newNo + "-m-delete")
.on("click", function () {
deleteRecord($(this));
});
}
/**
* Deletes a record.
*
* @param {HTMLButtonElement} button the button element that was hit
* to delete this record
* @param {jQuery} button the button element that was hit to delete
* this record
* @private
*/
function deleteRecord(button) {
const type = button.id.substring(0, button.id.indexOf("-"));
const no = parseInt(button.id.substring(type.length + 1, button.id.indexOf("-", type.length + 1)));
const type = button.data("type");
const no = button.data("no");
console.log("#" + type + "-" + no);
$("#" + type + "-" + no).remove();
resetRecordOrders(type);
resetRecordButtons();

View File

@ -20,14 +20,14 @@ Author: imacat@mail.imacat.idv.tw (imacat)
First written: 2020/8/5
{% endcomment %}
<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex justify-content-between draggable-record {{ record_type }}-record">
<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex justify-content-between draggable-record {{ record_type }}-record" data-no="{{ no }}">
<div class="row">
<div class="col-lg-6">
{% if record.id.value %}
<input type="hidden" name="{{ record_type }}-{{ no }}-id" value="{{ record.id.value }}" />
{% endif %}
<input id="{{ record_type }}-{{ no }}-ord" class="{{ record_type }}-ord" type="hidden" name="{{ record_type }}-{{ no }}-ord" value="{{ order }}" />
<select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account">
<select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account" data-type="{{ record_type }}">
{% if record.account is not None %}
<option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option>
{% else %}
@ -40,11 +40,11 @@ First written: 2020/8/5
<div class="col-lg-6">
<div class="row">
<div class="col-sm-8">
<input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" />
<input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" data-type="{{ record_type }}" data-no="{{ no }}" />
<div id="{{ record_type }}-{{ no }}-summary-error" class="invalid-feedback">{% if should_validate %}{{ record.summary.errors.0|default:"" }}{% endif %}</div>
</div>
<div class="col-sm-4">
<input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" />
<input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" data-type="{{ record_type }}" />
<div id="{{ record_type }}-{{ no }}-amount-error" class="invalid-feedback">{% if should_validate %}{{ record.amount.errors.0|default:"" }}{% endif %}</div>
</div>
</div>
@ -55,7 +55,7 @@ First written: 2020/8/5
<button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
<i class="fas fa-sort"></i>
</button>
<button id="{{ record_type }}-{{ no }}-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}">
<button id="{{ record_type }}-{{ no }}-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}" data-type="{{ record_type }}" data-no="{{ no }}">
<i class="fas fa-trash"></i>
</button>
</div>
@ -63,7 +63,7 @@ First written: 2020/8/5
<button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
<i class="fas fa-sort"></i>
</button>
<button id="{{ record_type }}-{{ no }}-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}">
<button id="{{ record_type }}-{{ no }}-m-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}" data-type="{{ record_type }}" data-no="{{ no }}">
<i class="fas fa-trash"></i>
</button>
</div>

View File

@ -20,7 +20,7 @@ Author: imacat@mail.imacat.idv.tw (imacat)
First written: 2020/8/5
{% endcomment %}
<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex draggable-record {{ record_type }}-record">
<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex draggable-record {{ record_type }}-record" data-no="{{ no }}">
<div>
<div class="row">
<div class="col-sm-12">
@ -28,7 +28,7 @@ First written: 2020/8/5
<input type="hidden" name="{{ record_type }}-{{ no }}-id" value="{{ record.id.value }}" />
{% endif %}
<input id="{{ record_type }}-{{ no }}-ord" class="{{ record_type }}-ord" type="hidden" name="{{ record_type }}-{{ no }}-ord" value="{{ order }}" />
<select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account">
<select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account" data-type="{{ record_type }}">
{% if record.account is not None %}
<option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option>
{% else %}
@ -41,11 +41,11 @@ First written: 2020/8/5
</div>
<div class="row">
<div class="col-lg-8">
<input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" />
<input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" data-type="{{ record_type }}" data-no="{{ no }}" />
<div id="{{ record_type }}-{{ no }}-summary-error" class="invalid-feedback">{% if should_validate %}{{ record.summary.errors.0|default:"" }}{% endif %}</div>
</div>
<div class="col-lg-4">
<input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" />
<input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" data-type="{{ record_type }}" />
<div id="{{ record_type }}-{{ no }}-amount-error" class="invalid-feedback">{% if should_validate %}{{ record.amount.errors.0|default:"" }}{% endif %}</div>
</div>
</div>
@ -55,7 +55,7 @@ First written: 2020/8/5
<button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
<i class="fas fa-sort"></i>
</button>
<button id="{{ record_type }}-{{ no }}-m-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}">
<button id="{{ record_type }}-{{ no }}-m-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}" data-type="{{ record_type }}" data-no="{{ no }}">
<i class="fas fa-trash"></i>
</button>
</div>

View File

@ -47,19 +47,19 @@ First written: 2020/4/3
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<span id="summary-tab-category" class="summary-tab nav-link active">{{ _("General")|force_escape }}</span>
<span id="summary-tab-category" class="summary-tab nav-link active" data-tab="category">{{ _("General")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="summary-tab-travel" class="summary-tab nav-link">{{ _("Travel")|force_escape }}</span>
<span id="summary-tab-travel" class="summary-tab nav-link" data-tab="travel">{{ _("Travel")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="summary-tab-bus" class="summary-tab nav-link">{{ _("Bus")|force_escape }}</span>
<span id="summary-tab-bus" class="summary-tab nav-link" data-tab="bus">{{ _("Bus")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="summary-tab-regular" class="summary-tab nav-link">{{ _("Regular")|force_escape }}</span>
<span id="summary-tab-regular" class="summary-tab nav-link" data-tab="regular">{{ _("Regular")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="summary-tab-count" class="summary-tab nav-link">{{ _("Count")|force_escape }}</span>
<span id="summary-tab-count" class="summary-tab nav-link" data-tab="count">{{ _("Count")|force_escape }}</span>
</li>
</ul>

View File

@ -71,7 +71,7 @@ First written: 2020/7/23
</ul>
<ul class="list-group">
<li class="list-group-item">
<button id="debit-new" class="btn btn-primary btn-new" type="button">
<button class="btn btn-primary btn-new" type="button" data-type="debit">
<i class="fas fa-plus"></i>
</button>
</li>

View File

@ -71,7 +71,7 @@ First written: 2020/7/23
</ul>
<ul class="list-group">
<li class="list-group-item">
<button id="credit-new" class="btn btn-primary btn-new" type="button">
<button class="btn btn-primary btn-new" type="button" data-type="credit">
<i class="fas fa-plus"></i>
</button>
</li>

View File

@ -73,7 +73,7 @@ First written: 2020/7/23
</ul>
<ul class="list-group">
<li class="list-group-item">
<button id="debit-new" class="btn btn-primary btn-new" type="button">
<button class="btn btn-primary btn-new" type="button" data-type="debit">
<i class="fas fa-plus"></i>
</button>
</li>
@ -93,13 +93,13 @@ First written: 2020/7/23
<ul id="credit-records" class="list-group">
{% for record in item.credit_records %}
{% with record_type="credit" no=forloop.counter order=forloop.counter %}
{% include "accounting/transactions/../../include/form-record-transfer.html" %}
{% include "accounting/include/form-record-transfer.html" %}
{% endwith %}
{% endfor %}
</ul>
<ul class="list-group">
<li class="list-group-item">
<button id="credit-new" class="btn btn-primary btn-new" type="button">
<button class="btn btn-primary btn-new" type="button" data-type="credit">
<i class="fas fa-plus"></i>
</button>
</li>

View File

@ -25,7 +25,7 @@
$(function () {
$(".period-tab")
.on("click", function () {
switchPeriodTab(this);
switchPeriodTab($(this));
});
$("#button-period-day")
.on("click", function () {
@ -86,24 +86,13 @@ function monthPickerChanged(newDate) {
/**
* Switch the period chooser to tab.
*
* @param {HTMLElement} tab the navigation tab corresponding to a type
* of period
* @param {jQuery} tab the navigation tab corresponding to a type
* of period
* @private
*/
function switchPeriodTab(tab) {
const tabName = tab.id.substr("period-tab-".length);
$(".period-content").each(function () {
if (this.id === "period-content-" + tabName) {
this.classList.remove("d-none");
} else {
this.classList.add("d-none");
}
});
$(".period-tab").each(function () {
if (this.id === tab.id) {
this.classList.add("active");
} else {
this.classList.remove("active");
}
});
$(".period-content").addClass("d-none");
$("#period-content-" + tab.data("tab")).removeClass("d-none");
$(".period-tab").removeClass("active");
tab.addClass("active");
}

View File

@ -42,16 +42,16 @@ First written: 2020/7/10
<!-- Modal body -->
<ul class="nav nav-tabs">
<li class="nav-item">
<span id="period-tab-month" class="period-tab nav-link active">{{ _("Month")|force_escape }}</span>
<span class="period-tab nav-link active" data-tab="month">{{ _("Month")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="period-tab-year" class="period-tab nav-link">{{ _("Year")|force_escape }}</span>
<span class="period-tab nav-link" data-tab="year">{{ _("Year")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="period-tab-day" class="period-tab nav-link">{{ _("Day")|force_escape }}</span>
<span class="period-tab nav-link" data-tab="day">{{ _("Day")|force_escape }}</span>
</li>
<li class="nav-item">
<span id="period-tab-custom" class="period-tab nav-link">{{ _("Custom")|force_escape }}</span>
<span class="period-tab nav-link" data-tab="custom">{{ _("Custom")|force_escape }}</span>
</li>
</ul>
<div id="period-content-month" class="period-content modal-body">