From 2b5ffca1b0dbaedf402f1526a9101184588f1122 Mon Sep 17 00:00:00 2001
From: Thomas Rupprecht <rupprecht.thomas@gmail.com>
Date: Sun, 4 Dec 2022 12:00:18 +0100
Subject: [PATCH] Use template literals instead of string concatenation (#1003)

* use template literals instead of string concatenation
* extract function call out of template literals
* add contributing hint to don't put function calls in template-literals
---
 .eslintrc.json                        |  1 +
 CONTRIBUTING.md                       |  1 +
 resources/assets/js/date.js           | 14 +++++++++-----
 resources/assets/js/forms.js          |  4 ++--
 resources/assets/js/sticky-headers.js |  8 ++++----
 webpack.config.js                     |  3 ++-
 6 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 150ece31..b5a50a5c 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,6 +5,7 @@
   "rules": {
     "function-paren-newline": "error",
     "prefer-arrow-callback": "error",
+    "prefer-template": "error",
     "no-var": "error",
     "quotes": [
       "error",
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index bd21c4d4..eb84be28 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -14,6 +14,7 @@
   The `default.po` files contain translations that can be auto-detected using Poedit, `additional.po` contains generated messages like validations.
 * JavaScript code must pass the ESLint check `yarn lint`.
   Auto-fixing is supported via `yarn lint:fix`.
+* Don't put function calls in a template-literal (template-strings).
 
 ## Pull requests
 * The PR should contain a short overview of the changes.
diff --git a/resources/assets/js/date.js b/resources/assets/js/date.js
index 1f094527..b9cadc26 100644
--- a/resources/assets/js/date.js
+++ b/resources/assets/js/date.js
@@ -7,8 +7,10 @@
 export const formatTime = (date) => {
   if (!date instanceof Date) return;
 
-  return String(date.getHours()).padStart(2, '0') + ':'
-        + String(date.getMinutes()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${hours}:${minutes}`;
 }
 
 /**
@@ -20,7 +22,9 @@ export const formatTime = (date) => {
 export const formatDay = (date) => {
   if (!date instanceof Date) return;
 
-  return String(date.getFullYear()) + '-'
-        + String(date.getMonth() + 1).padStart(2, '0') + '-'
-        + String(date.getDate()).padStart(2, '0');
+  const year = String(date.getFullYear());
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
 }
diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 2b0cec96..3e41ef3f 100644
--- a/resources/assets/js/forms.js
+++ b/resources/assets/js/forms.js
@@ -17,7 +17,7 @@ const triggerChange = (element) => {
  * @param {boolean} checked True if the checkboxes should be checked
  */
 global.checkAll = (id, checked) => {
-  document.querySelectorAll('#' + id + ' input[type="checkbox"]').forEach((element) => {
+  document.querySelectorAll(`#${id} input[type="checkbox"]`).forEach((element) => {
     element.checked = checked;
   });
 };
@@ -29,7 +29,7 @@ global.checkAll = (id, checked) => {
  * @param {int[]} shiftsList A list of numbers
  */
 global.checkOwnTypes = (id, shiftsList) => {
-  document.querySelectorAll('#' + id + ' input[type="checkbox"]').forEach((element) => {
+  document.querySelectorAll(`#${id} input[type="checkbox"]`).forEach((element) => {
     const value = parseInt(element.value, 10);
     element.checked = shiftsList.includes(value);
   });
diff --git a/resources/assets/js/sticky-headers.js b/resources/assets/js/sticky-headers.js
index 9f7abc44..ff6656a4 100644
--- a/resources/assets/js/sticky-headers.js
+++ b/resources/assets/js/sticky-headers.js
@@ -31,14 +31,14 @@ ready(() => {
 
   window.addEventListener('scroll', () => {
     const top = headers.item(0).parentNode.getBoundingClientRect().top;
-    const left = 15;
+    const left = Math.max(0, window.scrollX - 15);
 
-    timeLane.style.left = Math.max(0, window.scrollX - left) + 'px';
+    timeLane.style.left = `${left}px`;
 
     const headersTop = Math.max(
       0,
       window.scrollY - top - 13 + topReference.getBoundingClientRect().top
-    ) + 'px';
-    applyStyle(headers, 'top', headersTop);
+    );
+    applyStyle(headers, 'top', `${headersTop}px`);
   });
 });
diff --git a/webpack.config.js b/webpack.config.js
index b407cfc6..3a3d42d4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,7 +28,8 @@ const plugins = [
 let themeFileNameRegex = /theme\d+/;
 
 if (process.env.THEMES) {
-  themeFileNameRegex = new RegExp(`theme(${process.env.THEMES.replace(/,/g, '|')})\\.`);
+  const themes = process.env.THEMES.replace(/,/g, '|');
+  themeFileNameRegex = new RegExp(`theme(${themes})\\.`);
 }
 
 const themePath = path.resolve('resources/assets/themes');