add eslint rule for enforced single quotes

.eslintrc.json

@@ -22,6 +22,7 @@
         "no-console": "off",
         "no-extra-semi": "off",
         "semi": ["error", "always"],
-        "comma-dangle": ["error", "always-multiline"]
+        "comma-dangle": ["error", "always-multiline"],
+        "quotes": ["error", "single"]
     }
 }

frontend/src/app.spec.js

@@ -1,4 +1,4 @@
-import { App } from "./app";
+import { App } from './app';
 
 const TEST_UTILS = [
   { name: 'util1' },

frontend/src/main.js

@@ -15,9 +15,9 @@ window.App = app;
 //     return;
 //   }
 
-//   const contentType = response.headers.get("content-type");
+//   const contentType = response.headers.get('content-type');
 //   if (!contentType.match(options.accept)) {
-//     throw new Error('Server returned with "' + contentType + '" when "' + options.accept + '" was expected');
+//     throw new Error('Server returned with '' + contentType + '' when '' + options.accept + '' was expected');
 //   }
 // }
 

frontend/src/services/html-helpers/html-helpers.js

@@ -3,7 +3,7 @@ export class HtmlHelpers {
   // `parseResponse` takes a raw HttpClient response and an options object.
   // Returns an object with `element` being an contextual fragment of the
   // HTML in the response and `ifPrefix` being the prefix that was used to
-  // "unique-ify" the ids of the received HTML.
+  // 'unique-ify' the ids of the received HTML.
   // Original Response IDs can optionally be kept by adding `keepIds: true`
   // to the `options` object.
   parseResponse(response, options = {}) {

frontend/src/services/html-helpers/html-helpers.spec.js

@@ -1,4 +1,4 @@
-import { HtmlHelpers } from "./html-helpers";
+import { HtmlHelpers } from './html-helpers';
 
 describe('HtmlHelpers', () => {
   let htmlHelpers;

frontend/src/services/http-client/http-client.spec.js

@@ -1,4 +1,4 @@
-import { HttpClient } from "./http-client";
+import { HttpClient } from './http-client';
 
 const TEST_URL = 'http://example.com';
 const FAKE_RESPONSE = {

frontend/src/services/i18n/i18n.spec.js

@@ -1,4 +1,4 @@
-import { I18n } from "./i18n";
+import { I18n } from './i18n';
 
 describe('I18n', () => {
   let i18n;

frontend/src/utils/alerts/alerts.scss

@@ -20,7 +20,7 @@
   &::before {
     content: '\f077';
     position: absolute;
-    font-family: "Font Awesome 5 Free";
+    font-family: 'Font Awesome 5 Free';
     left: 50%;
     top: 0;
     height: 30px;
@@ -126,7 +126,7 @@
   &::before {
     content: '\f05a';
     position: absolute;
-    font-family: "Font Awesome 5 Free";
+    font-family: 'Font Awesome 5 Free';
     font-size: 24px;
     top: 50%;
     left: 50%;
@@ -164,7 +164,7 @@
   &::before {
     content: '\f00d';
     position: absolute;
-    font-family: "Font Awesome 5 Free";
+    font-family: 'Font Awesome 5 Free';
     top: 50%;
     left: 50%;
     display: flex;

frontend/src/utils/alerts/alerts.spec.js

@@ -1,4 +1,4 @@
-import { Alerts } from "./alerts";
+import { Alerts } from './alerts';
 
 const MOCK_APP = {
   httpClient: {

frontend/src/utils/asidenav/asidenav.md

@@ -11,7 +11,7 @@ Correctly positions hovered asidenav submenus and handles the favorites button o
     <div .asidenav__box>
       <ul .asidenav__list.list--iconless>
         <li .asidenav__list-item>
-          <a .asidenav__link-wrapper href="#">
+          <a .asidenav__link-wrapper href='#'>
             <div .asidenav__link-shorthand>EIP
             <div .asidenav__link-label>Einführung in die Programmierung
           <div .asidenav__nested-list-wrapper>

frontend/src/utils/async-form/async-form.md

@@ -14,4 +14,4 @@ Prevents form submissions from reloading the page but instead firing an AJAX req
 ## Internationalization:
 This utility expects the following translations to be available:
 - `asyncFormFailure`\
-text that gets shown if an async form request fails (e.g. "Oops. Something went wrong.").
+text that gets shown if an async form request fails (e.g. 'Oops. Something went wrong.').

frontend/src/utils/check-all/check-all.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 
 const CHECKBOX_SELECTOR    = '[type="checkbox"]';
 

frontend/src/utils/form/auto-submit-button.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 
 export const AUTO_SUBMIT_BUTTON_UTIL_SELECTOR = '[uw-auto-submit-button]';
 

frontend/src/utils/form/auto-submit-button.md

@@ -6,6 +6,6 @@ We hide the button using JavaScript so no-js users will still be able to submit
 
 ## Example usage:
 ```html
-<button type="submit" uw-auto-submit-button>Submit
+<button type='submit' uw-auto-submit-button>Submit
 ```
 

frontend/src/utils/form/auto-submit-input.md

@@ -5,5 +5,5 @@ Programmatically submits forms when a certain input changes value
 
 ## Example usage:
 ```html
-<input type="text" uw-auto-submit-input />
+<input type='text' uw-auto-submit-input />
 ```

frontend/src/utils/form/datepicker.js

@@ -1,28 +1,28 @@
-import flatpickr from "flatpickr";
-import { Utility } from "../../core/utility";
+import flatpickr from 'flatpickr';
+import { Utility } from '../../core/utility';
 
 const DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
 
 const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
 
 const DATEPICKER_CONFIG = {
-  "datetime-local": {
+  'datetime-local': {
     enableTime: true,
     altInput: true,
-    altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
-    dateFormat: "Y-m-dTH:i",
+    altFormat: 'j. F Y, H:i', // maybe interpolate these formats for locale
+    dateFormat: 'Y-m-dTH:i',
     time_24hr: true,
   },
-  "date": {
-    altFormat: "j. F Y",
-    dateFormat: "Y-m-d",
+  'date': {
+    altFormat: 'j. F Y',
+    dateFormat: 'Y-m-d',
     altInput: true,
   },
-  "time": {
+  'time': {
     enableTime: true,
     noCalendar: true,
-    altFormat: "H:i",
-    dateFormat: "H:i",
+    altFormat: 'H:i',
+    dateFormat: 'H:i',
     altInput: true,
     time_24hr: true,
   },
@@ -44,7 +44,7 @@ export class Datepicker {
       return false;
     }
 
-    const flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute("type")];
+    const flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute('type')];
 
     if (!flatpickrConfig) {
       throw new Error('Datepicker utility called on unsupported element!');

frontend/src/utils/form/form-error-remover.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 
 const FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized';
 const FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select';

frontend/src/utils/form/form.scss

@@ -14,7 +14,7 @@ fieldset {
   }
 }
 
-[uw-auto-submit-button][type="submit"] {
+[uw-auto-submit-button][type='submit'] {
   animation: fade-in 500ms ease-in-out backwards;
   animation-delay: 500ms;
 }

frontend/src/utils/form/interactive-fieldset.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 
 const INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset__target';
 

frontend/src/utils/form/interactive-fieldset.md

@@ -12,24 +12,24 @@ Shows/hides inputs based on value of particular input
 ## Example usage:
 ### example with text input
 ```html
-<input id="input-0" type="text">
-<fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="yes">...</fieldset>
-<fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="no">...</fieldset>
+<input id='input-0' type='text'>
+<fieldset uw-interactive-fieldset data-conditional-input='#input-0' data-conditional-value='yes'>...</fieldset>
+<fieldset uw-interactive-fieldset data-conditional-input='#input-0' data-conditional-value='no'>...</fieldset>
 ```
 
 ### example with `<select>`
 ```html
-<select id="select-0">
-  <option value="0">Zero
-  <option value="1">One
-<fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="0">...</fieldset>
-<fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="1">...</fieldset>
+<select id='select-0'>
+  <option value='0'>Zero
+  <option value='1'>One
+<fieldset uw-interactive-fieldset data-conditional-input='#select-0' data-conditional-value='0'>...</fieldset>
+<fieldset uw-interactive-fieldset data-conditional-input='#select-0' data-conditional-value='1'>...</fieldset>
 ```
 
 ### example with checkbox
 ```html
-<input id="checkbox-0" type="checkbox">
-<input id="checkbox-1" type="checkbox">
-<fieldset uw-interactive-fieldset data-conditional-input="#checkbox-0">...</fieldset>
-<fieldset uw-interactive-fieldset data-conditional-input="#checkbox-1">...</fieldset>
+<input id='checkbox-0' type='checkbox'>
+<input id='checkbox-1' type='checkbox'>
+<fieldset uw-interactive-fieldset data-conditional-input='#checkbox-0'>...</fieldset>
+<fieldset uw-interactive-fieldset data-conditional-input='#checkbox-1'>...</fieldset>
 ```

frontend/src/utils/form/navigate-away-prompt.js

@@ -1,6 +1,6 @@
-import { Utility } from "../../core/utility";
-import { AUTO_SUBMIT_BUTTON_UTIL_SELECTOR } from "./auto-submit-button";
-import { AUTO_SUBMIT_INPUT_UTIL_SELECTOR } from "./auto-submit-input";
+import { Utility } from '../../core/utility';
+import { AUTO_SUBMIT_BUTTON_UTIL_SELECTOR } from './auto-submit-button';
+import { AUTO_SUBMIT_INPUT_UTIL_SELECTOR } from './auto-submit-input';
 
 const NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS = 'navigate-away-prompt--initialized';
 const NAVIGATE_AWAY_PROMPT_UTIL_OPTOUT = '[uw-no-navigate-away-prompt]';

frontend/src/utils/form/reactive-submit-button.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 
 var REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS = 'reactive-submit-button--initialized';
 

frontend/src/utils/form/reactive-submit-button.md

@@ -12,6 +12,6 @@ Disables a forms LAST sumit button as long as the required inputs are invalid
 ## Example usage:
 ```html
 <form uw-reactive-submit-button>
-  <input type="text" required>
-  <button type="submit">
+  <input type='text' required>
+  <button type='submit'>
 ```

frontend/src/utils/inputs/checkbox.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 import './checkbox.scss';
 
 var CHECKBOX_CLASS = 'checkbox';
@@ -20,7 +20,7 @@ export class Checkbox {
     }
 
     if (element.parentElement.classList.contains(CHECKBOX_CLASS)) {
-      // throw new Error('Checkbox element\'s wrapper already has class "' + CHECKBOX_CLASS + '"!');
+      // throw new Error('Checkbox element\'s wrapper already has class '' + CHECKBOX_CLASS + ''!');
       return false;
     }
 

frontend/src/utils/inputs/checkbox.md

@@ -2,9 +2,9 @@
 Wraps native checkbox
 
 ## Attribute: (none)
-(element must be an input of type="checkbox")
+(element must be an input of type='checkbox')
 
 ## Example usage:
 ```html
-<input type="checkbox">
+<input type='checkbox'>
 ```

frontend/src/utils/inputs/checkbox.scss

@@ -5,7 +5,7 @@
   position: relative;
   display: inline-block;
 
-  [type="checkbox"] {
+  [type='checkbox'] {
     position: fixed;
     top: -1px;
     left: -1px;
@@ -41,7 +41,7 @@
     background-color: var(--color-primary);
   }
 
-  [type="checkbox"]:focus + label {
+  [type='checkbox']:focus + label {
     border-color: #3273dc;
     box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
     outline: 0;

frontend/src/utils/inputs/file-input.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 
 const FILE_INPUT_CLASS = 'file-input';
 const FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';

frontend/src/utils/inputs/file-input.md

@@ -13,11 +13,11 @@ Wraps native file input
 This utility expects the following translations to be available:
 - `filesSelected`:\
   label of multi-input button after selection\
-  *example*: "Dateien ausgewählt" (will be prepended by number of selected files)
+  *example*: 'Dateien ausgewählt' (will be prepended by number of selected files)
 - `selectFile`:\
   label of single-input button before selection\
-  *example*: "Datei auswählen"
+  *example*: 'Datei auswählen'
 - `selectFiles`:\
   label of multi-input button before selection\
-  *example*: "Datei(en) auswählen"
+  *example*: 'Datei(en) auswählen'
 

frontend/src/utils/inputs/inputs.scss

@@ -85,14 +85,14 @@
 }
 
 /* TEXT INPUTS */
-input[type="text"],
-input[type="search"],
-input[type="password"],
-input[type="url"],
-input[type="number"],
-input[type="email"],
-input[type*="date"],
-input[type*="time"],
+input[type='text'],
+input[type='search'],
+input[type='password'],
+input[type='url'],
+input[type='number'],
+input[type='email'],
+input[type*='date'],
+input[type*='time'],
 select {
   /* from bulma.css */
   color: #363636;
@@ -111,13 +111,13 @@ select {
   padding: 4px 13px;
 }
 
-input[type="number"] {
+input[type='number'] {
   width: 100px;
 }
 
-input[type*="date"],
-input[type*="time"],
-.flatpickr-input[type="text"] {
+input[type*='date'],
+input[type*='time'],
+.flatpickr-input[type='text'] {
   width: 50%;
   width: 250px;
 }

frontend/src/utils/inputs/radio.scss

@@ -9,7 +9,7 @@
   position: relative;
   display: inline-block;
 
-  [type="radio"] {
+  [type='radio'] {
     position: fixed;
     top: -1px;
     left: -1px;

frontend/src/utils/mass-input/mass-input.js

@@ -1,4 +1,4 @@
-import { Utility } from "../../core/utility";
+import { Utility } from '../../core/utility';
 
 const MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
 const MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
@@ -148,7 +148,7 @@ export class MassInput {
   }
 
   _processResponse(responseElement) {
-    this._element.innerHTML = "";
+    this._element.innerHTML = '';
     this._element.appendChild(responseElement);
 
     this._reset();

frontend/src/utils/mass-input/mass-input.md

@@ -9,9 +9,9 @@ The utility will only trigger an AJAX request if the mass input element has an a
 
 ## Example usage:
 ```html
-<form method="POST" action="...">
-  <input type="text">
+<form method='POST' action='...'>
+  <input type='text'>
   <div uw-mass-input>
-    <input type="text">
-    <button type="submit">
+    <input type='text'>
+    <button type='submit'>
 ```

frontend/src/utils/modal/modal.md

@@ -5,7 +5,7 @@
 ## Params:
 - `data-modal-trigger: string`\
 Selector for the element that toggles the modal.
-If trigger element has "href" attribute the modal will be dynamically loaded from the referenced page
+If trigger element has 'href' attribute the modal will be dynamically loaded from the referenced page
 - `data-modal-closeable: boolean`\
 If the param is present the modal will have a close-icon and can also be closed by clicking anywhere on the overlay
 

frontend/src/utils/tooltips/tooltips.js

@@ -1,7 +1,7 @@
 import { Utility } from '../../core/utility';
 import './tooltips.scss';
 
-// empty "shell" to be able to load styles
+// empty 'shell' to be able to load styles
 @Utility({
   selector: '[not-something-that-would-be-found]',
 })

frontend/src/utils/tooltips/tooltips.scss

@@ -28,7 +28,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    font-family: "Font Awesome 5 Free";
+    font-family: 'Font Awesome 5 Free';
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

frontend/src/utils/utils.js

@@ -1,14 +1,14 @@
-import { Alerts } from "./alerts/alerts";
-import { Asidenav } from "./asidenav/asidenav";
-import { AsyncForm } from "./async-form/async-form";
-import { ShowHide } from "./show-hide/show-hide";
-import { AsyncTable } from "./async-table/async-table";
-import { CheckAll } from "./check-all/check-all";
-import { FormUtils } from "./form/form";
-import { InputUtils } from "./inputs/inputs";
-import { MassInput } from "./mass-input/mass-input";
-import { Modal } from "./modal/modal";
-import { Tooltip } from "./tooltips/tooltips";
+import { Alerts } from './alerts/alerts';
+import { Asidenav } from './asidenav/asidenav';
+import { AsyncForm } from './async-form/async-form';
+import { ShowHide } from './show-hide/show-hide';
+import { AsyncTable } from './async-table/async-table';
+import { CheckAll } from './check-all/check-all';
+import { FormUtils } from './form/form';
+import { InputUtils } from './inputs/inputs';
+import { MassInput } from './mass-input/mass-input';
+import { Modal } from './modal/modal';
+import { Tooltip } from './tooltips/tooltips';
 
 export const Utils = [
   Alerts,

frontend/vendor/flatpickr.css

@@ -254,7 +254,7 @@
 }
 .numInputWrapper span:after {
   display: block;
-  content: "";
+  content: '';
   position: absolute;
 }
 .numInputWrapper span.arrowUp {
@@ -628,7 +628,7 @@ span.flatpickr-weekday {
   display: flex;
 }
 .flatpickr-time:after {
-  content: "";
+  content: '';
   display: table;
   clear: both;
 }