Add: typing app list, activate/deactivate app

src/web/css/maestro_main.css

@@ -111,9 +111,4 @@
 */
 
 
-.activate_app_checkbox {
-	width: 200px;
-	height: 200px;
-}
-
 </style>

src/web/module/maestro_section_main.html

@@ -3,6 +3,7 @@ $(document).ready(function() {
 	$("#section_add_player").load("./../module/maestro_section_add_player.html");
 	$("#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");
 
 	// loadPlayerList();
 });
@@ -31,14 +32,6 @@ $(document).ready(function() {
 	</div>
 
 	<div id="typing_app_list" class="hide">
-		<form action="/action_page.php" method="get" id="app_typing">
-			<input type="checkbox" name="typing">기본 자리<br/>
-			<input type="checkbox" name="typing">왼손 윗글쇠<br/>
-			<input type="checkbox" name="typing">basic<br/>
-			<input type="checkbox" name="typing">left upper<br/>
-			<button type="submit" form="app_typing">적용</button>
-		</form>
-
 	</div>
 
 

src/web/module/maestro_section_mouse_app.html

@@ -21,7 +21,7 @@ function loadMouseApp() {
 			}
 
 			let replyJSON = JSON.parse(xhr.responseText);
-			console.log(replyJSON);
+			// console.log(replyJSON);
 
 			if(replyJSON === null) {
 				console.log("no data from server");
@@ -40,31 +40,30 @@ function loadMouseApp() {
 
 			makeMouseAppList(replyJSON["List"]);
 			activateMouseApp(replyJSON["ActivatedList"]);
-			/*
-			self.playerCount = replyJSON["Count"];
-			self.lastPageNo = Math.ceil( (self.playerCount + 1) / 10 );
-			self.activePageNo = 1;
-
-			self.loadAddPlayerListPage(self.activePageNo);
-			self.listNavigator.updateNavigator(self.activePageNo, self.lastPageNo);
-			*/
 		}
 	}
 }
 
-function makeMouseAppList(mouseAppList) {
+function makeMouseAppList(appList) {
 	$("#mouse_app_content").empty();
 
-	for(let i = 0; i < mouseAppList.length; i++) {
+	for(let i = 0; i < appList.length; i++) {
-		let mouseApp = mouseAppList[i];
+		let appData = appList[i];
 
-		let checkboxIndex = i + 1;
 		$("#mouse_app_content").append(
 			"<span>"
-				+ "<input type='checkbox' id='checkbox" + mouseApp.AppID + "' class='activate_app_checkbox' />"
+				+ "<input type='checkbox' id='checkbox" + appData.AppID + "' data-app-id='" + appData.AppID + "' />"
-				+ "<label for='checkbox" + mouseApp.AppID + "'>" + mouseApp.KoreanName + "</label>"
+				+ "<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"));
+			}
+		});
 	}
 }
 
@@ -74,13 +73,80 @@ function activateMouseApp(activatedList) {
 
 		let input = $("#checkbox" + activatedAppID);
 		input.prop("checked", true);
+	}
+}
 
-		// let input = $("input").filter(function() {
+function activateApp(appID) {
-		// 	return $(this).data("app_id") == activatedAppID;
-		// });
 
-		console.log(input);
+	let xhr = new XMLHttpRequest(); //new로 생성.
-		// input.checked = true;
+	xhr.open('POST', './../server/app/activate_app.php', true);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.send("maestro_id=" + maestroID + "&app_id=" + appID);
+	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;
+			}
+
+		}
+	}
+}
+
+function deactivateApp(appID) {
+
+	let xhr = new XMLHttpRequest(); //new로 생성.
+	xhr.open('POST', './../server/app/deactivate_app.php', true);
+	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+	xhr.send("maestro_id=" + maestroID + "&app_id=" + appID);
+	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;
+			}
+
+		}
 	}
 }
 
@@ -97,12 +163,12 @@ function activateMouseApp(activatedList) {
 
 	<span>
 		<input type="checkbox" id="checkbox2" checked="checked" />
-		<label for="checkbox2">Option 1</label>
+		<label for="checkbox2">Option 2</label>
 	</span>
 
 	<span>
 		<input type="checkbox" id="checkbox3" checked="checked" />
-		<label for="checkbox3">Option 1</label>
+		<label for="checkbox3">Option 3</label>
 	</span>
 
 </div>

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>

src/web/server/app/activate_app.php

@@ -0,0 +1,30 @@
+<?php
+header('Content-Type: application/json');
+
+$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();
+
+
+function activate_app($maestroID, $appID) {
+	global $db_conn;
+
+	$query = "
+		INSERT INTO moty_active_app (MaestroID, AppID)
+		VALUES (?, ?);
+	";
+	$stmt = $db_conn->prepare($query);
+	$stmt->bind_param('ii', $maestroID, $appID);
+	$stmt->execute();
+	$stmt->bind_result();
+}
+
+?>

src/web/server/app/deactivate_app.php

@@ -0,0 +1,30 @@
+<?php
+header('Content-Type: application/json');
+
+$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();
+
+
+function deactivate_app($maestroID, $appID) {
+	global $db_conn;
+
+	$query = "
+		DELETE FROM moty_active_app
+		WHERE MaestroID = ? AND AppID = ?;
+	";
+	$stmt = $db_conn->prepare($query);
+	$stmt->bind_param('ii', $maestroID, $appID);
+	$stmt->execute();
+	$stmt->bind_result();
+}
+
+?>

src/web/server/app/mouse_app_list.php

@@ -27,7 +27,7 @@ function get_mouse_app_list() {
 	$query = "
 		SELECT AppID, AppName, KoreanName FROM moty_app
 		WHERE AppType=100
-		ORDER BY AppID DESC
+		ORDER BY AppID ASC
 	";
 	$stmt = $db_conn->prepare($query);
 	$stmt->execute();

src/web/server/app/typing_app_list.php

@@ -0,0 +1,69 @@
+<?php
+header('Content-Type: application/json');
+
+$maestroID = $_POST["maestro_id"];
+
+include "./../setup/connect_db.php";
+
+
+$typing_app_list = get_typing_app_list();
+if($typing_app_list.length === 0) {
+	send_error_message($replyJSON, "등록된 타자 앱 없음");
+	$db_conn->close();
+	exit;
+}
+
+$activated_typing_app_list = get_activated_typing_app_list($maestroID);
+$replyJSON["List"] = $typing_app_list;
+$replyJSON["ActivatedList"] = $activated_typing_app_list;
+$replyJSON["RESULT"] = "ok";
+echo json_encode($replyJSON, JSON_UNESCAPED_UNICODE);
+$db_conn->close();
+
+
+function get_typing_app_list() {
+	global $db_conn;
+
+	$query = "
+		SELECT AppID, AppName, KoreanName FROM moty_app
+		WHERE AppType < 100
+		ORDER BY AppID ASC
+	";
+	$stmt = $db_conn->prepare($query);
+	$stmt->execute();
+	$stmt->bind_result($appID, $appName, $koreanName);
+
+	$playerList = array();
+	while($stmt->fetch()) {
+	    $player['AppID'] = $appID;
+	    $player['AppName'] = $appName;
+	    $player['KoreanName'] = $koreanName;
+	    array_push($playerList, $player);
+	}
+
+	return $playerList;
+}
+
+function get_activated_typing_app_list($maestroID) {
+	global $db_conn;
+
+	$query = "
+		SELECT A.AppID
+		FROM moty_app AS A
+		INNER JOIN moty_active_app AS AA ON A.AppID = AA.AppID AND A.AppType < 100 AND AA.MaestroID=?"
+	;
+	$stmt = $db_conn->prepare($query);
+	$stmt->bind_param('i', $maestroID);
+	$stmt->execute();
+	$stmt->bind_result($appID);
+
+	$playerList = array();
+	while($stmt->fetch()) {
+	    $player['AppID'] = $appID;
+	    array_push($playerList, $player);
+	}
+
+	return $playerList;
+}
+
+?>