chocomae/src/web/js/player_list.js

class PlayerListRow {

	constructor(playerID, playerName, enterCode, editButton, deleteButton) {
		this.playerID = playerID;
		this.playerName = playerName;
		this.enterCode = enterCode;
		this.editButton = editButton;
		this.deleteButton = deleteButton;
	}

}

class PlayerList {

	constructor(parent) {
		let self = this;
		this.listParent = parent;
		// console.log(parent);

		let id_list = parent.find(".player_id");
		// console.log(id_list);

		this.listRows = new Array();
		for(let i = 0; i < id_list.length; i++) {
			this.listRows[i] = new PlayerListRow(
				id_list[i],	// span
				$(id_list[i]).siblings(".player_name"),
				$(id_list[i]).siblings(".player_entercode"),
				$(id_list[i]).siblings(".player_edit"),
				$(id_list[i]).siblings(".player_delete")
			);

			$(id_list[i]).siblings(".player_edit").click(function() {
				self.editPlayer(this);
			})

			$(id_list[i]).siblings(".player_delete").click(function() {
				self.deletePlayer(this);
			})
			// console.log(this.listRows[i].playerName.val());
			// console.log(this.listRows[i]);
		}
	}

	updatePlayerList(jsonData) {
		// console.log(jsonData);

		for(let i = 0; i < 10; i++) {
			$(this.listRows[i].playerID).empty();

			if(i < jsonData.length) {
				$(this.listRows[i].playerID).append(jsonData[i]["UserID"]);

				$(this.listRows[i].playerName).val(jsonData[i]["Name"]);
				$(this.listRows[i].playerName).prop("disabled", false);

				$(this.listRows[i].enterCode).val(jsonData[i]["EnterCode"]);
				$(this.listRows[i].enterCode).prop("disabled", false);

				$(this.listRows[i].editButton).prop("disabled", false);
				$(this.listRows[i].deleteButton).prop("disabled", false);
			} else {
				$(this.listRows[i].playerName).val("");
				$(this.listRows[i].playerName).prop("disabled", true);

				$(this.listRows[i].enterCode).val("");
				$(this.listRows[i].enterCode).prop("disabled", true);

				$(this.listRows[i].editButton).prop("disabled", true);
				$(this.listRows[i].deleteButton).prop("disabled", true);
			}
		}
	}

	editPlayer(inputButton) {
		// console.log(inputButton);

		let id = $(inputButton).siblings(".player_id");
		// console.log(id);
		let playerID = id.text();

		console.log(playerID);
	}

	deletePlayer(inputButton) {
		let id = $(inputButton).siblings(".player_id");
		let playerID = id.text();

		if(playerID === null || playerID === "")
			return;

		let xhr = new XMLHttpRequest(); //new로 생성.
		xhr.open('POST', './../server/user/delete_player.php', true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("maestro_id=" + maestroID + "&player_id=" + playerID);
		xhr.onload = function() {
			if(xhr.readyState === 4 && xhr.status === 200) {
				// console.log(xhr.responseText);
				// console.log(xhr.responseText.length);
				if(xhr.responseText.length === 0 || xhr.responseText === null) {
					console.log("no data from server");
					return;
				}

				let replyJSON = JSON.parse(xhr.responseText);
				// console.log(replyJSON);

				if(replyJSON === null) {
					console.log("no data from server");
					return;
				}

				if(replyJSON["ERROR"] !== undefined || replyJSON["RESULT"] === undefined) {
					console.log(replyJSON["ERROR"]);
					return;
				}

				if(replyJSON["RESULT"] === "fail") {
					console.log(replyJSON["RESULT"]);
					return;
				}

				console.log("update player list");
				loadPlayerListPage(1);
			}
		}
	}
}


function loadPlayerListPage(pageNo) {
	playerListPage = pageNo;

	let pageIndex = pageNo - 1;
	let startNo = pageIndex * 10;
	let endNo = pageIndex * 10 + 9;

	let xhr = new XMLHttpRequest(); //new로 생성.
	xhr.open('POST', './../server/user/registered_player_list_page.php', true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("maestro_id=" + maestroID + "&start_no=" + startNo + "&end_no=" + endNo);
	xhr.onload = function() {
		if(xhr.readyState === 4 && xhr.status === 200) {
			// console.log(xhr.responseText);
			// console.log(xhr.responseText.length);
			if(xhr.responseText.length === 0 || xhr.responseText === null) {
				console.log("no data from server");
				return;
			}

			let replyJSON = JSON.parse(xhr.responseText);
			// console.log(replyJSON);

			if(replyJSON === null) {
				console.log("no data from server");
				return;
			}

			if(replyJSON["ERROR"] !== undefined || replyJSON["RESULT"] === undefined) {
				console.log(replyJSON["ERROR"]);
				return;
			}

			if(replyJSON["RESULT"] === "fail") {
				console.log(replyJSON["RESULT"]);
				return;
			}

			// console.log(replyJSON["PlayerList"]);
			// updatePlayerListPage(replyJSON["PlayerList"]);
			addPlayerList.updatePlayerList(replyJSON["PlayerList"]);
		}
	}
}