Browse Source

refactor(modals): modals don't have sectors anymore

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 3 years ago
parent
commit
942d2149d5
36 changed files with 104 additions and 261 deletions
  1. 2 2
      frontend/src/App.vue
  2. 1 1
      frontend/src/components/ActivityItem.vue
  3. 2 2
      frontend/src/components/SongItem.vue
  4. 2 18
      frontend/src/components/layout/MainHeader.vue
  5. 1 4
      frontend/src/components/modals/CreateCommunityStation.vue
  6. 2 8
      frontend/src/components/modals/CreatePlaylist.vue
  7. 2 9
      frontend/src/components/modals/EditNews.vue
  8. 1 6
      frontend/src/components/modals/EditPlaylist.vue
  9. 4 14
      frontend/src/components/modals/EditSong.vue
  10. 2 9
      frontend/src/components/modals/EditStation.vue
  11. 1 4
      frontend/src/components/modals/EditUser.vue
  12. 2 3
      frontend/src/components/modals/Login.vue
  13. 2 3
      frontend/src/components/modals/Register.vue
  14. 1 4
      frontend/src/components/modals/RemoveAccount.vue
  15. 2 15
      frontend/src/components/modals/Report.vue
  16. 1 4
      frontend/src/components/modals/ViewPunishment.vue
  17. 3 10
      frontend/src/components/modals/ViewReport.vue
  18. 2 2
      frontend/src/pages/Admin/tabs/HiddenSongs.vue
  19. 2 2
      frontend/src/pages/Admin/tabs/News.vue
  20. 4 4
      frontend/src/pages/Admin/tabs/Playlists.vue
  21. 2 2
      frontend/src/pages/Admin/tabs/Punishments.vue
  22. 3 6
      frontend/src/pages/Admin/tabs/Reports.vue
  23. 2 5
      frontend/src/pages/Admin/tabs/Stations.vue
  24. 2 2
      frontend/src/pages/Admin/tabs/UnverifiedSongs.vue
  25. 2 2
      frontend/src/pages/Admin/tabs/Users.vue
  26. 2 2
      frontend/src/pages/Admin/tabs/VerifiedSongs.vue
  27. 5 25
      frontend/src/pages/Home.vue
  28. 3 3
      frontend/src/pages/Profile/index.vue
  29. 3 8
      frontend/src/pages/Profile/tabs/Playlists.vue
  30. 1 1
      frontend/src/pages/Profile/tabs/RecentActivity.vue
  31. 1 1
      frontend/src/pages/Settings/index.vue
  32. 1 9
      frontend/src/pages/Settings/tabs/Account.vue
  33. 2 2
      frontend/src/pages/Station/Sidebar/Playlists.vue
  34. 2 12
      frontend/src/pages/Station/Sidebar/Queue.vue
  35. 8 17
      frontend/src/pages/Station/index.vue
  36. 26 40
      frontend/src/store/modules/modalVisibility.js

+ 2 - 2
frontend/src/App.vue

@@ -4,8 +4,8 @@
 		<div v-else class="upper-container">
 			<router-view :key="$route.fullPath" class="main-container" />
 			<what-is-new />
-			<login-modal v-if="modals.header.login" />
-			<register-modal v-if="modals.header.register" />
+			<login-modal v-if="modals.login" />
+			<register-modal v-if="modals.register" />
 		</div>
 	</div>
 </template>

+ 1 - 1
frontend/src/components/ActivityItem.vue

@@ -156,7 +156,7 @@ export default {
 		},
 		showPlaylist(playlistId) {
 			this.editPlaylist(playlistId);
-			this.openModal({ sector: "station", modal: "editPlaylist" });
+			this.openModal("editPlaylist");
 		},
 		...mapActions("user/playlists", ["editPlaylist"]),
 		formatDistance,

+ 2 - 2
frontend/src/components/SongItem.vue

@@ -203,12 +203,12 @@ export default {
 		report(song) {
 			this.hideTippyElements();
 			this.reportSong(song);
-			this.openModal({ sector: "station", modal: "report" });
+			this.openModal("report");
 		},
 		edit(song) {
 			this.hideTippyElements();
 			this.editSong(song);
-			this.openModal({ sector: "admin", modal: "editSong" });
+			this.openModal("editSong");
 		},
 		...mapActions("modals/editSong", ["editSong"]),
 		...mapActions("modals/report", ["reportSong"]),

+ 2 - 18
frontend/src/components/layout/MainHeader.vue

@@ -45,26 +45,10 @@
 				<a class="nav-item is-tab" href="#" @click="logout()">Logout</a>
 			</span>
 			<span v-if="!loggedIn && !hideLoggedOut" class="grouped">
-				<a
-					class="nav-item"
-					href="#"
-					@click="
-						openModal({
-							sector: 'header',
-							modal: 'login'
-						})
-					"
+				<a class="nav-item" href="#" @click="openModal('login')"
 					>Login</a
 				>
-				<a
-					class="nav-item"
-					href="#"
-					@click="
-						openModal({
-							sector: 'header',
-							modal: 'register'
-						})
-					"
+				<a class="nav-item" href="#" @click="openModal('register')"
 					>Register</a
 				>
 			</span>

+ 1 - 4
frontend/src/components/modals/CreateCommunityStation.vue

@@ -109,10 +109,7 @@ export default {
 				res => {
 					if (res.status === "success") {
 						new Toast(`You have added the station successfully`);
-						this.closeModal({
-							sector: "home",
-							modal: "createCommunityStation"
-						});
+						this.closeModal("createCommunityStation");
 					} else new Toast(res.message);
 				}
 			);

+ 2 - 8
frontend/src/components/modals/CreatePlaylist.vue

@@ -73,15 +73,9 @@ export default {
 					new Toast(res.message);
 
 					if (res.status === "success") {
-						this.closeModal({
-							sector: "station",
-							modal: "createPlaylist"
-						});
+						this.closeModal("createPlaylist");
 						this.editPlaylist(res.data.playlistId);
-						this.openModal({
-							sector: "station",
-							modal: "editPlaylist"
-						});
+						this.openModal("editPlaylist");
 					}
 				}
 			);

+ 2 - 9
frontend/src/components/modals/EditNews.vue

@@ -180,10 +180,7 @@ export default {
 				this.editNews(news);
 			} else {
 				new Toast("News with that ID not found");
-				this.closeModal({
-					sector: this.sector,
-					modal: "editNews"
-				});
+				this.closeModal("editNews");
 			}
 		});
 	},
@@ -211,11 +208,7 @@ export default {
 				res => {
 					new Toast(res.message);
 					if (res.status === "success") {
-						if (close)
-							this.closeModal({
-								sector: this.sector,
-								modal: "editNews"
-							});
+						if (close) this.closeModal("editNews");
 					}
 				}
 			);

+ 1 - 6
frontend/src/components/modals/EditPlaylist.vue

@@ -646,12 +646,7 @@ export default {
 		removePlaylist() {
 			this.socket.dispatch("playlists.remove", this.playlist._id, res => {
 				new Toast(res.message);
-				if (res.status === "success") {
-					this.closeModal({
-						sector: "station",
-						modal: "editPlaylist"
-					});
-				}
+				if (res.status === "success") this.closeModal("editPlaylist");
 			});
 		},
 		async downloadPlaylist() {

+ 4 - 14
frontend/src/components/modals/EditSong.vue

@@ -585,7 +585,7 @@ export default {
 			song: state => state.song
 		}),
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -735,10 +735,7 @@ export default {
 				});
 			} else {
 				new Toast("Song with that ID not found");
-				this.closeModal({
-					sector: this.sector,
-					modal: "editSong"
-				});
+				this.closeModal("editSong");
 			}
 		});
 
@@ -838,10 +835,7 @@ export default {
 			ctrl: true,
 			preventDefault: true,
 			handler: () => {
-				this.closeModal({
-					sector: this.sector,
-					modal: "editSong"
-				});
+				this.closeModal("editSong");
 				setTimeout(() => {
 					window.focusedElementBefore.focus();
 				}, 500);
@@ -1054,11 +1048,7 @@ export default {
 					saveButtonRef.handleSuccessfulSave();
 				else saveButtonRef.handleFailedSave();
 
-				if (close)
-					this.closeModal({
-						sector: this.sector,
-						modal: "editSong"
-					});
+				if (close) this.closeModal("editSong");
 			});
 		},
 		toggleAPIResult(index) {

+ 2 - 9
frontend/src/components/modals/EditStation.vue

@@ -645,10 +645,7 @@ export default {
 				// );
 			} else {
 				new Toast("Station with that ID not found");
-				this.closeModal({
-					sector: this.sector,
-					modal: "editStation"
-				});
+				this.closeModal("editStation");
 			}
 		});
 	},
@@ -976,11 +973,7 @@ export default {
 		},
 		deleteStation() {
 			this.socket.dispatch("stations.remove", this.station._id, res => {
-				if (res.status === "success")
-					this.closeModal({
-						sector: "station",
-						modal: "editStation"
-					});
+				if (res.status === "success") this.closeModal("editStation");
 				return new Toast(res.message);
 			});
 		},

+ 1 - 4
frontend/src/components/modals/EditUser.vue

@@ -111,10 +111,7 @@ export default {
 				this.editUser(user);
 			} else {
 				new Toast("User with that ID not found");
-				this.closeModal({
-					sector: this.sector,
-					modal: "editUser"
-				});
+				this.closeModal("editUser");
 			}
 		});
 	},

+ 2 - 3
frontend/src/components/modals/Login.vue

@@ -166,12 +166,11 @@ export default {
 		changeToRegisterModal() {
 			if (!this.isPage) {
 				this.closeLoginModal();
-				this.openModal({ sector: "header", modal: "register" });
+				this.openModal("register");
 			}
 		},
 		closeLoginModal() {
-			if (!this.isPage)
-				this.closeModal({ sector: "header", modal: "login" });
+			if (!this.isPage) this.closeModal("login");
 		},
 		githubRedirect() {
 			if (!this.isPage)

+ 2 - 3
frontend/src/components/modals/Register.vue

@@ -281,12 +281,11 @@ export default {
 		changeToLoginModal() {
 			if (!this.isPage) {
 				this.closeRegisterModal();
-				this.openModal({ sector: "header", modal: "login" });
+				this.openModal("login");
 			}
 		},
 		closeRegisterModal() {
-			if (!this.isPage)
-				this.closeModal({ sector: "header", modal: "login" });
+			if (!this.isPage) this.closeModal("login");
 		},
 		submitModal() {
 			if (

+ 1 - 4
frontend/src/components/modals/RemoveAccount.vue

@@ -243,10 +243,7 @@ export default {
 					return this.socket.dispatch("users.logout", () => {
 						return lofig.get("cookie").then(cookie => {
 							document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-							this.closeModal({
-								sector: "settings",
-								modal: "removeAccount"
-							});
+							this.closeModal("removeAccount");
 							return window.location.reload();
 						});
 					});

+ 2 - 15
frontend/src/components/modals/Report.vue

@@ -123,16 +123,7 @@
 				<i class="material-icons save-changes">done</i>
 				<span>&nbsp;Create</span>
 			</a>
-			<a
-				class="button is-danger"
-				href="#"
-				@click="
-					closeModal({
-						sector: 'station',
-						modal: 'report'
-					})
-				"
-			>
+			<a class="button is-danger" href="#" @click="closeModal('report')">
 				<span>&nbsp;Cancel</span>
 			</a>
 		</div>
@@ -222,11 +213,7 @@ export default {
 		create() {
 			this.socket.dispatch("reports.create", this.report, res => {
 				new Toast(res.message);
-				if (res.status === "success")
-					this.closeModal({
-						sector: "station",
-						modal: "report"
-					});
+				if (res.status === "success") this.closeModal("report");
 			});
 		},
 		highlight(type) {

+ 1 - 4
frontend/src/components/modals/ViewPunishment.vue

@@ -97,10 +97,7 @@ export default {
 					this.viewPunishment(punishment);
 				} else {
 					new Toast("Punishment with that ID not found");
-					this.closeModal({
-						sector: this.sector,
-						modal: "viewPunishment"
-					});
+					this.closeModal("viewPunishment");
 				}
 			}
 		);

+ 3 - 10
frontend/src/components/modals/ViewReport.vue

@@ -100,7 +100,7 @@ export default {
 	},
 	mounted() {
 		if (this.$route.query.returnToSong) {
-			this.closeModal({ sector: this.sector, modal: "editSong" });
+			this.closeModal("editSong");
 		}
 
 		this.socket.dispatch(`reports.findOne`, this.reportId, res => {
@@ -109,10 +109,7 @@ export default {
 				this.viewReport(report);
 			} else {
 				new Toast("Report with that ID not found");
-				this.closeModal({
-					sector: this.sector,
-					modal: "viewReport"
-				});
+				this.closeModal("viewReport");
 			}
 		});
 	},
@@ -121,11 +118,7 @@ export default {
 		resolve(reportId) {
 			return this.resolveReport(reportId)
 				.then(res => {
-					if (res.status === "success")
-						this.closeModal({
-							sector: this.sector,
-							modal: "viewReport"
-						});
+					if (res.status === "success") this.closeModal("viewReport");
 				})
 				.catch(err => new Toast(err.message));
 		},

+ 2 - 2
frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -204,7 +204,7 @@ export default {
 			);
 		},
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapState("admin/hiddenSongs", {
 			songs: state => state.songs
@@ -238,7 +238,7 @@ export default {
 	methods: {
 		edit(song) {
 			this.editSong(song);
-			this.openModal({ sector: "admin", modal: "editSong" });
+			this.openModal("editSong");
 		},
 		unhide(song) {
 			this.socket.dispatch("songs.unhide", song._id, res => {

+ 2 - 2
frontend/src/pages/Admin/tabs/News.vue

@@ -239,7 +239,7 @@ export default {
 	},
 	computed: {
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapState("admin/news", {
 			news: state => state.news
@@ -309,7 +309,7 @@ export default {
 		},
 		editNewsClick(news) {
 			this.editingNewsId = news._id;
-			this.openModal({ sector: "admin", modal: "editNews" });
+			this.openModal("editNews");
 		},
 		addChange(type) {
 			const change = this.$refs[`new-${type}`].value.trim();

+ 4 - 4
frontend/src/pages/Admin/tabs/Playlists.vue

@@ -81,9 +81,9 @@
 			</table>
 		</div>
 
-		<edit-playlist v-if="modals.admin.editPlaylist" sector="admin" />
-		<report v-if="modals.station.report" />
-		<edit-song v-if="modals.admin.editSong" song-type="songs" />
+		<edit-playlist v-if="modals.editPlaylist" sector="admin" />
+		<report v-if="modals.report" />
+		<edit-song v-if="modals.editSong" song-type="songs" />
 	</div>
 </template>
 
@@ -125,7 +125,7 @@ export default {
 	methods: {
 		edit(playlistId) {
 			this.editPlaylist(playlistId);
-			this.openModal({ sector: "admin", modal: "editPlaylist" });
+			this.openModal("editPlaylist");
 		},
 		init() {
 			this.socket.dispatch("playlists.index", res => {

+ 2 - 2
frontend/src/pages/Admin/tabs/Punishments.vue

@@ -118,7 +118,7 @@ export default {
 			return this.punishments;
 		},
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -136,7 +136,7 @@ export default {
 		view(punishment) {
 			// this.viewPunishment(punishment);
 			this.viewingPunishmentId = punishment._id;
-			this.openModal({ sector: "admin", modal: "viewPunishment" });
+			this.openModal("viewPunishment");
 		},
 		banIP() {
 			this.socket.dispatch(

+ 3 - 6
frontend/src/pages/Admin/tabs/Reports.vue

@@ -87,7 +87,7 @@ export default {
 	},
 	computed: {
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -130,16 +130,13 @@ export default {
 		view(report) {
 			// this.viewReport(report);
 			this.viewingReportId = report._id;
-			this.openModal({ sector: "admin", modal: "viewReport" });
+			this.openModal("viewReport");
 		},
 		resolve(reportId) {
 			return this.resolveReport(reportId)
 				.then(res => {
 					if (res.status === "success" && this.modals.viewReport)
-						this.closeModal({
-							sector: "admin",
-							modal: "viewReport"
-						});
+						this.closeModal("viewReport");
 				})
 				.catch(err => new Toast(err.message));
 		},

+ 2 - 5
frontend/src/pages/Admin/tabs/Stations.vue

@@ -213,7 +213,7 @@ export default {
 			stations: state => state.stations
 		}),
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -281,10 +281,7 @@ export default {
 		},
 		edit(station) {
 			this.editingStationId = station._id;
-			this.openModal({
-				sector: "admin",
-				modal: "editStation"
-			});
+			this.openModal("editStation");
 		},
 		addGenre() {
 			const genre = this.$refs["new-genre"].value.toLowerCase().trim();

+ 2 - 2
frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -220,7 +220,7 @@ export default {
 			);
 		},
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapState("admin/unverifiedSongs", {
 			songs: state => state.songs
@@ -254,7 +254,7 @@ export default {
 	methods: {
 		edit(song) {
 			this.editSong(song);
-			this.openModal({ sector: "admin", modal: "editSong" });
+			this.openModal("editSong");
 		},
 		verify(song) {
 			this.socket.dispatch("songs.verify", song.youtubeId, res => {

+ 2 - 2
frontend/src/pages/Admin/tabs/Users.vue

@@ -84,7 +84,7 @@ export default {
 	},
 	computed: {
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -97,7 +97,7 @@ export default {
 	methods: {
 		edit(user) {
 			this.editingUserId = user._id;
-			this.openModal({ sector: "admin", modal: "editUser" });
+			this.openModal("editUser");
 		},
 		init() {
 			this.socket.dispatch("users.index", res => {

+ 2 - 2
frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -301,7 +301,7 @@ export default {
 				);
 		},
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapState("admin/verifiedSongs", {
 			songs: state => state.songs
@@ -347,7 +347,7 @@ export default {
 	methods: {
 		edit(song) {
 			this.editSong(song);
-			this.openModal({ sector: "admin", modal: "editSong" });
+			this.openModal("editSong");
 		},
 		remove(id) {
 			// eslint-disable-next-line

+ 5 - 25
frontend/src/pages/Home.vue

@@ -20,23 +20,13 @@
 						<div v-if="!loggedIn" class="buttons">
 							<button
 								class="button login"
-								@click="
-									openModal({
-										sector: 'header',
-										modal: 'login'
-									})
-								"
+								@click="openModal('login')"
 							>
 								Login
 							</button>
 							<button
 								class="button register"
-								@click="
-									openModal({
-										sector: 'header',
-										modal: 'register'
-									})
-								"
+								@click="openModal('register')"
 							>
 								Register
 							</button>
@@ -246,12 +236,7 @@
 				</div>
 				<a
 					v-if="loggedIn"
-					@click="
-						openModal({
-							sector: 'home',
-							modal: 'createCommunityStation'
-						})
-					"
+					@click="openModal('createCommunityStation')"
 					class="card station-card createStation"
 				>
 					<div class="card-image">
@@ -274,12 +259,7 @@
 				</a>
 				<a
 					v-else
-					@click="
-						openModal({
-							sector: 'header',
-							modal: 'login'
-						})
-					"
+					@click="openModal('login')"
 					class="card station-card createStation"
 				>
 					<div class="card-image">
@@ -493,7 +473,7 @@ export default {
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
 			userId: state => state.user.auth.userId,
-			modals: state => state.modalVisibility.modals.home
+			modals: state => state.modalVisibility.modals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"

+ 3 - 3
frontend/src/pages/Profile/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<div v-if="isUser">
-		<edit-playlist v-if="modals.station.editPlaylist" />
-		<report v-if="modals.station.report" />
-		<edit-song v-if="modals.admin.editSong" song-type="songs" />
+		<edit-playlist v-if="modals.editPlaylist" />
+		<report v-if="modals.report" />
+		<edit-song v-if="modals.editSong" song-type="songs" />
 
 		<metadata :title="`Profile | ${user.username}`" />
 		<main-header />

+ 3 - 8
frontend/src/pages/Profile/tabs/Playlists.vue

@@ -76,12 +76,7 @@
 				v-if="myUserId === userId"
 				class="button is-primary"
 				id="create-new-playlist-button"
-				@click="
-					openModal({
-						sector: 'station',
-						modal: 'createPlaylist'
-					})
-				"
+				@click="openModal('createPlaylist')"
 			>
 				Create new playlist
 			</button>
@@ -120,7 +115,7 @@ export default {
 	computed: {
 		...mapState({
 			...mapState("modalVisibility", {
-				modals: state => state.modals.station
+				modals: state => state.modals
 			}),
 			myUserId: state => state.user.auth.userId
 		}),
@@ -222,7 +217,7 @@ export default {
 	methods: {
 		showPlaylist(playlistId) {
 			this.editPlaylist(playlistId);
-			this.openModal({ sector: "station", modal: "editPlaylist" });
+			this.openModal("editPlaylist");
 		},
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])

+ 1 - 1
frontend/src/pages/Profile/tabs/RecentActivity.vue

@@ -69,7 +69,7 @@ export default {
 	computed: {
 		...mapState({
 			...mapState("modalVisibility", {
-				modals: state => state.modals.station
+				modals: state => state.modals
 			}),
 			myUserId: state => state.user.auth.userId
 		}),

+ 1 - 1
frontend/src/pages/Settings/index.vue

@@ -43,7 +43,7 @@
 		</div>
 		<main-footer />
 
-		<remove-account v-if="modals.settings.removeAccount" />
+		<remove-account v-if="modals.removeAccount" />
 	</div>
 </template>
 

+ 1 - 9
frontend/src/pages/Settings/tabs/Account.vue

@@ -83,15 +83,7 @@
 				</a>
 			</confirm>
 
-			<a
-				class="button is-danger"
-				@click="
-					openModal({
-						sector: 'settings',
-						modal: 'removeAccount'
-					})
-				"
-			>
+			<a class="button is-danger" @click="openModal('removeAccount')">
 				<i class="material-icons icon-with-button">delete</i>
 				Remove my account
 			</a>

+ 2 - 2
frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -67,7 +67,7 @@
 		<a
 			class="button create-playlist tab-actionable-button"
 			href="#"
-			@click="openModal({ sector: 'station', modal: 'createPlaylist' })"
+			@click="openModal('createPlaylist')"
 		>
 			<i class="material-icons icon-with-button">create</i>
 			<span class="optional-desktop-only-text"> Create Playlist </span>
@@ -175,7 +175,7 @@ export default {
 	methods: {
 		edit(id) {
 			this.editPlaylist(id);
-			this.openModal({ sector: "station", modal: "editPlaylist" });
+			this.openModal("editPlaylist");
 		},
 		selectPlaylist(id) {
 			if (this.station.type === "community" && this.station.partyMode) {

+ 2 - 12
frontend/src/pages/Station/Sidebar/Queue.vue

@@ -78,12 +78,7 @@
 						!station.locked ||
 						(station.locked && isAdminOnly() && dismissedWarning))
 			"
-			@click="
-				openModal({
-					sector: 'station',
-					modal: 'addSongToQueue'
-				})
-			"
+			@click="openModal('addSongToQueue')"
 		>
 			<i class="material-icons icon-with-button">queue</i>
 			<span class="optional-desktop-only-text"> Add Song To Queue </span>
@@ -91,12 +86,7 @@
 		<button
 			class="button is-primary tab-actionable-button"
 			v-if="loggedIn && station.type === 'official'"
-			@click="
-				openModal({
-					sector: 'station',
-					modal: 'requestSong'
-				})
-			"
+			@click="openModal('requestSong')"
 		>
 			<i class="material-icons icon-with-button">queue</i>
 			<span class="optional-desktop-only-text"> Request Song </span>

+ 8 - 17
frontend/src/pages/Station/index.vue

@@ -156,12 +156,7 @@
 								<!-- (Admin) Station Settings Button -->
 								<button
 									class="button is-primary"
-									@click="
-										openModal({
-											sector: 'station',
-											modal: 'editStation'
-										})
-									"
+									@click="openModal('editStation')"
 								>
 									<i class="material-icons icon-with-button"
 										>settings</i
@@ -566,26 +561,22 @@
 					</div>
 				</div>
 
-				<song-queue v-if="modals.station.addSongToQueue" />
-				<request-song v-if="modals.station.requestSong" />
-				<edit-playlist v-if="modals.station.editPlaylist" />
-				<create-playlist v-if="modals.station.createPlaylist" />
+				<song-queue v-if="modals.addSongToQueue" />
+				<request-song v-if="modals.requestSong" />
+				<edit-playlist v-if="modals.editPlaylist" />
+				<create-playlist v-if="modals.createPlaylist" />
 				<edit-station
-					v-if="modals.station.editStation"
+					v-if="modals.editStation"
 					:station-id="station._id"
 					sector="station"
 				/>
-				<report v-if="modals.station.report" />
+				<report v-if="modals.report" />
 			</div>
 
 			<main-footer v-if="exists" />
 		</div>
 
-		<edit-song
-			v-if="modals.admin.editSong"
-			song-type="songs"
-			sector="station"
-		/>
+		<edit-song v-if="modals.editSong" song-type="songs" sector="station" />
 
 		<floating-box id="player-debug-box" ref="playerDebugBox">
 			<template #body>

+ 26 - 40
frontend/src/store/modules/modalVisibility.js

@@ -2,33 +2,21 @@
 
 const state = {
 	modals: {
-		header: {
-			login: false,
-			register: false
-		},
-		home: {
-			createCommunityStation: false
-		},
-		station: {
-			addSongToQueue: false,
-			requestSong: false,
-			editPlaylist: false,
-			createPlaylist: false,
-			editStation: false,
-			report: false
-		},
-		settings: {
-			removeAccount: false
-		},
-		admin: {
-			editNews: false,
-			editUser: false,
-			editSong: false,
-			editStation: false,
-			editPlaylist: false,
-			viewReport: false,
-			viewPunishment: false
-		}
+		login: false,
+		register: false,
+		createCommunityStation: false,
+		addSongToQueue: false,
+		requestSong: false,
+		editPlaylist: false,
+		createPlaylist: false,
+		editStation: false,
+		report: false,
+		removeAccount: false,
+		editNews: false,
+		editUser: false,
+		editSong: false,
+		viewReport: false,
+		viewPunishment: false
 	},
 	currentlyActive: []
 };
@@ -36,17 +24,17 @@ const state = {
 const getters = {};
 
 const actions = {
-	closeModal: ({ commit }, data) => {
-		if (data.modal === "register")
+	closeModal: ({ commit }, modal) => {
+		if (modal === "register")
 			lofig.get("recaptcha.enabled").then(enabled => {
 				if (enabled) window.location.reload();
 			});
 
-		commit("closeModal", data);
+		commit("closeModal", modal);
 		commit("closeCurrentModal");
 	},
-	openModal: ({ commit }, data) => {
-		commit("openModal", data);
+	openModal: ({ commit }, modal) => {
+		commit("openModal", modal);
 	},
 	closeCurrentModal: ({ commit }) => {
 		commit("closeCurrentModal");
@@ -54,17 +42,15 @@ const actions = {
 };
 
 const mutations = {
-	closeModal(state, data) {
-		state.modals[data.sector][data.modal] = false;
+	closeModal(state, modal) {
+		state.modals[modal] = false;
 	},
-	openModal(state, data) {
-		state.modals[data.sector][data.modal] = true;
-		state.currentlyActive.unshift(data);
+	openModal(state, modal) {
+		state.modals[modal] = true;
+		state.currentlyActive.unshift(modal);
 	},
 	closeCurrentModal(state) {
-		const { sector, modal } = state.currentlyActive[0];
-		state.modals[sector][modal] = false;
-
+		state.modals[state.currentlyActive[0]] = false;
 		state.currentlyActive.shift();
 	}
 };