Stations.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <div class='container'>
  3. <table class='table is-striped'>
  4. <thead>
  5. <tr>
  6. <td>ID</td>
  7. <td>Name</td>
  8. <td>Type</td>
  9. <td>Display Name</td>
  10. <td>Description</td>
  11. <td>Options</td>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr v-for='(index, station) in stations' track-by='$index'>
  16. <td>
  17. <span>{{station._id}}</span>
  18. </td>
  19. <td>
  20. <span>{{station.name}}</span>
  21. </td>
  22. <td>
  23. <span>{{station.type}}</span>
  24. </td>
  25. <td>
  26. <span>{{station.displayName}}</span>
  27. </td>
  28. <td>
  29. <span>{{station.description}}</span>
  30. </td>
  31. <td>
  32. <a class='button is-info' @click='editStation(station)'>Edit</a>
  33. <a class='button is-danger' @click='removeStation(index)' href='#'>Remove</a>
  34. </td>
  35. </tr>
  36. </tbody>
  37. </table>
  38. </div>
  39. <div class='container'>
  40. <div class='card is-fullwidth'>
  41. <header class='card-header'>
  42. <p class='card-header-title'>Create official station</p>
  43. </header>
  44. <div class='card-content'>
  45. <div class='content'>
  46. <div class='control is-horizontal'>
  47. <div class='control is-grouped'>
  48. <p class='control is-expanded'>
  49. <input class='input' type='text' placeholder='Name' v-model='newStation.name'>
  50. </p>
  51. <p class='control is-expanded'>
  52. <input class='input' type='text' placeholder='Display Name' v-model='newStation.displayName'>
  53. </p>
  54. </div>
  55. </div>
  56. <label class='label'>Description</label>
  57. <p class='control is-expanded'>
  58. <input class='input' type='text' placeholder='Short description' v-model='newStation.description'>
  59. </p>
  60. <div class="control is-grouped genre-wrapper">
  61. <div class="sector">
  62. <p class='control has-addons'>
  63. <input class='input' id='new-genre' type='text' placeholder='Genre' v-on:keyup.enter='addGenre()'>
  64. <a class='button is-info' href='#' @click='addGenre()'>Add genre</a>
  65. </p>
  66. <span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
  67. {{ genre }}
  68. <button class='delete is-info' @click='removeGenre(index)'></button>
  69. </span>
  70. </div>
  71. <div class="sector">
  72. <p class='control has-addons'>
  73. <input class='input' id='new-blacklisted-genre' type='text' placeholder='Blacklisted Genre' v-on:keyup.enter='addBlacklistedGenre()'>
  74. <a class='button is-info' href='#' @click='addBlacklistedGenre()'>Add blacklisted genre</a>
  75. </p>
  76. <span class='tag is-info' v-for='(index, genre) in newStation.blacklistedGenres' track-by='$index'>
  77. {{ genre }}
  78. <button class='delete is-info' @click='removeBlacklistedGenre(index)'></button>
  79. </span>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. <footer class='card-footer'>
  85. <a class='card-footer-item' @click='createStation()' href='#'>Create</a>
  86. </footer>
  87. </div>
  88. </div>
  89. <edit-station v-show='modals.editStation'></edit-station>
  90. </template>
  91. <script>
  92. import { Toast } from 'vue-roaster';
  93. import io from '../../io';
  94. import EditStation from '../Modals/EditStation.vue';
  95. export default {
  96. components: { EditStation },
  97. data() {
  98. return {
  99. stations: [],
  100. newStation: {
  101. genres: [],
  102. blacklistedGenres: []
  103. },
  104. modals: { editStation: false }
  105. }
  106. },
  107. methods: {
  108. toggleModal: function () {
  109. this.modals.editStation = !this.modals.editStation;
  110. },
  111. createStation: function () {
  112. let _this = this;
  113. let {newStation: {name, displayName, description, genres, blacklistedGenres}} = this;
  114. if (name == undefined) return Toast.methods.addToast('Field (Name) cannot be empty', 3000);
  115. if (displayName == undefined) return Toast.methods.addToast('Field (Display Name) cannot be empty', 3000);
  116. if (description == undefined) return Toast.methods.addToast('Field (Description) cannot be empty', 3000);
  117. _this.socket.emit('stations.create', {
  118. name,
  119. type: 'official',
  120. displayName,
  121. description,
  122. genres,
  123. blacklistedGenres,
  124. }, result => {
  125. Toast.methods.addToast(result.message, 3000);
  126. if (result.status == 'success') this.newStation = {
  127. genres: [],
  128. blacklistedGenres: []
  129. }
  130. });
  131. },
  132. removeStation: function (index) {
  133. this.socket.emit('stations.remove', this.stations[index]._id, res => {
  134. Toast.methods.addToast(res.message, 3000);
  135. });
  136. },
  137. editStation: function (station) {
  138. this.$broadcast('editStation', {
  139. _id: station._id,
  140. name: station.name,
  141. type: station.type,
  142. partyMode: station.partyMode,
  143. description: station.description,
  144. privacy: station.privacy,
  145. displayName: station.displayName
  146. });
  147. },
  148. addGenre: function () {
  149. let genre = $('#new-genre').val().toLowerCase().trim();
  150. if (this.newStation.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
  151. if (genre) {
  152. this.newStation.genres.push(genre);
  153. $('#new-genre').val('');
  154. }
  155. else Toast.methods.addToast('Genre cannot be empty', 3000);
  156. },
  157. removeGenre: function (index) { this.newStation.genres.splice(index, 1); },
  158. addBlacklistedGenre: function () {
  159. let genre = $('#new-blacklisted-genre').val().toLowerCase().trim();
  160. if (this.newStation.blacklistedGenres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
  161. if (genre) {
  162. this.newStation.blacklistedGenres.push(genre);
  163. $('#new-blacklisted-genre').val('');
  164. }
  165. else Toast.methods.addToast('Genre cannot be empty', 3000);
  166. },
  167. removeBlacklistedGenre: function (index) { this.newStation.blacklistedGenres.splice(index, 1); },
  168. init: function () {
  169. let _this = this;
  170. _this.socket.emit('stations.index', data => {
  171. _this.stations = data.stations;
  172. });
  173. _this.socket.emit('apis.joinAdminRoom', 'stations', data => {});
  174. }
  175. },
  176. ready: function () {
  177. let _this = this;
  178. io.getSocket((socket) => {
  179. _this.socket = socket;
  180. if (_this.socket.connected) _this.init();
  181. _this.socket.on('event:admin.station.added', station => {
  182. _this.stations.push(station);
  183. });
  184. _this.socket.on('event:admin.station.removed', stationId => {
  185. _this.stations = _this.stations.filter(station => {
  186. return station._id !== stationId;
  187. });
  188. });
  189. io.onConnect(() => {
  190. _this.init();
  191. });
  192. });
  193. }
  194. }
  195. </script>
  196. <style lang='scss' scoped>
  197. .tag {
  198. margin-top: 5px;
  199. &:not(:last-child) {
  200. margin-right: 5px;
  201. }
  202. }
  203. td {
  204. word-wrap: break-word;
  205. max-width: 10vw;
  206. vertical-align: middle;
  207. }
  208. .is-info:focus { background-color: #0398db; }
  209. .genre-wrapper {
  210. display: flex;
  211. justify-content: space-around;
  212. }
  213. .card-footer-item { color: #029ce3; }
  214. </style>