Blacklist.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <div class="station-blacklist">
  3. <p class="has-text-centered">
  4. Blacklist a playlist to prevent all of its songs playing in this
  5. station.
  6. </p>
  7. <div class="tabs-container">
  8. <!-- <div class="tab-selection">
  9. <button
  10. class="button is-default"
  11. :class="{ selected: tab === 'playlists' }"
  12. @click="showTab('playlists')"
  13. >
  14. Playlists
  15. </button>
  16. <button
  17. class="button is-default"
  18. :class="{ selected: tab === 'songs' }"
  19. @click="showTab('songs')"
  20. >
  21. Songs
  22. </button>
  23. </div> -->
  24. <div class="tab" v-show="tab === 'playlists'">
  25. <div v-if="excludedPlaylists.length > 0">
  26. <playlist-item
  27. :playlist="playlist"
  28. v-for="playlist in excludedPlaylists"
  29. :key="`key-${playlist._id}`"
  30. >
  31. <div class="icons-group" slot="actions">
  32. <confirm @confirm="deselectPlaylist(playlist._id)">
  33. <i
  34. class="material-icons stop-icon"
  35. content="Stop blacklisting songs from this playlist
  36. "
  37. v-tippy
  38. >stop</i
  39. >
  40. </confirm>
  41. <i
  42. v-if="playlist.createdBy === userId"
  43. @click="showPlaylist(playlist._id)"
  44. class="material-icons edit-icon"
  45. content="Edit Playlist"
  46. v-tippy
  47. >edit</i
  48. >
  49. <i
  50. v-else
  51. @click="showPlaylist(playlist._id)"
  52. class="material-icons edit-icon"
  53. content="View Playlist"
  54. v-tippy
  55. >visibility</i
  56. >
  57. </div>
  58. </playlist-item>
  59. </div>
  60. <p v-else class="has-text-centered scrollable-list">
  61. No playlists currently blacklisted.
  62. </p>
  63. </div>
  64. <!-- <div class="tab" v-show="tab === 'songs'">
  65. Blacklisting songs has yet to be added.
  66. </div> -->
  67. </div>
  68. </div>
  69. </template>
  70. <script>
  71. import { mapActions, mapState, mapGetters } from "vuex";
  72. import Toast from "toasters";
  73. import PlaylistItem from "@/components/PlaylistItem.vue";
  74. import Confirm from "@/components/Confirm.vue";
  75. export default {
  76. components: {
  77. PlaylistItem,
  78. Confirm
  79. },
  80. data() {
  81. return {
  82. tab: "playlists"
  83. };
  84. },
  85. computed: {
  86. ...mapState({
  87. userId: state => state.user.auth.userId
  88. }),
  89. ...mapState("modals/manageStation", {
  90. station: state => state.station,
  91. originalStation: state => state.originalStation,
  92. excludedPlaylists: state => state.excludedPlaylists
  93. }),
  94. ...mapGetters({
  95. socket: "websockets/getSocket"
  96. })
  97. },
  98. methods: {
  99. showTab(tab) {
  100. this.tab = tab;
  101. },
  102. showPlaylist(playlistId) {
  103. this.editPlaylist(playlistId);
  104. this.openModal("editPlaylist");
  105. },
  106. deselectPlaylist(id) {
  107. this.socket.dispatch(
  108. "stations.removeExcludedPlaylist",
  109. this.station._id,
  110. id,
  111. res => {
  112. new Toast(res.message);
  113. }
  114. );
  115. },
  116. ...mapActions("modalVisibility", ["openModal"]),
  117. ...mapActions("user/playlists", ["editPlaylist"])
  118. }
  119. };
  120. </script>
  121. <style lang="scss" scoped>
  122. .station-blacklist {
  123. .tabs-container {
  124. margin-top: 10px;
  125. .tab-selection {
  126. display: flex;
  127. overflow-x: auto;
  128. .button {
  129. border-radius: 0;
  130. border: 0;
  131. text-transform: uppercase;
  132. font-size: 14px;
  133. color: var(--dark-grey-3);
  134. background-color: var(--light-grey-2);
  135. flex-grow: 1;
  136. height: 32px;
  137. &:not(:first-of-type) {
  138. margin-left: 5px;
  139. }
  140. }
  141. .selected {
  142. background-color: var(--primary-color) !important;
  143. color: var(--white) !important;
  144. font-weight: 600;
  145. }
  146. }
  147. .tab {
  148. padding: 15px 0;
  149. border-radius: 0;
  150. .playlist-item:not(:last-of-type) {
  151. margin-bottom: 10px;
  152. }
  153. }
  154. }
  155. }
  156. </style>