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

@@ -5,6 +5,7 @@
   "rules": {
     "function-paren-newline": "error",
     "prefer-arrow-callback": "error",
+    "prefer-template": "error",
     "no-var": "error",
     "quotes": [
       "error",

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.

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}`;
 }

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);
   });

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`);
   });
 });

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');