chocomae/src/web/module/maestro_section_typing_app.html

<script type="text/javascript">

$(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() {
	var self = this;

	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
		"./../server/app/typing_app_list.php",
		"maestro_id=" + maestroID,

		(function(jsonData) {
			makeTypingAppList(jsonData["appList"]);
			activateTypingApp(jsonData["activatedAppList"]);
		}),

		(function(errorMessage, errorCode) {
			showErrorMessage(errorMessage, "error");
		})

	);
}

function makeTypingAppList(appList) {
	$("#typing_practice_kor").empty();
	$("#typing_practice_eng").empty();
	$("#typing_test_kor").empty();
	$("#typing_test_eng").empty();
	$("#typing_app").empty();

	for(var i = 0; i < appList.length; i++) {
		var appData = appList[i];
		if(appData.koreanName === "")
			continue;

		var divTag = null;
		var groupName = "";
		if(appData.appID <= 10) {
			divTag = $("#typing_practice_kor");
			groupName = "typing_practice_kor";
		}
		else if(appData.appID <= 20) {
			divTag = $("#typing_practice_eng");
			groupName = "typing_practice_eng";
		}
		else if(appData.appID <= 30) {
			divTag = $("#typing_test_kor");
			groupName = "typing_test_kor";
		}
		else if(appData.appID <= 40) {
			divTag = $("#typing_test_eng");
			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
						+ '" name="' + groupName + '[]'
						+ '" 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 {
				deactivateApp($(this).data("appId"));
			}
		});
	}
}

function activateTypingApp(activatedList) {
	for(var i = 0; i < activatedList.length; i++) {
		var activatedAppID = activatedList[i].appID;

		var input = $("#" + activatedAppID);
		input.prop("checked", true);
	}
}

function triggerAppGroup(groupName) {

}

</script>



<div class="row mx-1">
	<div class="col">

		<h5 class="mt-2 mb-2">자리 연습</h5>
		<form class="ml-4">
			<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 ml-4" id="typing_practice_kor">
			</div>

			<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 ml-4" id="typing_practice_eng">
			</div>
		</form>


		<h5 class="mt-4 mb-2">타자 시험</h5>
		<form class="ml-4">
			<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 ml-4" id="typing_test_kor">
			</div>

			<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 ml-4" id="typing_test_eng">
			</div>
		</form>


		<h5 class="mt-4 mb-2">타자 앱</h5>
		<form class="ml-4">
			<div class="form-row ml-4" id="typing_app">
			</div>
		</form>

	</div>
</div>