EditStation.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <modal title='Edit Station'>
  3. <div slot='body'>
  4. <label class='label'>Display name</label>
  5. <div class='control is-grouped'>
  6. <p class='control is-expanded'>
  7. <input class='input' type='text' placeholder='Station Display Name' v-model='data.displayName' autofocus>
  8. </p>
  9. <p class='control'>
  10. <a class='button is-info' @click='updateDisplayName()' href='#'>Update</a>
  11. </p>
  12. </div>
  13. <label class='label'>Description</label>
  14. <div class='control is-grouped'>
  15. <p class='control is-expanded'>
  16. <input class='input' type='text' placeholder='Station Display Name' v-model='data.description'>
  17. </p>
  18. <p class='control'>
  19. <a class='button is-info' @click='updateDescription()' href='#'>Update</a>
  20. </p>
  21. </div>
  22. <label class='label'>Privacy</label>
  23. <div class='control is-grouped'>
  24. <p class='control is-expanded'>
  25. <span class='select'>
  26. <select v-model='data.privacy'>
  27. <option :value='"public"'>Public</option>
  28. <option :value='"unlisted"'>Unlisted</option>
  29. <option :value='"private"'>Private</option>
  30. </select>
  31. </span>
  32. </p>
  33. <p class='control'>
  34. <a class='button is-info' @click='updatePrivacy()' href='#'>Update</a>
  35. </p>
  36. </div>
  37. <div class='control is-grouped' v-if="$parent.type === 'community'">
  38. <p class="control is-expanded party-mode-outer">
  39. <label class="checkbox party-mode-inner">
  40. <input type="checkbox" v-model="data.partyMode">
  41. &nbsp;Party mode
  42. </label>
  43. </p>
  44. <p class='control'>
  45. <a class='button is-info' @click='updatePartyMode()' href='#'>Update</a>
  46. </p>
  47. </div>
  48. <button class='button is-danger' @click='deleteStation()' v-if="$parent.type === 'community'">Delete station</button>
  49. </div>
  50. </modal>
  51. </template>
  52. <script>
  53. import { Toast } from 'vue-roaster';
  54. import Modal from './Modal.vue';
  55. import io from '../../io';
  56. export default {
  57. data: function() {
  58. return {
  59. data: {
  60. displayName: '',
  61. description: '',
  62. privacy: 'private',
  63. partyMode: false
  64. }
  65. }
  66. },
  67. methods: {
  68. updateDisplayName: function () {
  69. this.socket.emit('stations.updateDisplayName', this.data.stationId, this.data.displayName, res => {
  70. if (res.status === 'success') {
  71. this.$parent.station.displayName = this.data.displayName;
  72. }
  73. Toast.methods.addToast(res.message, 8000);
  74. });
  75. },
  76. updateDescription: function () {
  77. this.socket.emit('stations.updateDescription', this.data.stationId, this.data.description, res => {
  78. if (res.status === 'success') {
  79. this.$parent.station.description = this.data.description;
  80. return Toast.methods.addToast(res.message, 4000);
  81. }
  82. Toast.methods.addToast(res.message, 8000);
  83. });
  84. },
  85. updatePrivacy: function () {
  86. this.socket.emit('stations.updatePrivacy', this.data.stationId, this.data.privacy, res => {
  87. if (res.status === 'success') {
  88. this.$parent.station.privacy = this.data.privacy;
  89. return Toast.methods.addToast(res.message, 4000);
  90. }
  91. Toast.methods.addToast(res.message, 8000);
  92. });
  93. },
  94. updatePartyMode: function () {
  95. this.socket.emit('stations.updatePartyMode', this.data.stationId, this.data.partyMode, res => {
  96. if (res.status === 'success') {
  97. this.$parent.station.partyMode = this.data.partyMode;
  98. return Toast.methods.addToast(res.message, 4000);
  99. }
  100. Toast.methods.addToast(res.message, 8000);
  101. });
  102. },
  103. deleteStation: function() {
  104. this.socket.emit('stations.remove', this.data.stationId, res => {
  105. Toast.methods.addToast(res.message, 8000);
  106. if (res.status === 'success') {
  107. location.href = '/';
  108. }
  109. });
  110. }
  111. },
  112. ready: function () {
  113. let _this = this;
  114. io.getSocket((socket) => {
  115. _this.socket = socket;
  116. });
  117. this.data.stationId = this.$parent.stationId;
  118. this.data.partyMode = this.$parent.station.partyMode;
  119. this.data.description = this.$parent.station.description;
  120. this.data.privacy = this.$parent.station.privacy;
  121. this.data.displayName = this.$parent.station.displayName;
  122. },
  123. events: {
  124. closeModal: function() {
  125. this.$parent.modals.editStation = !this.$parent.modals.editStation;
  126. }
  127. },
  128. components: { Modal }
  129. }
  130. </script>
  131. <style type='scss' scoped>
  132. .controls {
  133. display: flex;
  134. a {
  135. display: flex;
  136. align-items: center;
  137. }
  138. }
  139. .table { margin-bottom: 0; }
  140. h5 { padding: 20px 0; }
  141. .party-mode-inner, .party-mode-outer {
  142. display: flex;
  143. align-items: center;
  144. }
  145. </style>