Edit.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <div class='modal is-active'>
  3. <div class='modal-background'></div>
  4. <div class='modal-card'>
  5. <header class='modal-card-head'>
  6. <p class='modal-card-title'>Editing: {{ playlist.displayName }}</p>
  7. <button class='delete' @click='$parent.toggleModal("editPlaylist")'></button>
  8. </header>
  9. <section class='modal-card-body'>
  10. <aside class='menu' v-if='playlist.songs && playlist.songs.length > 0'>
  11. <ul class='menu-list'>
  12. <li v-for='song in playlist.songs' track-by='$index'>
  13. <a :href='' target='_blank'>{{ song.title }}</a>
  14. <div class='controls'>
  15. <!--a href='#'>
  16. <i class='material-icons' v-if='playlist.songs[0] !== song' @click='promoteSong($index)'>keyboard_arrow_up</i>
  17. <i class='material-icons' style='opacity: 0' v-else>error</i>
  18. </a>
  19. <a href='#'>
  20. <i class='material-icons' v-if='playlist.songs.length - 1 !== $index' @click='demoteSong($index)'>keyboard_arrow_down</i>
  21. <i class='material-icons' style='opacity: 0' v-else>error</i>
  22. </a-->
  23. <a href='#' @click='removeSongFromPlaylist(song._id)'><i class='material-icons'>delete</i></a>
  24. </div>
  25. </li>
  26. </ul>
  27. <br />
  28. </aside>
  29. <div class='control is-grouped'>
  30. <p class='control is-expanded'>
  31. <input class='input' type='text' placeholder='Search for Song to add' v-model='songQuery'>
  32. </p>
  33. <p class='control'>
  34. <a class='button is-info' @click='searchForSongs()'>Search</a>
  35. </p>
  36. </div>
  37. <table class='table' v-if='songQueryResults.length > 0'>
  38. <tbody>
  39. <tr v-for='result in songQueryResults'>
  40. <td>
  41. <img :src='result.thumbnail' />
  42. </td>
  43. <td>{{ result.title }}</td>
  44. <td>
  45. <a class='button is-success' @click='addSongToPlaylist(result.id)'>
  46. Add
  47. </a>
  48. </td>
  49. </tr>
  50. </tbody>
  51. </table>
  52. <!--div class='control is-grouped'>
  53. <p class='control is-expanded'>
  54. <input class='input' type='text' placeholder='YouTube Playlist URL' v-model='importQuery'>
  55. </p>
  56. <p class='control'>
  57. <a class='button is-info' @click='importPlaylist()'>Import</a>
  58. </p>
  59. </div-->
  60. <h5>Edit playlist details:</h5>
  61. <div class='control is-grouped'>
  62. <p class='control is-expanded'>
  63. <input class='input' type='text' placeholder='Playlist Display Name' v-model='playlist.displayName'>
  64. </p>
  65. <p class='control'>
  66. <a class='button is-info' @click='renamePlaylist()'>Rename</a>
  67. </p>
  68. </div>
  69. </section>
  70. <footer class='modal-card-foot'>
  71. <a class='button is-danger' @click='removePlaylist()'>Remove Playlist</a>
  72. </footer>
  73. </div>
  74. </div>
  75. </template>
  76. <script>
  77. import { Toast } from 'vue-roaster';
  78. import io from '../../../io';
  79. export default {
  80. data() {
  81. return {
  82. playlist: {},
  83. songQueryResults: []
  84. }
  85. },
  86. methods: {
  87. searchForSongs: function () {
  88. let _this = this;
  89. _this.socket.emit('apis.searchYoutube', _this.songQuery, res => {
  90. if (res.status == 'success') {
  91. _this.songQueryResults = [];
  92. for (let i = 0; i < res.data.items.length; i++) {
  93. _this.songQueryResults.push({
  94. id: res.data.items[i].id.videoId,
  95. url: `https://www.youtube.com/watch?v=${this.id}`,
  96. title: res.data.items[i].snippet.title,
  97. thumbnail: res.data.items[i].snippet.thumbnails.default.url
  98. });
  99. }
  100. } else if (res.status == 'error') Toast.methods.addToast(res.message, 3000);
  101. });
  102. },
  103. addSongToPlaylist: function (id) {
  104. let _this = this;
  105. _this.socket.emit('playlists.addSongToPlaylist', id, _this.playlist._id, res => {
  106. if (res.status == 'success') {
  107. Toast.methods.addToast(res.message, 3000);
  108. }
  109. });
  110. },
  111. /*importPlaylist: function () {
  112. let _this = this;
  113. this.socket.emit('playlists.addSetToPlaylist', _this.importQuery, _this.playlist._id, res => {
  114. if (res.status == 'success') _this.playlist.songs = res.data;
  115. });
  116. },*/
  117. removeSongFromPlaylist: function (id) {
  118. let _this = this;
  119. this.socket.emit('playlists.removeSongFromPlaylist', id, _this.playlist._id, res => {
  120. if (res.status == 'success') {
  121. Toast.methods.addToast(res.message, 3000);
  122. }
  123. });
  124. },
  125. renamePlaylist: function () {
  126. this.socket.emit('playlists.updateDisplayName', this.playlist._id, this.playlist.displayName, res => {
  127. if (res.status == 'success') Toast.methods.addToast(res.message, 3000);
  128. });
  129. },
  130. removePlaylist: function () {
  131. let _this = this;
  132. _this.socket.emit('playlists.remove', _this.playlist._id, res => {
  133. if (res.status == 'success') {
  134. Toast.methods.addToast(res.message, 3000);
  135. _this.$parent.toggleModal('editPlaylist');
  136. }
  137. });
  138. },/*
  139. promoteSong: function (fromIndex) {
  140. let _this = this;
  141. _this.socket.emit('playlists.promoteSong', _this.playlist._id, fromIndex, res => {
  142. if (res.status == 'success') _this.$set('playlist.songs', res.data); // bug: v-for is not updating
  143. });
  144. },
  145. demoteSong: function (fromIndex) {
  146. let _this = this;
  147. _this.socket.emit('playlists.demoteSong', _this.playlist._id, fromIndex, res => {
  148. if (res.status == 'success') _this.$set('playlist.songs', res.data); // bug: v-for is not updating
  149. });
  150. }*/
  151. },
  152. ready: function () {
  153. let _this = this;
  154. io.getSocket((socket) => {
  155. _this.socket = socket;
  156. _this.socket.emit('playlists.getPlaylist', _this.$parent.playlistBeingEdited, res => {
  157. if (res.status == 'success') _this.playlist = res.data; _this.playlist.oldId = res.data._id;
  158. });
  159. _this.socket.on('event:playlist.addSong', (data) => {
  160. if (_this.playlist._id === data.playlistId) {
  161. console.log("PUSH!");
  162. _this.playlist.songs.push(data.song);
  163. }
  164. });
  165. _this.socket.on('event:playlist.removeSong', (data) => {
  166. if (_this.playlist._id === data.playlistId) {
  167. _this.playlist.songs.forEach((song, index) => {
  168. if (song._id === data.songId) {
  169. _this.playlist.songs.splice(index, 1);
  170. }
  171. });
  172. }
  173. });
  174. _this.socket.on('event:playlist.updateDisplayName', (data) => {
  175. if (_this.playlist._id === data.playlistId) {
  176. _this.playlist.displayName = data.displayName;
  177. }
  178. });
  179. });
  180. },
  181. events: {
  182. closeModal: function() {
  183. this.$parent.toggleModal("editPlaylist");
  184. }
  185. }
  186. }
  187. </script>
  188. <style type='scss' scoped>
  189. .menu { padding: 0 20px; }
  190. .menu-list li {
  191. display: flex;
  192. justify-content: space-between;
  193. }
  194. .menu-list a:hover { color: #000 !important; }
  195. li a {
  196. display: flex;
  197. align-items: center;
  198. }
  199. .controls {
  200. display: flex;
  201. a {
  202. display: flex;
  203. align-items: center;
  204. }
  205. }
  206. .table {
  207. margin-bottom: 0;
  208. }
  209. h5 { padding: 20px 0; }
  210. </style>