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>
<div class="container">
<span class="home">
<span class="col">
<a id="login_maestro" class="btn btn-orange" onClick="goHome()">마우스 타자 연습<br/></a>
</span>
</span>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
<div class="container">
<nav>
<ul class="header_menu">
<li>
<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 class="navbar-header">
<a class="navbar-brand" href="javascript:void(0);" onClick="goHome()" href="">초코마에 홈</a>
</div>
</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>
<head>
<title>마우스 타자 관리자 페이지</title>
<link rel="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 rel="stylesheet" type="text/css" href="./../css/color_button.css">
<link rel="stylesheet" type="text/css" href="./../css/admin.css">
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./../js/main.js"></script>
@@ -17,13 +14,14 @@
$("#header").load("admin_header.html");
loadMaestroList("");
});
function searchMaestro() {
let maestroName = $("#search_name").val();
var maestroName = $("#search_name").val();
if(maestroName.length === 0) {
$("#error_message").text("마에스트로 아이디를 입력하세요.");
showErrorMessage("검색할 마에스트로 아이디를 입력하세요.", "error");
$("#search_name").focus();
}
@@ -40,9 +38,7 @@
},
function(errorMessage, errorCode) {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessag, "error");
}
);
@@ -50,59 +46,58 @@
function updateMaestroList(jsonList) {
$("#maestro_list_result_contents").empty();
printHeader();
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) {
console.log(jsonList);
if(jsonList === undefined || jsonList.length === 0)
return;
for(let i = 0; i < jsonList.length; i++) {
if(jsonList === undefined || jsonList.length === 0) {
$("#maestro_list_result_contents").append(
"<li class='search_result_list'>"
+ " <span class='maestro_id hide'>" + jsonList[i].maestroID + "</span>"
+ " <input type='text' value='" + jsonList[i].maestroName + "' class='maestro_name'>"
+ " <input type='text' value='" + jsonList[i].accountType + "' class='maestro_account_type'>"
+ " <input type='button' class='maestro_register' value='등록' onClick='register(this)'>"
+ "</li>"
"<div class='alert alert-danger text-center' role='alert'>"
+ "마에스트로 계정 정보가 없습니다."
+ "</div>"
);
return;
}
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) {
let id = $(inputButton).siblings(".maestro_id");
let maestroID = id.text();
// var id = $(inputButton).siblings(".maestro_id d-none");
// 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);
"./../server/admin/register_maestro.php",
"maestro_id=" + maestroID,
function(jsonData) {
showErrorMessage("마에스트로 계정이 정상적으로 등록되었습니다.", "success");
loadMaestroList("");
$("#error_message").text("마에스트로 계정이 정상적으로 등록되었습니다.");
},
function(errorMessage, errorCode) {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -115,32 +110,53 @@
<body bgcolor="white">
<div id="wrapper">
<header id="header"></header>
<header id="header">
</header>
<div class="container mt-3">
<div class="row mx-1">
<h3 class="my-3">신규 마에스트로 등록 목록</h3>
</div>
<section id="section">
<div>
<span id="search_maestro_name">
<h1>검색</h1>
<div id="message_box"></div>
마에스트로 아이디
<input type="text" id="search_name"><input type="submit" name="찾기" onClick="searchMaestro()"><br/>
<br/>
</span>
<span id="search_result">
검색 결과
<div id="maestro_list_result_contents">
<div class="row mx-1">
<div class="col-4">
<h5 class="my-3">마에스트로 검색</h5>
<form class="mx-2">
<div class="form-group row">
<label for="search_name" class="col-sm-5 col-form-label">마에스트로 아이디</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="search_name" placeholder="이름 입력">
<!-- <small class="form-text text-muted">1~8 글자 / [ 한글,영문,숫자,-,_ ]</small> -->
</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>
</html>
+118 -68
View File
@@ -5,13 +5,12 @@
<title>마우스 타자 관리자 페이지</title>
<link rel="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 rel="stylesheet" type="text/css" href="./../css/color_button.css">
<link rel="stylesheet" type="text/css" href="./../css/admin.css">
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<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/request_server.js"></script>
<script type="text/javascript" src="./../js/lib/number_util.js"></script>
<script type="text/javascript">
$(document).ready(function() {
@@ -42,43 +41,32 @@
function updateMaestroUpgradeList(jsonList) {
$("#maestro_list_result_contents").empty();
printHeader();
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) {
console.log(jsonList);
if(jsonList === undefined || jsonList.length === 0)
return;
for(let i = 0; i < jsonList.length; i++) {
if(jsonList === undefined || jsonList.length === 0) {
$("#maestro_list_result_contents").append(
"<li class='search_result_list'>"
+ " <span class='maestro_upgrade_id hide'>" + jsonList[i].maestroUpgradeID + "</span>"
+ " <span class='maestro_id hide'>" + jsonList[i].maestroID + "</span>"
+ " <input type='text' value='" + jsonList[i].maestroName + "' class='maestro_name'>"
+ " <input type='text' value='" + accoutType(jsonList[i].registeredAccountType) + "' class='registered_account_type'>"
+ " <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'>"
+ " <input type='text' value='" + status(jsonList[i].status) + "' class='status'>"
+ " <input type='button' class='maestro_upgrade' value='업그레이드' onClick='upgrade(this)'>"
+ "</li>"
"<div class='alert alert-danger text-center' role='alert'>"
+ "마에스트로 계정 정보가 없습니다."
+ "</div>"
);
return;
}
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_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:
return "100명, 3만원";
case 4:
return "500명, 4만원";
case 5:
return "1,000명, 5만원";
}
return accountType + "? (N/A)";
@@ -108,6 +102,12 @@
case 3:
return 30000;
case 4:
return 40000;
case 5:
return 50000;
}
return 0;
@@ -123,14 +123,20 @@
case "100명, 3만원":
return 3;
case "500명, 4만원":
return 4;
case "1,000명, 5만원":
return 5;
}
return accountType + "? (N/A)";
}
function price(requestedAccountType, registeredAccountType) {
let priceRequested = accountTypePrice(requestedAccountType);
let priceRegistered = accountTypePrice(registeredAccountType);
var priceRequested = accountTypePrice(requestedAccountType);
var priceRegistered = accountTypePrice(registeredAccountType);
return priceRequested - priceRegistered;
}
@@ -150,12 +156,8 @@
return status + "? (N/A)";
}
function printFooter() {
$("#maestro_list_result_contents").append("</ul>");
}
function searchMaestroUpgrade() {
let maestroName = $("#search_name").val();
var maestroName = $("#search_name").val();
if(maestroName.length === 0) {
$("#error_message").text("마에스트로 아이디를 입력하세요.");
@@ -166,16 +168,40 @@
}
function upgrade(inputButton) {
let upgradeID = $(inputButton).siblings(".maestro_upgrade_id");
let maestroUpgradeID = upgradeID.text();
let maestroID = $(inputButton).siblings(".maestro_id");
let id = maestroID.text();
let accountType = $(inputButton).siblings(".requested_account_type");
let newAccountType = accoutTypeValue(accountType.val());
// var upgradeID = $(inputButton).siblings(".maestro_upgrade_id");
// var maestroUpgradeID = upgradeID.text();
// var maestroID = $(inputButton).siblings(".maestro_id");
// var id = maestroID.text();
// var accountType = $(inputButton).siblings(".requested_account_type");
// 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);
"./../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) {
loadMaestroUpgradeList("");
@@ -198,30 +224,54 @@
<body bgcolor="white">
<div id="wrapper">
<header id="header"></header>
<header id="header">
</header>
<div class="container mt-3">
<div class="row mx-1">
<h3 class="my-3">마에스트로 업그레이드 목록</h3>
</div>
<section id="section">
<div>
<span id="search_maestro_name">
<h1>검색</h1>
<div id="message_box"></div>
마에스트로 아이디
<input type="text" id="search_name"><input type="submit" name="찾기" onClick="searchMaestroUpgrade()"><br/>
<br/>
</span>
<span id="search_result">
검색 결과
<div id="maestro_list_result_contents">
<div class="row mx-1">
<div class="col-4">
<h5 class="my-3">마에스트로 검색</h5>
<form class="mx-2">
<div class="form-group row">
<label for="search_name" class="col-sm-5 col-form-label">마에스트로 아이디</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="search_name" placeholder="이름 입력">
<!-- <small class="form-text text-muted">1~8 글자 / [ 한글,영문,숫자,-,_ ]</small> -->
</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>
+26 -18
View File
@@ -1,12 +1,11 @@
<html>
<head>
<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="stylesheet" type="text/css" href="./../css/module.css">
<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./../js/main.js"></script>
@@ -17,8 +16,8 @@
});
function login() {
let name = $("#admin_name").val();
let password = $("#password").val();
var name = $("#admin_name").val();
var password = $("#password").val();
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
"./../server/admin/login.php",
@@ -38,28 +37,37 @@
}
</script>
</head>
<body bgcolor="white">
<div>
관리자 아이디
<input type="text" id="admin_name" name="admin_name"><br/>
암호
<input type="password" id="password" name="password"><br/>
</div>
<div class="container">
<div class="border border-primary rounded px-5 py-4 my-3">
<h4 class="mb-4">로그인</h4>
<div id="message_box"></div>
<div class="col alignCenter">
<a id="login" class="btn btn-sea width400" onClick="login()">로그인</a>
</div>
<form class="mx-4">
<div class="form-group row">
<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>
</body>
</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>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>마에스트로 로그인</title>
@@ -11,6 +11,10 @@ function get_max_player_count($accountType) {
return 50;
case 3:
return 100;
case 4:
return 500;
case 5:
return 1000;
}
return 0;