Fix: app-activation tab <- mouse-app & typing-app

2019-03-20 09:57:21 +09:00
parent ba329e30a4
commit e7e0aa1f61
2 changed files with 310 additions and 4 deletions
@@ -0,0 +1,295 @@
+<script type="text/javascript">
+
+$(document).ready(function() {
+	loadMouseApp();
+	loadTypingApp();
+
+	$("input[id*='group_']").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);
+		}
+	});
+});
+
+
+// mouse app
+function loadMouseApp() {
+	var self = this;
+
+	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
+		"./../server/app/mouse_app_list.php",
+		"maestro_id=" + maestroID,
+
+		(function(jsonData) {
+			makeMouseAppList(jsonData["appList"]);
+			activateMouseApp(jsonData["activatedAppList"]);
+		}),
+
+		(function(errorMessage, errorCode) {
+			showErrorMessage(errorMessage, "error");
+		})
+
+	);
+}
+
+function makeMouseAppList(appList) {
+	$("#mouse_app_content").empty();
+
+	for(var i = 0; i < appList.length; i++) {
+		var appData = appList[i];
+
+		$("#mouse_app_content").append('\
+				<div class="form-check col col-sm-2">\
+					<input class="form-check-input" type="checkbox" id="' + appData.appID
+						+ '" name="' + 'mouse_app_all' + '[]'
+						+ '" 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 activateMouseApp(activatedList) {
+	for(var i = 0; i < activatedList.length; i++) {
+		var activatedAppID = activatedList[i].appID;
+
+		var input = $("#" + activatedAppID);
+		input.prop("checked", true);
+	}
+}
+
+
+// typing app
+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) {
+	// console.log(groupName);
+	var groupList = $("input[name='" + groupName + "[]']");
+	// console.log(groupList);
+	// console.log("group length : " + groupList.length);
+
+	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_all";
+		}
+
+		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 mb-4">
+	<div class="col">
+
+		<h5 class="mt-4 mb-2">마우스 연습</h5>
+		<form class="mx-4">
+			<input type="checkbox" id="group_mouse_app_all" aria-label="Checkbox for all mouse apps">
+			<label class="lead mb-0 ml-1"> 전체</label>
+			<hr class="my-1"/>
+			<div class="form-row ml-4" id="mouse_app_content">
+			</div>
+		</form>
+
+	</div>
+</div>
+
+
+<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">
+			<input type="checkbox" id="group_typing_app_all" aria-label="Checkbox for all typing apps">
+			<label class="lead mb-0 ml-1"> 전체</label>
+			<hr class="my-1"/>
+			<div class="form-row ml-4" id="typing_app">
+			</div>
+		</form>
+
+	</div>
+</div>
@@ -10,8 +10,9 @@ var searchPlayerListManager = null;
 $(document).ready(function() {
 	$("#section_add_player").load("./../module/maestro_section_add_player.html");
 	$("#section_search_player").load("./../module/maestro_section_search.html");
-	$("#mouse_app_list").load("./../module/maestro_section_mouse_app.html");
-	$("#typing_app_list").load("./../module/maestro_section_typing_app.html");
+	$("#app_activation").load("./../module/maestro_section_app_activation.html");
+	// $("#mouse_app_list").load("./../module/maestro_section_mouse_app.html");
+	// $("#typing_app_list").load("./../module/maestro_section_typing_app.html");
 	$("#section_timer").load("./../module/maestro_section_timer.html");

 	maestroInfo.loadMaestroInfo(onLoadSuccessMaestroInfo, onLoadFailMaestroInfo);
@@ -186,6 +187,11 @@ function deactivateApp(appID) {
 			<a class="nav-link" id="search-tab" data-toggle="tab" href="#search" role="tab" aria-controls="search" aria-selected="false">학생 검색</a>
 		</li>

+		<li class="nav-item">
+			<a class="nav-link" id="app-activation-tab" data-toggle="tab" href="#app-activation" role="tab" aria-controls="activation" aria-selected="false">앱 활성화</a>
+		</li>
+
+<!--
 		<li class="nav-item">
 			<a class="nav-link" id="mouse-tab" data-toggle="tab" href="#mouse" role="tab" aria-controls="mouse" aria-selected="false">마우스 앱 활성화</a>
 		</li>
@@ -193,7 +199,7 @@ function deactivateApp(appID) {
 		<li class="nav-item">
 			<a class="nav-link" id="typing-tab" data-toggle="tab" href="#typing" role="tab" aria-controls="typing" aria-selected="false">타자 앱 활성화</a>
 		</li>
-
+-->
 		<li class="nav-item">
 			<a class="nav-link" id="timer-tab" data-toggle="tab" href="#timer" role="tab" aria-controls="timer" aria-selected="false">자격증 타이머</a>
 		</li>
@@ -209,6 +215,11 @@ function deactivateApp(appID) {
 			<div id="section_search_player"></div>
 		</div>

+		<div class="tab-pane fade mt-3" id="app-activation" role="tabpanel" aria-labelledby="app-activation-tab">
+			<div id="app_activation"></div>
+		</div>
+
+<!--
 		<div class="tab-pane fade mt-3" id="mouse" role="tabpanel" aria-labelledby="mouse-tab">
 			<div id="mouse_app_list"></div>
 		</div>
@@ -216,7 +227,7 @@ function deactivateApp(appID) {
 		<div class="tab-pane fade mt-3" id="typing" role="tabpanel" aria-labelledby="typing-tab">
 			<div id="typing_app_list"></div>
 		</div>
-
+-->
 		<div class="tab-pane fade mt-3" id="timer" role="tabpanel" aria-labelledby="timer-tab">
 			<div id="section_timer"></div>
 		</div>