Fix: admin CSS -> BootStrap, register, upgrade page

This commit is contained in:
2018-09-16 18:47:09 +09:00
parent 753325d84a
commit 0d324bab69
7 changed files with 264 additions and 180 deletions
+14 -31
View File
@@ -21,37 +21,20 @@
</style> </style>
<div class="container">
<span class="home"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
<span class="col"> <div class="container">
<a id="login_maestro" class="btn btn-orange" onClick="goHome()">마우스 타자 연습<br/></a>
</span>
</span>
<nav> <div class="navbar-header">
<ul class="header_menu"> <a class="navbar-brand" href="javascript:void(0);" onClick="goHome()" href="">초코마에 홈</a>
<li> </div>
<span class="col">
<a href="./../admin/admin_register_list.html" id="login_player" class="btn btn-rouge">계정 신청<br/>목록</a>
</span>
</li>
<li>
<span class="col">
<a href="./../admin/admin_upgrade_list.html" id="login_player" class="btn btn-rouge">계정 업그레이드<br/>목록</a>
</span>
</li>
<li>
<span class="col">
<a href="./../admin/admin_expiration_list.html" id="login_player" class="btn btn-rouge">종료 계정<br/>목록</a>
</span>
</li>
<li>
<span class="col">
<a href="./../admin/admin_send_email.html" id="login_maestro" class="btn btn-sea">전체 이메일<br/>보내기</a>
</span>
</li>
</ul>
</nav>
</div> <div class="eyebrow ml-auto mt-0 d-md-flex align-items-center">
<a class="btn btn-outline-warning btn-lg mr-2" href="./../admin/admin_register_list.html">등록 목록</a>
<a class="btn btn-outline-warning btn-lg mr-2" href="./../admin/admin_upgrade_list.html">업그레이드 목록</a>
<a class="btn btn-outline-warning btn-lg mr-2" href="./../admin/admin_expiration_list.html">만료 예정</a>
<a class="btn btn-primary btn-lg" href="./../admin/admin_send_email.html">이메일 발송</a>
</div>
</div> <!-- container -->
</nav>
+78 -62
View File
@@ -1,13 +1,10 @@
<html> <html>
<head> <head>
<title>마우스 타자 관리자 페이지</title> <title>마우스 타자 관리자 페이지</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./../css/module.css"> <link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
<link rel="stylesheet" type="text/css" href="./../css/admin.css">
<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./../js/main.js"></script> <script type="text/javascript" src="./../js/main.js"></script>
@@ -17,13 +14,14 @@
$("#header").load("admin_header.html"); $("#header").load("admin_header.html");
loadMaestroList(""); loadMaestroList("");
}); });
function searchMaestro() { function searchMaestro() {
let maestroName = $("#search_name").val(); var maestroName = $("#search_name").val();
if(maestroName.length === 0) { if(maestroName.length === 0) {
$("#error_message").text("마에스트로 아이디를 입력하세요."); showErrorMessage("검색할 마에스트로 아이디를 입력하세요.", "error");
$("#search_name").focus(); $("#search_name").focus();
} }
@@ -40,9 +38,7 @@
}, },
function(errorMessage, errorCode) { function(errorMessage, errorCode) {
if($("#error_message").length) { showErrorMessage(errorMessag, "error");
$("#error_message").text(errorMessage);
}
} }
); );
@@ -50,59 +46,58 @@
function updateMaestroList(jsonList) { function updateMaestroList(jsonList) {
$("#maestro_list_result_contents").empty(); $("#maestro_list_result_contents").empty();
printHeader();
printContents(jsonList); printContents(jsonList);
printFooter();
}
function printHeader() {
$("#maestro_list_result_contents").append(
"<ul id='search_maestro_list' class='maestro_list'>"
+ " <li>"
+ " <span class='maestro_name'>이름</span>"
+ " <span class='maestro_account_type'>금액</span>"
+ " </li>"
);
} }
function printContents(jsonList) { function printContents(jsonList) {
console.log(jsonList); if(jsonList === undefined || jsonList.length === 0) {
if(jsonList === undefined || jsonList.length === 0)
return;
for(let i = 0; i < jsonList.length; i++) {
$("#maestro_list_result_contents").append( $("#maestro_list_result_contents").append(
"<li class='search_result_list'>" "<div class='alert alert-danger text-center' role='alert'>"
+ " <span class='maestro_id hide'>" + jsonList[i].maestroID + "</span>" + "마에스트로 계정 정보가 없습니다."
+ " <input type='text' value='" + jsonList[i].maestroName + "' class='maestro_name'>" + "</div>"
+ " <input type='text' value='" + jsonList[i].accountType + "' class='maestro_account_type'>" );
+ " <input type='button' class='maestro_register' value='등록' onClick='register(this)'>" return;
+ "</li>" }
for(var i = 0; i < jsonList.length; i++) {
$("#maestro_list_result_contents").append(
"<div class='form-group player-list row mx-2 mb-1'>"
+ " <input type='text' class='maestro_id d-none' value='" + jsonList[i].maestroID + "'>"
+ " <input type='text' class='col-sm' value='" + jsonList[i].maestroName + "'>"
+ " <input type='text' class='col-sm' value='" + jsonList[i].accountType + "'>"
+ " <input type='button' class='col-sm-1' value='+' onClick='register(this)'>"
+ " <input type='button' class='col-sm-1' disabled value='-'>"
+ "</div>"
); );
} }
} }
function printFooter() {
$("#maestro_list_result_contents").append("</ul>");
}
function register(inputButton) { function register(inputButton) {
let id = $(inputButton).siblings(".maestro_id"); // var id = $(inputButton).siblings(".maestro_id d-none");
let maestroID = id.text(); // var maestroID = id.text();
var children = inputButton.parentElement.childNodes;
var maestroID = "";
for (var i=0; i < children.length; i++) {
// console.log(children);
if (children[i].className == "maestro_id d-none") {
maestroID = children[i].value;
break;
}
}
// console.log(maestroID);
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode); sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
"./../server/admin/register_maestro.php", "./../server/admin/register_maestro.php",
"maestro_id=" + maestroID, "maestro_id=" + maestroID,
function(jsonData) { function(jsonData) {
showErrorMessage("마에스트로 계정이 정상적으로 등록되었습니다.", "success");
loadMaestroList(""); loadMaestroList("");
$("#error_message").text("마에스트로 계정이 정상적으로 등록되었습니다.");
}, },
function(errorMessage, errorCode) { function(errorMessage, errorCode) {
if($("#error_message").length) { showErrorMessage(errorMessage, "error");
$("#error_message").text(errorMessage);
}
} }
); );
@@ -115,32 +110,53 @@
<body bgcolor="white"> <body bgcolor="white">
<div id="wrapper"> <header id="header"></header>
<header id="header"> <div class="container mt-3">
</header> <div class="row mx-1">
<h3 class="my-3">신규 마에스트로 등록 목록</h3>
</div>
<section id="section"> <div id="message_box"></div>
<div>
<span id="search_maestro_name">
<h1>검색</h1>
마에스트로 아이디 <div class="row mx-1">
<input type="text" id="search_name"><input type="submit" name="찾기" onClick="searchMaestro()"><br/> <div class="col-4">
<br/> <h5 class="my-3">마에스트로 검색</h5>
</span> <form class="mx-2">
<div class="form-group row">
<span id="search_result"> <label for="search_name" class="col-sm-5 col-form-label">마에스트로 아이디</label>
검색 결과 <div class="col-sm-7">
<div id="maestro_list_result_contents"> <input type="text" class="form-control" id="search_name" placeholder="이름 입력">
<!-- <small class="form-text text-muted">1~8 글자 / [ 한글,영문,숫자,-,_ ]</small> -->
</div>
</div> </div>
</span>
</div>
</section>
</div> <div class="form-group row">
<div class="offset-sm-3 col-sm-9 mt-3">
<button type="button" class="col-sm-7 btn btn-primary btn-lg" onClick="searchMaestro()">검색</button>
</div>
</div>
</form>
</div>
<div class="col-8 border border-warning rounded" style="background-color: #ffeab6">
<h5 class="my-3">검색 결과</h5>
<form id="search_player_list">
<div class="form-group row mx-2 mb-0 font-weight-bold">
<label class="col-form-label d-none">ID</label>
<label class="col-form-label col-sm text-center">마에스트로 아이디</label>
<label class="col-form-label col-sm text-center">계정 타입</label>
<label class="col-form-label col-sm-1 text-center"></label>
<label class="col-form-label col-sm-1 text-center"></label>
</div>
<div id="maestro_list_result_contents"></div>
</form>
</div> <!-- 학생 목록 -->
</div>
</div> <!-- container -->
</body> </body>
</html> </html>
+118 -68
View File
@@ -5,13 +5,12 @@
<title>마우스 타자 관리자 페이지</title> <title>마우스 타자 관리자 페이지</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./../css/module.css"> <link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
<link rel="stylesheet" type="text/css" href="./../css/admin.css">
<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./../js/main.js"></script> <script type="text/javascript" src="./../js/main.js"></script>
<script type="text/javascript" src="./../js/request_server.js"></script> <script type="text/javascript" src="./../js/request_server.js"></script>
<script type="text/javascript" src="./../js/lib/number_util.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
@@ -42,43 +41,32 @@
function updateMaestroUpgradeList(jsonList) { function updateMaestroUpgradeList(jsonList) {
$("#maestro_list_result_contents").empty(); $("#maestro_list_result_contents").empty();
printHeader();
printContents(jsonList); printContents(jsonList);
printFooter();
}
function printHeader() {
$("#maestro_list_result_contents").append(
"<ul id='search_maestro_list' class='maestro_list'>"
+ " <li>"
+ " <span class='maestro_name'>이름</span>"
+ " <span class='maestro_account_type'>등록된 요금제</span>"
+ " <span class='maestro_account_type'>신청한 요금제</span>"
+ " <span class='maestro_account_type'>금액</span>"
+ " <span class='maestro_account_type'>요청 날짜</span>"
+ " <span class='maestro_account_type'>요청 날짜</span>"
+ " </li>"
);
} }
function printContents(jsonList) { function printContents(jsonList) {
console.log(jsonList); if(jsonList === undefined || jsonList.length === 0) {
if(jsonList === undefined || jsonList.length === 0)
return;
for(let i = 0; i < jsonList.length; i++) {
$("#maestro_list_result_contents").append( $("#maestro_list_result_contents").append(
"<li class='search_result_list'>" "<div class='alert alert-danger text-center' role='alert'>"
+ " <span class='maestro_upgrade_id hide'>" + jsonList[i].maestroUpgradeID + "</span>" + "마에스트로 계정 정보가 없습니다."
+ " <span class='maestro_id hide'>" + jsonList[i].maestroID + "</span>" + "</div>"
+ " <input type='text' value='" + jsonList[i].maestroName + "' class='maestro_name'>" );
+ " <input type='text' value='" + accoutType(jsonList[i].registeredAccountType) + "' class='registered_account_type'>" return;
+ " <input type='text' value='" + accoutType(jsonList[i].requestedAccountType) + "' class='requested_account_type'>" }
+ " <input type='text' value='" + price(jsonList[i].requestedAccountType, jsonList[i].registeredAccountType) + "' class='price'>"
+ " <input type='text' value='" + jsonList[i].requestedDateTime + "' class='requested_date_time'>" for(var i = 0; i < jsonList.length; i++) {
+ " <input type='text' value='" + status(jsonList[i].status) + "' class='status'>" $("#maestro_list_result_contents").append(
+ " <input type='button' class='maestro_upgrade' value='업그레이드' onClick='upgrade(this)'>" "<div class='form-group player-list row mx-2 mb-1'>"
+ "</li>" + " <input type='text' class='maestro_upgrade_id d-none' disabled value='" + jsonList[i].maestroUpgradeID + "'>"
+ " <input type='text' class='maestro_id d-none' disabled value='" + jsonList[i].maestroID + "'>"
+ " <input type='text' class='col-sm' disabled value='" + jsonList[i].maestroName + "'>"
+ " <input type='text' class='col-sm' disabled value='" + accoutType(jsonList[i].registeredAccountType) + "'>"
+ " <input type='text' class='new_account_type col-sm' disabled value='" + accoutType(jsonList[i].requestedAccountType) + "'>"
+ " <input type='text' class='col-sm' disabled value='" + NumberUtil.numberWithCommas(price(jsonList[i].requestedAccountType, jsonList[i].registeredAccountType)) + "'>"
+ " <input type='text' class='col-sm' disabled value='" + jsonList[i].requestedDateTime + "'>"
// + " <input type='text' class='col-sm' disabled value='" + status(jsonList[i].status) + "'>"
+ " <input type='button' class='col-sm-1' value='↑' onClick='upgrade(this)'>"
+ "</div>"
); );
} }
} }
@@ -93,6 +81,12 @@
case 3: case 3:
return "100명, 3만원"; return "100명, 3만원";
case 4:
return "500명, 4만원";
case 5:
return "1,000명, 5만원";
} }
return accountType + "? (N/A)"; return accountType + "? (N/A)";
@@ -108,6 +102,12 @@
case 3: case 3:
return 30000; return 30000;
case 4:
return 40000;
case 5:
return 50000;
} }
return 0; return 0;
@@ -123,14 +123,20 @@
case "100명, 3만원": case "100명, 3만원":
return 3; return 3;
case "500명, 4만원":
return 4;
case "1,000명, 5만원":
return 5;
} }
return accountType + "? (N/A)"; return accountType + "? (N/A)";
} }
function price(requestedAccountType, registeredAccountType) { function price(requestedAccountType, registeredAccountType) {
let priceRequested = accountTypePrice(requestedAccountType); var priceRequested = accountTypePrice(requestedAccountType);
let priceRegistered = accountTypePrice(registeredAccountType); var priceRegistered = accountTypePrice(registeredAccountType);
return priceRequested - priceRegistered; return priceRequested - priceRegistered;
} }
@@ -150,12 +156,8 @@
return status + "? (N/A)"; return status + "? (N/A)";
} }
function printFooter() {
$("#maestro_list_result_contents").append("</ul>");
}
function searchMaestroUpgrade() { function searchMaestroUpgrade() {
let maestroName = $("#search_name").val(); var maestroName = $("#search_name").val();
if(maestroName.length === 0) { if(maestroName.length === 0) {
$("#error_message").text("마에스트로 아이디를 입력하세요."); $("#error_message").text("마에스트로 아이디를 입력하세요.");
@@ -166,16 +168,40 @@
} }
function upgrade(inputButton) { function upgrade(inputButton) {
let upgradeID = $(inputButton).siblings(".maestro_upgrade_id"); // var upgradeID = $(inputButton).siblings(".maestro_upgrade_id");
let maestroUpgradeID = upgradeID.text(); // var maestroUpgradeID = upgradeID.text();
let maestroID = $(inputButton).siblings(".maestro_id"); // var maestroID = $(inputButton).siblings(".maestro_id");
let id = maestroID.text(); // var id = maestroID.text();
let accountType = $(inputButton).siblings(".requested_account_type"); // var accountType = $(inputButton).siblings(".requested_account_type");
let newAccountType = accoutTypeValue(accountType.val()); // var newAccountType = accoutTypeValue(accountType.val());
var children = inputButton.parentElement.childNodes;
var maestroUpgradeID;
var maestroID;
var newAccountType;
for (var i=0; i < children.length; i++) {
// console.log(children);
if (children[i].className == "maestro_upgrade_id d-none") {
maestroUpgradeID = children[i].value;
continue;
}
if (children[i].className == "maestro_id d-none") {
maestroID = children[i].value;
continue;
}
if (children[i].className == "new_account_type col-sm") {
// newAccountType = children[i].value;
newAccountType = accoutTypeValue(children[i].value);
continue;
}
}
// console.log(maestroUpgradeID);
// console.log(maestroID);
// console.log(newAccountType);
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode); sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
"./../server/admin/upgrade_maestro.php", "./../server/admin/upgrade_maestro.php",
"maestro_upgrade_id=" + maestroUpgradeID + "&maestro_id=" + id + "&new_account_type=" + newAccountType, "maestro_upgrade_id=" + maestroUpgradeID + "&maestro_id=" + maestroID + "&new_account_type=" + newAccountType,
function(jsonData) { function(jsonData) {
loadMaestroUpgradeList(""); loadMaestroUpgradeList("");
@@ -198,30 +224,54 @@
<body bgcolor="white"> <body bgcolor="white">
<div id="wrapper"> <header id="header"></header>
<header id="header"> <div class="container mt-3">
</header> <div class="row mx-1">
<h3 class="my-3">마에스트로 업그레이드 목록</h3>
</div>
<section id="section"> <div id="message_box"></div>
<div>
<span id="search_maestro_name">
<h1>검색</h1>
마에스트로 아이디 <div class="row mx-1">
<input type="text" id="search_name"><input type="submit" name="찾기" onClick="searchMaestroUpgrade()"><br/> <div class="col-4">
<br/> <h5 class="my-3">마에스트로 검색</h5>
</span> <form class="mx-2">
<div class="form-group row">
<span id="search_result"> <label for="search_name" class="col-sm-5 col-form-label">마에스트로 아이디</label>
검색 결과 <div class="col-sm-7">
<div id="maestro_list_result_contents"> <input type="text" class="form-control" id="search_name" placeholder="이름 입력">
<!-- <small class="form-text text-muted">1~8 글자 / [ 한글,영문,숫자,-,_ ]</small> -->
</div>
</div> </div>
</span>
</div>
</section>
</div> <div class="form-group row">
<div class="offset-sm-3 col-sm-9 mt-3">
<button type="button" class="col-sm-7 btn btn-primary btn-lg" onClick="searchMaestroUpgrade()">검색</button>
</div>
</div>
</form>
</div>
<div class="col-8 border border-warning rounded" style="background-color: #ffeab6">
<h5 class="my-3">검색 결과</h5>
<form id="search_player_list">
<div class="form-group row mx-2 mb-0 font-weight-bold">
<label class="col-form-label d-none">Upgrade ID</label>
<label class="col-form-label col-sm text-center">아이디</label>
<label class="col-form-label col-sm text-center">현재 계정</label>
<label class="col-form-label col-sm text-center">업그레이드</label>
<label class="col-form-label col-sm text-center">추가 금액</label>
<label class="col-form-label col-sm text-center">요청 날짜</label>
<label class="col-form-label col-sm-1 text-center"></label>
</div>
<div id="maestro_list_result_contents"></div>
</form>
</div> <!-- 학생 목록 -->
</div>
</div> <!-- container -->
</body> </body>
+26 -18
View File
@@ -1,12 +1,11 @@
<html> <html>
<head> <head>
<title>관리자 페이지</title> <title>관리자 페이지</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./../css/module.css"> <link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./../js/main.js"></script> <script type="text/javascript" src="./../js/main.js"></script>
@@ -17,8 +16,8 @@
}); });
function login() { function login() {
let name = $("#admin_name").val(); var name = $("#admin_name").val();
let password = $("#password").val(); var password = $("#password").val();
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode); sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
"./../server/admin/login.php", "./../server/admin/login.php",
@@ -38,28 +37,37 @@
} }
</script> </script>
</head> </head>
<body bgcolor="white"> <body bgcolor="white">
<div> <div class="container">
관리자 아이디 <div class="border border-primary rounded px-5 py-4 my-3">
<input type="text" id="admin_name" name="admin_name"><br/> <h4 class="mb-4">로그인</h4>
암호 <div id="message_box"></div>
<input type="password" id="password" name="password"><br/>
</div>
<div class="col alignCenter"> <form class="mx-4">
<a id="login" class="btn btn-sea width400" onClick="login()">로그인</a> <div class="form-group row">
</div> <label for="maestro_name" class="col-sm-2 col-form-label">* 관리자 아이디</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="admin_name" placeholder="아이디 입력">
</div>
</div>
<div id="error_message"> <div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">* 암호</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="password" placeholder="Password">
<p><br/></p>
<button type="button" class="btn btn-primary btn-lg px-5" onClick="login()">로그인</button>
</div>
</div>
</form>
</div>
</div> </div>
</body> </body>
</html> </html>
+24
View File
@@ -0,0 +1,24 @@
function NumberUtil() {
}
NumberUtil.numberWithCommas = function(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
NumberUtil.numberOfDigits = function(number) {
if(number === 1000)
return 4;
return Math.floor(Math.log(number) / Math.LN10 + 1); // bug : 1000 -> expected 4 but 3
}
NumberUtil.getRecordText = function(value) {
var number = Math.floor(value);
var numberWithCommas = NumberUtil.numberWithCommas(number);
if(isTypingGame())
return numberWithCommas + " 타";
else
return numberWithCommas + " 점";
}
-1
View File
@@ -3,7 +3,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>마에스트로 로그인</title> <title>마에스트로 로그인</title>
@@ -11,6 +11,10 @@ function get_max_player_count($accountType) {
return 50; return 50;
case 3: case 3:
return 100; return 100;
case 4:
return 500;
case 5:
return 1000;
} }
return 0; return 0;