ESLint fixes.

frontend/.eslintignore

@@ -1,3 +1,2 @@
-vue/components/Public/WebDJ/Stream.js
+vue/components/Public/WebDJ/*
-vue/components/Public/WebDJ/Track.js
 vue/vendor/chartjs-colorschemes/*

frontend/.eslintrc.js

@@ -4,16 +4,17 @@ module.exports = {
         'plugin:vue/vue3-recommended'
     ],
     rules: {
-        "vue/no-v-html": "off",
-        "vue/multi-word-component-names": "off",
         "no-unused-vars": ["error", {
             "varsIgnorePattern": "^_|props",
         }],
+        "vue/multi-word-component-names": "off",
         "vue/html-indent": ["error", 4, {
             "attribute": 1,
             "baseIndent": 1,
             "closeBracket": 0,
             "alignAttributesVertically": true
-        }]
+        }],
+        "vue/no-v-html": "off",
+        "vue/no-mutating-props": "off"
     }
 }

frontend/vue/components/Admin/Permissions/Form/StationForm.vue

@@ -51,6 +51,7 @@ const props = defineProps({
     }
 });
 
+
 const remainingStations = computed(() => {
     return pickBy(props.stations, (stationName, stationId) => {
         return !find(props.form.permissions.$model.station, {'station_id': stationId});
@@ -61,6 +62,7 @@ const hasRemainingStations = computed(() => {
     return !isEmpty(remainingStations.value);
 });
 
+
 const remove = (index) => {
     props.form.permissions.$model.station.splice(index, 1);
 };

frontend/vue/components/Common/BaseEditModal.vue

@@ -9,7 +9,7 @@ import mergeExisting from "~/functions/mergeExisting";
 
 export default {
     name: 'BaseEditModal',
-    components: {ModalForm},
+    components: {ModalForm}, // eslint-disable-line
     props: {
         createUrl: {
             type: String,

frontend/vue/components/Common/DataTable.vue

@@ -92,6 +92,7 @@
                                 <b-dropdown-form class="pt-3">
                                     <div
                                         v-for="field in selectableFields"
+                                        :key="field.key"
                                         class="form-group"
                                     >
                                         <div class="custom-control custom-checkbox">
@@ -147,7 +148,7 @@
                 @refreshed="onRefreshed"
                 @sort-changed="onSortChanged"
             >
-                <template #head(selected)="data">
+                <template #head(selected)>
                     <b-form-checkbox
                         :aria-label="$gettext('Select all visible rows')"
                         :checked="allSelected"
@@ -274,13 +275,11 @@ export default defineComponent({
         },
         requestConfig: {
             type: Function,
-            default: () => {
+            default: null
-            }
         },
         requestProcess: {
             type: Function,
-            default: () => {
+            default: null
-            }
         }
     },
     emits: [
@@ -361,7 +360,6 @@ export default defineComponent({
         },
         itemProvider() {
             if (this.items !== null) {
-                this.totalRows = this.items.length;
                 return this.items;
             }
 
@@ -371,6 +369,11 @@ export default defineComponent({
         }
     },
     watch: {
+        items(newVal) {
+            if (newVal !== null) {
+                this.totalRows = newVal.length;
+            }
+        },
         filter() {
             this.currentPage = 1;
         }

frontend/vue/components/Common/ScheduleView.vue

@@ -30,7 +30,7 @@ const emit = defineEmits(['click']);
 const onEventDidMount = (info) => {
     let desc = info?.event?.extendedProps?.description || null;
     if (desc !== null) {
-        // eslint-ignore-line no-undef
+        /* eslint-disable no-undef */
         $(info.el).tooltip({
             title: desc,
             placement: 'top',
@@ -38,6 +38,7 @@ const onEventDidMount = (info) => {
             container: 'body',
             offset: 0
         });
+        /* eslint-enable */
     }
 };
 

frontend/vue/components/Dashboard.vue

@@ -46,6 +46,7 @@
             <template v-if="!notificationsLoading && notifications.length > 0">
                 <div
                     v-for="notification in notifications"
+                    :key="notification.title"
                     class="card-body d-flex align-items-center"
                     :class="'alert-'+notification.type"
                     role="alert"

frontend/vue/components/Form/VuelidateError.vue

@@ -1,6 +1,9 @@
 <template>
     <div style="display: contents">
-        <div v-for="message in errorMessages">
+        <div
+            v-for="message in errorMessages"
+            :key="message"
+        >
             {{ message }}
         </div>
     </div>

frontend/vue/components/Public/FullPlayer/SongHistory.vue

@@ -5,6 +5,7 @@
         </p>
         <div
             v-for="(row, index) in history"
+            :key="row.sh_id"
             class="song"
         >
             <strong class="order">{{ history.length - index }}</strong>

frontend/vue/components/Public/Player.vue

@@ -106,6 +106,7 @@
                     >
                         <a
                             v-for="stream in streams"
+                            :key="stream.url"
                             class="dropdown-item"
                             href="javascript:"
                             @click.prevent="switchStream(stream)"
@@ -157,7 +158,7 @@ import AudioPlayer from '~/components/Common/AudioPlayer';
 import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 import {computed, onMounted, ref, shallowRef, watch} from "vue";
-import {useMounted, useStorage} from "@vueuse/core";
+import {useStorage} from "@vueuse/core";
 import formatTime from "~/functions/formatTime";
 import {useTranslate} from "~/vendor/gettext";
 import useNowPlaying from "~/functions/useNowPlaying";

frontend/vue/components/Stations/Media.vue

@@ -163,6 +163,7 @@
                             />
                         </div>
                     </template>
+                    <!-- eslint-disable-next-line -->
                     <template #cell(media.length)="row">
                         {{ row.item.media.length_text }}
                     </template>
@@ -175,7 +176,10 @@
                         </template>
                     </template>
                     <template #cell(playlists)="row">
-                        <template v-for="(playlist, index) in row.item.playlists">
+                        <template
+                            v-for="(playlist, index) in row.item.playlists"
+                            :key="playlist.id"
+                        >
                             <a
                                 class="btn-search"
                                 href="#"

frontend/vue/components/Stations/Media/Form/WaveformEditor.vue

@@ -154,7 +154,7 @@ const setCueOut = () => {
 const setFadeOverlap = () => {
     let duration = $waveform.value?.getDuration();
     let currentTime = $waveform.value?.getCurrentTime();
-    let cue_out = form.value?.cue_out ?? duration;
+    let cue_out = props.form.cue_out ?? duration;
 
     props.form.fade_overlap = Math.round((cue_out - currentTime) * 10) / 10;
     updateRegions();
@@ -162,7 +162,7 @@ const setFadeOverlap = () => {
 
 const setFadeIn = () => {
     let currentTime = $waveform.value?.getCurrentTime();
-    let cue_in = form.value?.cue_in ?? 0;
+    let cue_in = props.form.cue_in ?? 0;
 
     props.form.fade_in = Math.round((currentTime - cue_in) * 10) / 10;
     updateRegions();
@@ -171,7 +171,7 @@ const setFadeIn = () => {
 const setFadeOut = () => {
     let currentTime = $waveform.value?.getCurrentTime();
     let duration = $waveform.value?.getDuration();
-    let cue_out = form.value?.cue_out ?? duration;
+    let cue_out = props.form.cue_out ?? duration;
 
     props.form.fade_out = Math.round((cue_out - currentTime) * 10) / 10;
     updateRegions();

frontend/vue/components/Stations/Playlists/EditModal.vue

@@ -14,8 +14,8 @@
         >
             <form-basic-info :form="v$.form" />
             <form-schedule
+                v-model:schedule-items="form.schedule_items"
                 :form="v$.form"
-                :schedule-items="form.schedule_items"
                 :station-time-zone="stationTimeZone"
             />
             <form-advanced

frontend/vue/components/Stations/Playlists/Form/Schedule.vue

@@ -33,43 +33,44 @@
     </b-tab>
 </template>
 
-<script>
+<script setup>
 import Icon from '~/components/Common/Icon';
 import PlaylistsFormScheduleRow from "~/components/Stations/Playlists/Form/ScheduleRow.vue";
+import {useVModel} from "@vueuse/core";
 
-export default {
+const props = defineProps({
-    name: 'PlaylistEditSchedule',
+    form: {
-    components: {PlaylistsFormScheduleRow, Icon},
+        type: Object,
-    props: {
+        required: true
-        form: {
-            type: Object,
-            required: true
-        },
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        scheduleItems: {
-            type: Array,
-            default: () => {
-                return [];
-            }
-        }
     },
-    methods: {
+    stationTimeZone: {
-        add() {
+        type: String,
-            this.scheduleItems.push({
+        required: true
-                start_time: null,
+    },
-                end_time: null,
+    scheduleItems: {
-                start_date: null,
+        type: Array,
-                end_date: null,
+        default: () => {
-                days: [],
+            return [];
-                loop_once: false
-            });
-        },
-        remove (index) {
-            this.scheduleItems.splice(index, 1);
         }
     }
+});
+
+const emit = defineEmits(['update:scheduleItems']);
+
+const scheduleItems = useVModel(props, 'scheduleItems', emit);
+
+const add = () => {
+    scheduleItems.value.push({
+        start_time: null,
+        end_time: null,
+        start_date: null,
+        end_date: null,
+        days: [],
+        loop_once: false
+    });
+};
+
+const remove = (index) => {
+    scheduleItems.value.splice(index, 1);
 };
 </script>

frontend/vue/components/Stations/Streamers/EditModal.vue

@@ -14,8 +14,8 @@
         >
             <form-basic-info :form="v$.form" />
             <form-schedule
+                v-model:schedule-items="form.schedule_items"
                 :form="v$.form"
-                :schedule-items="form.schedule_items"
                 :station-time-zone="stationTimeZone"
             />
             <form-artwork

frontend/vue/components/Stations/Streamers/Form/Schedule.vue

@@ -31,55 +31,43 @@
     </b-tab>
 </template>
 
-<script>
+<script setup>
 import Icon from '~/components/Common/Icon';
 import StreamersFormScheduleRow from "~/components/Stations/Streamers/Form/ScheduleRow.vue";
+import {useVModel} from "@vueuse/core";
 
-export default {
+const props = defineProps({
-    name: 'StreamerFormSchedule',
+    form: {
-    components: {StreamersFormScheduleRow, Icon},
+        type: Object,
-    props: {
+        required: true
-        form: {
-            type: Object,
-            required: true
-        },
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        scheduleItems: {
-            type: Array,
-            default: () => {
-                return [];
-            }
-        }
     },
-    data() {
+    stationTimeZone: {
-        return {
+        type: String,
-            dayOptions: [
+        required: true
-                {value: 1, text: this.$gettext('Monday')},
-                {value: 2, text: this.$gettext('Tuesday')},
-                {value: 3, text: this.$gettext('Wednesday')},
-                {value: 4, text: this.$gettext('Thursday')},
-                {value: 5, text: this.$gettext('Friday')},
-                {value: 6, text: this.$gettext('Saturday')},
-                {value: 7, text: this.$gettext('Sunday')}
-            ]
-        };
     },
-    methods: {
+    scheduleItems: {
-        add () {
+        type: Array,
-            this.scheduleItems.push({
+        default: () => {
-                start_time: null,
+            return [];
-                end_time: null,
-                start_date: null,
-                end_date: null,
-                days: []
-            });
-        },
-        remove (index) {
-            this.scheduleItems.splice(index, 1);
         }
     }
+});
+
+const emit = defineEmits(['update:scheduleItems']);
+
+const scheduleItems = useVModel(props, 'scheduleItems', emit);
+
+const add = () => {
+    scheduleItems.value.push({
+        start_time: null,
+        end_time: null,
+        start_date: null,
+        end_date: null,
+        days: []
+    });
+};
+
+const remove = (index) => {
+    scheduleItems.value.splice(index, 1);
 };
 </script>