[web-src] Files view

web-src/src/components/ListItemDirectory.vue

@@ -0,0 +1,26 @@
+<template functional>
+  <div class="media">
+    <figure class="media-left fd-has-action" @click="listeners.click">
+      <span class="icon">
+        <i class="mdi mdi-folder"></i>
+      </span>
+    </figure>
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
+      <h1 class="title is-6">{{ props.directory.path.substring(props.directory.path.lastIndexOf('/') + 1) }}</h1>
+      <h2 class="subtitle is-7 has-text-grey-light">{{ props.directory.path }}</h2>
+    </div>
+    <div class="media-right">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ListItemDirectory',
+  props: [ 'directory' ]
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemPlaylist.vue

@@ -1,5 +1,8 @@
 <template functional>
   <div class="media">
+    <figure class="media-left fd-has-action" v-if="slots().icon" @click="listeners.click">
+      <slot name="icon"></slot>
+    </figure>
     <div class="media-content fd-has-action is-clipped" @click="listeners.click">
       <h1 class="title is-6">{{ props.playlist.name }}</h1>
     </div>

web-src/src/components/ListItemTrack.vue

@@ -1,5 +1,8 @@
 <template functional>
   <div class="media" :id="'index_' + props.track.title_sort.charAt(0).toUpperCase()">
+    <figure class="media-left fd-has-action" v-if="slots().icon" @click="listeners.click">
+      <slot name="icon"></slot>
+    </figure>
     <div class="media-content fd-has-action is-clipped" @click="listeners.click">
       <h1 class="title is-6">{{ props.track.title }}</h1>
       <h2 class="subtitle is-7 has-text-grey"><b>{{ props.track.artist }}</b></h2>

web-src/src/components/ModalDialogDirectory.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <transition name="fade">
+      <div class="modal is-active" v-if="show">
+        <div class="modal-background" @click="$emit('close')"></div>
+        <div class="modal-content fd-modal-card">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                {{ directory.path }}
+              </p>
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="queue_add">
+                <span class="icon"><i class="mdi mdi-playlist-plus"></i></span> <span class="is-size-7">Add</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                <span class="icon"><i class="mdi mdi-playlist-play"></i></span> <span class="is-size-7">Add Next</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play">
+                <span class="icon"><i class="mdi mdi-play"></i></span> <span class="is-size-7">Play</span>
+              </a>
+            </footer>
+          </div>
+        </div>
+        <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'ModalDialogDirectory',
+  props: [ 'show', 'directory' ],
+
+  methods: {
+    play: function () {
+      this.$emit('close')
+      webapi.search({ 'type': 'tracks', 'expression': 'path starts with "' + this.directory.path + '" order by path asc' }).then(({ data }) => {
+        webapi.player_play_uri(data.tracks.items.map(a => a.uri).join(','), false)
+      })
+    },
+
+    queue_add: function () {
+      this.$emit('close')
+      webapi.search({ 'type': 'tracks', 'expression': 'path starts with "' + this.directory.path + '" order by path asc' }).then(({ data }) => {
+        webapi.queue_add(data.tracks.items.map(a => a.uri).join(','))
+      })
+    },
+
+    queue_add_next: function () {
+      this.$emit('close')
+      webapi.search({ 'type': 'tracks', 'expression': 'path starts with "' + this.directory.path + '" order by path asc' }).then(({ data }) => {
+        webapi.queue_add_next(data.tracks.items.map(a => a.uri).join(','))
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/NavbarTop.vue

@@ -13,6 +13,9 @@
       <router-link to="/audiobooks" class="navbar-item" active-class="is-active" v-if="audiobooks.tracks > 0">
         <span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
       </router-link>
+      <router-link to="/files" class="navbar-item" active-class="is-active">
+        <span class="icon"><i class="mdi mdi-folder-open"></i></span>
+      </router-link>
       <router-link to="/search" class="navbar-item" active-class="is-active">
         <span class="icon"><i class="mdi mdi-magnify"></i></span>
       </router-link>