Now using new include/exclude playlist actions

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

@@ -107,7 +107,7 @@
 								<i
 									v-if="
 										station.type === 'community' &&
-											isNotSelected(playlist._id)
+											!isSelected(playlist._id)
 									"
 									@click="selectPlaylist(playlist._id)"
 									class="material-icons play-icon"
@@ -122,7 +122,7 @@
 								<i
 									v-if="
 										station.type === 'community' &&
-											!isNotSelected(playlist._id)
+											isSelected(playlist._id)
 									"
 									@click="deselectPlaylist(playlist._id)"
 									class="material-icons stop-icon"
@@ -204,7 +204,7 @@ export default {
 			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
 		});
 
-		this.socket.on("event:playlist.create", playlist => {
+		this.socket.on("event:playlist.create", res => {
 			this.playlists.push(res.data.playlist);
 		});
 
@@ -302,16 +302,11 @@ export default {
 				);
 			} else {
 				this.socket.dispatch(
-					"stations.selectPrivatePlaylist",
+					"stations.includePlaylist",
 					this.station._id,
 					id,
 					res => {
-						if (res.status === "error") {
-							new Toast(res.message);
-						} else {
-							this.station.includedPlaylists.push(id);
-							new Toast(res.message);
-						}
+						new Toast(res.message);
 					}
 				);
 			}
@@ -323,35 +318,26 @@ export default {
 				);
 			} else {
 				this.socket.dispatch(
-					"stations.deselectPrivatePlaylist",
+					"stations.removeIncludedPlaylist",
 					this.station._id,
 					id,
 					res => {
-						if (res.status === "error")
-							return new Toast(res.message);
-
-						this.station.includedPlaylists.splice(
-							this.station.includedPlaylists.indexOf(id),
-							1
-						);
-
-						return new Toast(res.message);
+						new Toast(res.message);
 					}
 				);
 			}
 		},
-		isNotSelected(id) {
+		isSelected(id) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				// Party mode playlist selection not added yet
-				return true;
+				// Party mode playlist selection not added yet.
+				return false;
 			}
 			// TODO Also change this once it changes for a station
-			if (
-				this.station &&
-				this.station.includedPlaylists.indexOf(id) !== -1
-			)
-				return false;
-			return true;
+			let selected = false;
+			this.includedPlaylists.forEach(playlist => {
+				if (playlist._id === id) selected = true;
+			});
+			return selected;
 		},
 		...mapActions("station", ["updatePrivatePlaylistQueueSelected"]),
 		...mapActions("modalVisibility", ["openModal"]),

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -23,7 +23,7 @@
 						<i
 							v-if="
 								station.type === 'community' &&
-									isNotSelected(playlist._id)
+									!isSelected(playlist._id)
 							"
 							@click="selectPlaylist(playlist._id)"
 							class="material-icons play-icon"
@@ -38,7 +38,7 @@
 						<i
 							v-if="
 								station.type === 'community' &&
-									!isNotSelected(playlist._id)
+									isSelected(playlist._id)
 							"
 							@click="deselectPlaylist(playlist._id)"
 							class="material-icons stop-icon"
@@ -92,10 +92,12 @@ export default {
 		};
 	},
 	computed: {
-		...mapState({
-			station: state => state.station.station,
+		...mapState("station", {
+			station: state => state.station,
 			privatePlaylistQueueSelected: state =>
-				state.station.privatePlaylistQueueSelected
+				state.privatePlaylistQueueSelected,
+			includedPlaylists: state => state.includedPlaylists,
+			excludedPlaylists: state => state.excludedPlaylists
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -179,65 +181,47 @@ export default {
 		},
 		selectPlaylist(id) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				if (this.isNotSelected(id)) {
-					this.updatePrivatePlaylistQueueSelected(id);
-					this.$parent.$parent.addFirstPrivatePlaylistSongToQueue();
-					new Toast(
-						"Successfully selected playlist to auto request songs."
-					);
-				} else {
-					new Toast("Error: Playlist already selected.");
-				}
+				new Toast(
+					"Error: Party mode playlist selection not added yet."
+				);
 			} else {
 				this.socket.dispatch(
-					"stations.selectPrivatePlaylist",
+					"stations.includePlaylist",
 					this.station._id,
 					id,
 					res => {
-						if (res.status === "error") {
-							new Toast(res.message);
-						} else {
-							this.station.includedPlaylists.push(id);
-							new Toast(res.message);
-						}
+						new Toast(res.message);
 					}
 				);
 			}
 		},
 		deselectPlaylist(id) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				this.updatePrivatePlaylistQueueSelected(null);
-				new Toast("Successfully deselected playlist.");
+				new Toast(
+					"Error: Party mode playlist selection not added yet."
+				);
 			} else {
 				this.socket.dispatch(
-					"stations.deselectPrivatePlaylist",
+					"stations.removeIncludedPlaylist",
 					this.station._id,
 					id,
 					res => {
-						if (res.status === "error")
-							return new Toast(res.message);
-
-						this.station.includedPlaylists.splice(
-							this.station.includedPlaylists.indexOf(id),
-							1
-						);
-
-						return new Toast(res.message);
+						new Toast(res.message);
 					}
 				);
 			}
 		},
-		isNotSelected(id) {
+		isSelected(id) {
 			if (this.station.type === "community" && this.station.partyMode) {
-				return this.privatePlaylistQueueSelected !== id;
+				// Party mode playlist selection not added yet.
+				return false;
 			}
 			// TODO Also change this once it changes for a station
-			if (
-				this.station &&
-				this.station.includedPlaylists.indexOf(id) !== -1
-			)
-				return false;
-			return true;
+			let selected = false;
+			this.includedPlaylists.forEach(playlist => {
+				if (playlist._id === id) selected = true;
+			});
+			return selected;
 		},
 		...mapActions("station", ["updatePrivatePlaylistQueueSelected"]),
 		...mapActions("modalVisibility", ["openModal"]),

frontend/src/pages/Station/index.vue

@@ -744,7 +744,9 @@ export default {
 			localPaused: state => state.localPaused,
 			noSong: state => state.noSong,
 			privatePlaylistQueueSelected: state =>
-				state.privatePlaylistQueueSelected
+				state.privatePlaylistQueueSelected,
+			includedPlaylists: state => state.includedPlaylists,
+			excludedPlaylists: state => state.excludedPlaylists
 		}),
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
@@ -1701,6 +1703,30 @@ export default {
 							this.updateNoSong(true);
 						}
 
+						this.socket.dispatch(
+							"stations.getStationIncludedPlaylistsById",
+							this.station._id,
+							res => {
+								if (res.status === "success") {
+									this.setIncludedPlaylists(
+										res.data.playlists
+									);
+								}
+							}
+						);
+
+						this.socket.dispatch(
+							"stations.getStationExcludedPlaylistsById",
+							this.station._id,
+							res => {
+								if (res.status === "success") {
+									this.setExcludedPlaylists(
+										res.data.playlists
+									);
+								}
+							}
+						);
+
 						this.socket.dispatch("stations.getQueue", _id, res => {
 							if (res.status === "success") {
 								this.updateSongsList(res.data.queue);
@@ -1924,7 +1950,9 @@ export default {
 			"updateStationPaused",
 			"updateLocalPaused",
 			"updateNoSong",
-			"updateIfStationIsFavorited"
+			"updateIfStationIsFavorited",
+			"setIncludedPlaylists",
+			"setExcludedPlaylists"
 		]),
 		...mapActions("modals/editSong", ["stopVideo"])
 	}

frontend/src/pages/Team.vue

@@ -6,7 +6,7 @@
 		<div class="group">
 			<div
 				v-for="(member, index) in currentTeam"
-				:key="index"
+				:key="'current-' + index"
 				class="card"
 			>
 				<header class="card-header">
@@ -35,8 +35,8 @@
 					</div>
 					<div v-if="member.projects" class="projects">
 						<a
-							v-for="(project, index) in member.projects"
-							:key="index"
+							v-for="(project, pindex) in member.projects"
+							:key="'currentp-' + pindex"
 							:href="
 								'https://github.com/Musare/' +
 									project +
@@ -55,7 +55,7 @@
 		<div class="group">
 			<div
 				v-for="(member, index) in previousTeam"
-				:key="index"
+				:key="'previous-' + index"
 				class="card"
 			>
 				<header class="card-header">
@@ -84,8 +84,8 @@
 					</div>
 					<div v-if="member.projects" class="projects">
 						<a
-							v-for="(project, index) in member.projects"
-							:key="index"
+							v-for="(project, pindex) in member.projects"
+							:key="'previousp-' + pindex"
 							:href="
 								'https://github.com/Musare/' +
 									project +
@@ -152,7 +152,12 @@ export default {
 					name: "Owen Diffey",
 					bio:
 						"Developer, Designer, System Admin and QA Tester. Previously Owner and Project Manager.",
-					projects: ["MusareMeteor", "MusareReact", "MusareNode"],
+					projects: [
+						"MusareMeteor",
+						"MusareReact",
+						"MusareNode",
+						"vue-roaster"
+					],
 					active: "Feb 2016 - present",
 					github: "odiffey",
 					link: "https://diffey.dev",

frontend/src/store/modules/station.js

@@ -15,7 +15,9 @@ const state = {
 	songsList: [],
 	stationPaused: true,
 	localPaused: false,
-	noSong: true
+	noSong: true,
+	includedPlaylists: [],
+	excludedPlaylists: []
 };
 
 const getters = {};
@@ -62,6 +64,12 @@ const actions = {
 	},
 	updateIfStationIsFavorited: ({ commit }, { isFavorited }) => {
 		commit("updateIfStationIsFavorited", isFavorited);
+	},
+	setIncludedPlaylists: ({ commit }, includedPlaylists) => {
+		commit("setIncludedPlaylists", includedPlaylists);
+	},
+	setExcludedPlaylists: ({ commit }, excludedPlaylists) => {
+		commit("setExcludedPlaylists", excludedPlaylists);
 	}
 };
 
@@ -121,6 +129,12 @@ const mutations = {
 	},
 	updateIfStationIsFavorited(state, isFavorited) {
 		state.station.isFavorited = isFavorited;
+	},
+	setIncludedPlaylists(state, includedPlaylists) {
+		state.includedPlaylists = JSON.parse(JSON.stringify(includedPlaylists));
+	},
+	setExcludedPlaylists(state, excludedPlaylists) {
+		state.excludedPlaylists = JSON.parse(JSON.stringify(excludedPlaylists));
 	}
 };