Add: typing app list, activate/deactivate app

src/web/module/maestro_section_typing_app.html

@@ -0,0 +1,119 @@
+<script type="text/javascript">
+$(document).ready(function() {
+	loadTypingApp();
+});
+
+
+function loadTypingApp() {
+	let self = this;
+
+	let xhr = new XMLHttpRequest(); //new로 생성.
+	xhr.open('POST', './../server/app/typing_app_list.php', true);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.send("maestro_id=" + maestroID);
+	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;
+			}
+
+			makeTypingAppList(replyJSON["List"]);
+			activateTypingApp(replyJSON["ActivatedList"]);
+		}
+	}
+}
+
+function makeTypingAppList(appList) {
+	$("#typing_practice_kor").empty();
+	$("#typing_practice_eng").empty();
+	$("#typing_test_kor").empty();
+	$("#typing_test_eng").empty();
+	$("#typing_app").empty();
+
+	for(let i = 0; i < appList.length; i++) {
+		let appData = appList[i];
+		if(appData.KoreanName === "")
+			continue;
+
+		let divTag = null;
+		if(appData.AppID <= 10)
+			divTag = $("#typing_practice_kor");
+		else if(appData.AppID <= 20)
+			divTag = $("#typing_practice_eng");
+		else if(appData.AppID <= 30)
+			divTag = $("#typing_test_kor");
+		else if(appData.AppID <= 40)
+			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() {
+			if($(this).is(":checked")) {
+				activateApp($(this).data("appId"));
+			} else {
+				deactivateApp($(this).data("appId"));
+			}
+		});
+	}
+}
+
+function activateTypingApp(activatedList) {
+	for(let i = 0; i < activatedList.length; i++) {
+		let activatedAppID = activatedList[i].AppID;
+
+		let input = $("#checkbox" + activatedAppID);
+		input.prop("checked", true);
+	}
+}
+
+</script>
+
+
+
+<div id="typing_app_content">
+
+	<div>
+		<h1>자리 연습</h1>
+		<div id="typing_practice_kor"></div>
+		<div id="typing_practice_eng"></div>
+	</div>
+
+	<div>
+		<h1>타자 시험</h1>
+		<div id="typing_test_kor"></div>
+		<div id="typing_test_eng"></div>
+	</div>
+
+	<div>
+		<h1>타자 앱</h1>
+		<div id="typing_app"></div>
+	</div>
+
+</div>