Removed an unnecessary "start" variable in the constructor of the JavaScript MonthTab class.

src/accounting/static/js/account-order.js

@@ -29,10 +29,10 @@ document.addEventListener("DOMContentLoaded", () => {
         const onReorder = () => {
             const accounts = Array.from(list.children);
             for (let i = 0; i < accounts.length; i++) {
-                const no = document.getElementById("accounting-order-" + accounts[i].dataset.id + "-no");
+                const no = document.getElementById(`accounting-order-${accounts[i].dataset.id}-no`);
-                const code = document.getElementById("accounting-order-" + accounts[i].dataset.id + "-code");
+                const code = document.getElementById(`accounting-order-${accounts[i].dataset.id}-code`);
                 no.value = String(i + 1);
-                code.innerText = list.dataset.baseCode + "-" + ("000" + (i + 1)).slice(-3);
+                code.innerText = `${list.dataset.baseCode}-${`000${i + 1}`.slice(-3)}`;
             }
         };
         initializeDragAndDropReordering(list, onReorder);

src/accounting/static/js/currency-form.js

@@ -128,7 +128,7 @@ class CurrencyForm {
         }
         const original = this.#code.dataset.original;
         if (original === "" || this.#code.value !== original) {
-            const response = await fetch(this.#code.dataset.existsUrl + "?q=" + encodeURIComponent(this.#code.value));
+            const response = await fetch(`${this.#code.dataset.existsUrl}?q=${encodeURIComponent(this.#code.value)}`);
             const data = await response.json();
             if (data["exists"]) {
                 this.#code.classList.add("is-invalid");

src/accounting/static/js/description-editor.js

@@ -115,15 +115,15 @@ class DescriptionEditor {
     constructor(lineItemEditor, debitCredit) {
         this.lineItemEditor = lineItemEditor;
         this.debitCredit = debitCredit;
-        this.prefix = "accounting-description-editor-" + debitCredit;
+        this.prefix = `accounting-description-editor-${debitCredit}`;
         this.#form = document.getElementById(this.prefix);
-        this.#modal = document.getElementById(this.prefix + "-modal");
+        this.#modal = document.getElementById(`${this.prefix}-modal`);
-        this.description = document.getElementById(this.prefix + "-description");
+        this.description = document.getElementById(`${this.prefix}-description`);
-        this.#offsetButton = document.getElementById(this.prefix + "-offset");
+        this.#offsetButton = document.getElementById(`${this.prefix}-offset`);
-        this.number = document.getElementById(this.prefix + "-annotation-number");
+        this.number = document.getElementById(`${this.prefix}-annotation-number`);
-        this.note = document.getElementById(this.prefix + "-annotation-note");
+        this.note = document.getElementById(`${this.prefix}-annotation-note`);
         // noinspection JSValidateTypes
-        this.#accountButtons = Array.from(document.getElementsByClassName(this.prefix + "-account"));
+        this.#accountButtons = Array.from(document.getElementsByClassName(`${this.prefix}-account`));
 
         for (const cls of [GeneralTagTab, GeneralTripTab, BusTripTab, RecurringTransactionTab, AnnotationTab]) {
             const tab = new cls(this);
@@ -302,9 +302,9 @@ class TabPlane {
      */
     constructor(editor) {
         this.editor = editor;
-        this.prefix = this.editor.prefix + "-" + this.tabId();
+        this.prefix = `${this.editor.prefix}-${this.tabId()}`;
-        this.#tab = document.getElementById(this.prefix + "-tab");
+        this.#tab = document.getElementById(`${this.prefix}-tab`);
-        this.#page = document.getElementById(this.prefix + "-page");
+        this.#page = document.getElementById(`${this.prefix}-page`);
         this.#tab.onclick = () => this.switchToMe();
     }
 
@@ -392,10 +392,10 @@ class TagTabPlane extends TabPlane {
      */
     constructor(editor) {
         super(editor);
-        this.tag = document.getElementById(this.prefix + "-tag");
+        this.tag = document.getElementById(`${this.prefix}-tag`);
-        this.tagError = document.getElementById(this.prefix + "-tag-error");
+        this.tagError = document.getElementById(`${this.prefix}-tag-error`);
         // noinspection JSValidateTypes
-        this.tagButtons = Array.from(document.getElementsByClassName(this.prefix + "-btn-tag"));
+        this.tagButtons = Array.from(document.getElementsByClassName(`${this.prefix}-btn-tag`));
         this.initializeTagButtons();
         this.tag.onchange = () => {
             this.onTagChange();
@@ -541,11 +541,11 @@ class GeneralTagTab extends TagTabPlane {
      */
     updateDescription() {
         const pos = this.editor.description.value.indexOf("—");
-        const prefix = this.tag.value === ""? "": this.tag.value + "—";
+        const prefix = this.tag.value === ""? "": `${this.tag.value}—`;
         if (pos === -1) {
-            this.editor.description.value = prefix + this.editor.description.value;
+            this.editor.description.value = `${prefix}${this.editor.description.value}`;
         } else {
-            this.editor.description.value = prefix + this.editor.description.value.substring(pos + 1);
+            this.editor.description.value = `${prefix}${this.editor.description.value.substring(pos + 1)}`;
         }
     }
 
@@ -623,12 +623,12 @@ class GeneralTripTab extends TagTabPlane {
      */
     constructor(editor) {
         super(editor);
-        this.#from = document.getElementById(this.prefix + "-from");
+        this.#from = document.getElementById(`${this.prefix}-from`);
-        this.#fromError = document.getElementById(this.prefix + "-from-error");
+        this.#fromError = document.getElementById(`${this.prefix}-from-error`);
-        this.#to = document.getElementById(this.prefix + "-to");
+        this.#to = document.getElementById(`${this.prefix}-to`);
-        this.#toError = document.getElementById(this.prefix + "-to-error")
+        this.#toError = document.getElementById(`${this.prefix}-to-error`)
         // noinspection JSValidateTypes
-        this.#directionButtons = Array.from(document.getElementsByClassName(this.prefix + "-direction"));
+        this.#directionButtons = Array.from(document.getElementsByClassName(`${this.prefix}-direction`));
         this.#from.onchange = () => {
             this.#from.value = this.#from.value.trim();
             this.updateDescription();
@@ -675,7 +675,7 @@ class GeneralTripTab extends TagTabPlane {
                 break;
             }
         }
-        this.editor.description.value = this.tag.value + "—" + this.#from.value + direction + this.#to.value;
+        this.editor.description.value = `${this.tag.value}—${this.#from.value}${direction}${this.#to.value}`;
     }
 
     /**
@@ -828,12 +828,12 @@ class BusTripTab extends TagTabPlane {
      */
     constructor(editor) {
         super(editor);
-        this.#route = document.getElementById(this.prefix + "-route");
+        this.#route = document.getElementById(`${this.prefix}-route`);
-        this.#routeError = document.getElementById(this.prefix + "-route-error");
+        this.#routeError = document.getElementById(`${this.prefix}-route-error`);
-        this.#from = document.getElementById(this.prefix + "-from");
+        this.#from = document.getElementById(`${this.prefix}-from`);
-        this.#fromError = document.getElementById(this.prefix + "-from-error");
+        this.#fromError = document.getElementById(`${this.prefix}-from-error`);
-        this.#to = document.getElementById(this.prefix + "-to");
+        this.#to = document.getElementById(`${this.prefix}-to`);
-        this.#toError = document.getElementById(this.prefix + "-to-error")
+        this.#toError = document.getElementById(`${this.prefix}-to-error`)
         this.#route.onchange = () => {
             this.#route.value = this.#route.value.trim();
             this.updateDescription();
@@ -867,7 +867,7 @@ class BusTripTab extends TagTabPlane {
      * @override
      */
     updateDescription() {
-        this.editor.description.value = this.tag.value + "—" + this.#route.value + "—" + this.#from.value + "→" + this.#to.value;
+        this.editor.description.value = `${this.tag.value}—${this.#route.value}—${this.#from.value}→${this.#to.value}`;
     }
 
     /**
@@ -999,7 +999,7 @@ class RecurringTransactionTab extends TabPlane {
             A_("September"), A_("October"), A_("November"), A_("December"),
         ];
         // noinspection JSValidateTypes
-        this.#itemButtons = Array.from(document.getElementsByClassName(this.prefix + "-item"));
+        this.#itemButtons = Array.from(document.getElementsByClassName(`${this.prefix}-item`));
         for (const itemButton of this.#itemButtons) {
             itemButton.onclick = () => {
                 this.reset();
@@ -1028,8 +1028,8 @@ class RecurringTransactionTab extends TabPlane {
             .replaceAll("{this_month_name}", this.#monthNames[thisMonth])
             .replaceAll("{last_month_number}", String(lastMonth))
             .replaceAll("{last_month_name}", this.#monthNames[lastMonth])
-            .replaceAll("{last_bimonthly_number}", String(lastBimonthlyFrom) + "–" + String(lastBimonthlyTo))
+            .replaceAll("{last_bimonthly_number}", `${String(lastBimonthlyFrom)}–${String(lastBimonthlyTo)}`)
-            .replaceAll("{last_bimonthly_name}", this.#monthNames[lastBimonthlyFrom] + "–" + this.#monthNames[lastBimonthlyTo]);
+            .replaceAll("{last_bimonthly_name}", `${this.#monthNames[lastBimonthlyFrom]}–${this.#monthNames[lastBimonthlyTo]}`);
     }
 
     /**
@@ -1141,10 +1141,10 @@ class AnnotationTab extends TabPlane {
             this.editor.description.value = found[1];
         }
         if (parseInt(this.editor.number.value) > 1) {
-            this.editor.description.value = this.editor.description.value + "×" + this.editor.number.value;
+            this.editor.description.value = `${this.editor.description.value}×${this.editor.number.value}`;
         }
         if (this.editor.note.value !== "") {
-            this.editor.description.value = this.editor.description.value + "(" + this.editor.note.value + ")";
+            this.editor.description.value = `${this.editor.description.value}(${this.editor.note.value})`;
         }
     }
 
@@ -1171,13 +1171,13 @@ class AnnotationTab extends TabPlane {
             this.editor.number.value = "";
         } else {
             this.editor.number.value = found[2];
-            this.editor.description.value = this.editor.description.value + "×" + this.editor.number.value;
+            this.editor.description.value = `${this.editor.description.value}×${this.editor.number.value}`;
         }
         if (found[3] === undefined) {
             this.editor.note.value = "";
         } else {
             this.editor.note.value = found[3];
-            this.editor.description.value = this.editor.description.value + "(" + this.editor.note.value + ")";
+            this.editor.description.value = `${this.editor.description.value}(${this.editor.note.value})`;
         }
         return true;
     }

src/accounting/static/js/journal-entry-account-selector.js

@@ -91,13 +91,13 @@ class JournalEntryAccountSelector {
     constructor(lineItemEditor, debitCredit) {
         this.lineItemEditor = lineItemEditor
         this.#debitCredit = debitCredit;
-        const prefix = "accounting-account-selector-" + debitCredit;
+        const prefix = `accounting-account-selector-${debitCredit}`;
-        this.#query = document.getElementById(prefix + "-query");
+        this.#query = document.getElementById(`${prefix}-query`);
-        this.#queryNoResult = document.getElementById(prefix + "-option-no-result");
+        this.#queryNoResult = document.getElementById(`${prefix}-option-no-result`);
-        this.#optionList = document.getElementById(prefix + "-option-list");
+        this.#optionList = document.getElementById(`${prefix}-option-list`);
-        this.#options = Array.from(document.getElementsByClassName(prefix + "-option")).map((element) => new JournalEntryAccountOption(this, element));
+        this.#options = Array.from(document.getElementsByClassName(`${prefix}-option`)).map((element) => new JournalEntryAccountOption(this, element));
-        this.#more = document.getElementById(prefix + "-more");
+        this.#more = document.getElementById(`${prefix}-more`);
-        this.#clearButton = document.getElementById(prefix + "-btn-clear");
+        this.#clearButton = document.getElementById(`${prefix}-btn-clear`);
 
         this.#more.onclick = () => {
             this.#isShowMore = true;

src/accounting/static/js/journal-entry-form.js

@@ -128,7 +128,7 @@ class JournalEntryForm {
             const html = this.#element.dataset.currencyTemplate
                 .replaceAll("CURRENCY_INDEX", escapeHtml(String(newIndex)));
             this.#currencyList.insertAdjacentHTML("beforeend", html);
-            const element = document.getElementById("accounting-currency-" + String(newIndex));
+            const element = document.getElementById(`accounting-currency-${String(newIndex)}`);
             this.#currencies.push(new CurrencySubForm(this, element));
             this.#resetDeleteCurrencyButtons();
             this.#initializeDragAndDropReordering();
@@ -415,16 +415,16 @@ class CurrencySubForm {
         this.#element = element;
         this.form = form;
         this.index = parseInt(this.#element.dataset.index);
-        const prefix = "accounting-currency-" + String(this.index);
+        const prefix = `accounting-currency-${String(this.index)}`;
-        this.#control = document.getElementById(prefix + "-control");
+        this.#control = document.getElementById(`${prefix}-control`);
-        this.#error = document.getElementById(prefix + "-error");
+        this.#error = document.getElementById(`${prefix}-error`);
-        this.#no = document.getElementById(prefix + "-no");
+        this.#no = document.getElementById(`${prefix}-no`);
-        this.#code = document.getElementById(prefix + "-code");
+        this.#code = document.getElementById(`${prefix}-code`);
-        this.#codeSelect = document.getElementById(prefix + "-code-select");
+        this.#codeSelect = document.getElementById(`${prefix}-code-select`);
-        this.#deleteButton = document.getElementById(prefix + "-delete");
+        this.#deleteButton = document.getElementById(`${prefix}-delete`);
-        const debitElement = document.getElementById(prefix + "-debit");
+        const debitElement = document.getElementById(`${prefix}-debit`);
         this.#debit = debitElement === null? null: new DebitCreditSubForm(this, debitElement, "debit");
-        const creditElement = document.getElementById(prefix + "-credit");
+        const creditElement = document.getElementById(`${prefix}-credit`);
         this.#credit = creditElement == null? null: new DebitCreditSubForm(this, creditElement, "credit");
         this.#codeSelect.onchange = () => this.#code.value = this.#codeSelect.value;
         this.#deleteButton.onclick = () => {
@@ -617,13 +617,13 @@ class DebitCreditSubForm {
         this.#element = element;
         this.#currencyIndex = currency.index;
         this.debitCredit = debitCredit;
-        this.#prefix = "accounting-currency-" + String(this.#currencyIndex) + "-" + debitCredit;
+        this.#prefix = `accounting-currency-${String(this.#currencyIndex)}-${debitCredit}`;
-        this.#content = document.getElementById(this.#prefix + "-content");
+        this.#content = document.getElementById(`${this.#prefix}-content`);
-        this.#error = document.getElementById(this.#prefix + "-error");
+        this.#error = document.getElementById(`${this.#prefix}-error`);
-        this.#lineItemList = document.getElementById(this.#prefix + "-list");
+        this.#lineItemList = document.getElementById(`${this.#prefix}-list`);
         this.lineItems = Array.from(document.getElementsByClassName(this.#prefix)).map((element) => new LineItemSubForm(this, element));
-        this.#total = document.getElementById(this.#prefix + "-total");
+        this.#total = document.getElementById(`${this.#prefix}-total`);
-        this.#addLineItemButton = document.getElementById(this.#prefix + "-add-line-item");
+        this.#addLineItemButton = document.getElementById(`${this.#prefix}-add-line-item`);
 
         this.#resetContent();
         this.#addLineItemButton.onclick = () => this.currency.form.lineItemEditor.onAddNew(this);
@@ -653,7 +653,7 @@ class DebitCreditSubForm {
             .replaceAll("DEBIT_CREDIT", escapeHtml(this.debitCredit))
             .replaceAll("LINE_ITEM_INDEX", escapeHtml(String(newIndex)));
         this.#lineItemList.insertAdjacentHTML("beforeend", html);
-        const lineItem = new LineItemSubForm(this, document.getElementById(this.#prefix + "-" + String(newIndex)));
+        const lineItem = new LineItemSubForm(this, document.getElementById(`${this.#prefix}-${String(newIndex)}`));
         this.lineItems.push(lineItem);
         this.#resetContent();
         this.#resetDeleteLineItemButtons();
@@ -700,7 +700,7 @@ class DebitCreditSubForm {
             this.#element.classList.remove("accounting-not-empty");
             this.#element.classList.add("accounting-clickable");
             this.#element.dataset.bsToggle = "modal"
-            this.#element.dataset.bsTarget = "#" + this.currency.form.lineItemEditor.modal.id;
+            this.#element.dataset.bsTarget = `#${this.currency.form.lineItemEditor.modal.id}`;
             this.#element.onclick = () => {
                 this.#element.classList.add("accounting-not-empty");
                 this.currency.form.lineItemEditor.onAddNew(this);
@@ -910,20 +910,20 @@ class LineItemSubForm {
         this.debitCredit = element.dataset.debitCredit;
         this.index = parseInt(element.dataset.lineItemIndex);
         this.isMatched = element.classList.contains("accounting-matched-line-item");
-        const prefix = "accounting-currency-" + element.dataset.currencyIndex + "-" + this.debitCredit + "-" + String(this.index);
+        const prefix = `accounting-currency-${element.dataset.currencyIndex}-${this.debitCredit}-${String(this.index)}`;
-        this.#control = document.getElementById(prefix + "-control");
+        this.#control = document.getElementById(`${prefix}-control`);
-        this.#error = document.getElementById(prefix + "-error");
+        this.#error = document.getElementById(`${prefix}-error`);
-        this.#no = document.getElementById(prefix + "-no");
+        this.#no = document.getElementById(`${prefix}-no`);
-        this.#accountCode = document.getElementById(prefix + "-account-code");
+        this.#accountCode = document.getElementById(`${prefix}-account-code`);
-        this.#accountText = document.getElementById(prefix + "-account-text");
+        this.#accountText = document.getElementById(`${prefix}-account-text`);
-        this.#description = document.getElementById(prefix + "-description");
+        this.#description = document.getElementById(`${prefix}-description`);
-        this.#descriptionText = document.getElementById(prefix + "-description-text");
+        this.#descriptionText = document.getElementById(`${prefix}-description-text`);
-        this.#originalLineItemId = document.getElementById(prefix + "-original-line-item-id");
+        this.#originalLineItemId = document.getElementById(`${prefix}-original-line-item-id`);
-        this.#originalLineItemText = document.getElementById(prefix + "-original-line-item-text");
+        this.#originalLineItemText = document.getElementById(`${prefix}-original-line-item-text`);
-        this.#offsets = document.getElementById(prefix + "-offsets");
+        this.#offsets = document.getElementById(`${prefix}-offsets`);
-        this.#amount = document.getElementById(prefix + "-amount");
+        this.#amount = document.getElementById(`${prefix}-amount`);
-        this.#amountText = document.getElementById(prefix + "-amount-text");
+        this.#amountText = document.getElementById(`${prefix}-amount-text`);
-        this.#deleteButton = document.getElementById(prefix + "-delete");
+        this.#deleteButton = document.getElementById(`${prefix}-delete`);
         this.#control.onclick = () => this.debitCreditSubForm.currency.form.lineItemEditor.onEdit(this);
         this.#deleteButton.onclick = () => {
             this.#element.parentElement.removeChild(this.#element);

src/accounting/static/js/journal-entry-line-item-editor.js

@@ -216,20 +216,20 @@ class JournalEntryLineItemEditor {
     constructor(form) {
         this.form = form;
         this.#element = document.getElementById(this.#prefix);
-        this.modal = document.getElementById(this.#prefix + "-modal");
+        this.modal = document.getElementById(`${this.#prefix}-modal`);
-        this.#originalLineItemContainer = document.getElementById(this.#prefix + "-original-line-item-container");
+        this.#originalLineItemContainer = document.getElementById(`${this.#prefix}-original-line-item-container`);
-        this.#originalLineItemControl = document.getElementById(this.#prefix + "-original-line-item-control");
+        this.#originalLineItemControl = document.getElementById(`${this.#prefix}-original-line-item-control`);
-        this.#originalLineItemText = document.getElementById(this.#prefix + "-original-line-item");
+        this.#originalLineItemText = document.getElementById(`${this.#prefix}-original-line-item`);
-        this.#originalLineItemError = document.getElementById(this.#prefix + "-original-line-item-error");
+        this.#originalLineItemError = document.getElementById(`${this.#prefix}-original-line-item-error`);
-        this.#originalLineItemDelete = document.getElementById(this.#prefix + "-original-line-item-delete");
+        this.#originalLineItemDelete = document.getElementById(`${this.#prefix}-original-line-item-delete`);
-        this.#descriptionControl = document.getElementById(this.#prefix + "-description-control");
+        this.#descriptionControl = document.getElementById(`${this.#prefix}-description-control`);
-        this.#descriptionText = document.getElementById(this.#prefix + "-description");
+        this.#descriptionText = document.getElementById(`${this.#prefix}-description`);
-        this.#descriptionError = document.getElementById(this.#prefix + "-description-error");
+        this.#descriptionError = document.getElementById(`${this.#prefix}-description-error`);
-        this.#accountControl = document.getElementById(this.#prefix + "-account-control");
+        this.#accountControl = document.getElementById(`${this.#prefix}-account-control`);
-        this.#accountText = document.getElementById(this.#prefix + "-account");
+        this.#accountText = document.getElementById(`${this.#prefix}-account`);
-        this.#accountError = document.getElementById(this.#prefix + "-account-error")
+        this.#accountError = document.getElementById(`${this.#prefix}-account-error`)
-        this.#amountInput = document.getElementById(this.#prefix + "-amount");
+        this.#amountInput = document.getElementById(`${this.#prefix}-amount`);
-        this.#amountError = document.getElementById(this.#prefix + "-amount-error");
+        this.#amountError = document.getElementById(`${this.#prefix}-amount-error`);
         this.#descriptionEditors = DescriptionEditor.getInstances(this);
         this.#accountSelectors = JournalEntryAccountSelector.getInstances(this);
         this.originalLineItemSelector = new OriginalLineItemSelector(this);
@@ -577,11 +577,11 @@ class JournalEntryLineItemEditor {
     #setEnableDescriptionAccount(isEnabled) {
         if (isEnabled) {
             this.#descriptionControl.dataset.bsToggle = "modal";
-            this.#descriptionControl.dataset.bsTarget = "#accounting-description-editor-" + this.#debitCreditSubForm.debitCredit + "-modal";
+            this.#descriptionControl.dataset.bsTarget = `#accounting-description-editor-${this.#debitCreditSubForm.debitCredit}-modal`;
             this.#descriptionControl.classList.remove("accounting-disabled");
             this.#descriptionControl.classList.add("accounting-clickable");
             this.#accountControl.dataset.bsToggle = "modal";
-            this.#accountControl.dataset.bsTarget = "#accounting-account-selector-" + this.#debitCreditSubForm.debitCredit + "-modal";
+            this.#accountControl.dataset.bsTarget = `#accounting-account-selector-${this.#debitCreditSubForm.debitCredit}-modal`;
             this.#accountControl.classList.remove("accounting-disabled");
             this.#accountControl.classList.add("accounting-clickable");
         } else {

src/accounting/static/js/journal-entry-order.js

@@ -29,7 +29,7 @@ document.addEventListener("DOMContentLoaded", () => {
         const onReorder = () => {
             const accounts = Array.from(list.children);
             for (let i = 0; i < accounts.length; i++) {
-                const no = document.getElementById("accounting-order-" + accounts[i].dataset.id + "-no");
+                const no = document.getElementById(`accounting-order-${accounts[i].dataset.id}-no`);
                 no.value = String(i + 1);
             }
         };

src/accounting/static/js/option-form.js

@@ -242,12 +242,12 @@ class RecurringExpenseIncomeSubForm {
         this.#form = form;
         this.expenseIncome = expenseIncome;
         this.editor = new RecurringItemEditor(this);
-        this.#prefix = "accounting-recurring-" + expenseIncome;
+        this.#prefix = `accounting-recurring-${expenseIncome}`;
         this.#element = document.getElementById(this.#prefix);
-        this.#content = document.getElementById(this.#prefix + "-content");
+        this.#content = document.getElementById(`${this.#prefix}-content`);
-        this.#itemList = document.getElementById(this.#prefix + "-list");
+        this.#itemList = document.getElementById(`${this.#prefix}-list`);
-        this.#items = Array.from(document.getElementsByClassName(this.#prefix + "-item")).map((element) => new RecurringItemSubForm(this, element));
+        this.#items = Array.from(document.getElementsByClassName(`${this.#prefix}-item`)).map((element) => new RecurringItemSubForm(this, element));
-        this.#addButton = document.getElementById(this.#prefix + "-add");
+        this.#addButton = document.getElementById(`${this.#prefix}-add`);
 
         this.#resetContent();
         this.#addButton.onclick = () => this.editor.onAddNew();
@@ -265,7 +265,7 @@ class RecurringExpenseIncomeSubForm {
             .replaceAll("EXPENSE_INCOME", escapeHtml(this.expenseIncome))
             .replaceAll("ITEM_INDEX", escapeHtml(String(newIndex)));
         this.#itemList.insertAdjacentHTML("beforeend", html);
-        const element = document.getElementById(this.#prefix + "-" + String(newIndex))
+        const element = document.getElementById(`${this.#prefix}-${String(newIndex)}`)
         const item = new RecurringItemSubForm(this, element);
         this.#items.push(item);
         this.#resetContent();
@@ -294,7 +294,7 @@ class RecurringExpenseIncomeSubForm {
             this.#element.classList.remove("accounting-not-empty");
             this.#element.classList.add("accounting-clickable");
             this.#element.dataset.bsToggle = "modal"
-            this.#element.dataset.bsTarget = "#" + this.editor.modal.id;
+            this.#element.dataset.bsTarget = `#${this.editor.modal.id}`;
             this.#element.onclick = () => this.editor.onAddNew();
             this.#content.classList.add("d-none");
         } else {
@@ -441,17 +441,17 @@ class RecurringItemSubForm {
         this.#expenseIncomeSubForm = expenseIncomeSubForm
         this.#element = element;
         this.itemIndex = parseInt(element.dataset.itemIndex);
-        const prefix = "accounting-recurring-" + expenseIncomeSubForm.expenseIncome + "-" + element.dataset.itemIndex;
+        const prefix = `accounting-recurring-${expenseIncomeSubForm.expenseIncome}-${element.dataset.itemIndex}`;
-        this.#control = document.getElementById(prefix + "-control");
+        this.#control = document.getElementById(`${prefix}-control`);
-        this.#error = document.getElementById(prefix + "-error");
+        this.#error = document.getElementById(`${prefix}-error`);
-        this.#no = document.getElementById(prefix + "-no");
+        this.#no = document.getElementById(`${prefix}-no`);
-        this.#name = document.getElementById(prefix + "-name");
+        this.#name = document.getElementById(`${prefix}-name`);
-        this.#nameText = document.getElementById(prefix + "-name-text");
+        this.#nameText = document.getElementById(`${prefix}-name-text`);
-        this.#accountCode = document.getElementById(prefix + "-account-code");
+        this.#accountCode = document.getElementById(`${prefix}-account-code`);
-        this.#accountText = document.getElementById(prefix + "-account-text");
+        this.#accountText = document.getElementById(`${prefix}-account-text`);
-        this.#descriptionTemplate = document.getElementById(prefix + "-description-template");
+        this.#descriptionTemplate = document.getElementById(`${prefix}-description-template`);
-        this.#descriptionTemplateText = document.getElementById(prefix + "-description-template-text");
+        this.#descriptionTemplateText = document.getElementById(`${prefix}-description-template-text`);
-        this.deleteButton = document.getElementById(prefix + "-delete");
+        this.deleteButton = document.getElementById(`${prefix}-delete`);
 
         this.#control.onclick = () => this.#expenseIncomeSubForm.editor.onEdit(this);
         this.deleteButton.onclick = () => {
@@ -652,16 +652,16 @@ class RecurringItemEditor {
     constructor(subForm) {
         this.#subForm = subForm;
         this.expenseIncome = subForm.expenseIncome;
-        const prefix = "accounting-recurring-item-editor-" + subForm.expenseIncome;
+        const prefix = `accounting-recurring-item-editor-${subForm.expenseIncome}`;
         this.#form = document.getElementById(prefix);
-        this.modal = document.getElementById(prefix + "-modal");
+        this.modal = document.getElementById(`${prefix}-modal`);
-        this.#name = document.getElementById(prefix + "-name");
+        this.#name = document.getElementById(`${prefix}-name`);
-        this.#nameError = document.getElementById(prefix + "-name-error");
+        this.#nameError = document.getElementById(`${prefix}-name-error`);
-        this.#accountControl = document.getElementById(prefix + "-account-control");
+        this.#accountControl = document.getElementById(`${prefix}-account-control`);
-        this.#accountContainer = document.getElementById(prefix + "-account");
+        this.#accountContainer = document.getElementById(`${prefix}-account`);
-        this.#accountError = document.getElementById(prefix + "-account-error");
+        this.#accountError = document.getElementById(`${prefix}-account-error`);
-        this.#descriptionTemplate = document.getElementById(prefix + "-description-template");
+        this.#descriptionTemplate = document.getElementById(`${prefix}-description-template`);
-        this.#descriptionTemplateError = document.getElementById(prefix + "-description-template-error");
+        this.#descriptionTemplateError = document.getElementById(`${prefix}-description-template-error`);
         this.#accountSelector = new RecurringAccountSelector(this);
 
         this.#name.onchange = () => this.#validateName();
@@ -882,12 +882,12 @@ class RecurringAccountSelector {
     constructor(editor) {
         this.editor = editor;
         this.#expenseIncome = editor.expenseIncome;
-        const prefix = "accounting-recurring-accounting-selector-" + editor.expenseIncome;
+        const prefix = `accounting-recurring-accounting-selector-${editor.expenseIncome}`;
-        this.#query = document.getElementById(prefix + "-query");
+        this.#query = document.getElementById(`${prefix}-query`);
-        this.#queryNoResult = document.getElementById(prefix + "-option-no-result");
+        this.#queryNoResult = document.getElementById(`${prefix}-option-no-result`);
-        this.#optionList = document.getElementById(prefix + "-option-list");
+        this.#optionList = document.getElementById(`${prefix}-option-list`);
-        this.#options = Array.from(document.getElementsByClassName(prefix + "-option")).map((element) => new RecurringAccount(this, element));
+        this.#options = Array.from(document.getElementsByClassName(`${prefix}-option`)).map((element) => new RecurringAccount(this, element));
-        this.#clearButton = document.getElementById(prefix + "-clear");
+        this.#clearButton = document.getElementById(`${prefix}-clear`);
 
         this.#query.oninput = () => this.#filterOptions();
         this.#clearButton.onclick = () => this.editor.clearAccount();

src/accounting/static/js/original-line-item-selector.js

@@ -88,10 +88,10 @@ class OriginalLineItemSelector {
      */
     constructor(lineItemEditor) {
         this.lineItemEditor = lineItemEditor;
-        this.#query = document.getElementById(this.#prefix + "-query");
+        this.#query = document.getElementById(`${this.#prefix}-query`);
-        this.#queryNoResult = document.getElementById(this.#prefix + "-option-no-result");
+        this.#queryNoResult = document.getElementById(`${this.#prefix}-option-no-result`);
-        this.#optionList = document.getElementById(this.#prefix + "-option-list");
+        this.#optionList = document.getElementById(`${this.#prefix}-option-list`);
-        this.#options = Array.from(document.getElementsByClassName(this.#prefix + "-option")).map((element) => new OriginalLineItem(this, element));
+        this.#options = Array.from(document.getElementsByClassName(`${this.#prefix}-option`)).map((element) => new OriginalLineItem(this, element));
         this.#optionById = {};
         for (const option of this.#options) {
             this.#optionById[option.id] = option;
@@ -295,7 +295,7 @@ class OriginalLineItem {
         this.description = element.dataset.description;
         this.bareNetBalance = new Decimal(element.dataset.netBalance);
         this.netBalance = this.bareNetBalance;
-        this.netBalanceText = document.getElementById("accounting-original-line-item-selector-option-" + this.id + "-net-balance");
+        this.netBalanceText = document.getElementById(`accounting-original-line-item-selector-option-${this.id}-net-balance`);
         this.text = element.dataset.text;
         this.#queryValues = JSON.parse(element.dataset.queryValues);
         this.#element.onclick = () => this.#selector.lineItemEditor.saveOriginalLineItem(this);

src/accounting/static/js/period-chooser.js

@@ -51,7 +51,7 @@ class PeriodChooser {
      */
     constructor() {
         const prefix = "accounting-period-chooser";
-        this.modal = document.getElementById(prefix + "-modal");
+        this.modal = document.getElementById(`${prefix}-modal`);
         for (const cls of [MonthTab, YearTab, DayTab, CustomTab]) {
             const tab = new cls(this);
             this.tabPlanes[tab.tabId()] = tab;
@@ -112,9 +112,9 @@ class TabPlane {
      */
     constructor(chooser) {
         this.chooser = chooser;
-        this.prefix = "accounting-period-chooser-" + this.tabId();
+        this.prefix = `accounting-period-chooser-${this.tabId()}`;
-        this.#tab = document.getElementById(this.prefix + "-tab");
+        this.#tab = document.getElementById(`${this.prefix}-tab`);
-        this.#page = document.getElementById(this.prefix + "-page");
+        this.#page = document.getElementById(`${this.prefix}-page`);
         this.#tab.onclick = () => this.#switchToMe();
     }
 
@@ -164,12 +164,11 @@ class MonthTab extends TabPlane {
      */
     constructor(chooser) {
         super(chooser);
-        const monthChooser = document.getElementById(this.prefix + "-chooser");
+        const monthChooser = document.getElementById(`${this.prefix}-chooser`);
         if (monthChooser !== null) {
-            let start = monthChooser.dataset.start;
             this.#monthChooser = new tempusDominus.TempusDominus(monthChooser, {
                 restrictions: {
-                    minDate: new Date(start),
+                    minDate: new Date(monthChooser.dataset.start),
                 },
                 display: {
                     inline: true,
@@ -182,9 +181,7 @@ class MonthTab extends TabPlane {
             });
             monthChooser.addEventListener(tempusDominus.Namespace.events.change, (e) => {
                 const date = e.detail.date;
-                const year = date.year;
+                const period = `${date.year}-${`0${date.month + 1}`.slice(-2)}`;
-                const month = date.month + 1;
-                const period = month < 10? year + "-0" + month: year + "-" + month;
                 window.location = chooser.modal.dataset.urlTemplate
                     .replaceAll("PERIOD", period);
             });
@@ -244,8 +241,8 @@ class DayTab extends TabPlane {
      */
     constructor(chooser) {
         super(chooser);
-        this.#date = document.getElementById(this.prefix + "-date");
+        this.#date = document.getElementById(`${this.prefix}-date`);
-        this.#dateError = document.getElementById(this.prefix + "-date-error");
+        this.#dateError = document.getElementById(`${this.prefix}-date-error`);
         if (this.#date !== null) {
             this.#date.onchange = () => {
                 if (this.#validateDate()) {
@@ -331,11 +328,11 @@ class CustomTab extends TabPlane {
      */
     constructor(chooser) {
         super(chooser);
-        this.#start = document.getElementById(this.prefix + "-start");
+        this.#start = document.getElementById(`${this.prefix}-start`);
-        this.#startError = document.getElementById(this.prefix + "-start-error");
+        this.#startError = document.getElementById(`${this.prefix}-start-error`);
-        this.#end = document.getElementById(this.prefix + "-end");
+        this.#end = document.getElementById(`${this.prefix}-end`);
-        this.#endError = document.getElementById(this.prefix + "-end-error");
+        this.#endError = document.getElementById(`${this.prefix}-end-error`);
-        this.#conform = document.getElementById(this.prefix + "-confirm");
+        this.#conform = document.getElementById(`${this.prefix}-confirm`);
         if (this.#start !== null) {
             this.#start.onchange = () => {
                 if (this.#validateStart()) {
@@ -353,7 +350,7 @@ class CustomTab extends TabPlane {
                 isValid = this.#validateEnd() && isValid;
                 if (isValid) {
                     window.location = chooser.modal.dataset.urlTemplate
-                        .replaceAll("PERIOD", this.#start.value + "-" + this.#end.value);
+                        .replaceAll("PERIOD", `${this.#start.value}-${this.#end.value}`);
                 }
             };
         }