Fix: player list manager, button style

src/web/js/player_list.js

@@ -22,6 +22,9 @@ function PlayerList(tagDiv, playerListManager) {
 
 	this.listRows = new Array();
 	for(var i = 0; i < id_list.length; i++) {
+		// console.log(playerEditButtonList[i]);
+		// console.log(playerDeleteButtonList[i]);
+
 		this.listRows[i] = new PlayerListRow(
 			id_list[i].getElementsByClassName("player_id"),
 			id_list[i].getElementsByClassName("player_name"),
@@ -30,6 +33,8 @@ function PlayerList(tagDiv, playerListManager) {
 			id_list[i].getElementsByClassName("player_delete")
 		);
 
+		$(this.listRows[i].playerID).empty();
+
 		$(this.listRows[i].editButton).click(function() {
 			playerListManager.editPlayer(this);
 		})
@@ -37,19 +42,14 @@ function PlayerList(tagDiv, playerListManager) {
 		$(this.listRows[i].deleteButton).click(function() {
 			playerListManager.deletePlayer(this);
 		})
-		// console.log(this.listRows[i]);
-		// console.log(this.listRows[i].playerName.val());
 
 		this.disableItem(this.listRows[i]);
 	}
 }
 
 PlayerList.prototype.disableItem = function(item) {
-	$(item.playerID).empty();
 	$(item.playerName).prop("disabled", true);
 	$(item.enterCode).prop("disabled", true);
-	// $(item.playerName).prop("readonly", true);
-	// $(item.enterCode).prop("readonly", true);
 	$(item.editButton).prop("disabled", true);
 	$(item.deleteButton).prop("disabled", true);
 }
@@ -57,8 +57,6 @@ PlayerList.prototype.disableItem = function(item) {
 PlayerList.prototype.enableItem = function(item) {
 	$(item.playerName).prop("disabled", false);
 	$(item.enterCode).prop("disabled", false);
-	// $(item.playerName).prop("readonly", false);
-	// $(item.enterCode).prop("readonly", false);
 	$(item.editButton).prop("disabled", false);
 	$(item.deleteButton).prop("disabled", false);
 }

src/web/js/player_list_manager.js

@@ -72,6 +72,8 @@ PlayerListManager.prototype.updateAddPlayerListPage = function(pageNo) {
 		"maestro_id=" + maestroID + "&start_no=" + startNo + "&end_no=" + endNo,
 
 		(function(jsonData) {
+			console.log("updateAddPlayerListPage");
+			console.log(jsonData);
 			this.playerCount = jsonData["playerList"].length;
 			this.list.updatePlayerList(jsonData["playerList"]);
 			this.listNavigator.updateNavigator(this.activePageNo, this.lastPageNo);
@@ -135,25 +137,30 @@ PlayerListManager.prototype.updateSearchPlayerListPage = function(playerName, pa
 	);
 }
 
+PlayerListManager.prototype.refreshAddPlayerListPage = function() {
+	this.loadAddPlayerListPage(this.activePageNo);
+}
 
+PlayerListManager.prototype.refreshSearchPlayerListPage = function() {
+	this.updateSearchPlayerListPage(this.searchPlayerName, this.activePageNo);
+}
 
 
 PlayerListManager.prototype.editPlayer = function(inputButton) {
 	// console.log(inputButton);
 	// var clickedObjectID = this.getClickedObjectID(inputButton);
 
-
-	var id = $(inputButton).siblings(".player_id");
+	var id = $(inputButton).parent().siblings(".player_id");
 	var playerID = id.text();
 	// console.log(playerID);
 
-	var name = $(inputButton).siblings(".player_name");
+	var name = $(inputButton).parent().siblings(".player_name");
 	var playerName = name.val();
-	console.log(playerName);
+	// console.log(playerName);
 
-	var enterCode = $(inputButton).siblings(".player_entercode");
+	var enterCode = $(inputButton).parent().siblings(".player_entercode");
 	var playerEnterCode = enterCode.val();
-	console.log(playerEnterCode);
+	// console.log(playerEnterCode);
 
 	if(!accountValidator.isValidPlayerID(playerName)) {
 		// console.log("Error - playerName : " + playerName);
@@ -177,9 +184,13 @@ PlayerListManager.prototype.editPlayer = function(inputButton) {
 		(function(jsonData) {
 			// console.log(jsonData);
 			if(this.playerListID === "add_player_list") {
-				this.setupAddPlayerList();
+				// this.setupAddPlayerList();
+				refreshAddPlayerList();
+				refreshSearchPlayerList();
 			} else if(this.playerListID === "search_player_list") {
-				this.setupSearchPlayerList(this.searchPlayerName);
+				// this.setupSearchPlayerList(this.searchPlayerName);
+				refreshAddPlayerList();
+				refreshSearchPlayerList();
 			}
 			showErrorMessage("학생 데이터가 [ " + playerName + " / " + playerEnterCode + " ] 으로 변경되었습니다.", "success");
 		}).bind(this),
@@ -192,10 +203,10 @@ PlayerListManager.prototype.editPlayer = function(inputButton) {
 }
 
 PlayerListManager.prototype.deletePlayer = function(inputButton) {
-	var id = $(inputButton).siblings(".player_id");
+	var id = $(inputButton).parent().siblings(".player_id");
 	var playerID = id.text();
 
-	var name = $(inputButton).siblings(".player_name");
+	var name = $(inputButton).parent().siblings(".player_name");
 	var playerName = name.val();
 	// console.log(playerName);
 
@@ -210,11 +221,15 @@ PlayerListManager.prototype.deletePlayer = function(inputButton) {
 
 		(function(jsonData) {
 			if(this.playerListID === "add_player_list") {
-				this.setupAddPlayerList();
+				// this.setupAddPlayerList();
+				refreshAddPlayerList();
+				refreshSearchPlayerList();
 			} else if(this.playerListID === "search_player_list") {
-				this.setupSearchPlayerList(this.searchPlayerName);
+				// this.setupSearchPlayerList(this.searchPlayerName);
+				refreshAddPlayerList();
+				refreshSearchPlayerList();
 			}
-			showErrorMessage("[ " + playerName + "] 학생 데이터가 삭제되었습니다.", "success");
+			showErrorMessage("[ " + playerName + " ] 학생 데이터가 삭제되었습니다.", "success");
 
 			onChangePlayerCount();
 		}).bind(this),

src/web/module/maestro_section_add_player.html

@@ -144,95 +144,135 @@ function onErrorPlayerPW(message) {
 
 
 	<div class="col-7 border border-warning rounded" style="background-color: #ffeab6">
-		<h5 class="my-3">학생 목록</h5>
+		<h5 class="mt-3">학생 목록</h5>
 
 		<form id="add_player_list">
-			<div class="form-group row mx-2 mb-0 font-weight-bold">
+			<div class="form-group row mx-2 my-0 text-center">
 				<label class="col-form-label d-none">ID</label>
 				<label class="col-form-label col-sm">이 름</label>
 				<label class="col-form-label col-sm">입장 번호</label>
-				<label class="col-form-label col-sm-1"></label>
-				<label class="col-form-label col-sm-1"></label>
+				<label class="col-form-label px-0 col-sm-1">수정</label>
+				<label class="col-form-label px-0 col-sm-1">삭제</label>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test1">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test2">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test3">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test4">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test5">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test6">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test7">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test8">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test9">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test10">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="✎">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 		</form>

src/web/module/maestro_section_main.html

@@ -3,6 +3,9 @@
 var maestroInfo = new MaestroInfo();
 var isMaestroInfoLoaded = false;
 
+var addPlayerListManager = null;
+var searchPlayerListManager = null;
+
 
 $(document).ready(function() {
 	$("#section_add_player").load("./../module/maestro_section_add_player.html");
@@ -61,6 +64,14 @@ function onLoadFailMaestroInfo(errorMessage, errorCode) {
 	console.log("errorCode : " + errorCode);
 }
 
+function refreshAddPlayerList() {
+	addPlayerListManager.refreshAddPlayerListPage();
+}
+
+function refreshSearchPlayerList() {
+	searchPlayerListManager.refreshSearchPlayerListPage();
+}
+
 function onChangePlayerCount() {
 	maestroInfo.loadMaestroInfo(onLoadSuccessMaestroInfo, onLoadFailMaestroInfo);
 }

src/web/module/maestro_section_search.html

@@ -61,95 +61,135 @@ function searchPlayer() {
 
 
 	<div class="col-7 border border-warning rounded" style="background-color: #ffeab6">
-		<h5 class="my-3">검색 결과</h5>
+		<h5 class="mt-3">검색 결과</h5>
 
 		<form id="search_player_list">
-			<div class="form-group row mx-2 mb-0 font-weight-bold">
+			<div class="form-group row mx-2 mb-0 text-center">
 				<label class="col-form-label d-none">ID</label>
 				<label class="col-form-label col-sm">이 름</label>
 				<label class="col-form-label col-sm">입장 번호</label>
-				<label class="col-form-label col-sm-1"></label>
-				<label class="col-form-label col-sm-1"></label>
+				<label class="col-form-label px-0 col-sm-1">수정</label>
+				<label class="col-form-label px-0 col-sm-1">삭제</label>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test1">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test2">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test3">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test4">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test5">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test6">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test7">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test8">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test9">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 			<div class="form-group player-list row mx-2 mb-1">
-				<input type="text" class="player_id d-none" value="test10">
-				<input type="text" class="player_name col-sm" value="">
-				<input type="number" class="player_entercode col-sm" min="10" step="1" maxlength="8" value="">
-				<input type="button" class="player_edit col-sm-1" value="+">
-				<input type="button" class="player_delete col-sm-1" value="-">
+				<div class="input-group">
+					<input type="text" class="form-control player_id d-none">
+					<input type="text" class="form-control player_name col-sm">
+					<input type="text" class="form-control player_entercode col-sm" min="10" step="1" maxlength="8">
+					<div class="input-group-append">
+						<button class="player_edit btn btn-primary" type="button"> ✎ </button>
+						<button class="player_delete btn btn-danger" type="button"> X </button>
+					</div>
+				</div>
 			</div>
 
 		</form>