Add: Group check box for typing app list

src/web/maestro/main_menu.html

@@ -12,12 +12,6 @@
 	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 	<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
-<!-- 
-	<link rel="stylesheet" type="text/css" href="./../css/module.css">
-	<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
-	<link rel="stylesheet" type="text/css" href="./../css/maestro_main.css">
- -->
-
 	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="./../js/main.js"></script>
 	<script type="text/javascript" src="./../js/lib/account_validator.js"></script>

src/web/module/maestro_section_main.html

@@ -37,6 +37,40 @@ function onClickMaestroUpgrade() {
 	location.href='./../maestro/upgrade.html';
 }
 
+function activateApp(appID) {
+	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
+		"./../server/app/activate_app.php",
+		"maestro_id=" + maestroID + "&app_id=" + appID,
+
+		(function(jsonData) {
+			// console.log(jsonData);
+			showErrorMessage("[ " + jsonData["koreanName"] + "] 앱이 메뉴에 추가되었습니다. (위의 [마에스트로 앱 실행] 버튼을 눌러 확인해보세요)", "success");
+		}),
+
+		(function(errorMessage, errorCode) {
+			showErrorMessage(errorMessage, "error");
+		})
+
+	);
+}
+
+function deactivateApp(appID) {
+	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
+		"./../server/app/deactivate_app.php",
+		"maestro_id=" + maestroID + "&app_id=" + appID,
+
+		(function(jsonData) {
+			// console.log(jsonData);
+			showErrorMessage("[ " + jsonData["koreanName"] + "] 앱이 메뉴에서 삭제되었습니다. (위의 [마에스트로 앱 실행] 버튼을 눌러 확인해보세요)", "danger");
+		}),
+
+		(function(errorMessage, errorCode) {
+			showErrorMessage(errorMessage, "error");
+		})
+
+	);
+}
+
 </script>
 
 

src/web/module/maestro_section_mouse_app.html

@@ -38,13 +38,6 @@ function makeMouseAppList(appList) {
 				</div>\
 \
 		');
-			/*
-			"<span>"
-				+ "<input type='checkbox' id='checkbox" + appData.appID + "' data-app-id='" + appData.appID + "' />"
-				+ "<label for='checkbox" + appData.appID + "'>" + appData.koreanName + "</label>"
-			+ "</span>"
-		);
-		*/
 
 		$("#" + appData.appID).change(function() {
 			if($(this).is(":checked")) {
@@ -65,41 +58,6 @@ function activateMouseApp(activatedList) {
 	}
 }
 
-function activateApp(appID) {
-
-	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
-		"./../server/app/activate_app.php",
-		"maestro_id=" + maestroID + "&app_id=" + appID,
-
-		(function(jsonData) {
-			// console.log(jsonData);
-			showErrorMessage("[ " + jsonData["koreanName"] + "] 앱이 메뉴에 추가되었습니다. (위의 [마에스트로 앱 실행] 버튼을 눌러 확인해보세요)", "success");
-		}),
-
-		(function(errorMessage, errorCode) {
-			showErrorMessage(errorMessage, "error");
-		})
-
-	);
-}
-
-function deactivateApp(appID) {
-	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
-		"./../server/app/deactivate_app.php",
-		"maestro_id=" + maestroID + "&app_id=" + appID,
-
-		(function(jsonData) {
-			// console.log(jsonData);
-			showErrorMessage("[ " + jsonData["koreanName"] + "] 앱이 메뉴에서 삭제되었습니다. (위의 [마에스트로 앱 실행] 버튼을 눌러 확인해보세요)", "danger");
-		}),
-
-		(function(errorMessage, errorCode) {
-			showErrorMessage(errorMessage, "error");
-		})
-
-	);
-}
-
 </script>
 
 

src/web/module/maestro_section_typing_app.html

@@ -2,10 +2,81 @@
 
 $(document).ready(function() {
 	loadTypingApp();
+
+	$("input[id*='group_typing']").change(function() {
+		// console.log($(this).attr("id"));
+		var isChecked = $(this).is(":checked");
+		// console.log("isChecked : " + isChecked);
+		var clickedGroupName = $(this).attr("id").substring(6);
+		// console.log("clickedGroupName : " + clickedGroupName);
+
+		if($(this).is(":checked")) {
+			// activateApp($(this).data("appId"));
+			activateGroupApp(clickedGroupName);
+		} else {
+			// deactivateApp($(this).data("appId"));
+			deactivateGroupApp(clickedGroupName);
+		}
+	});
 });
 
+
+function getGroupName(groupName) {
+	switch(groupName) {
+		case "typing_practice_kor":
+		return "자리 연습 - 한글";
+
+		case "typing_practice_eng":
+		return "자리 연습 - 영문";
+
+		case "typing_test_kor":
+		return "타자 시험 - 한글";
+
+		case "typing_test_eng":
+		return "타자 시험 - 영문";
+
+	}
+
+	return "?";
+}
+
+function activateGroupApp(groupName) {
+	var groupList = $("input[name='" + groupName + "[]']");
+	// console.log(groupList);
+
+	for(var i = 0; i < groupList.length; i++) {
+		var app = groupList[i];
+		// console.log(app);
+		var isChecked = $(app).is(":checked");
+		// console.log(isChecked);
+		if(!isChecked) {
+			app.checked = true;
+			// console.log($(app).data("appId"));
+			activateApp($(app).data("appId"));
+		}
+	}
+
+	// showErrorMessage("[ " + this.getGroupName(groupName) + "] 앱이 모두 활성화 되었습니다. (위의 [마에스트로 앱 실행] 버튼을 눌러 확인해보세요)", "success");
+}
+
+function deactivateGroupApp(groupName) {
+	var groupList = $("input[name='" + groupName + "[]']");
+
+	for(var i = 0; i < groupList.length; i++) {
+		var app = groupList[i];
+		var isChecked = $(app).is(":checked");
+		if(isChecked) {
+			app.checked = false;
+			// console.log($(app).data("appId"));
+			deactivateApp($(app).data("appId"));
+		}
+	}
+
+	// showErrorMessage("[ " + this.getGroupName(groupName) + "] 앱이 모두 활성화 되었습니다. (위의 [마에스트로 앱 실행] 버튼을 눌러 확인해보세요)", "success");
+}
+
 function loadTypingApp() {
-	let self = this;
+	var self = this;
 
 	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
 		"./../server/app/typing_app_list.php",
@@ -30,26 +101,39 @@ function makeTypingAppList(appList) {
 	$("#typing_test_eng").empty();
 	$("#typing_app").empty();
 
-	for(let i = 0; i < appList.length; i++) {
+	for(var i = 0; i < appList.length; i++) {
-		let appData = appList[i];
+		var appData = appList[i];
 		if(appData.koreanName === "")
 			continue;
 
-		let divTag = null;
+		var divTag = null;
-		if(appData.appID <= 10)
+		var groupName = "";
+		if(appData.appID <= 10) {
 			divTag = $("#typing_practice_kor");
-		else if(appData.appID <= 20)
+			groupName = "typing_practice_kor";
+		}
+		else if(appData.appID <= 20) {
 			divTag = $("#typing_practice_eng");
-		else if(appData.appID <= 30)
+			groupName = "typing_practice_eng";
+		}
+		else if(appData.appID <= 30) {
 			divTag = $("#typing_test_kor");
-		else if(appData.appID <= 40)
+			groupName = "typing_test_kor";
+		}
+		else if(appData.appID <= 40) {
 			divTag = $("#typing_test_eng");
-		else
+			groupName = "typing_test_eng";
+		}
+		else {
 			divTag = $("#typing_app");
+			groupName = "typing_app";
+		}
 
 		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="">\
+					<input class="form-check-input" type="checkbox" id="' + appData.appID
+						+ '" name="' + groupName + '[]'
+						+ '" data-app-id="' + appData.appID + '" value="">\
 					<label class="form-check-label" for="' + appData.appID + '">\
 						' + appData.koreanName + '\
 					</label>\
@@ -68,14 +152,18 @@ function makeTypingAppList(appList) {
 }
 
 function activateTypingApp(activatedList) {
-	for(let i = 0; i < activatedList.length; i++) {
+	for(var i = 0; i < activatedList.length; i++) {
-		let activatedAppID = activatedList[i].appID;
+		var activatedAppID = activatedList[i].appID;
 
-		let input = $("#" + activatedAppID);
+		var input = $("#" + activatedAppID);
 		input.prop("checked", true);
 	}
 }
 
+function triggerAppGroup(groupName) {
+
+}
+
 </script>
 
 
@@ -84,36 +172,41 @@ function activateTypingApp(activatedList) {
 	<div class="col">
 
 		<h5 class="mt-2 mb-2">자리 연습</h5>
-		<form class="mx-4">
+		<form class="ml-4">
-			<p class="lead mb-0">한글</p>
+			<input type="checkbox" id="group_typing_practice_kor" aria-label="Checkbox for typing practice korean">
+			<label class="lead mb-0 ml-1"> 한글</label>
 			<hr class="my-1"/>
-			<div class="form-row" id="typing_practice_kor">
+			<div class="form-row ml-4" id="typing_practice_kor">
 			</div>
 
-			<p class="lead mt-3 mb-0">English</p>
+			<input type="checkbox" id="group_typing_practice_eng" aria-label="Checkbox for typing practice english">
+			<label class="lead mt-3 mb-0 ml-1"> English</label>
+			<!-- <p class="lead mt-3 mb-0">English</p> -->
 			<hr class="my-1"/>
-			<div class="form-row" id="typing_practice_eng">
+			<div class="form-row ml-4" id="typing_practice_eng">
 			</div>
 		</form>
 
 
 		<h5 class="mt-4 mb-2">타자 시험</h5>
-		<form class="mx-4">
+		<form class="ml-4">
-			<p class="lead mb-0">한글</p>
+			<input type="checkbox" id="group_typing_test_kor" aria-label="Checkbox for typing test korean">
+			<label class="lead mb-0 ml-1"> 한글</label>
 			<hr class="my-1"/>
-			<div class="form-row" id="typing_test_kor">
+			<div class="form-row ml-4" id="typing_test_kor">
 			</div>
 
-			<p class="lead mt-3 mb-0">English</p>
+			<input type="checkbox" id="group_typing_test_eng" aria-label="Checkbox for typing test english">
+			<label class="lead mt-3 mb-0 ml-1"> English</label>
 			<hr class="my-1"/>
-			<div class="form-row" id="typing_test_eng">
+			<div class="form-row ml-4" id="typing_test_eng">
 			</div>
 		</form>
 
 
 		<h5 class="mt-4 mb-2">타자 앱</h5>
-		<form class="mx-4">
+		<form class="ml-4">
-			<div class="form-row" id="typing_app">
+			<div class="form-row ml-4" id="typing_app">
 			</div>
 		</form>