EditStation.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <div>
  3. <modal title='Edit Station'>
  4. <div slot='body'>
  5. <label class='label'>Name</label>
  6. <div class='control is-grouped'>
  7. <p class='control is-expanded'>
  8. <input class='input' type='text' placeholder='Station Name' v-model='editing.name'>
  9. </p>
  10. <p class='control'>
  11. <a class='button is-info' @click='updateName()' href='#'>Update</a>
  12. </p>
  13. </div>
  14. <label class='label'>Display name</label>
  15. <div class='control is-grouped'>
  16. <p class='control is-expanded'>
  17. <input class='input' type='text' placeholder='Station Display Name' v-model='editing.displayName'>
  18. </p>
  19. <p class='control'>
  20. <a class='button is-info' @click='updateDisplayName()' href='#'>Update</a>
  21. </p>
  22. </div>
  23. <label class='label'>Description</label>
  24. <div class='control is-grouped'>
  25. <p class='control is-expanded'>
  26. <input class='input' type='text' placeholder='Station Display Name' v-model='editing.description'>
  27. </p>
  28. <p class='control'>
  29. <a class='button is-info' @click='updateDescription()' href='#'>Update</a>
  30. </p>
  31. </div>
  32. <label class='label'>Privacy</label>
  33. <div class='control is-grouped'>
  34. <p class='control is-expanded'>
  35. <span class='select'>
  36. <select v-model='editing.privacy'>
  37. <option :value='"public"'>Public</option>
  38. <option :value='"unlisted"'>Unlisted</option>
  39. <option :value='"private"'>Private</option>
  40. </select>
  41. </span>
  42. </p>
  43. <p class='control'>
  44. <a class='button is-info' @click='updatePrivacy()' href='#'>Update</a>
  45. </p>
  46. </div>
  47. <div class='control is-grouped' v-if="editing.type === 'community'">
  48. <p class="control is-expanded party-mode-outer">
  49. <label class="checkbox party-mode-inner">
  50. <input type="checkbox" v-model="editing.partyMode">
  51. &nbsp;Party mode
  52. </label>
  53. </p>
  54. <p class='control'>
  55. <a class='button is-info' @click='updatePartyMode()' href='#'>Update</a>
  56. </p>
  57. </div>
  58. <button class='button is-danger' @click='deleteStation()' v-if="$parent.type === 'community'">Delete station</button>
  59. </div>
  60. </modal>
  61. </div>
  62. </template>
  63. <script>
  64. import { Toast } from 'vue-roaster';
  65. import Modal from './Modal.vue';
  66. import io from '../../io';
  67. export default {
  68. data: function() {
  69. return {
  70. editing: {
  71. _id: '',
  72. name: '',
  73. type: '',
  74. displayName: '',
  75. description: '',
  76. privacy: 'private',
  77. partyMode: false
  78. }
  79. }
  80. },
  81. methods: {
  82. updateName: function () {
  83. let _this = this;
  84. this.socket.emit('stations.updateName', this.editing._id, this.editing.name, res => {
  85. if (res.status === 'success') {
  86. if (_this.$parent.station) _this.$parent.station.name = _this.editing.name;
  87. else {
  88. _this.$parent.stations.forEach((station, index) => {
  89. if (station._id === _this.editing._id) return _this.$parent.stations[index].name = _this.editing.name;
  90. });
  91. }
  92. }
  93. Toast.methods.addToast(res.message, 8000);
  94. });
  95. },
  96. updateDisplayName: function () {
  97. let _this = this;
  98. this.socket.emit('stations.updateDisplayName', this.editing._id, this.editing.displayName, res => {
  99. if (res.status === 'success') {
  100. if (_this.$parent.station) _this.$parent.station.displayName = _this.editing.displayName;
  101. else {
  102. _this.$parent.stations.forEach((station, index) => {
  103. if (station._id === _this.editing._id) return _this.$parent.stations[index].displayName = _this.editing.displayName;
  104. });
  105. }
  106. }
  107. Toast.methods.addToast(res.message, 8000);
  108. });
  109. },
  110. updateDescription: function () {
  111. let _this = this;
  112. this.socket.emit('stations.updateDescription', this.editing._id, this.editing.description, res => {
  113. if (res.status === 'success') {
  114. if (_this.$parent.station) _this.$parent.station.description = _this.editing.description;
  115. else {
  116. _this.$parent.stations.forEach((station, index) => {
  117. if (station._id === station._id) return _this.$parent.stations[index].description = _this.editing.description;
  118. });
  119. }
  120. return Toast.methods.addToast(res.message, 4000);
  121. }
  122. Toast.methods.addToast(res.message, 8000);
  123. });
  124. },
  125. updatePrivacy: function () {
  126. let _this = this;
  127. this.socket.emit('stations.updatePrivacy', this.editing._id, this.editing.privacy, res => {
  128. if (res.status === 'success') {
  129. if (_this.$parent.station) _this.$parent.station.privacy = _this.editing.privacy;
  130. else {
  131. _this.$parent.stations.forEach((station, index) => {
  132. if (station._id === station._id) return _this.$parent.stations[index].privacy = _this.editing.privacy;
  133. });
  134. }
  135. return Toast.methods.addToast(res.message, 4000);
  136. }
  137. Toast.methods.addToast(res.message, 8000);
  138. });
  139. },
  140. updatePartyMode: function () {
  141. let _this = this;
  142. this.socket.emit('stations.updatePartyMode', this.editing._id, this.editing.partyMode, res => {
  143. if (res.status === 'success') {
  144. if (_this.$parent.station) _this.$parent.station.partyMode = _this.editing.partyMode;
  145. else {
  146. _this.$parent.stations.forEach((station, index) => {
  147. if (station._id === station._id) return _this.$parent.stations[index].partyMode = _this.editing.partyMode;
  148. });
  149. }
  150. return Toast.methods.addToast(res.message, 4000);
  151. }
  152. Toast.methods.addToast(res.message, 8000);
  153. });
  154. },
  155. deleteStation: function() {
  156. let _this = this;
  157. this.socket.emit('stations.remove', this.editing._id, res => {
  158. Toast.methods.addToast(res.message, 8000);
  159. });
  160. }
  161. },
  162. ready: function () {
  163. let _this = this;
  164. io.getSocket(socket => {
  165. _this.socket = socket;
  166. });
  167. },
  168. events: {
  169. closeModal: function() {
  170. this.$parent.modals.editStation = false;
  171. },
  172. editStation: function(station) {
  173. for (let prop in station) {
  174. this.editing[prop] = station[prop];
  175. }
  176. this.$parent.modals.editStation = true;
  177. }
  178. },
  179. components: { Modal }
  180. }
  181. </script>
  182. <style type='scss' scoped>
  183. .controls {
  184. display: flex;
  185. a {
  186. display: flex;
  187. align-items: center;
  188. }
  189. }
  190. .table { margin-bottom: 0; }
  191. h5 { padding: 20px 0; }
  192. .party-mode-inner, .party-mode-outer {
  193. display: flex;
  194. align-items: center;
  195. }
  196. .select:after { border-color: #029ce3; }
  197. </style>