Files
chocomae/src/web/module/maestro_upgrade.html
T

284 lines
9.2 KiB
HTML

<script>
let 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 + "<br/>유효 기간 : " + Math.ceil(diffDay) + "일");
if(diffDay < 30)
$("#maestro_count_down_date").addClass("text-danger");
else if(diffDay < 10)
$("#maestro_count_down_date").addClass("bg-danger text-light");
else if(diffDay < 0)
$("#maestro_count_down_date").addClass("bg-secondary text-light");
}
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);
let upgradeAccountType = accountType;
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
"./../server/maestro/request_upgrade_maestro.php",
"maestro_id=" + maestroID + "&registered_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 border-primary rounded py-2 mx-0 mb-2">
<div id="maestro_info_id" class="col-sm pl-2 my-auto">
<a class="btn btn-primary" href="javascript:void(0);" onClick="goHome()">< 마에스트로 []</a>
</div>
<div id="maestro_count_down_date" class="col-sm-2 px-0 my-auto mx-1 text-center"></div>
<div class="col-sm-5 px-0 d-md-flex align-items-center">
<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">
<button class="btn btn-primary px-2 mr-2 disabled" type="button" onClick="location.href='./../maestro/upgrade.html';">업그레이드</a>
</div>
</div>
<a class="btn btn-primary px-2 mr-2" 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>모든 요금제의 기능은 동일합니다.</li>
<li>1년동안 유효합니다.</li>
<li>높은 요금제로 올릴 수는 있지만, 낮은 요금제로 내릴 수는 없습니다.</li>
</ul>
<!-- <div class="card-group"> -->
<div class="card-deck">
<div id="account_type_1" class="card">
<div class="card-header"><span class="h3">1만원</span> <span class="text-muted">/ 1년</span></div>
<div class="card-body">
<p>최대 학생수 : <span class="text-danger font-weight-bold">20명</span></p>
<a id="account_type_1_btn" class="btn" href="javascript:void(0);">업그레이드</a>
</div>
<div class="card-footer">
<small id="account_type_1_footer" class=""></small>
</div>
</div>
<div id="account_type_2" class="card">
<div class="card-header"><span class="h3">2만원</span> <span class="text-muted">/ 1년</span></div>
<div class="card-body">
<p>최대 학생수 : <span class="text-danger font-weight-bold">50명</span></p>
<a id="account_type_2_btn" class="btn" href="javascript:void(0);" onclick="upgradeMaestroInfo(2);">업그레이드</a>
</div>
<div class="card-footer">
<small id="account_type_2_footer" class=""></small>
</div>
</div>
<div id="account_type_3" class="card">
<div class="card-header"><span class="h3">3만원</span> <span class="text-muted">/ 1년</span></div>
<div class="card-body">
<p>최대 학생수 : <span class="text-danger font-weight-bold">100명</span></p>
<a id="account_type_3_btn" class="btn" href="javascript:void(0);" onclick="upgradeMaestroInfo(3);">업그레이드</a>
</div>
<div class="card-footer">
<small id="account_type_3_footer" class=""></small>
</div>
</div>
<div id="account_type_4" class="card">
<div class="card-header"><span class="h3">4만원</span> <span class="text-muted">/ 1년</span></div>
<div class="card-body">
<p>최대 학생수 : <span class="text-danger font-weight-bold">500명</span></p>
<a id="account_type_4_btn" class="btn" href="javascript:void(0);" onclick="upgradeMaestroInfo(4);">업그레이드</a>
</div>
<div class="card-footer">
<small id="account_type_4_footer" class=""></small>
</div>
</div>
<div id="account_type_5" class="card">
<div class="card-header"><span class="h3">5만원</span> <span class="text-muted">/ 1년</span></div>
<div class="card-body">
<p>최대 학생수 : <span class="text-danger font-weight-bold">1,000명</span></p>
<a id="account_type_5_btn" class="btn" href="javascript:void(0);" onclick="upgradeMaestroInfo(5);">업그레이드</a>
</div>
<div class="card-footer">
<small id="account_type_5_footer" class=""></small>
</div>
</div>
</div>
</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>입금 내역이 확인되는대로 마에스트로 계정의 요금제를 변경해 드리겠습니다.</li>
<li>기존 요금제 기간이 얼마나 남았던가에 상관없이, 업그레이드가 적용된 날짜로부터 유효 기간이 1년으로 다시 리셋됩니다.<br/>
</ol>
</div>
</div> <!-- container -->