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

View File

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

View File

@ -20,14 +20,14 @@ Author: imacat@mail.imacat.idv.tw (imacat)
First written: 2020/8/5 First written: 2020/8/5
{% endcomment %} {% 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="row">
<div class="col-lg-6"> <div class="col-lg-6">
{% if record.id.value %} {% if record.id.value %}
<input type="hidden" name="{{ record_type }}-{{ no }}-id" value="{{ record.id.value }}" /> <input type="hidden" name="{{ record_type }}-{{ no }}-id" value="{{ record.id.value }}" />
{% endif %} {% endif %}
<input id="{{ record_type }}-{{ no }}-ord" class="{{ record_type }}-ord" type="hidden" name="{{ record_type }}-{{ no }}-ord" value="{{ order }}" /> <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 %} {% if record.account is not None %}
<option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option> <option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option>
{% else %} {% else %}
@ -40,11 +40,11 @@ First written: 2020/8/5
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row"> <div class="row">
<div class="col-sm-8"> <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 id="{{ record_type }}-{{ no }}-summary-error" class="invalid-feedback">{% if should_validate %}{{ record.summary.errors.0|default:"" }}{% endif %}</div>
</div> </div>
<div class="col-sm-4"> <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 id="{{ record_type }}-{{ no }}-amount-error" class="invalid-feedback">{% if should_validate %}{{ record.amount.errors.0|default:"" }}{% endif %}</div>
</div> </div>
</div> </div>
@ -55,7 +55,7 @@ First written: 2020/8/5
<button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button"> <button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
<i class="fas fa-sort"></i> <i class="fas fa-sort"></i>
</button> </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> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>
@ -63,7 +63,7 @@ First written: 2020/8/5
<button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button"> <button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
<i class="fas fa-sort"></i> <i class="fas fa-sort"></i>
</button> </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> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>

View File

@ -20,7 +20,7 @@ Author: imacat@mail.imacat.idv.tw (imacat)
First written: 2020/8/5 First written: 2020/8/5
{% endcomment %} {% 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>
<div class="row"> <div class="row">
<div class="col-sm-12"> <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 }}" /> <input type="hidden" name="{{ record_type }}-{{ no }}-id" value="{{ record.id.value }}" />
{% endif %} {% endif %}
<input id="{{ record_type }}-{{ no }}-ord" class="{{ record_type }}-ord" type="hidden" name="{{ record_type }}-{{ no }}-ord" value="{{ order }}" /> <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 %} {% if record.account is not None %}
<option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option> <option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option>
{% else %} {% else %}
@ -41,11 +41,11 @@ First written: 2020/8/5
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-8"> <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 id="{{ record_type }}-{{ no }}-summary-error" class="invalid-feedback">{% if should_validate %}{{ record.summary.errors.0|default:"" }}{% endif %}</div>
</div> </div>
<div class="col-lg-4"> <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 id="{{ record_type }}-{{ no }}-amount-error" class="invalid-feedback">{% if should_validate %}{{ record.amount.errors.0|default:"" }}{% endif %}</div>
</div> </div>
</div> </div>
@ -55,7 +55,7 @@ First written: 2020/8/5
<button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button"> <button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
<i class="fas fa-sort"></i> <i class="fas fa-sort"></i>
</button> </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> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>

View File

@ -47,19 +47,19 @@ First written: 2020/4/3
</div> </div>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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> </li>
</ul> </ul>

View File

@ -71,7 +71,7 @@ First written: 2020/7/23
</ul> </ul>
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <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> <i class="fas fa-plus"></i>
</button> </button>
</li> </li>

View File

@ -71,7 +71,7 @@ First written: 2020/7/23
</ul> </ul>
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <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> <i class="fas fa-plus"></i>
</button> </button>
</li> </li>

View File

@ -73,7 +73,7 @@ First written: 2020/7/23
</ul> </ul>
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <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> <i class="fas fa-plus"></i>
</button> </button>
</li> </li>
@ -93,13 +93,13 @@ First written: 2020/7/23
<ul id="credit-records" class="list-group"> <ul id="credit-records" class="list-group">
{% for record in item.credit_records %} {% for record in item.credit_records %}
{% with record_type="credit" no=forloop.counter order=forloop.counter %} {% 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 %} {% endwith %}
{% endfor %} {% endfor %}
</ul> </ul>
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <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> <i class="fas fa-plus"></i>
</button> </button>
</li> </li>

View File

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

View File

@ -42,16 +42,16 @@ First written: 2020/7/10
<!-- Modal body --> <!-- Modal body -->
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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> </li>
</ul> </ul>
<div id="period-content-month" class="period-content modal-body"> <div id="period-content-month" class="period-content modal-body">