static async openTrack(track) {

		// Open popup
		this.popup.innerHTML = "";
		this.popup.style.bottom = 0;
		this.popup.style.height ="auto";

		// Add "add label" row
		const addLabel = Api.createElement("div", { classList: "row" });
		addLabel.addEventListener("click", async () => {

			this.close();
			const popup = new BigPopup("Choose labels", "api/v1/tracks/add-labels/" + track.id + "/", "POST", "add-labels");
			const labels = await Api.get.labels();

			let i = 1;
			for(const l of labels) {
				const el = Api.createElement("div", { innerHTML: l.name, classList: "add-label", value: l.publicID });
				el.setAttribute("name", "input");
				el.dataset.selected = (track.labels.some(l2 => l2.publicID === l.publicID) ? "true" : "false");
				el.dataset.item = "label-" + i++;
				el.addEventListener("click", () => { el.dataset.selected = (el.dataset.selected === "true" ? "false" : "true"); });
				popup.addElement(el);
			}
			popup.show("Add");
			HtmlJsForm.findById("add-labels").addCallback(async () => { await Api.get.tracks(); Api.show.tracks(Collection.filter()); });

		});
		addLabel.appendChild(Api.createIcon("add"));
		addLabel.appendChild(Api.createElement("p", { innerHTML: "Add labels" }));
		this.popup.appendChild(addLabel);



		// For each added label
		for(const l of track.labels) {

			// Add "Remove label" row
			const removeLabel = Api.createElement("div", { classList: "row" });
			removeLabel.addEventListener("click", async () => {
				this.close();
				const res = await Api.sendRequest("api/v1/tracks/remove-labels/" + track.id + "/" + l.publicID, "POST");
				Popup.show(res.message || res.error, (res.code >= 200 && res.code <= 299 ? "success" : "error"), 5000);
				await Api.get.tracks();
				Api.show.tracks(Collection.filter());
			});
			removeLabel.appendChild(Api.createIcon("delete"));
			removeLabel.appendChild(Api.createElement("p", { innerHTML: "Remove \"" + l.name +"\"" }));
			this.popup.appendChild(removeLabel);

		}



		// Add "delete track" row
		const deleteTrack = Api.createElement("div", { classList: "row" });
		deleteTrack.addEventListener("click", async () => {

			this.close();
			const res = await Api.sendRequest("api/v1/tracks/" + track.id + "/delete", "DELETE");
			Popup.show(res.message || res.error, (res.code >= 200 && res.code <= 299 ? "success" : "error"), 5000);
			await Api.get.tracks();
			Api.show.tracks(Collection.filter());

		});
		deleteTrack.appendChild(Api.createIcon("delete"));
		deleteTrack.appendChild(Api.createElement("p", { innerHTML: "Remove song" }));
		this.popup.appendChild(deleteTrack);



		// Add "close popup" row
		const closePopup = Api.createElement("div", { classList: "row" });
		closePopup.addEventListener("click", () => {
			this.close();
		});
		closePopup.appendChild(Api.createIcon("menu/menu-close"));
		closePopup.appendChild(Api.createElement("p", { innerHTML: "Close" }));
		this.popup.appendChild(closePopup);

		// Set height
		this.popup.style.height = (this.popup.clientHeight + 16) + "px";

	}
/**
	 * Opens a track and its options
	 * 
	 * @param {object} track The track object
	 */
Opens a track and its options

@param {object} track The track object
Opens a track and its options @param { object } track The track object
static async openTrack(track) {
		this.popup.innerHTML = "";
		this.popup.style.bottom = 0;
		this.popup.style.height ="auto";
		const addLabel = Api.createElement("div", { classList: "row" });
		addLabel.addEventListener("click", async () => {
			this.close();
			const popup = new BigPopup("Choose labels", "api/v1/tracks/add-labels/" + track.id + "/", "POST", "add-labels");
			const labels = await Api.get.labels();
			let i = 1;
			for(const l of labels) {
				const el = Api.createElement("div", { innerHTML: l.name, classList: "add-label", value: l.publicID });
				el.setAttribute("name", "input");
				el.dataset.selected = (track.labels.some(l2 => l2.publicID === l.publicID) ? "true" : "false");
				el.dataset.item = "label-" + i++;
				el.addEventListener("click", () => { el.dataset.selected = (el.dataset.selected === "true" ? "false" : "true"); });
				popup.addElement(el);
			}
			popup.show("Add");
			HtmlJsForm.findById("add-labels").addCallback(async () => { await Api.get.tracks(); Api.show.tracks(Collection.filter()); });
		});
		addLabel.appendChild(Api.createIcon("add"));
		addLabel.appendChild(Api.createElement("p", { innerHTML: "Add labels" }));
		this.popup.appendChild(addLabel);
		for(const l of track.labels) {
			const removeLabel = Api.createElement("div", { classList: "row" });
			removeLabel.addEventListener("click", async () => {
				this.close();
				const res = await Api.sendRequest("api/v1/tracks/remove-labels/" + track.id + "/" + l.publicID, "POST");
				Popup.show(res.message || res.error, (res.code >= 200 && res.code <= 299 ? "success" : "error"), 5000);
				await Api.get.tracks();
				Api.show.tracks(Collection.filter());
			});
			removeLabel.appendChild(Api.createIcon("delete"));
			removeLabel.appendChild(Api.createElement("p", { innerHTML: "Remove \"" + l.name +"\"" }));
			this.popup.appendChild(removeLabel);
		}
		const deleteTrack = Api.createElement("div", { classList: "row" });
		deleteTrack.addEventListener("click", async () => {
			this.close();
			const res = await Api.sendRequest("api/v1/tracks/" + track.id + "/delete", "DELETE");
			Popup.show(res.message || res.error, (res.code >= 200 && res.code <= 299 ? "success" : "error"), 5000);
			await Api.get.tracks();
			Api.show.tracks(Collection.filter());
		});
		deleteTrack.appendChild(Api.createIcon("delete"));
		deleteTrack.appendChild(Api.createElement("p", { innerHTML: "Remove song" }));
		this.popup.appendChild(deleteTrack);
		const closePopup = Api.createElement("div", { classList: "row" });
		closePopup.addEventListener("click", () => {
			this.close();
		});
		closePopup.appendChild(Api.createIcon("menu/menu-close"));
		closePopup.appendChild(Api.createElement("p", { innerHTML: "Close" }));
		this.popup.appendChild(closePopup);
		this.popup.style.height = (this.popup.clientHeight + 16) + "px";
	}
static async openTrack ( track ) { this . popup . innerHTML = "" ; this . popup . style . bottom = 0 ; this . popup . style . height = "auto" ; const addLabel = Api . createElement ( "div" , { classList : "row" } ) ; addLabel . addEventListener ( "click" , async ( ) => { this . close ( ) ; const popup = new BigPopup ( "Choose labels" , "api/v1/tracks/add-labels/" + track . id + "/" , "POST" , "add-labels" ) ; const labels = await Api . get . labels ( ) ; let i = 1 ; for ( const l of labels ) { const el = Api . createElement ( "div" , { innerHTML : l . name , classList : "add-label" , value : l . publicID } ) ; el . setAttribute ( "name" , "input" ) ; el . dataset . selected = ( track . labels . some ( l2 => l2 . publicID === l . publicID ) ? "true" : "false" ) ; el . dataset . item = "label-" + i ++ ; el . addEventListener ( "click" , ( ) => { el . dataset . selected = ( el . dataset . selected === "true" ? "false" : "true" ) ; } ) ; popup . addElement ( el ) ; } popup . show ( "Add" ) ; HtmlJsForm . findById ( "add-labels" ) . addCallback ( async ( ) => { await Api . get . tracks ( ) ; Api . show . tracks ( Collection . filter ( ) ) ; } ) ; } ) ; addLabel . appendChild ( Api . createIcon ( "add" ) ) ; addLabel . appendChild ( Api . createElement ( "p" , { innerHTML : "Add labels" } ) ) ; this . popup . appendChild ( addLabel ) ; for ( const l of track . labels ) { const removeLabel = Api . createElement ( "div" , { classList : "row" } ) ; removeLabel . addEventListener ( "click" , async ( ) => { this . close ( ) ; const res = await Api . sendRequest ( "api/v1/tracks/remove-labels/" + track . id + "/" + l . publicID , "POST" ) ; Popup . show ( res . message || res . error , ( res . code >= 200 && res . code <= 299 ? "success" : "error" ) , 5000 ) ; await Api . get . tracks ( ) ; Api . show . tracks ( Collection . filter ( ) ) ; } ) ; removeLabel . appendChild ( Api . createIcon ( "delete" ) ) ; removeLabel . appendChild ( Api . createElement ( "p" , { innerHTML : "Remove \"" + l . name + "\"" } ) ) ; this . popup . appendChild ( removeLabel ) ; } const deleteTrack = Api . createElement ( "div" , { classList : "row" } ) ; deleteTrack . addEventListener ( "click" , async ( ) => { this . close ( ) ; const res = await Api . sendRequest ( "api/v1/tracks/" + track . id + "/delete" , "DELETE" ) ; Popup . show ( res . message || res . error , ( res . code >= 200 && res . code <= 299 ? "success" : "error" ) , 5000 ) ; await Api . get . tracks ( ) ; Api . show . tracks ( Collection . filter ( ) ) ; } ) ; deleteTrack . appendChild ( Api . createIcon ( "delete" ) ) ; deleteTrack . appendChild ( Api . createElement ( "p" , { innerHTML : "Remove song" } ) ) ; this . popup . appendChild ( deleteTrack ) ; const closePopup = Api . createElement ( "div" , { classList : "row" } ) ; closePopup . addEventListener ( "click" , ( ) => { this . close ( ) ; } ) ; closePopup . appendChild ( Api . createIcon ( "menu/menu-close" ) ) ; closePopup . appendChild ( Api . createElement ( "p" , { innerHTML : "Close" } ) ) ; this . popup . appendChild ( closePopup ) ; this . popup . style . height = ( this . popup . clientHeight + 16 ) + "px" ; }
Opens a track and its options
Opens a track and its options
// Open popup // Add "add label" row // For each added label // Add "Remove label" row // Add "delete track" row // Add "close popup" row // Set height