460 lines
16 KiB
JavaScript
460 lines
16 KiB
JavaScript
var getUrlParameter = function getUrlParameter(sParam) {
|
||
var sPageURL = window.location.search.substring(1),
|
||
sURLVariables = sPageURL.split('&'),
|
||
sParameterName,
|
||
i;
|
||
|
||
for (i = 0; i < sURLVariables.length; i++) {
|
||
sParameterName = sURLVariables[i].split('=');
|
||
|
||
if (sParameterName[0] === sParam) {
|
||
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
|
||
var getI18nMonthYear = function(date) {
|
||
let year = date.year;
|
||
let month = date.month - 1;
|
||
let monthTitles = ['month-title-jan', 'month-title-feb', 'month-title-mar', 'month-title-apr', 'month-title-may', 'month-title-jun', 'month-title-jul', 'month-title-aug', 'month-title-sep', 'month-title-oct', 'month-title-Nov', 'month-title-Dec'];
|
||
let monthTitle = monthTitles[month];
|
||
let comma = $.i18n().locale == 'en' ? "," : "，";
|
||
return $.i18n(monthTitle) + comma + " " + year;
|
||
}
|
||
|
||
var getI18nWeek = function(date) {
|
||
let weekDayTitles = ['week-title-sun', 'week-title-mon', 'week-title-tue', 'week-title-wed', 'week-title-thu', 'week-title-fri', 'week-title-sat'];
|
||
let day = date.weekday%7;
|
||
let weekDayTitle = weekDayTitles[day];
|
||
return $.i18n(weekDayTitle);
|
||
}
|
||
|
||
var getI18nTime = function(date) {
|
||
let i18nWeek = getI18nWeek(date);
|
||
let hour = date.hour;
|
||
let hourTitle = (hour < 10) ? "0" + hour : hour;
|
||
let minute = date.minute;
|
||
let minuteTitle = (minute < 10) ? "0" + minute : minute;
|
||
let comma = $.i18n().locale == 'en' ? "," : "，";
|
||
return i18nWeek + comma + " " + hourTitle + ":" + minuteTitle;
|
||
}
|
||
|
||
var getI18nSrDate = function(date) {
|
||
let day = date.day;
|
||
let month = date.month - 1;
|
||
let year = date.year;
|
||
let monthTitles = ['month-title-jan', 'month-title-feb', 'month-title-mar', 'month-title-apr', 'month-title-may', 'month-title-jun', 'month-title-jul', 'month-title-aug', 'month-title-sep', 'month-title-oct', 'month-title-Nov', 'month-title-Dec'];
|
||
let monthTitle = $.i18n().locale == 'en' ? $.i18n(monthTitles[month]) : month + 1;
|
||
return $.i18n('sr-date-format', day, monthTitle, year); // $1=Day, $2=Month, $3=Year
|
||
}
|
||
|
||
var getPerfHtml = function(perf) {
|
||
let status = perf.status;
|
||
let statusTitles = {"AVAILABLE" : null, "LIMIT" : "status-title-limit", "SOLDOUT" : "status-title-soldout"};
|
||
let statusTitle = statusTitles[status];
|
||
let statusValue = statusTitle ? $.i18n(statusTitle) : "";
|
||
let statusHtml = '';
|
||
if(statusValue) {
|
||
statusHtml = ' <span class="limited">' +
|
||
' <img class="limited-img" src="./revamp/images/limited1.svg" alt="">' + statusValue + '</span>';
|
||
}
|
||
|
||
let innerButtonHtml = '';
|
||
let performanceNameField = getDataFieldByLang("performanceName");
|
||
let performanceName = perf[performanceNameField];
|
||
let performanceNameHtml = ' <span class="concert-title">' + performanceName + '</span>';
|
||
|
||
if(perf.performanceDate){
|
||
let performanceDateTz = DateTime.fromMillis(perf.performanceDate).setZone("UTC+8");
|
||
let performanceDateDisplayFormat = perf.performanceDateDisplayFormat;
|
||
let monthYear = getI18nMonthYear(performanceDateTz);
|
||
let date = performanceDateTz.day;
|
||
let time = (performanceDateDisplayFormat == "DISPLAY_FORMAT_NAME_DATE_TIME") ? getI18nTime(performanceDateTz) : getI18nWeek(performanceDateTz);
|
||
let srDate = getI18nSrDate(performanceDateTz);
|
||
let monthYearHtml =
|
||
' <div class="date-left" aria-label="' + srDate + ' ">' +
|
||
' <span class="month-year"> ' + monthYear + '</span> <span class="day">' + date + '</span>' +
|
||
' </div>';
|
||
innerButtonHtml += monthYearHtml +
|
||
' <div class="date-right">' +
|
||
' <span class="time">' + time +'</span>' + performanceNameHtml + statusHtml +
|
||
' </div>';
|
||
}
|
||
else {
|
||
innerButtonHtml += ' <span class="concert-title only-title">' + performanceName + '</span>'+ statusHtml;
|
||
}
|
||
|
||
let perfId = perf.performanceId;
|
||
let isPurchasable = perf.isPurchasable;
|
||
let disabledHtml = !isPurchasable || perf.status == 'SOLDOUT' ? 'disabled="disabled"' : '';
|
||
let perfHtml = '<button type="button" class="btn btn-outline-primary date-time-position" data-perf-id="' + perfId + '" ' + disabledHtml + ' aria-pressed="false"> ' + innerButtonHtml + '</button>';
|
||
|
||
return perfHtml;
|
||
}
|
||
|
||
let myCalendar = null;
|
||
let selDate = null;
|
||
var fillCalendar = function(perfData){
|
||
let formattedDatePrefData = perfData.performances.map((item)=>{
|
||
return{
|
||
...item,
|
||
performanceDate: moment(item.performanceDate).format("DD/MM/YYYY")
|
||
}
|
||
})
|
||
|
||
let formattedDateArr = perfData.performances.map((item)=>{
|
||
if(item.performanceDate){
|
||
return moment(item.performanceDate).format("DD/MM/YYYY")
|
||
}
|
||
})
|
||
|
||
let min = formattedDatePrefData.find(item =>item.status !== "SOLDOUT").performanceDate;
|
||
let max = formattedDatePrefData[formattedDatePrefData.length-1].performanceDate;
|
||
|
||
let calendarBox = isMobileFun() ? $('.calendar-box')[0] : $('.calendar-box')[$('.calendar-box').length -1]
|
||
let dateBox = isMobileFun() ? $('.date-box')[0] : $('.date-box')[$('.date-box').length -1];
|
||
|
||
$(calendarBox).empty();
|
||
myCalendar = jsCalendar.new(calendarBox, min, {
|
||
"monthFormat": "YYYY/##",
|
||
"dayFormat": "DDD",
|
||
});
|
||
|
||
myCalendar.min(min);
|
||
myCalendar.max(max);
|
||
|
||
$('.jsCalendar table td').mouseover(function(){
|
||
if(!$(this).hasClass('jsCalendar-previous') && !$(this).hasClass('jsCalendar-next') && !$(this).hasClass('jsCalendar-noPerfDate')){
|
||
let day = $(this)[0].innerText < 10 ? '0'+$(this)[0].innerText : $(this)[0].innerText;
|
||
let date = $('.jsCalendar-title-name')[0].innerText + '/' + day;
|
||
let formatDate = date.split('/').reverse().join('/')
|
||
|
||
let sameDatePref = fillterCurrentDatePrefList(perfData,formattedDatePrefData,formatDate);
|
||
let sameDatePrefTimes = []
|
||
sameDatePref.performances.forEach(function(perf) {
|
||
if(perf.performanceDate){
|
||
let performanceDateTz = DateTime.fromMillis(perf.performanceDate).setZone("UTC+8");
|
||
let time = (perf.performanceDateDisplayFormat == "DISPLAY_FORMAT_NAME_DATE_TIME") ? getI18nTime(performanceDateTz) : getI18nWeek(performanceDateTz);
|
||
let getTime = time.split('， ')[1] ? time.split('， ')[1] : time.split(', ')[1];
|
||
let getEventName = $('#eventName').text() ? $('#eventName').text() : $('.item-title:visible').text();
|
||
sameDatePrefTimes.push( getTime + ' ' + getEventName + '<br>');
|
||
}
|
||
})
|
||
let title = sameDatePrefTimes.join('')
|
||
$(this).attr('title', title);
|
||
$(this).attr('data-toggle', 'tooltip');
|
||
$(this).attr('data-placement', 'top');
|
||
$(this).attr('data-html', true);
|
||
$(this).tooltip('show');
|
||
}
|
||
});
|
||
|
||
myCalendar.onDateClick(function(event,date){
|
||
const formatDate = jsCalendar.tools.dateToString(date, "DD/MM/yyyy");
|
||
|
||
let curClickMonth = formatDate.split('/')[1];
|
||
let curDisplayMonth = $('.jsCalendar-title-name')[0].innerText.split('/')[1];
|
||
let isCurMonth = curClickMonth == curDisplayMonth ? true : false;
|
||
|
||
selDate = formatDate;
|
||
if(formattedDateArr.indexOf(formatDate)!== -1 && isCurMonth){
|
||
myCalendar.clearselect();
|
||
|
||
if($('.jsCalendar-selected').length){
|
||
toSelDate = null;
|
||
$('.jsCalendar-selected')[0].classList.remove('jsCalendar-selected')
|
||
}
|
||
myCalendar.select(formatDate);
|
||
fillterCurrentDatePrefList(perfData,formattedDatePrefData,formatDate)
|
||
dateBox.classList.remove("d-none")
|
||
|
||
}
|
||
})
|
||
|
||
let toSelDate = null;
|
||
if (selectedPerfId) {
|
||
toSelDate = formattedDatePrefData.find(i => i.performanceId == selectedPerfId).performanceDate;
|
||
myCalendar.goto(toSelDate)
|
||
myCalendar.select(toSelDate)
|
||
}else{
|
||
myCalendar.goto(selDate);
|
||
selDate ? myCalendar.select(selDate) : myCalendar.select(min);
|
||
}
|
||
|
||
myCalendar.onDateRender(function(date, element, info) {
|
||
const formatDate = jsCalendar.tools.dateToString(date, "DD/MM/yyyy");
|
||
|
||
element.classList.remove('jsCalendar-soldout')
|
||
|
||
if(formattedDateArr.indexOf(formatDate) === -1){
|
||
element.classList.add('jsCalendar-noPerfDate')
|
||
}
|
||
|
||
let obj = {};
|
||
let newArr = [];
|
||
formattedDatePrefData.forEach(item => {
|
||
if (!obj[item.performanceDate]) {
|
||
var arr = [];
|
||
arr.push(item);
|
||
newArr.push(arr);
|
||
obj[item.performanceDate] = item;
|
||
} else {
|
||
newArr.forEach(function (value, index) {
|
||
if (value[0].performanceDate == item.performanceDate) {
|
||
value.push(item)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
let soldoutDateArr = []
|
||
newArr.forEach(item =>{
|
||
if(item.every(i => i.status == "SOLDOUT")){
|
||
item.forEach(i => {
|
||
if(soldoutDateArr.indexOf(i.performanceDate) == -1){
|
||
soldoutDateArr.push(i.performanceDate)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
if(soldoutDateArr.indexOf(formatDate) !== -1){
|
||
element.classList.add('jsCalendar-soldout')
|
||
}
|
||
|
||
if(document.querySelector('.jsCalendar-selected')!== null && document.querySelector('.jsCalendar-current')!== null){
|
||
document.querySelector('.jsCalendar-current').classList.remove('jsCalendar-current')
|
||
}
|
||
|
||
if(element.classList.contains('jsCalendar-selected')){
|
||
let sameDatePref = fillterCurrentDatePrefList(perfData,formattedDatePrefData,formatDate)
|
||
fillPerformanceData(sameDatePref)
|
||
postConstruct()
|
||
}
|
||
|
||
});
|
||
myCalendar.refresh();
|
||
|
||
changePerfCalendarTheme();
|
||
changePerfCalendarLang();
|
||
}
|
||
|
||
var fillterCurrentDatePrefList = function(perfData,formattedDatePrefData,curDate){
|
||
let sameDatePerfIdArr = []
|
||
formattedDatePrefData.forEach(i =>{
|
||
if(i.performanceDate === curDate){
|
||
return sameDatePerfIdArr.push(i.performanceId)
|
||
}
|
||
})
|
||
|
||
let sameDatePref = {}
|
||
sameDatePref.performances = []
|
||
perfData.performances.forEach(pref =>{
|
||
sameDatePerfIdArr.forEach(id =>{
|
||
if(pref.performanceId === id){
|
||
sameDatePref.performances.push(pref)
|
||
}
|
||
})
|
||
})
|
||
return sameDatePref;
|
||
}
|
||
|
||
var changePerfCalendarTheme = function(){
|
||
if(Cookies.get('cl-theme-color') == 'black'){
|
||
document.querySelector('.jsCalendar').classList.remove('grey-theme')
|
||
document.querySelector('.jsCalendar').classList.add('black-theme')
|
||
}else if(Cookies.get('cl-theme-color') == 'night'){
|
||
document.querySelector('.jsCalendar').classList.remove('black-theme')
|
||
document.querySelector('.jsCalendar').classList.add('grey-theme')
|
||
}else{
|
||
document.querySelector('.jsCalendar').classList.remove('black-theme')
|
||
document.querySelector('.jsCalendar').classList.remove('grey-theme')
|
||
}
|
||
}
|
||
|
||
var changePerfCalendarLang = function(){
|
||
if(get_lang() !== 'en'){
|
||
myCalendar.setLanguage("zh")
|
||
}else{
|
||
myCalendar.setLanguage("en")
|
||
}
|
||
}
|
||
|
||
var handleEventNotAvail = function() {
|
||
let html = '<div style="text-align: center" data-i18n="[html]event-not-available-msg">' + $.i18n("event-not-available-msg") + "</div>";
|
||
$(".main").html(html);
|
||
$("footer").addClass("fixed-bottom");
|
||
}
|
||
|
||
|
||
var utsvEventListCache = null;
|
||
var eventLikeListCache = null;
|
||
var isExpired = function(expiry) {
|
||
return (new Date(expiry) < new Date());
|
||
}
|
||
var getClUtsvEventByUtsvId = function(utsvId) {
|
||
var result = (!utsvEventListCache) ? null :
|
||
utsvEventListCache.filter(function(val, i) {
|
||
return (val.utsvId == utsvId);
|
||
});
|
||
return (result) ? result[0]: null;
|
||
}
|
||
var getLikeCountById = function(evtId) {
|
||
var clEvt = getClUtsvEventByUtsvId(evtId);
|
||
var jsonCount = (clEvt) ? clEvt.likeCount : 0;
|
||
var cookieCount = (clEvt) ? Cookies.get('cl-like-' + clEvt.id) || 0 : 0;
|
||
return Math.max(jsonCount, cookieCount);
|
||
}
|
||
var isLikedEvent = function(evtId) {
|
||
var clEvt = getClUtsvEventByUtsvId(evtId);
|
||
// var cookieLike = (clEvt) ? Cookies.get('cl-like-' + clEvt.id) || 0 : 0;
|
||
// var result = (eventLikeListCache && clEvt) ? eventLikeListCache.indexOf(clEvt.id) : null;
|
||
// return (cookieLike || result >= 0);
|
||
let result
|
||
if(isCitylineLogin){
|
||
result = (eventLikeListCache && clEvt) ? eventLikeListCache.indexOf(clEvt.id) : null;
|
||
return result !== null && result >= 0
|
||
}else{
|
||
var list = JSON.parse(localStorage.getItem("not-login-like-utsvEvent"));
|
||
result = (list && clEvt) ? list.indexOf(clEvt.id) : null;
|
||
return result !== null && result >= 0
|
||
}
|
||
}
|
||
var drawLikeButton = function(evtId) {
|
||
var likeCount = getLikeCountById(evtId);
|
||
if(likeCount || likeCount == 0)
|
||
$('.likeCount').text(likeCount);
|
||
|
||
if(isLikedEvent(evtId))
|
||
$('.likeIcon').addClass('liked');
|
||
else
|
||
$('.likeIcon').removeClass('liked');
|
||
|
||
if(getClUtsvEventByUtsvId(evtId)) $('#likeButton').show();
|
||
}
|
||
var getLatestClUtsvEventList = function() {
|
||
// var url = citylineDomainUrl+'/api/utsvEventList.do';
|
||
var url = citylineDomainUrl+'/data/utsvEventList.json';
|
||
return $.get({url: url, global: false}, function(data, status) {
|
||
if(data && data.utsvEventList) {
|
||
utsvEventListCache = data.utsvEventList;
|
||
utsvEventListCache = utsvEventListCache.map(function(etv) {
|
||
var newEvt = {};
|
||
newEvt['id'] = etv.id;
|
||
newEvt['utsvId'] = etv.utsvId;
|
||
newEvt['likeCount'] = etv.likeCount;
|
||
newEvt['synonym'] = etv.synonym;
|
||
return newEvt;
|
||
});
|
||
var expiry = 15; // in minutes
|
||
var localList = {
|
||
utsvEventListCache,
|
||
'expiry': new Date(new Date().getTime() + (expiry*60*1000)).getTime()
|
||
}
|
||
localStorage.setItem("like-count-utsvEvent", JSON.stringify(localList));
|
||
|
||
var eventId = getUrlParameter('event');
|
||
drawLikeButton(eventId);
|
||
}
|
||
}).fail(function(){
|
||
// console.log("failed to call /api/utsvEventList.do");
|
||
console.log("failed to call /data/utsvEventList.json");
|
||
});
|
||
}
|
||
var getClUtsvEventList = function() {
|
||
var deferred = $.Deferred();
|
||
var list = JSON.parse(localStorage.getItem('like-count-utsvEvent'));
|
||
if (!list || (list.expiry && isExpired(list.expiry))) {
|
||
return getLatestClUtsvEventList();
|
||
} else {
|
||
utsvEventListCache = list.utsvEventListCache;
|
||
var eventId = getUrlParameter('event');
|
||
drawLikeButton(eventId);
|
||
|
||
return deferred;
|
||
}
|
||
}
|
||
var getLatestEventLikeList = function() {
|
||
var url = citylineDomainUrl + '/api/customer/favourite.do';
|
||
return $.get({
|
||
url: url,
|
||
global: false,
|
||
xhrFields: {
|
||
withCredentials: true
|
||
}
|
||
}, function(data, status) {
|
||
if(data && data.utsvEventIds) {
|
||
eventLikeListCache = data.utsvEventIds;
|
||
var expiry = 15; // in minutes
|
||
var localList = {
|
||
'likeList': eventLikeListCache,
|
||
'expiry': new Date(new Date().getTime() + (expiry*60*1000)).getTime()
|
||
}
|
||
if(isCitylineLogin){
|
||
localStorage.setItem("like-list-utsvEvent", JSON.stringify(localList));
|
||
}
|
||
var eventId = getUrlParameter('event');
|
||
drawLikeButton(eventId);
|
||
}
|
||
}).fail(function(){
|
||
console.log("failed to call /api/customer/favourite.do");
|
||
});
|
||
}
|
||
var getEventLikeList = function() {
|
||
var deferred = $.Deferred();
|
||
var likeListJson = JSON.parse(localStorage.getItem('like-list-utsvEvent'));
|
||
if (!likeListJson || (likeListJson.expiry && isExpired(likeListJson.expiry))) {
|
||
return getLatestEventLikeList();
|
||
} else {
|
||
eventLikeListCache = likeListJson.likeList;
|
||
var eventId = getUrlParameter('event');
|
||
drawLikeButton(eventId);
|
||
|
||
return deferred;
|
||
}
|
||
}
|
||
var setupLikeFeature = function() {
|
||
$.when(getClUtsvEventList())
|
||
.then(getEventLikeList());
|
||
}
|
||
var doLikeThisEvent = function(evtId) {
|
||
var clEvt = getClUtsvEventByUtsvId(evtId);
|
||
var isLiked =isLikedEvent(evtId);
|
||
if(clEvt && !isLiked) {
|
||
var url = citylineDomainUrl + '/api/customer/favourite/utsvEvent/' + clEvt.id + '.do';
|
||
console.log('like!', 'utsvId: ' + evtId, 'revamp id: ' + clEvt.id);
|
||
return $.post({
|
||
url: url,
|
||
xhrFields: {
|
||
withCredentials: true
|
||
},
|
||
global: false
|
||
}, function(data, status, xhr){
|
||
var clEvtId = clEvt.id
|
||
var expiry = 60; // in minutes
|
||
var expires = new Date(new Date().getTime() + (expiry*60*1000));
|
||
|
||
if(isCitylineLogin){
|
||
|
||
if(Cookies.get('cl-like-' + clEvt.id)){
|
||
var likeCount = +Cookies.get('cl-like-' + clEvt.id) + 1;
|
||
}else{
|
||
var likeCount = clEvt.likeCount + 1;
|
||
}
|
||
|
||
getLatestEventLikeList()
|
||
}else{
|
||
var likeCount = clEvt.likeCount + 1;
|
||
var notLoginLikeList = JSON.parse(localStorage.getItem("not-login-like-utsvEvent") || "[]");
|
||
notLoginLikeList.push(clEvtId);
|
||
localStorage.setItem("not-login-like-utsvEvent",JSON.stringify(notLoginLikeList))
|
||
}
|
||
Cookies.set('cl-like-' + clEvtId, likeCount, { expires });
|
||
drawLikeButton(evtId);
|
||
return true;
|
||
}).fail(function() {
|
||
return false;
|
||
});
|
||
}
|
||
} |