Added mode switching and delete-station confirmation.

frontend/app/js/components/CustomInput.jsx

@@ -117,6 +117,23 @@ const dictionary = {
 			},
 		],
 	},
+	stationMode: {
+		isRadio: true,
+		options: [
+			{
+				text: "Normal - Lorem ipsum lorem ipsum lorem ipsum",
+				value: "normal",
+			},
+			{
+				text: "Party - Lorem ipsum lorem ipsum lorem ipsum",
+				value: "party",
+			},
+			{
+				text: "DJ - Lorem ipsum lorem ipsum lorem ipsum",
+				value: "dj",
+			},
+		],
+	},
 	youTubeSearchQuery: {
 		inputType: "text",
 		isInput: true,

frontend/app/js/views/Station/Views/Settings.jsx

@@ -16,6 +16,8 @@ import io from "io";
 	displayName: state.station.get("displayName"),
 	description: state.station.get("description"),
 	privacy: state.station.get("privacy"),
+	partyEnabled: state.station.get("partyMode"),
+	queueLocked: state.station.get("locked"),
 }))
 export default class Settings extends Component {
 	constructor(props) {
@@ -25,6 +27,8 @@ export default class Settings extends Component {
 
 		this.state = {
 			privacy: props.privacy,
+			mode: this.getModeTemp(props.partyEnabled, props.queueLocked),
+			deleteButtonText: "Delete this station", //TODO Improve this
 		};
 	}
 
@@ -101,16 +105,172 @@ export default class Settings extends Component {
 		}
 	};
 
-	deleteStation = () => {
-		io.getSocket(socket => {
-			socket.emit('stations.remove', this.props.stationId, res => {
-				if (res.status === "success") {
-					this.messages.clearAddSuccess("Successfully deleted station.");
+	getModeTemp = (partyEnabled, queueLocked) => {
+		// If party enabled
+			// If queue locked
+				// Mode is DJ
+			// If queue not locked
+				// Mode party
+		// If party not enabled
+			// Mode is normal
+
+		if (partyEnabled) {
+			if (queueLocked) return "dj";
+			else return "party";
+		} else return "normal";
+	}
+
+	// This is temporary since the backend cannot be changed in this update.
+	changeModeHandlerTemp = (newMode, cb) => {
+		const previousMode = this.state.mode;
+
+		const disablePartyMode = (cb) => {
+			io.getSocket((socket) => {
+				socket.emit("stations.updatePartyMode", this.props.stationId, false, (res) => {
+					if (res.status === "success") {
+						cb();
+					} else {
+						cb(res.message);
+					}
+				});
+			});
+		}
+
+		const enablePartyMode = (cb) => {
+			io.getSocket((socket) => {
+				socket.emit("stations.updatePartyMode", this.props.stationId, true, (res) => {
+					if (res.status === "success") {
+						cb();
+					} else {
+						cb(res.message);
+					}
+				});
+			});
+		}
+
+		const disableQueueLock = (cb) => {
+			io.getSocket((socket) => {
+				socket.emit("stations.toggleLock", this.props.stationId, (res) => {
+					if (res.status === "success") {
+						if (res.data === false) {
+							cb();
+						} else {
+							disableQueueLock(cb);
+						}
+					} else {
+						cb(res.message);
+					}
+				});
+			});
+		}
+
+		const enableQueueLock = (cb) => {
+			io.getSocket((socket) => {
+				socket.emit("stations.toggleLock", this.props.stationId, (res) => {
+					if (res.status === "success") {
+						if (res.data === true) {
+							cb();
+						} else {
+							enableQueueLock(cb);
+						}
+					} else {
+						cb(res.message);
+					}
+				});
+			});
+		}
+
+		// Previous mode is "normal"
+			// New mode is "party"
+				// Enable party mode
+			// New mode is DJ
+				// Enable party mode
+				// Enable queue lock
+		// Previous mode is "party"
+			// New mode is normal
+				// Disable party
+				// Disable queue lock
+			// New mode is DJ
+				// Enable queue lock
+		// Previous mode is "DJ"
+			// New mode is normal
+				// Disable party mode
+				// Disable queue lock
+			// New mode is party
+				// Disable queue lock
+
+		if (previousMode === "normal") {
+			if (newMode === "party") {
+				enablePartyMode(cb);
+			} else if (newMode === "dj") {
+				enablePartyMode((err) => {
+					if (err) return cb(err);
+					else enableQueueLock(cb);
+				});
+			}
+		} else if (previousMode === "party") {
+			if (newMode === "normal") {
+				disablePartyMode((err) => {
+					if (err) return cb(err);
+					else disableQueueLock(cb);
+				});
+			} else if (newMode === "dj") {
+				enableQueueLock(cb);
+			}
+		} else if (previousMode === "dj") {
+			if (newMode === "normal") {
+				disablePartyMode((err) => {
+					if (err) return cb(err);
+					else disableQueueLock(cb);
+				});
+			} else if (newMode === "party") {
+				disableQueueLock(cb);
+			}
+		}
+	};
+
+	saveMode = () => {
+		this.messages.clearErrorSuccess();
+		if (CustomInput.hasInvalidInput(this.input, ["mode"])) {
+			this.messages.clearAddError(this.props.t("general:someFieldsAreIncorrectError"));
+		} else {
+			const mode = this.input.mode.getValue();
+			this.changeModeHandlerTemp(mode, (err) => {
+				if (err) {
+					this.messages.addError(err);
 				} else {
-					this.messages.addError(res.message);
+					this.messages.clearAddSuccess("Successfully saved mode.");
+					this.setState({
+						mode,
+					});
 				}
 			});
-		});
+		}
+	};
+
+	deleteStation = () => {
+		if (this.state.deleteButtonText === "Are you sure?") {
+			clearTimeout(this.state.deleteButtonTimeout);
+			io.getSocket(socket => {
+				socket.emit('stations.remove', this.props.stationId, res => {
+					if (res.status === "success") {
+						this.messages.clearAddSuccess("Successfully deleted station.");
+					} else {
+						this.messages.addError(res.message);
+					}
+				});
+			});
+		} else {
+			this.setState({
+				deleteButtonText: "Are you sure?",
+				deleteButtonTimeout: setTimeout(() => {
+					this.setState({
+						deleteButtonText: "Delete this station",
+						deleteButtonTimeout: null,
+					});
+				}, 10000),
+			});
+		}
 	};
 
 	render() {
@@ -132,7 +292,10 @@ export default class Settings extends Component {
 				<CustomInput key="privacy" type="stationPrivacy" name="privacy" label="Station privacy" placeholder="Station privacy" original={ this.state.privacy } onRef={ ref => (this.input.privacy = ref) } />
 				<button onClick={ this.savePrivacy }>Save privacy</button>
 
-				<button onClick={ this.deleteStation }>Delete station</button>
+				<CustomInput key="mode" type="stationMode" name="mode" label="Station mode" placeholder="Station mode" original={ this.state.mode } onRef={ ref => (this.input.mode = ref) } />
+				<button onClick={ this.saveMode }>Save mode</button>
+
+				<button onClick={ this.deleteStation }>{ this.state.deleteButtonText }</button>
 			</div>
 		);
 	}