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);

		this.playerCount = 0;
		this.playerListPage = 1;

		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")
			);

			this.disableItem(this.listRows[i]);

			$(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]);
		}
	}

	disableItem(item) {
		$(item.playerID).empty();
		$(item.playerName).prop("disabled", true);
		$(item.enterCode).prop("disabled", true);
		$(item.editButton).prop("disabled", true);
		$(item.deleteButton).prop("disabled", true);
	}

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

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

			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);
			}
		}
	}

	loadPlayerListPage(pageNo) {
		self = this;
		this.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"]);
				self.updatePlayerList(replyJSON["PlayerList"]);

				self.playerCount = replyJSON["PlayerList"].length;
			}
		}
	}
}