Fix ESLint issues

src/Pages/Credits.vue

@@ -66,7 +66,8 @@
             <b>Graphics &amp; Icons</b><br>
         </p>
         <ul>
-            <li>animated loading icon: <a href="https://loading.io/spinner">spinner by loading.io</a> (CC-BY License).
+            <li>
+animated loading icon: <a href="https://loading.io/spinner">spinner by loading.io</a> (CC-BY License).
             </li>
             <li>
                 all other Icons:

src/Pages/FileManager.vue

@@ -7,18 +7,18 @@
         />
         <hr>
 
-        <jumbotron/>
+        <jumbotron />
 
         <!-- All the UI for uploading and editing files is only shown if the user
         choose to edit files in the jumbotron above -->
         <div v-if="mode === 'files'">
-            <files/>
+            <files />
         </div>
 
         <!-- All the UI for creating and editing playlists is only shown if the user
         choose to edit playlists in the jumbotron above -->
         <div v-if="mode === 'playlists'">
-            <playlists/>
+            <playlists />
         </div>
     </b-container>
 </template>

src/Pages/Home.vue

@@ -7,12 +7,18 @@
                 <br>
             </div>
 
-            <div :class="{
-              'tw-mx-auto tw-grid sm:tw-grid-cols-2 tw-gap-8 tw-text-center': true,
-              'md:tw-grid-cols-3 tw-max-w-3xl': $parent.user.steeringUser.is_superuser,
-              'md:tw-grid-cols-2 tw-max-w-lg': !$parent.user.steeringUser.is_superuser
-            }">
-                <router-link v-for="mod in modules.main" :to="mod.slug" :key="mod.slug">
+            <div
+                :class="{
+                    'tw-mx-auto tw-grid sm:tw-grid-cols-2 tw-gap-8 tw-text-center': true,
+                    'md:tw-grid-cols-3 tw-max-w-3xl': $parent.user.steeringUser.is_superuser,
+                    'md:tw-grid-cols-2 tw-max-w-lg': !$parent.user.steeringUser.is_superuser
+                }"
+            >
+                <router-link
+                        v-for="mod in modules.main"
+                        :key="mod.slug"
+                        :to="mod.slug"
+                >
                     <img :src="mod.icon">
                     <p>{{ mod.title }}</p>
                 </router-link>
@@ -36,7 +42,12 @@
 
 <script>
     export default {
-        props: ['user', 'modules']
+        props: {
+            modules: {
+                type: Object,
+                required: true,
+            }
+        }
     }
 </script>
 

src/Pages/ShowManager.vue

@@ -9,7 +9,7 @@
 
         <!-- The jumbotron is used to display the name and description of the
         currently selected show -->
-        <show-jumbotron/>
+        <show-jumbotron />
 
         <!-- If the shows are not fully loaded yet, we just put the loading sign -->
         <div v-if="!loaded.shows">
@@ -25,18 +25,18 @@
 
         <!-- When all show data is loaded, here we display all the rest -->
         <div v-else>
-            <show-schedules/>
+            <show-schedules />
 
             <!-- include the modals to edit show and timeslot entries from the modal compontents -->
-            <show-timeslots ref="timeslotsComponent"/>
+            <show-timeslots ref="timeslotsComponent" />
 
             <hr>
 
             <h2>General settings for the radio show:</h2>
-            <show-metaSimpleTypes/>
-            <show-metaArrays/>
-            <show-metaOwners/>
-            <show-metaImages/>
+            <show-metaSimpleTypes />
+            <show-metaArrays />
+            <show-metaOwners />
+            <show-metaImages />
 
             <hr>
         </div>

src/components/AuthWall.vue

 <template>
-    <div v-if="$store.state.auth.user.steeringUser" class="tw-w-full">
-        <slot></slot>
+    <div
+v-if="$store.state.auth.user.steeringUser"
+class="tw-w-full"
+>
+        <slot />
     </div>
 
-    <div v-else class="tw-w-full tw-text-center">
+    <div
+v-else
+class="tw-w-full tw-text-center"
+>
         {{ $t('loading') }}
     </div>
 </template>

src/components/Footer.vue

@@ -4,7 +4,10 @@
             <b-row>
                 <b-col>
                     aura/<b>dashboard v{{ version }}</b>
-                    <span v-for="mod in modules.footer" :key="mod.slug">
+                    <span
+                            v-for="mod in modules.footer"
+                            :key="mod.slug"
+                    >
                       | <router-link :to="mod.slug">
                         {{ mod.title }}
                       </router-link>
@@ -25,7 +28,12 @@
 
 <script>
     export default {
-        props: ["modules"],
+        props: {
+            modules: {
+                type: Object,
+                required: true,
+            }
+        },
         computed: {
             version() {
                 return process.env.VUE_APP_VERSION

src/components/Header.vue

@@ -9,7 +9,7 @@
                 >
                     <span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
                     <span class="d-sm-none menu-context-info">Hit menu button for more:</span>
-                    <b-navbar-toggle target="nav_collapse"/>
+                    <b-navbar-toggle target="nav_collapse" />
                     <b-collapse
                             id="nav_collapse"
                             is-nav
@@ -38,11 +38,17 @@
                                     :text="$activeLocale().toUpperCase()"
                                     right
                             >
-                                <b-dropdown-item :active="$activeLocale() === 'de'" @click="$locale('de')">
+                                <b-dropdown-item
+:active="$activeLocale() === 'de'"
+@click="$locale('de')"
+>
                                     DE
                                 </b-dropdown-item>
 
-                                <b-dropdown-item :active="$activeLocale() === 'en'" @click="$locale('en')">
+                                <b-dropdown-item
+:active="$activeLocale() === 'en'"
+@click="$locale('en')"
+>
                                     EN
                                 </b-dropdown-item>
                             </b-nav-item-dropdown>

src/components/ShowSelector.vue

@@ -20,14 +20,14 @@
                             :disabled="disabledOk"
                             @click="confirmSelector"
                     >
-                        <b-icon-check/>
+                        <b-icon-check />
                     </b-button>
                     <b-button
                             variant="danger"
                             :disabled="disabledReset"
                             @click="resetSelector"
                     >
-                        <b-icon-x/>
+                        <b-icon-x />
                     </b-button>
                 </b-input-group-append>
             </b-input-group>

src/components/emissions/ModalEdit.vue

@@ -48,8 +48,10 @@
                     </p>
                 </div>
                 <div v-else>
-                    <p>This is a recurring event: <b>{{ rruleRender(schedule.rrule) }}</b>, until: {{
-                        prettyDate(schedule.until) }}</p>
+                    <p>
+This is a recurring event: <b>{{ rruleRender(schedule.rrule) }}</b>, until: {{
+                        prettyDate(schedule.until) }}
+</p>
                     <p>All timeslots of this schedule:</p>
 
                     <b-table
@@ -113,7 +115,7 @@
                 >
                     <label class="tw-leading-loose">
                         Repeat at
-                        <b-form-input type="time"/>
+                        <b-form-input type="time" />
                     </label>
                 </b-col>
             </b-row>

src/components/filemanager/Files.vue

@@ -169,7 +169,7 @@
                 </div>
 
                 <!-- We also import the modal for showing file import logs here -->
-                <import-log ref="importLog"/>
+                <import-log ref="importLog" />
 
                 <!-- And here comes the table -->
                 <b-table
@@ -190,7 +190,8 @@
                     -->
                     <template v-slot:cell(metadata.album)="data">
                         <span v-if="data.item.source.import.state === 'aborted'"><b-badge
-                                variant="danger">Error:</b-badge></span>
+                                variant="danger"
+>Error:</b-badge></span>
                         <span v-else-if="data.item.source.import.state !== 'done'"><img
                                 src="/assets/radio.gif"
                                 width="24"

src/components/filemanager/ImportLog.vue

@@ -19,11 +19,11 @@
                 <hr>
                 <div v-if="results.fetch">
                     <h2>Fetch log</h2>
-                    <b-table :items="results.fetch"/>
+                    <b-table :items="results.fetch" />
                 </div>
                 <div v-if="results.normalize">
                     <h2>Normalize log</h2>
-                    <b-table :items="results.normalize"/>
+                    <b-table :items="results.normalize" />
                 </div>
             </div>
             <div v-else>

src/components/shows/AddShowModal.vue

@@ -19,7 +19,7 @@
                                 placeholder="Enter a title for this new show"
                         />
                     </b-col>
-                    <b-col cols="3"/>
+                    <b-col cols="3" />
                     <b-col cols="9">
                         <small class="slug">Slug: {{ temporarySlug }}</small>
                     </b-col>

src/components/shows/Jumbotron.vue

@@ -35,7 +35,7 @@
                 steps to sanitize the date before inserting it into the DOM
                 -->
                 <!-- eslint-disable-next-line vue/no-v-html -->
-                <p v-html="sanitizedShowDescription"/>
+                <p v-html="sanitizedShowDescription" />
                 <!-- TODO: add image and logo here? -->
             </div>
 

src/components/shows/MetaSimpleTypes.vue

@@ -192,7 +192,7 @@
             />
         </b-modal>
 
-        <app-modalFallback ref="modalFallback"/>
+        <app-modalFallback ref="modalFallback" />
 
         <b-modal
                 ref="modalPredecessor"

src/components/shows/NotesModal.vue

@@ -24,7 +24,7 @@
                                 placeholder="Enter a title"
                         />
                     </b-col>
-                    <b-col cols="2"/>
+                    <b-col cols="2" />
                     <b-col cols="10">
                         <small class="slug">Slug: {{ slug }}</small>
                     </b-col>

src/components/shows/Timeslots.vue

 <template>
     <div>
-        <app-modalNotes ref="appModalNotes"/>
-        <app-modalPlaylist ref="appModalPlaylist"/>
+        <app-modalNotes ref="appModalNotes" />
+        <app-modalPlaylist ref="appModalPlaylist" />
 
         <!-- here are the filter settings for our timeslots table -->
         <b-card>