[web-src] Update to Vue CLI 4 and fix linter issues

web-src/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
     '@vue/standard'
   ],

web-src/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

web-src/package.json

@@ -1,19 +1,19 @@
 {
   "name": "forked-daapd-web",
   "version": "0.7.0",
+  "private": true,
   "description": "forked-daapd web interface",
   "author": "chme <christian.meffert@googlemail.com>",
-  "license": "GPL-2.0",
-  "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build --no-clean",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "dev": "vue-cli-service serve"
   },
   "dependencies": {
     "axios": "^0.19.2",
     "bulma": "^0.8.2",
+    "core-js": "^3.6.4",
     "mdi": "^2.2.43",
     "moment": "^2.24.0",
     "moment-duration-format": "^2.3.2",
@@ -30,10 +30,18 @@
     "vuex": "^3.1.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.2.2",
     "vue-template-compiler": "^2.6.11"
-  }
+  },
+  "license": "GPL-2.0"
 }

web-src/src/App.vue

@@ -50,7 +50,7 @@ export default {
     this.$router.beforeEach((to, from, next) => {
       if (to.meta.show_progress) {
         if (to.meta.progress !== undefined) {
-          let meta = to.meta.progress
+          const meta = to.meta.progress
           this.$Progress.parseMeta(meta)
         }
         this.$Progress.start()

web-src/src/components/ListItemQueueItem.vue

@@ -34,7 +34,7 @@ export default {
 
   methods: {
     play: function () {
-      webapi.player_play({ 'item_id': this.item.id })
+      webapi.player_play({ item_id: this.item.id })
     }
   }
 }

web-src/src/components/ModalDialogQueueItem.vue

@@ -95,7 +95,7 @@ export default {
 
     play: function () {
       this.$emit('close')
-      webapi.player_play({ 'item_id': this.item.id })
+      webapi.player_play({ item_id: this.item.id })
     },
 
     open_album: function () {

web-src/src/components/ModalDialogTrack.vue

@@ -152,14 +152,14 @@ export default {
     },
 
     mark_new: function () {
-      webapi.library_track_update(this.track.id, { 'play_count': 'reset' }).then(() => {
+      webapi.library_track_update(this.track.id, { play_count: 'reset' }).then(() => {
         this.$emit('play_count_changed')
         this.$emit('close')
       })
     },
 
     mark_played: function () {
-      webapi.library_track_update(this.track.id, { 'play_count': 'increment' }).then(() => {
+      webapi.library_track_update(this.track.id, { play_count: 'increment' }).then(() => {
         this.$emit('play_count_changed')
         this.$emit('close')
       })

web-src/src/components/NavbarItemOutput.vue

@@ -61,7 +61,7 @@ export default {
 
     set_enabled: function () {
       const values = {
-        'selected': !this.output.selected
+        selected: !this.output.selected
       }
       webapi.output_update(this.output.id, values)
     }

web-src/src/components/PlayerButtonPlayPause.vue

@@ -11,8 +11,8 @@ export default {
   name: 'PlayerButtonPlayPause',
 
   props: {
-    'icon_style': String,
-    'show_disabled_message': Boolean
+    icon_style: String,
+    show_disabled_message: Boolean
   },
 
   computed: {

web-src/src/pages/PageAlbums.vue

@@ -19,11 +19,10 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in albums.items"
+        <list-item-album v-for="album in albums_filtered"
           :key="album.id"
           :album="album"
-          @click="open_album(album)"
-          v-if="!hide_singles || album.track_count > 2">
+          @click="open_album(album)">
             <template slot="actions">
               <a @click="open_dialog(album)">
                 <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -77,6 +76,10 @@ export default {
   computed: {
     hide_singles () {
       return this.$store.state.hide_singles
+    },
+
+    albums_filtered () {
+      return this.albums.items.filter(album => !this.hide_singles || album.track_count > 2)
     }
   },
 

web-src/src/pages/PageArtists.vue

@@ -19,11 +19,10 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-artist v-for="artist in artists.items"
+        <list-item-artist v-for="artist in artists_filtered"
           :key="artist.id"
           :artist="artist"
-          @click="open_artist(artist)"
-          v-if="!hide_singles || artist.track_count > (artist.album_count * 2)">
+          @click="open_artist(artist)">
             <template slot="actions">
               <a @click="open_dialog(artist)">
                 <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -79,6 +78,10 @@ export default {
       return [...new Set(this.artists.items
         .filter(artist => !this.$store.state.hide_singles || artist.track_count > (artist.album_count * 2))
         .map(artist => artist.name_sort.charAt(0).toUpperCase()))]
+    },
+
+    artists_filtered () {
+      return this.artists.items.filter(artist => !this.hide_singles || artist.track_count > (artist.album_count * 2))
     }
   },
 

web-src/src/pages/PageGenre.vue

@@ -36,7 +36,6 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import TabsMusic from '@/components/TabsMusic'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListItemAlbums from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
@@ -57,7 +56,7 @@ const genreData = {
 export default {
   name: 'PageGenre',
   mixins: [LoadDataBeforeEnterMixin(genreData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemAlbums, ModalDialogAlbum, ModalDialogGenre },
+  components: { ContentWithHeading, IndexButtonList, ListItemAlbums, ModalDialogAlbum, ModalDialogGenre },
 
   data () {
     return {

web-src/src/pages/PagePlaylists.vue

@@ -25,7 +25,6 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import TabsMusic from '@/components/TabsMusic'
 import ListItemPlaylist from '@/components/ListItemPlaylist'
 import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
 import webapi from '@/webapi'
@@ -47,7 +46,7 @@ const playlistsData = {
 export default {
   name: 'PagePlaylists',
   mixins: [LoadDataBeforeEnterMixin(playlistsData)],
-  components: { ContentWithHeading, TabsMusic, ListItemPlaylist, ModalDialogPlaylist },
+  components: { ContentWithHeading, ListItemPlaylist, ModalDialogPlaylist },
 
   data () {
     return {

web-src/src/pages/PagePodcast.vue

@@ -106,7 +106,7 @@ export default {
     },
 
     mark_all_played: function () {
-      webapi.library_album_track_update(this.album.id, { 'play_count': 'played' }).then(({ data }) => (
+      webapi.library_album_track_update(this.album.id, { play_count: 'played' }).then(({ data }) => (
         this.tracks.forEach(track => {
           if (track.play_count === 0) {
             track.play_count = 1

web-src/src/pages/PagePodcasts.vue

@@ -132,7 +132,7 @@ export default {
 
     mark_all_played: function () {
       this.new_episodes.items.forEach(ep => {
-        webapi.library_track_update(ep.id, { 'play_count': 'increment' })
+        webapi.library_track_update(ep.id, { play_count: 'increment' })
       })
       this.new_episodes.items = { }
     },

web-src/src/pages/PageSearch.vue

@@ -217,10 +217,10 @@ export default {
       }
 
       var searchParams = {
-        'type': route.query.type,
-        'query': this.smart_query ? undefined : route.query.query,
-        'expression': this.smart_query ? route.query.query : undefined,
-        'media_kind': 'music'
+        type: route.query.type,
+        query: this.smart_query ? undefined : route.query.query,
+        expression: this.smart_query ? route.query.query : undefined,
+        media_kind: 'music'
       }
 
       if (route.query.limit) {
@@ -243,7 +243,8 @@ export default {
         return
       }
 
-      this.$router.push({ path: '/search/library',
+      this.$router.push({
+        path: '/search/library',
         query: {
           type: 'track,artist,album,playlist',
           query: this.search_query,
@@ -255,7 +256,8 @@ export default {
     },
 
     open_search_tracks: function () {
-      this.$router.push({ path: '/search/library',
+      this.$router.push({
+        path: '/search/library',
         query: {
           type: 'track',
           query: this.$route.query.query
@@ -264,7 +266,8 @@ export default {
     },
 
     open_search_artists: function () {
-      this.$router.push({ path: '/search/library',
+      this.$router.push({
+        path: '/search/library',
         query: {
           type: 'artist',
           query: this.$route.query.query
@@ -273,7 +276,8 @@ export default {
     },
 
     open_search_albums: function () {
-      this.$router.push({ path: '/search/library',
+      this.$router.push({
+        path: '/search/library',
         query: {
           type: 'album',
           query: this.$route.query.query
@@ -282,7 +286,8 @@ export default {
     },
 
     open_search_playlists: function () {
-      this.$router.push({ path: '/search/library',
+      this.$router.push({
+        path: '/search/library',
         query: {
           type: 'playlist',
           query: this.$route.query.query

web-src/src/pages/SpotifyPageSearch.vue

@@ -315,7 +315,8 @@ export default {
         return
       }
 
-      this.$router.push({ path: '/search/spotify',
+      this.$router.push({
+        path: '/search/spotify',
         query: {
           type: 'track,artist,album,playlist',
           query: this.search_query,
@@ -327,7 +328,8 @@ export default {
     },
 
     open_search_tracks: function () {
-      this.$router.push({ path: '/search/spotify',
+      this.$router.push({
+        path: '/search/spotify',
         query: {
           type: 'track',
           query: this.$route.query.query
@@ -336,7 +338,8 @@ export default {
     },
 
     open_search_artists: function () {
-      this.$router.push({ path: '/search/spotify',
+      this.$router.push({
+        path: '/search/spotify',
         query: {
           type: 'artist',
           query: this.$route.query.query
@@ -345,7 +348,8 @@ export default {
     },
 
     open_search_albums: function () {
-      this.$router.push({ path: '/search/spotify',
+      this.$router.push({
+        path: '/search/spotify',
         query: {
           type: 'album',
           query: this.$route.query.query
@@ -354,7 +358,8 @@ export default {
     },
 
     open_search_playlists: function () {
-      this.$router.push({ path: '/search/spotify',
+      this.$router.push({
+        path: '/search/spotify',
         query: {
           type: 'playlist',
           query: this.$route.query.query

web-src/src/store/index.js

@@ -7,37 +7,37 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     config: {
-      'websocket_port': 0,
-      'version': '',
-      'buildoptions': [ ]
+      websocket_port: 0,
+      version: '',
+      buildoptions: []
     },
     settings: {
-      'categories': []
+      categories: []
     },
     library: {
-      'artists': 0,
-      'albums': 0,
-      'songs': 0,
-      'db_playtime': 0,
-      'updating': false
+      artists: 0,
+      albums: 0,
+      songs: 0,
+      db_playtime: 0,
+      updating: false
     },
     audiobooks_count: { },
     podcasts_count: { },
     outputs: [],
     player: {
-      'state': 'stop',
-      'repeat': 'off',
-      'consume': false,
-      'shuffle': false,
-      'volume': 0,
-      'item_id': 0,
-      'item_length_ms': 0,
-      'item_progress_ms': 0
+      state: 'stop',
+      repeat: 'off',
+      consume: false,
+      shuffle: false,
+      volume: 0,
+      item_id: 0,
+      item_length_ms: 0,
+      item_progress_ms: 0
     },
     queue: {
-      'version': 0,
-      'count': 0,
-      'items': [ ]
+      version: 0,
+      count: 0,
+      items: []
     },
     lastfm: {},
     spotify: {},
@@ -47,8 +47,8 @@ export default new Vuex.Store({
     spotify_featured_playlists: [],
 
     notifications: {
-      'next_id': 1,
-      'list': []
+      next_id: 1,
+      list: []
     },
     recent_searches: [],
 
@@ -181,11 +181,11 @@ export default new Vuex.Store({
   actions: {
     add_notification ({ commit, state }, notification) {
       const newNotification = {
-        'id': state.notifications.next_id++,
-        'type': notification.type,
-        'text': notification.text,
-        'topic': notification.topic,
-        'timeout': notification.timeout
+        id: state.notifications.next_id++,
+        type: notification.type,
+        text: notification.text,
+        topic: notification.topic,
+        timeout: notification.timeout
       }
 
       commit(types.ADD_NOTIFICATION, newNotification)

web-src/src/webapi/index.js

@@ -96,7 +96,7 @@ export default {
   },
 
   queue_save_playlist (name) {
-    return axios.post('/api/queue/save', undefined, { params: { 'name': name } }).then((response) => {
+    return axios.post('/api/queue/save', undefined, { params: { name: name } }).then((response) => {
       store.dispatch('add_notification', { text: 'Queue saved to playlist "' + name + '"', type: 'info', timeout: 2000 })
       return Promise.resolve(response)
     })
@@ -227,9 +227,9 @@ export default {
 
   library_genre (genre) {
     var genreParams = {
-      'type': 'albums',
-      'media_kind': 'music',
-      'expression': 'genre is "' + genre + '"'
+      type: 'albums',
+      media_kind: 'music',
+      expression: 'genre is "' + genre + '"'
     }
     return axios.get('/api/search', {
       params: genreParams
@@ -238,9 +238,9 @@ export default {
 
   library_genre_tracks (genre) {
     var genreParams = {
-      'type': 'tracks',
-      'media_kind': 'music',
-      'expression': 'genre is "' + genre + '"'
+      type: 'tracks',
+      media_kind: 'music',
+      expression: 'genre is "' + genre + '"'
     }
     return axios.get('/api/search', {
       params: genreParams
@@ -250,8 +250,8 @@ export default {
   library_artist_tracks (artist) {
     if (artist) {
       var artistParams = {
-        'type': 'tracks',
-        'expression': 'songartistid is "' + artist + '"'
+        type: 'tracks',
+        expression: 'songartistid is "' + artist + '"'
       }
       return axios.get('/api/search', {
         params: artistParams
@@ -265,8 +265,8 @@ export default {
 
   library_podcasts_new_episodes () {
     var episodesParams = {
-      'type': 'tracks',
-      'expression': 'media_kind is podcast and play_count = 0 ORDER BY time_added DESC'
+      type: 'tracks',
+      expression: 'media_kind is podcast and play_count = 0 ORDER BY time_added DESC'
     }
     return axios.get('/api/search', {
       params: episodesParams
@@ -275,8 +275,8 @@ export default {
 
   library_podcast_episodes (albumId) {
     var episodesParams = {
-      'type': 'tracks',
-      'expression': 'media_kind is podcast and songalbumid is "' + albumId + '" ORDER BY time_added DESC'
+      type: 'tracks',
+      expression: 'media_kind is podcast and songalbumid is "' + albumId + '" ORDER BY time_added DESC'
     }
     return axios.get('/api/search', {
       params: episodesParams
@@ -284,7 +284,7 @@ export default {
   },
 
   library_add (url) {
-    return axios.post('/api/library/add', undefined, { params: { 'url': url } })
+    return axios.post('/api/library/add', undefined, { params: { url: url } })
   },
 
   library_playlist_delete (playlistId) {
@@ -320,7 +320,7 @@ export default {
   },
 
   library_files (directory = undefined) {
-    var filesParams = { 'directory': directory }
+    var filesParams = { directory: directory }
     return axios.get('/api/library/files', {
       params: filesParams
     })