Add: typing app list, activate/deactivate app

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++) {
-		let mouseApp = mouseAppList[i];
+	for(let i = 0; i < appList.length; 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' />"
-				+ "<label for='checkbox" + mouseApp.AppID + "'>" + mouseApp.KoreanName + "</label>"
+				+ "<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"));
+			}
+		});
 	}
 }
 
@@ -74,13 +73,80 @@ function activateMouseApp(activatedList) {
 
 		let input = $("#checkbox" + activatedAppID);
 		input.prop("checked", true);
+	}
+}
 
-		// let input = $("input").filter(function() {
-		// 	return $(this).data("app_id") == activatedAppID;
-		// });
+function activateApp(appID) {
 
-		console.log(input);
-		// input.checked = true;
+	let xhr = new XMLHttpRequest(); //new로 생성.
+	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>