Fix: apply bootstrap - mouse, typing app

src/web/js/player_list.js

@@ -53,6 +53,8 @@ class PlayerList {
 		$(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);
 	}
@@ -60,6 +62,8 @@ class PlayerList {
 	enableItem(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/module/home_section.html

@@ -22,9 +22,7 @@ function loadMaestroExperienceAccount() {
 		},
 
 		(errorMessage, errorCode) => {
-			if($("#error_message").length) {
-				$("#error_message").text(errorMessage);
-			}
+			showErrorMessage(errorMessage, "error");
 		}
 
 	);

src/web/module/maestro_section_main.html

@@ -69,15 +69,15 @@ function onChangePlayerCount() {
 		</div>
 
 		<div class="tab-pane fade my-3" id="search" role="tabpanel" aria-labelledby="search-tab">
-			<div id="section_search_player" class="hide"></div>
+			<div id="section_search_player"></div>
 		</div>
 
 		<div class="tab-pane fade my-3" id="mouse" role="tabpanel" aria-labelledby="mouse-tab">
-			<div id="mouse_app_list" class="hide"></div>
+			<div id="mouse_app_list"></div>
 		</div>
 
 		<div class="tab-pane fade my-3" id="typing" role="tabpanel" aria-labelledby="typing-tab">
-			<div id="typing_app_list" class="hide"></div>
+			<div id="typing_app_list"></div>
 		</div>
 
 	</div>

src/web/module/maestro_section_mouse_app.html

@@ -17,9 +17,7 @@ function loadMouseApp() {
 		},
 
 		(errorMessage, errorCode) => {
-			if($("#error_message").length) {
-				$("#error_message").text(errorMessage);
-			}
+			showErrorMessage(errorMessage, "error");
 		}
 
 	);
@@ -31,14 +29,24 @@ function makeMouseAppList(appList) {
 	for(let i = 0; i < appList.length; i++) {
 		let appData = appList[i];
 
-		$("#mouse_app_content").append(
+		$("#mouse_app_content").append('\
+				<div class="form-check col col-sm-2">\
+					<input class="form-check-input" type="checkbox" id="' + appData.appID + '" data-app-id="' + appData.appID + '" value="">\
+					<label class="form-check-label" for="' + appData.appID + '">\
+						' + appData.koreanName + '\
+					</label>\
+				</div>\
+\
+		');
+			/*
 			"<span>"
 				+ "<input type='checkbox' id='checkbox" + appData.appID + "' data-app-id='" + appData.appID + "' />"
 				+ "<label for='checkbox" + appData.appID + "'>" + appData.koreanName + "</label>"
 			+ "</span>"
 		);
+		*/
 
-		$("#checkbox" + appData.appID).change(function() {
+		$("#" + appData.appID).change(function() {
 			if($(this).is(":checked")) {
 				activateApp($(this).data("appId"));
 			} else {
@@ -52,7 +60,7 @@ function activateMouseApp(activatedList) {
 	for(let i = 0; i < activatedList.length; i++) {
 		let activatedAppID = activatedList[i].appID;
 
-		let input = $("#checkbox" + activatedAppID);
+		let input = $("#" + activatedAppID);
 		input.prop("checked", true);
 	}
 }
@@ -68,9 +76,8 @@ function activateApp(appID) {
 		},
 
 		(errorMessage, errorCode) => {
-			if($("#error_message").length) {
-				$("#error_message").text(errorMessage);
-			}
+			console.log("errorMessage : " + errorMessage);
+			showErrorMessage(errorMessage, "error");
 		}
 
 	);
@@ -86,9 +93,8 @@ function deactivateApp(appID) {
 		},
 
 		(errorMessage, errorCode) => {
-			if($("#error_message").length) {
-				$("#error_message").text(errorMessage);
-			}
+			console.log("errorMessage : " + errorMessage);
+			showErrorMessage(errorMessage, "error");
 		}
 
 	);
@@ -98,21 +104,15 @@ function deactivateApp(appID) {
 
 
 
-<div id="mouse_app_content">
+<div class="row mx-1">
+	<div class="col">
 
-	<span>
-		<input type="checkbox" id="checkbox1" checked="checked" />
-		<label for="checkbox1">Option 1</label>
-	</span>
+		<h5 class="mt-2 mb-2">마우스 연습</h5>
 
-	<span>
-		<input type="checkbox" id="checkbox2" checked="checked" />
-		<label for="checkbox2">Option 2</label>
-	</span>
-
-	<span>
-		<input type="checkbox" id="checkbox3" checked="checked" />
-		<label for="checkbox3">Option 3</label>
-	</span>
+		<form class="mx-4">
+			<div class="form-row" id="mouse_app_content">
+			</div>
+		</form>
 
 	</div>
+</div>

src/web/module/maestro_section_typing_app.html

@@ -17,10 +17,7 @@ function loadTypingApp() {
 		},
 
 		(errorMessage, errorCode) => {
-			console.log(errorMessage);
-			if($("#error_message").length) {
-				$("#error_message").text(errorMessage);
-			}
+			showErrorMessage(errorMessage, "error");
 		}
 
 	);
@@ -49,14 +46,18 @@ function makeTypingAppList(appList) {
 			divTag = $("#typing_test_eng");
 		else
 			divTag = $("#typing_app");
-		divTag.append(
-			"<span>"
-				+ "<input type='checkbox' id='checkbox" + appData.appID + "' data-app-id='" + appData.appID + "' />"
-				+ "<label for='checkbox" + appData.appID + "'>" + appData.koreanName + "</label>"
-			+ "</span>"
-		);
 
-		$("#checkbox" + appData.appID).change(function() {
+		divTag.append('\
+				<div class="form-check col col-sm-2">\
+					<input class="form-check-input" type="checkbox" id="' + appData.appID + '" data-app-id="' + appData.appID + '" value="">\
+					<label class="form-check-label" for="' + appData.appID + '">\
+						' + appData.koreanName + '\
+					</label>\
+				</div>\
+\
+			');
+
+		$("#" + appData.appID).change(function() {
 			if($(this).is(":checked")) {
 				activateApp($(this).data("appId"));
 			} else {
@@ -70,7 +71,7 @@ function activateTypingApp(activatedList) {
 	for(let i = 0; i < activatedList.length; i++) {
 		let activatedAppID = activatedList[i].appID;
 
-		let input = $("#checkbox" + activatedAppID);
+		let input = $("#" + activatedAppID);
 		input.prop("checked", true);
 	}
 }
@@ -79,23 +80,42 @@ function activateTypingApp(activatedList) {
 
 
 
-<div id="typing_app_content">
+<div class="row mx-1">
+	<div class="col">
 
-	<div>
-		<h1>자리 연습</h1>
-		<div id="typing_practice_kor"></div>
-		<div id="typing_practice_eng"></div>
+		<h5 class="mt-2 mb-2">자리 연습</h5>
+		<form class="mx-4">
+			<p class="lead mb-0">한글</p>
+			<hr class="my-1"/>
+			<div class="form-row" id="typing_practice_kor">
 			</div>
 
-	<div>
-		<h1>타자 시험</h1>
-		<div id="typing_test_kor"></div>
-		<div id="typing_test_eng"></div>
+			<p class="lead mt-3 mb-0">English</p>
+			<hr class="my-1"/>
+			<div class="form-row" id="typing_practice_eng">
+			</div>
+		</form>
+
+
+		<h5 class="mt-4 mb-2">타자 시험</h5>
+		<form class="mx-4">
+			<p class="lead mb-0">한글</p>
+			<hr class="my-1"/>
+			<div class="form-row" id="typing_test_kor">
 			</div>
 
-	<div>
-		<h1>타자 앱</h1>
-		<div id="typing_app"></div>
+			<p class="lead mt-3 mb-0">English</p>
+			<hr class="my-1"/>
+			<div class="form-row" id="typing_test_eng">
 			</div>
+		</form>
+
+
+		<h5 class="mt-4 mb-2">타자 앱</h5>
+		<form class="mx-4">
+			<div class="form-row" id="typing_app">
+			</div>
+		</form>
 
 	</div>
+</div>

src/web/server/app/activate_app.php

@@ -1,17 +1,18 @@
 <?php
 header('Content-Type: application/json');
 
+include "./../lib/send_reply_json.php";
+include "./../setup/connect_db.php";
+
 $maestroID = $_POST["maestro_id"];
 $appID = $_POST["app_id"];
 
-include "./../setup/connect_db.php";
-
 
 activate_app($maestroID, $appID);
 
-$replyJSON["RESULT"] = "ok";
-echo json_encode($replyJSON, JSON_UNESCAPED_UNICODE);
-$db_conn->close();
+set_data("activatedAppList", $activated_mouse_app_list);
+send_result_success();
+exit;
 
 
 function activate_app($maestroID, $appID) {

src/web/server/app/deactivate_app.php

@@ -1,17 +1,18 @@
 <?php
 header('Content-Type: application/json');
 
+include "./../lib/send_reply_json.php";
+include "./../setup/connect_db.php";
+
 $maestroID = $_POST["maestro_id"];
 $appID = $_POST["app_id"];
 
-include "./../setup/connect_db.php";
-
 
 deactivate_app($maestroID, $appID);
 
-$replyJSON["RESULT"] = "ok";
-echo json_encode($replyJSON, JSON_UNESCAPED_UNICODE);
-$db_conn->close();
+set_data("activatedAppList", $activated_mouse_app_list);
+send_result_success();
+exit;
 
 
 function deactivate_app($maestroID, $appID) {