[web-src] 'save playlist' from PageQueue functionality

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <transition name="fade">
+      <div class="modal is-active" v-if="show">
+        <div class="modal-background" @click="$emit('close')"></div>
+        <div class="modal-card">
+          <section class="modal-card-body">
+            <form v-on:submit.prevent="save">
+              <div class="field">
+                <p class="control is-expanded has-icons-left">
+                  <input class="input is-rounded is-shadowless" type="text" placeholder="playlist name" v-model="pls_name" ref="pls_name_field">
+                  <span class="icon is-left">
+                    <i class="mdi mdi-file-music"></i>
+                  </span>
+                </p>
+              </div>
+            </form>
+          </section>
+          <footer class="modal-card-foot">
+            <button class="button is-success" @click="save" :disabled="pls_name.length < 3">Save</button>
+            <button class="button" @click="$emit('close')">Cancel</button>
+          </footer>
+        </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: 'ModalDialogPlaylistSave',
+  props: [ 'show' ],
+
+  data () {
+    return {
+      pls_name: ''
+    }
+  },
+
+  methods: {
+    save: function () {
+      this.$emit('close')
+      webapi.queue_save_playlist(this.pls_name)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageQueue.vue

@@ -38,6 +38,12 @@
           </span>
           <span>Clear</span>
         </a>
+        <a class="button is-small" v-show="queue_items.length > 1" @click="save_dialog">
+          <span class="icon">
+            <i class="mdi mdi-content-save"></i>
+          </span>
+          <span>Save</span>
+        </a>
       </div>
     </template>
     <template slot="content">
@@ -59,6 +65,7 @@
       </draggable>
       <modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
       <modal-dialog-add-url-stream :show="show_url_modal" @close="show_url_modal = false" />
+      <modal-dialog-playlist-save :show="show_pls_save_modal" @close="show_pls_save_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -68,13 +75,14 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemQueueItem from '@/components/ListItemQueueItem'
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem'
 import ModalDialogAddUrlStream from '@/components/ModalDialogAddUrlStream'
+import ModalDialogPlaylistSave from '@/components/ModalDialogPlaylistSave'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import draggable from 'vuedraggable'
 
 export default {
   name: 'PageQueue',
-  components: { ContentWithHeading, ListItemQueueItem, draggable, ModalDialogQueueItem, ModalDialogAddUrlStream },
+  components: { ContentWithHeading, ListItemQueueItem, draggable, ModalDialogQueueItem, ModalDialogAddUrlStream, ModalDialogPlaylistSave },
 
   data () {
     return {
@@ -82,6 +90,7 @@ export default {
 
       show_details_modal: false,
       show_url_modal: false,
+      show_pls_save_modal: false,
       selected_item: {}
     }
   },
@@ -135,6 +144,10 @@ export default {
 
     open_add_stream_dialog: function (item) {
       this.show_url_modal = true
+    },
+
+    save_dialog: function (item) {
+      this.show_pls_save_modal = true
     }
   }
 }

web-src/src/webapi/index.js

@@ -83,6 +83,13 @@ export default {
     })
   },
 
+  queue_save_playlist (name) {
+    return axios.post('/api/queue/save', undefined, { params: { 'name': name } }).then((response) => {
+      store.dispatch('add_notification', { text: 'playlist saved', type: 'info', timeout: 2000 })
+      return Promise.resolve(response)
+    })
+  },
+
   player_status () {
     return axios.get('/api/player')
   },