Add: maestro extension html files
This commit is contained in:
@@ -0,0 +1,83 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85912788-2"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
|
||||||
|
gtag('config', 'UA-85912788-2');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Google Tag Manager -->
|
||||||
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||||
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||||
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||||
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||||
|
})(window,document,'script','dataLayer','GTM-N8PB4F3');</script>
|
||||||
|
<!-- End Google Tag Manager -->
|
||||||
|
|
||||||
|
<title>마에스트로 계정 연장 | 초코마에</title>
|
||||||
|
<meta name="description" CONTENT="마에스트로 계정 연장 신청 | 초코마에 ‧ Extend maestro account | ChocoMae">
|
||||||
|
|
||||||
|
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||||
|
|
||||||
|
<link href="../../../resources/font/open-iconic-master/font/css/open-iconic-bootstrap.css" rel="stylesheet">
|
||||||
|
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<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/maestro_main.css">
|
||||||
|
-->
|
||||||
|
|
||||||
|
<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/lib/account_info.js"></script>
|
||||||
|
<script type="text/javascript" src="./../js/lib/account_validator.js"></script>
|
||||||
|
<script type="text/javascript" src="./../js/lib/maestro_info.js"></script>
|
||||||
|
<script type="text/javascript" src="./../js/request_server.js"></script>
|
||||||
|
<script type="text/javascript" src="./../js/maestro_main.js"></script>
|
||||||
|
<script type="text/javascript" src="./../js/player_list.js"></script>
|
||||||
|
<script type="text/javascript" src="./../js/player_list_navigator.js"></script>
|
||||||
|
<script type="text/javascript" src="./../js/player_list_manager.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#header").load("./../module/maestro_header.html");
|
||||||
|
$("#section").load("./../module/maestro_extension.html");
|
||||||
|
$("#footer").load("./../module/footer.html");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body bgcolor="white">
|
||||||
|
|
||||||
|
<div id="wrapper">
|
||||||
|
|
||||||
|
<header id="header">
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section id="section">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer id="footer">
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
|
||||||
|
<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,221 @@
|
|||||||
|
<script>
|
||||||
|
|
||||||
|
var registeredAccountType = -1;
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
loadMaestroInfo(maestroID);
|
||||||
|
});
|
||||||
|
|
||||||
|
function loadMaestroInfo(maestroID) {
|
||||||
|
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
|
||||||
|
"./../server/maestro/maestro_info.php",
|
||||||
|
"maestro_id=" + maestroID,
|
||||||
|
|
||||||
|
(function(jsonData) {
|
||||||
|
// console.log(jsonData);
|
||||||
|
registeredAccountType = jsonData.accountType;
|
||||||
|
showEndDate(jsonData.availableActivateDateTime);
|
||||||
|
showPlayerCount(jsonData.accountType, jsonData.playerCount);
|
||||||
|
updateCards(registeredAccountType);
|
||||||
|
}),
|
||||||
|
|
||||||
|
(function(errorMessage, errorCode) {
|
||||||
|
showErrorMessage(errorMessage, "error");
|
||||||
|
})
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showEndDate(date) {
|
||||||
|
var endDateArray = date.split(" ");
|
||||||
|
var endDate = endDateArray[0]; // "YY-MM_DD"
|
||||||
|
|
||||||
|
var today = new Date();
|
||||||
|
var endDay = new Date(endDate);
|
||||||
|
var diffDay = (endDay.getTime() - today.getTime()) / (1000 * 60 * 60 * 24);
|
||||||
|
|
||||||
|
$("#maestro_count_down_date").html("유효 기간 : ~ " + endDate + " <span id='countdown_day'>(남은 기간 : " + Math.ceil(diffDay) + "일)</span>");
|
||||||
|
if(diffDay < 30)
|
||||||
|
$("#countdown_day").addClass("text-danger");
|
||||||
|
else if(diffDay < 10)
|
||||||
|
$("#countdown_day").addClass("bg-danger text-light");
|
||||||
|
else if(diffDay < 0)
|
||||||
|
$("#countdown_day").addClass("bg-secondary text-light");
|
||||||
|
else
|
||||||
|
$("#countdown_day").addClass("text-muted");
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPlayerCount(accountType, playerCount) {
|
||||||
|
$("#maestro_info_player_count").val("학생수 : " + playerCount + " / " + accountTypePlayerCount(accountType));
|
||||||
|
}
|
||||||
|
|
||||||
|
var CARD_TYPE_EXPERIENCE = "experience";
|
||||||
|
var CARD_TYPE_LOWER_PRICE = "lower_price";
|
||||||
|
var CARD_TYPE_PRESENT_PRICE = "present_price";
|
||||||
|
var CARD_TYPE_UPPER_PRICE = "upper_price";
|
||||||
|
|
||||||
|
function updateCards(accountType) {
|
||||||
|
// console.log(accountType);
|
||||||
|
switch(accountType) {
|
||||||
|
case 100:
|
||||||
|
case 101:
|
||||||
|
setCardConent(1, CARD_TYPE_EXPERIENCE);
|
||||||
|
setCardConent(2, CARD_TYPE_EXPERIENCE);
|
||||||
|
setCardConent(3, CARD_TYPE_EXPERIENCE);
|
||||||
|
setCardConent(4, CARD_TYPE_EXPERIENCE);
|
||||||
|
setCardConent(5, CARD_TYPE_EXPERIENCE);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
setCardConent(1, CARD_TYPE_PRESENT_PRICE);
|
||||||
|
setCardConent(2, CARD_TYPE_UPPER_PRICE);
|
||||||
|
setCardConent(3, CARD_TYPE_UPPER_PRICE);
|
||||||
|
setCardConent(4, CARD_TYPE_UPPER_PRICE);
|
||||||
|
setCardConent(5, CARD_TYPE_UPPER_PRICE);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2:
|
||||||
|
setCardConent(1, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(2, CARD_TYPE_PRESENT_PRICE);
|
||||||
|
setCardConent(3, CARD_TYPE_UPPER_PRICE);
|
||||||
|
setCardConent(4, CARD_TYPE_UPPER_PRICE);
|
||||||
|
setCardConent(5, CARD_TYPE_UPPER_PRICE);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 3:
|
||||||
|
setCardConent(1, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(2, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(3, CARD_TYPE_PRESENT_PRICE);
|
||||||
|
setCardConent(4, CARD_TYPE_UPPER_PRICE);
|
||||||
|
setCardConent(5, CARD_TYPE_UPPER_PRICE);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 4:
|
||||||
|
setCardConent(1, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(2, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(3, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(4, CARD_TYPE_PRESENT_PRICE);
|
||||||
|
setCardConent(5, CARD_TYPE_UPPER_PRICE);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 5:
|
||||||
|
default:
|
||||||
|
setCardConent(1, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(2, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(3, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(4, CARD_TYPE_LOWER_PRICE);
|
||||||
|
setCardConent(5, CARD_TYPE_PRESENT_PRICE);
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCardConent(cardNo, cardType) {
|
||||||
|
var htmlID = "#account_type_" + cardNo;
|
||||||
|
var buttonID = htmlID + "_btn";
|
||||||
|
var footerID = htmlID + "_footer";
|
||||||
|
|
||||||
|
switch(cardType) {
|
||||||
|
case CARD_TYPE_EXPERIENCE:
|
||||||
|
$(htmlID).addClass("border-warning");
|
||||||
|
$(buttonID).addClass("btn-secondary disabled");
|
||||||
|
$(footerID).addClass("text-danger");
|
||||||
|
$(footerID).text("체험 계정은 업그레이드가 불가능합니다.");
|
||||||
|
break;
|
||||||
|
|
||||||
|
case CARD_TYPE_LOWER_PRICE:
|
||||||
|
$(htmlID).addClass("border-muted");
|
||||||
|
$(buttonID).addClass("btn-secondary disabled");
|
||||||
|
$(footerID).addClass("text-muted");
|
||||||
|
$(footerID).text("낮은 요금제");
|
||||||
|
break;
|
||||||
|
|
||||||
|
case CARD_TYPE_PRESENT_PRICE:
|
||||||
|
$(htmlID).addClass("border-warning");
|
||||||
|
$(buttonID).addClass("btn-secondary disabled");
|
||||||
|
$(footerID).addClass("text-warning");
|
||||||
|
$(footerID).text("현재 요금제");
|
||||||
|
break;
|
||||||
|
|
||||||
|
case CARD_TYPE_UPPER_PRICE:
|
||||||
|
$(htmlID).addClass("border-primary");
|
||||||
|
$(buttonID).addClass("btn-primary");
|
||||||
|
$(footerID).addClass("text-primary");
|
||||||
|
$(footerID).text("업그레이드 가능");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function upgradeMaestroInfo(accountType) {
|
||||||
|
console.log("upgrade to " + accountType);
|
||||||
|
var upgradeAccountType = accountType;
|
||||||
|
|
||||||
|
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
|
||||||
|
"./../server/maestro/request_upgrade_maestro.php",
|
||||||
|
"maestro_id=" + maestroID + "®istered_account_type=" + registeredAccountType + "&upgrade_account_type=" + upgradeAccountType,
|
||||||
|
|
||||||
|
(function(jsonData) {
|
||||||
|
// console.log(jsonData);
|
||||||
|
alert("업그레이드 요청이 등록되었습니다.");
|
||||||
|
location.href="main_menu.html";
|
||||||
|
}),
|
||||||
|
|
||||||
|
(function(errorMessage, errorCode) {
|
||||||
|
showErrorMessage(errorMessage, "error");
|
||||||
|
})
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container py-3">
|
||||||
|
<div class="row border rounded border-dark py-2 mx-0 mb-3">
|
||||||
|
<div id="maestro_count_down_date" class="col-sm-6 my-auto text-left"></div>
|
||||||
|
|
||||||
|
<div class="col-sm-6 d-md-flex align-items-right">
|
||||||
|
<div class="input-group my-auto">
|
||||||
|
<input type="text" id="maestro_info_player_count" class="form-control px-2 mx-0" value="학생수 :">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<a class="btn btn-primary px-2 mr-2 disabled" role="button" href="./../maestro/upgrade.html">업그레이드</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="btn btn-primary my-auto" href="./../maestro/setup.html">계정 정보 수정</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- row border -->
|
||||||
|
|
||||||
|
|
||||||
|
<div id="message_box">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card border-primary">
|
||||||
|
|
||||||
|
<div class="card-header bg-light"><span class="h4">계정 연장 신청</span></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul>
|
||||||
|
<li>1년 연장만 가능합니다.</li>
|
||||||
|
<li>업그레이드를 하셔도 1년 연장 효과가 있습니다.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="rounded px-5 py-4 mt-3" style="background-color: #66ccff">
|
||||||
|
|
||||||
|
<h4 class="mb-4">마에스트로 계정 연장 안내</h4>
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<li>위에서 업그레이드 하실 상품을 선택하세요.</li>
|
||||||
|
<li>연장을 신청하신 후, 추가 금액을 계좌이체해 주세요.</li>
|
||||||
|
<li>입금 내역이 확인되는대로 마에스트로 계정의 유효기간 +1년을 적용해 드리겠습니다.</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- container -->
|
||||||
@@ -103,6 +103,33 @@ $(document).ready(function() {
|
|||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- account extension -->
|
||||||
|
<div class="card bg-light">
|
||||||
|
<h5 class="card-header">계정 연장</h5>
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="card-text">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row mx-1">
|
||||||
|
<div class="col-12">
|
||||||
|
<h5 class="mb-2">유효 기간 연장 방법</h5>
|
||||||
|
</div> <!-- col -->
|
||||||
|
</div> <!-- row -->
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
마에스트로 계정 유효 기간이 30일 남았을 때부터 계정 연장 화면이 나타납니다.<br/>
|
||||||
|
<span class="text-muted">(유효 기간이 30일 넘게 남았을 때는 안보입니다)</span>
|
||||||
|
</li>
|
||||||
|
<li>화면 상단에 유효 기간 연장 화면이 보이면, 오른쪽의 <kbd>계정 연장</kbd> 버튼을 눌러주세요.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</p> <!-- card teext -->
|
||||||
|
</div> <!-- card body -->
|
||||||
|
</div> <!-- card -->
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
<!-- account upgrade -->
|
<!-- account upgrade -->
|
||||||
<div class="card bg-light">
|
<div class="card bg-light">
|
||||||
<h5 class="card-header">계정 업그레이드</h5>
|
<h5 class="card-header">계정 업그레이드</h5>
|
||||||
|
|||||||
@@ -37,13 +37,18 @@ function isExperienceMaestroAccount() {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getDiffDay(endDay, today) {
|
||||||
|
var diffDay = (endDay.getTime() - today.getTime()) / (1000 * 60 * 60 * 24);
|
||||||
|
return Math.ceil(diffDay);
|
||||||
|
}
|
||||||
|
|
||||||
function showEndDate(date) {
|
function showEndDate(date) {
|
||||||
var endDateArray = date.split(" ");
|
var endDateArray = date.split(" ");
|
||||||
var endDate = endDateArray[0]; // "YY-MM_DD"
|
var endDate = endDateArray[0]; // "YY-MM_DD"
|
||||||
|
|
||||||
var today = new Date();
|
var today = new Date();
|
||||||
var endDay = new Date(endDate);
|
var endDay = new Date(endDate);
|
||||||
var diffDay = (endDay.getTime() - today.getTime()) / (1000 * 60 * 60 * 24);
|
var diffDay = getDiffDay(endDay, today);
|
||||||
|
|
||||||
$("#maestro_count_down_date").html("유효 기간 : ~ " + endDate + " <span id='countdown_day'>(남은 기간 : " + Math.ceil(diffDay) + "일)</span>");
|
$("#maestro_count_down_date").html("유효 기간 : ~ " + endDate + " <span id='countdown_day'>(남은 기간 : " + Math.ceil(diffDay) + "일)</span>");
|
||||||
if(diffDay < 30)
|
if(diffDay < 30)
|
||||||
@@ -57,7 +62,29 @@ function showEndDate(date) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function showMaestroExtensionMessage(maestroName, date) {
|
||||||
|
var endDateArray = date.split(" ");
|
||||||
|
var endDate = endDateArray[0]; // "YY-MM_DD"
|
||||||
|
|
||||||
|
var today = new Date();
|
||||||
|
var endDay = new Date(endDate);
|
||||||
|
var diffDay = getDiffDay(endDay, today);
|
||||||
|
|
||||||
|
if(diffDay > 30)
|
||||||
|
return;
|
||||||
|
|
||||||
|
$("#maestro_extension").removeClass("d-none");
|
||||||
|
var message = "<span class='font-weight-bold'>" + maestroName + "</span> 계정의 유효 기간이 얼마 남지 않았습니다.<br/>1년 더 사용을 원하신다면 우측의 [계정 연장] 버튼을 눌러주세요.";
|
||||||
|
if(diffDay < 0)
|
||||||
|
message = "<span class='font-weight-bold'>" + maestroName + "</span> 계정의 유효 기간이 지났습니다. 등록된 학생들의 정보는 유지되지만, 로그인이 제한됩니다.<br/>계정 연장을 하시면 다시 로그인하고 사용할 수 있게 됩니다.";
|
||||||
|
|
||||||
|
$("#maestro_extension_message").html(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function onLoadSuccessMaestroInfo() {
|
function onLoadSuccessMaestroInfo() {
|
||||||
|
showMaestroExtensionMessage(maestroInfo.maestroName, maestroInfo.availableActivateDateTime);
|
||||||
|
|
||||||
showEndDate(maestroInfo.availableActivateDateTime);
|
showEndDate(maestroInfo.availableActivateDateTime);
|
||||||
$("#maestro_info_player_count").val("학생수 : " + maestroInfo.getRegisteredPlayerCount() + " / " + maestroInfo.getMaxPlayerCount());
|
$("#maestro_info_player_count").val("학생수 : " + maestroInfo.getRegisteredPlayerCount() + " / " + maestroInfo.getMaxPlayerCount());
|
||||||
|
|
||||||
@@ -172,13 +199,13 @@ function showModal(popupModalID, popupContentID, contentFileName) {
|
|||||||
|
|
||||||
<div class="container py-3">
|
<div class="container py-3">
|
||||||
|
|
||||||
<div id="maestro_extension" class="alert alert-danger" role="alert">
|
<div id="maestro_extension" class="alert alert-danger d-none" role="alert">
|
||||||
<div class="row mx-0">
|
<div class="row mx-0">
|
||||||
<div id="maestro_extension_message" class="col-sm my-auto">
|
<div id="maestro_extension_message" class="col-sm my-auto px-0">
|
||||||
message
|
message
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-offset">
|
<div class="col-sm-offset my-auto">
|
||||||
<a class="btn btn-primary pull-right" role="button" href="./../maestro/upgrade.html" style="float:right;">계정 연장</a>
|
<a class="btn btn-primary pull-right" role="button" href="./../maestro/extension.html" style="float:right;">계정 연장</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user