Added Station Edit Modal to be used by Admins in the Admin Station Tab

frontend/components/Admin/Stations.vue

@@ -19,12 +19,13 @@
 						<span>{{ station.type }}</span>
 					</td>
 					<td>
-						<span>{{ station.description }}</span>
+						<span>{{ station.displayName }}</span>
 					</td>
 					<td>
 						<span>{{ station.description }}</span>
 					</td>
 					<td>
+						<a class='button is-info' @click='editStation(station)'>Edit</a>
 						<a class='button is-danger' @click='removeStation(index)' href='#'>Remove</a>
 					</td>
 				</tr>
@@ -77,23 +78,32 @@
 			</footer>
 		</div>
 	</div>
+
+	<edit-station v-show='modals.editStation'></edit-station>
 </template>
 
 <script>
 	import { Toast } from 'vue-roaster';
 	import io from '../../io';
 
+	import EditStation from '../Modals/EditStation.vue';
+
 	export default {
+		components: { EditStation },
 		data() {
 			return {
 				stations: [],
 				newStation: {
 					genres: [],
 					blacklistedGenres: []
-				}
+				},
+				modals: { editStation: false }
 			}
 		},
 		methods: {
+			toggleModal: function () {
+				this.modals.editStation	= !this.modals.editStation;
+			},
 			createStation: function () {
 				let _this = this;
 				let { newStation: { _id, displayName, description, genres, blacklistedGenres } } = this;
@@ -122,6 +132,16 @@
 					Toast.methods.addToast(res.message, 3000);
 				});
 			},
+			editStation: function (station) {
+				this.$broadcast('editStation', {
+					_id: station._id,
+					type: station.type,
+					partyMode: station.partyMode,
+					description: station.description,
+					privacy: station.privacy,
+					displayName: station.displayName
+				});
+			},
 			addGenre: function () {
 				let genre = $('#new-genre').val().toLowerCase().trim();
 				if (this.newStation.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);

frontend/components/Modals/EditStation.vue

@@ -1,53 +1,55 @@
 <template>
-	<modal title='Edit Station'>
-		<div slot='body'>
-			<label class='label'>Display name</label>
-			<div class='control is-grouped'>
-				<p class='control is-expanded'>
-					<input class='input' type='text' placeholder='Station Display Name' v-model='data.displayName' autofocus>
-				</p>
-				<p class='control'>
-					<a class='button is-info' @click='updateDisplayName()' href='#'>Update</a>
-				</p>
+	<div>
+		<modal title='Edit Station'>
+			<div slot='body'>
+				<label class='label'>Display name</label>
+				<div class='control is-grouped'>
+					<p class='control is-expanded'>
+						<input class='input' type='text' placeholder='Station Display Name' v-model='editing.displayName' autofocus>
+					</p>
+					<p class='control'>
+						<a class='button is-info' @click='updateDisplayName()' href='#'>Update</a>
+					</p>
+				</div>
+				<label class='label'>Description</label>
+				<div class='control is-grouped'>
+					<p class='control is-expanded'>
+						<input class='input' type='text' placeholder='Station Display Name' v-model='editing.description'>
+					</p>
+					<p class='control'>
+						<a class='button is-info' @click='updateDescription()' href='#'>Update</a>
+					</p>
+				</div>
+				<label class='label'>Privacy</label>
+				<div class='control is-grouped'>
+					<p class='control is-expanded'>
+							<span class='select'>
+								<select v-model='editing.privacy'>
+									<option :value='"public"'>Public</option>
+									<option :value='"unlisted"'>Unlisted</option>
+									<option :value='"private"'>Private</option>
+								</select>
+							</span>
+					</p>
+					<p class='control'>
+						<a class='button is-info' @click='updatePrivacy()' href='#'>Update</a>
+					</p>
+				</div>
+				<div class='control is-grouped' v-if="editing.type === 'community'">
+					<p class="control is-expanded party-mode-outer">
+						<label class="checkbox party-mode-inner">
+							<input type="checkbox" v-model="editing.partyMode">
+							&nbsp;Party mode
+						</label>
+					</p>
+					<p class='control'>
+						<a class='button is-info' @click='updatePartyMode()' href='#'>Update</a>
+					</p>
+				</div>
+				<button class='button is-danger' @click='deleteStation()' v-if="$parent.type === 'community'">Delete station</button>
 			</div>
-			<label class='label'>Description</label>
-			<div class='control is-grouped'>
-				<p class='control is-expanded'>
-					<input class='input' type='text' placeholder='Station Display Name' v-model='data.description'>
-				</p>
-				<p class='control'>
-					<a class='button is-info' @click='updateDescription()' href='#'>Update</a>
-				</p>
-			</div>
-			<label class='label'>Privacy</label>
-			<div class='control is-grouped'>
-				<p class='control is-expanded'>
-						<span class='select'>
-							<select v-model='data.privacy'>
-								<option :value='"public"'>Public</option>
-								<option :value='"unlisted"'>Unlisted</option>
-								<option :value='"private"'>Private</option>
-							</select>
-						</span>
-				</p>
-				<p class='control'>
-					<a class='button is-info' @click='updatePrivacy()' href='#'>Update</a>
-				</p>
-			</div>
-			<div class='control is-grouped' v-if="$parent.type === 'community'">
-				<p class="control is-expanded party-mode-outer">
-					<label class="checkbox party-mode-inner">
-						<input type="checkbox" v-model="data.partyMode">
-						&nbsp;Party mode
-					</label>
-				</p>
-				<p class='control'>
-					<a class='button is-info' @click='updatePartyMode()' href='#'>Update</a>
-				</p>
-			</div>
-			<button class='button is-danger' @click='deleteStation()' v-if="$parent.type === 'community'">Delete station</button>
-		</div>
-	</modal>
+		</modal>
+	</div>
 </template>
 
 <script>
@@ -58,7 +60,9 @@
 	export default {
 		data: function() {
 			return {
-				data: {
+				editing: {
+					_id: '',
+					type: '',
 					displayName: '',
 					description: '',
 					privacy: 'private',
@@ -68,63 +72,85 @@
 		},
 		methods: {
 			updateDisplayName: function () {
-				this.socket.emit('stations.updateDisplayName', this.data.stationId, this.data.displayName, res => {
+				let _this = this;
+				this.socket.emit('stations.updateDisplayName', this.editing._id, this.editing.displayName, res => {
 					if (res.status === 'success') {
-						this.$parent.station.displayName = this.data.displayName;
+						if (_this.$parent.station) _this.$parent.station.displayName = _this.editing.displayName;
+						else {
+							_this.$parent.stations.forEach((station, index) => {
+								if (station._id === _this.editing._id) return _this.$parent.stations[index].displayName = _this.editing.displayName;
+							});
+						}
 					}
 					Toast.methods.addToast(res.message, 8000);
 				});
 			},
 			updateDescription: function () {
-				this.socket.emit('stations.updateDescription', this.data.stationId, this.data.description, res => {
+				let _this = this;
+				this.socket.emit('stations.updateDescription', this.editing._id, this.editing.description, res => {
 					if (res.status === 'success') {
-						this.$parent.station.description = this.data.description;
+						if (_this.$parent.station) _this.$parent.station.description = _this.editing.description;
+						else {
+							_this.$parent.stations.forEach((station, index) => {
+								if (station._id === station._id) return _this.$parent.stations[index].description = _this.editing.description;
+							});
+						}
 						return Toast.methods.addToast(res.message, 4000);
 					}
 					Toast.methods.addToast(res.message, 8000);
 				});
 			},
 			updatePrivacy: function () {
-				this.socket.emit('stations.updatePrivacy', this.data.stationId, this.data.privacy, res => {
+				let _this = this;
+				this.socket.emit('stations.updatePrivacy', this.editing._id, this.editing.privacy, res => {
 					if (res.status === 'success') {
-						this.$parent.station.privacy = this.data.privacy;
+						if (_this.$parent.station) _this.$parent.station.privacy = _this.editing.privacy;
+						else {
+							_this.$parent.stations.forEach((station, index) => {
+								if (station._id === station._id) return _this.$parent.stations[index].privacy = _this.editing.privacy;
+							});
+						}
 						return Toast.methods.addToast(res.message, 4000);
 					}
 					Toast.methods.addToast(res.message, 8000);
 				});
 			},
 			updatePartyMode: function () {
-				this.socket.emit('stations.updatePartyMode', this.data.stationId, this.data.partyMode, res => {
+				let _this = this;
+				this.socket.emit('stations.updatePartyMode', this.editing._id, this.editing.partyMode, res => {
 					if (res.status === 'success') {
-						this.$parent.station.partyMode = this.data.partyMode;
+						if (_this.$parent.station) _this.$parent.station.partyMode = _this.editing.partyMode;
+						else {
+							_this.$parent.stations.forEach((station, index) => {
+								if (station._id === station._id) return _this.$parent.stations[index].partyMode = _this.editing.partyMode;
+							});
+						}
 						return Toast.methods.addToast(res.message, 4000);
 					}
 					Toast.methods.addToast(res.message, 8000);
 				});
 			},
 			deleteStation: function() {
-				this.socket.emit('stations.remove', this.data.stationId, res => {
+				let _this = this;
+				this.socket.emit('stations.remove', this.editing._id, res => {
 					Toast.methods.addToast(res.message, 8000);
-					if (res.status === 'success') {
-						location.href = '/';
-					}
+					if (res.status === 'success' && _this.$parent.station) location.href = '/';
 				});
 			}
 		},
 		ready: function () {
 			let _this = this;
-			io.getSocket((socket) => {
+			io.getSocket(socket => {
 				_this.socket = socket;
 			});
-			this.data.stationId = this.$parent.stationId;
-			this.data.partyMode = this.$parent.station.partyMode;
-			this.data.description = this.$parent.station.description;
-			this.data.privacy = this.$parent.station.privacy;
-			this.data.displayName = this.$parent.station.displayName;
 		},
 		events: {
 			closeModal: function() {
-				this.$parent.modals.editStation = !this.$parent.modals.editStation;
+				this.$parent.modals.editStation = false;
+			},
+			editStation: function (station) {
+				this.editing = station;
+				this.$parent.toggleModal();
 			}
 		},
 		components: { Modal }