Added manage station modal data update on events

backend/logic/actions/apis.js

@@ -137,6 +137,28 @@ export default {
 		cb({ status: "success", message: "Successfully joined room." });
 	},
 
+	/**
+	 * Joins a room
+	 *
+	 * @param {object} session - user session
+	 * @param {string} page - the room to join
+	 * @param {Function} cb - callback
+	 */
+	 joinManageStationRoom: isAdminRequired((session, page, cb) => {
+		if (page.startsWith("manage-station.")) {
+			WSModule.runJob("SOCKET_JOIN_ROOM", {
+				socketId: session.socketId,
+				room: page
+			})
+				.then(() => {})
+				.catch(err => {
+					this.log("ERROR", `Joining room failed: ${err.message}`);
+				});
+		}
+
+		cb({ status: "success", message: "Successfully joined room." });
+	}),
+
 	/**
 	 * Joins an admin room
 	 *

backend/logic/actions/stations.js

@@ -81,9 +81,15 @@ CacheModule.runJob("SUB", {
 CacheModule.runJob("SUB", {
 	channel: "station.queueLockToggled",
 	cb: data => {
+		const { stationId, locked } = data;
 		WSModule.runJob("EMIT_TO_ROOM", {
-			room: `station.${data.stationId}`,
-			args: ["event:queueLockToggled", { data: { locked: data.locked } }]
+			room: `station.${stationId}`,
+			args: ["event:queueLockToggled", { data: { locked } }]
+		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `manage-station.${stationId}`,
+			args: ["event:queueLockToggled", { data: { stationId, locked } }]
 		});
 	}
 });
@@ -98,6 +104,11 @@ CacheModule.runJob("SUB", {
 				args: ["event:partyMode.updated", { data: { partyMode } }]
 			});
 
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:partyMode.updated", { data: { stationId, partyMode } }]
+			});
+
 			StationsModule.runJob("GET_SOCKETS_THAT_CAN_KNOW_ABOUT_STATION", {
 				room: `home`,
 				station
@@ -111,6 +122,23 @@ CacheModule.runJob("SUB", {
 	}
 });
 
+CacheModule.runJob("SUB", {
+	channel: "station.newPlayMode",
+	cb: data => {
+		const { stationId, playMode } = data;
+		
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `station.${stationId}`,
+			args: ["event:playMode.updated", { data: { playMode } }]
+		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `manage-station.${stationId}`,
+			args: ["event:playMode.updated", { data: { stationId, playMode } }]
+		});
+	}
+});
+
 // CacheModule.runJob("SUB", {
 // 	channel: "privatePlaylist.selected",
 // 	cb: data => {
@@ -131,6 +159,76 @@ CacheModule.runJob("SUB", {
 // 	}
 // });
 
+CacheModule.runJob("SUB", {
+	channel: "station.includedPlaylist",
+	cb: data => {
+		const { stationId, playlistId } = data;
+
+		PlaylistsModule.runJob("GET_PLAYLIST", { playlistId }).then(playlist => {
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `station.${stationId}`,
+				args: ["event:station.includedPlaylist", { data: { stationId, playlist } }]
+			});
+
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:station.includedPlaylist", { data: { stationId, playlist } }]
+			});
+		});
+	}
+});
+
+CacheModule.runJob("SUB", {
+	channel: "station.excludedPlaylist",
+	cb: data => {
+		const { stationId, playlistId } = data;
+
+		PlaylistsModule.runJob("GET_PLAYLIST", { playlistId }).then(playlist => {
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `station.${stationId}`,
+				args: ["event:station.excludedPlaylist", { data: { stationId, playlist } }]
+			});
+
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:station.excludedPlaylist", { data: { stationId, playlist } }]
+			});
+		});
+	}
+});
+
+CacheModule.runJob("SUB", {
+	channel: "station.removedIncludedPlaylist",
+	cb: data => {
+		const { stationId, playlistId } = data;
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `station.${stationId}`,
+			args: ["event:station.removedIncludedPlaylist", { data: { stationId, playlistId } }]
+		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `manage-station.${stationId}`,
+			args: ["event:station.removedIncludedPlaylist", { data: { stationId, playlistId } }]
+		});
+	}
+});
+
+CacheModule.runJob("SUB", {
+	channel: "station.removedExcludedPlaylist",
+	cb: data => {
+		const { stationId, playlistId } = data;
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `station.${stationId}`,
+			args: ["event:station.removedExcludedPlaylist", { data: { stationId, playlistId } }]
+		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `manage-station.${stationId}`,
+			args: ["event:station.removedExcludedPlaylist", { data: { stationId, playlistId } }]
+		});
+	}
+});
+
 CacheModule.runJob("SUB", {
 	channel: "station.pause",
 	cb: stationId => {
@@ -140,6 +238,11 @@ CacheModule.runJob("SUB", {
 				args: ["event:stations.pause", { data: { pausedAt: station.pausedAt } }]
 			});
 
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:stations.pause", { data: { stationId, pausedAt: station.pausedAt } }]
+			});
+
 			StationsModule.runJob("GET_SOCKETS_THAT_CAN_KNOW_ABOUT_STATION", {
 				room: `home`,
 				station
@@ -162,6 +265,11 @@ CacheModule.runJob("SUB", {
 				args: ["event:stations.resume", { data: { timePaused: station.timePaused } }]
 			});
 
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:stations.resume", { data: { stationId, timePaused: station.timePaused } }]
+			});
+
 			StationsModule.runJob("GET_SOCKETS_THAT_CAN_KNOW_ABOUT_STATION", {
 				room: `home`,
 				station
@@ -223,6 +331,16 @@ CacheModule.runJob("SUB", {
 					});
 				}
 			}
+
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `station.${stationId}`,
+				args: ["event:station.updatePrivacy", { data: { privacy: station.privacy } }]
+			});
+
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:station.updatePrivacy", { data: { stationId, privacy: station.privacy } }]
+			});
 		});
 	}
 });
@@ -232,7 +350,7 @@ CacheModule.runJob("SUB", {
 	cb: res => {
 		const { stationId, name } = res;
 
-		StationsModule.runJob("GET_STATION", { stationId }).then(station =>
+		StationsModule.runJob("GET_STATION", { stationId }).then(station => {
 			StationsModule.runJob("GET_SOCKETS_THAT_CAN_KNOW_ABOUT_STATION", {
 				room: `home`,
 				station
@@ -241,13 +359,18 @@ CacheModule.runJob("SUB", {
 				socketsThatCan.forEach(socket =>
 					socket.dispatch("event:station.updateName", { data: { stationId, name } })
 				);
-			})
-		);
+			});
+		});
 
 		WSModule.runJob("EMIT_TO_ROOM", {
 			room: `station.${stationId}`,
 			args: ["event:station.updateName", { data: { stationId, name } }]
 		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `manage-station.${stationId}`,
+			args: ["event:station.updateName", { data: { stationId, name } }]
+		});
 	}
 });
 
@@ -272,6 +395,11 @@ CacheModule.runJob("SUB", {
 			room: `station.${stationId}`,
 			args: ["event:station.updateDisplayName", { data: { stationId, displayName } }]
 		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `manage-station.${stationId}`,
+			args: ["event:station.updateDisplayName", { data: { stationId, displayName } }]
+		});
 	}
 });
 
@@ -296,6 +424,11 @@ CacheModule.runJob("SUB", {
 			room: `station.${stationId}`,
 			args: ["event:station.updateDescription", { data: { stationId, description } }]
 		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: `manage-station.${stationId}`,
+			args: ["event:station.updateDescription", { data: { stationId, description } }]
+		});
 	}
 });
 
@@ -310,6 +443,11 @@ CacheModule.runJob("SUB", {
 				args: ["event:station.themeUpdated", { data: { theme: station.theme } }]
 			});
 
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:station.themeUpdated", { data: { stationId, theme: station.theme } }]
+			});
+
 			StationsModule.runJob("GET_SOCKETS_THAT_CAN_KNOW_ABOUT_STATION", {
 				room: `home`,
 				station
@@ -319,7 +457,7 @@ CacheModule.runJob("SUB", {
 					socket.dispatch("event:station.updateTheme", { data: { stationId, theme: station.theme } });
 				});
 			});
-		});
+		});		
 	}
 });
 
@@ -331,6 +469,11 @@ CacheModule.runJob("SUB", {
 				room: `station.${stationId}`,
 				args: ["event:queue.update", { data: { queue: station.queue } }]
 			});
+
+			WSModule.runJob("EMIT_TO_ROOM", {
+				room: `manage-station.${stationId}`,
+				args: ["event:queue.update", { data: { stationId, queue: station.queue } }]
+			});
 		});
 	}
 });
@@ -3304,13 +3447,13 @@ export default {
 
 				PlaylistsModule.runJob("AUTOFILL_STATION_PLAYLIST", { stationId }).then().catch();
 
-				// CacheModule.runJob("PUB", {
-				// 	channel: "privatePlaylist.selected",
-				// 	value: {
-				// 		playlistId,
-				// 		stationId
-				// 	}
-				// });
+				CacheModule.runJob("PUB", {
+					channel: "station.includedPlaylist",
+					value: {
+						playlistId,
+						stationId
+					}
+				});
 
 				return cb({
 					status: "success",
@@ -3371,13 +3514,13 @@ export default {
 
 				PlaylistsModule.runJob("AUTOFILL_STATION_PLAYLIST", { stationId }).then().catch();
 
-				// CacheModule.runJob("PUB", {
-				// 	channel: "privatePlaylist.selected",
-				// 	value: {
-				// 		playlistId,
-				// 		stationId
-				// 	}
-				// });
+				CacheModule.runJob("PUB", {
+					channel: "station.removedIncludedPlaylist",
+					value: {
+						playlistId,
+						stationId
+					}
+				});
 
 				return cb({
 					status: "success",
@@ -3438,13 +3581,13 @@ export default {
 
 				PlaylistsModule.runJob("AUTOFILL_STATION_PLAYLIST", { stationId }).then().catch();
 
-				// CacheModule.runJob("PUB", {
-				// 	channel: "privatePlaylist.selected",
-				// 	value: {
-				// 		playlistId,
-				// 		stationId
-				// 	}
-				// });
+				CacheModule.runJob("PUB", {
+					channel: "station.excludedPlaylist",
+					value: {
+						playlistId,
+						stationId
+					}
+				});
 
 				return cb({
 					status: "success",
@@ -3505,13 +3648,13 @@ export default {
 
 				PlaylistsModule.runJob("AUTOFILL_STATION_PLAYLIST", { stationId }).then().catch();
 
-				// CacheModule.runJob("PUB", {
-				// 	channel: "privatePlaylist.selected",
-				// 	value: {
-				// 		playlistId,
-				// 		stationId
-				// 	}
-				// });
+				CacheModule.runJob("PUB", {
+					channel: "station.removedExcludedPlaylist",
+					value: {
+						playlistId,
+						stationId
+					}
+				});
 
 				return cb({
 					status: "success",

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -147,7 +147,11 @@
 								>play_arrow</i
 							>
 							<confirm
-								v-if="isOwnerOrAdmin()"
+								v-if="
+									isOwnerOrAdmin() &&
+										!isSelected(playlist._id) &&
+										!isExcluded(playlist._id)
+								"
 								@confirm="blacklistPlaylist(playlist._id)"
 							>
 								<i
@@ -225,7 +229,8 @@
 										station.type === 'community' &&
 											(isOwnerOrAdmin() ||
 												station.partyMode) &&
-											!isSelected(playlist._id)
+											!isSelected(playlist._id) &&
+											!isExcluded(playlist._id)
 									"
 									@click="selectPlaylist(playlist)"
 									class="material-icons play-icon"
@@ -258,7 +263,10 @@
 									>
 								</confirm>
 								<confirm
-									v-if="isOwnerOrAdmin()"
+									v-if="
+										isOwnerOrAdmin() &&
+											!isExcluded(playlist._id)
+									"
 									@confirm="blacklistPlaylist(playlist._id)"
 								>
 									<i
@@ -443,6 +451,13 @@ export default {
 			});
 			return selected;
 		},
+		isExcluded(id) {
+			let selected = false;
+			this.excludedPlaylists.forEach(playlist => {
+				if (playlist._id === id) selected = true;
+			});
+			return selected;
+		},
 		searchForPlaylists(page) {
 			if (
 				this.search.page >= page ||
@@ -498,6 +513,16 @@ export default {
 				}
 			);
 		},
+		removeExcludedPlaylist(id) {
+			this.socket.dispatch(
+				"stations.removeExcludedPlaylist",
+				this.station._id,
+				id,
+				res => {
+					new Toast(res.message);
+				}
+			);
+		},
 		addPartyPlaylistSongToQueue() {
 			let isInQueue = false;
 			if (

frontend/src/components/modals/ManageStation/index.vue

@@ -221,6 +221,8 @@ export default {
 			station: state => state.station,
 			originalStation: state => state.originalStation,
 			songsList: state => state.songsList,
+			includedPlaylists: state => state.includedPlaylists,
+			excludedPlaylists: state => state.excludedPlaylists,
 			stationPaused: state => state.stationPaused,
 			currentSong: state => state.currentSong
 		}),
@@ -274,6 +276,75 @@ export default {
 						}
 					}
 				);
+
+				if (this.sector === "admin")
+					this.socket.dispatch(
+						"apis.joinManageStationRoom",
+						`manage-station.${this.stationId}`,
+						() => {}
+					);
+
+				this.socket.on("event:station.updateName", res => {
+					this.station.name = res.data.name;
+				});
+
+				this.socket.on("event:station.updateDisplayName", res => {
+					this.station.displayName = res.data.displayName;
+				});
+
+				this.socket.on("event:station.updateDescription", res => {
+					this.station.description = res.data.description;
+				});
+
+				this.socket.on("event:partyMode.updated", res => {
+					if (this.station.type === "community")
+						this.station.partyMode = res.data.partyMode;
+				});
+
+				this.socket.on("event:playMode.updated", res => {
+					this.station.playMode = res.data.playMode;
+				});
+
+				this.socket.on("event:station.themeUpdated", res => {
+					const { theme } = res.data;
+					this.station.theme = theme;
+				});
+
+				this.socket.on("event:station.updatePrivacy", res => {
+					this.station.privacy = res.data.privacy;
+				});
+
+				this.socket.on("event:queueLockToggled", res => {
+					this.station.locked = res.data.locked;
+				});
+
+				this.socket.on("event:station.includedPlaylist", res => {
+					const { playlist } = res.data;
+					this.includedPlaylists.push(playlist);
+				});
+
+				this.socket.on("event:station.excludedPlaylist", res => {
+					const { playlist } = res.data;
+					this.excludedPlaylists.push(playlist);
+				});
+
+				this.socket.on("event:station.removedIncludedPlaylist", res => {
+					const { playlistId } = res.data;
+					const playlistIndex = this.includedPlaylists
+						.map(playlist => playlist._id)
+						.indexOf(playlistId);
+					if (playlistIndex >= 0)
+						this.includedPlaylists.splice(playlistIndex, 1);
+				});
+
+				this.socket.on("event:station.removedExcludedPlaylist", res => {
+					const { playlistId } = res.data;
+					const playlistIndex = this.excludedPlaylists
+						.map(playlist => playlist._id)
+						.indexOf(playlistId);
+					if (playlistIndex >= 0)
+						this.excludedPlaylists.splice(playlistIndex, 1);
+				});
 			} else {
 				new Toast(`Station with that ID not found`);
 				this.closeModal("manageStation");
@@ -288,13 +359,11 @@ export default {
 			this.repositionSongInList(res.data.song);
 		});
 
-		this.socket.on("event:stations.pause", res => {
-			this.pausedAt = res.data.pausedAt;
+		this.socket.on("event:stations.pause", () => {
 			this.updateStationPaused(true);
 		});
 
-		this.socket.on("event:stations.resume", res => {
-			this.timePaused = res.data.timePaused;
+		this.socket.on("event:stations.resume", () => {
 			this.updateStationPaused(false);
 		});
 
@@ -319,17 +388,13 @@ export default {
 		isOwnerOrAdmin() {
 			return this.isOwner() || this.isAdmin();
 		},
-		removeStation(index) {
-			this.socket.dispatch(
-				"stations.remove",
-				this.station._id,
-				res => {
-					new Toast(res.message);
-					if (res.status === "success") {
-						this.closeModal("manageStation");
-					}
+		removeStation() {
+			this.socket.dispatch("stations.remove", this.station._id, res => {
+				new Toast(res.message);
+				if (res.status === "success") {
+					this.closeModal("manageStation");
 				}
-			);
+			});
 		},
 		resumeStation() {
 			this.socket.dispatch("stations.resume", this.station._id, res => {