',
'
' + 'SMS confirmation will be sent within 15 minutes for bookings, subjected to availability and operating hours of the establishment. Bookings made outside operating hours will be processed ASAP once operations resume.' }) ] }, { columnWidth:1, layout:'form', style:'padding-top:10px;padding-left:12px;', labelAlign:'left', labelWidth:120, items:[ { xtype: 'combo', store: ds, fieldLabel: 'Restaurant search', emptyText: '', displayField:'name', typeAhead: false, loadingText: 'Searching...', width: 475, bodyStyle:'', pageSize:10, minChars: 1, queryDelay: 1000, hideTrigger:true, emptyText: "Enter part of the restaurant name to start search", tpl: resultTpl, itemSelector: 'div.search-item' ,onSelect: function(record){ // override default onSelect to do redirect this.setValue(''); this.collapse(); restStore.load({ params: { 'rest-id': record.get("id") } }); } /* //workaround for extjs bug ,listeners: { expand: function(combo) { if (combo.assetHeight == 0 && combo.pageSize > 0 && Ext.isIE7) combo.assetHeight = 28; } } */ } ] }, { columnWidth:1, items:[ new RestSummaryPanel({ store: restStore }) ] }, { columnWidth:.45, layout:'column', style:'padding-top:10px;', items:[ { columnWidth:.5, layout:'form', bodyStyle:'padding:0 0 0 10px;', items: [{ xtype:'datefield', fieldLabel: 'Dining date 用餐日期', allowBlank: false, width: 100, value:currentDate.clearTime(), minValue:currentDate.clearTime(), maxValue:new Date(date.setMonth(date.getMonth()+noOfMonthsAhead)).clearTime(), maxText:'It is too far from current date. Call our hotline 6699-7071 if you have special requests.', disabledDatesText: 'This date is not allowed for instant confirmation.', disabledDaysText: 'This date is not allowed for instant confirmation.', //disabledDates:['10/15/2009','10/31/2009','11/01/2009','11/04/2009','12/01/2009'], //disabledDates:undefined, //disabledDays:[0,6], id: 'booking-form-date', name: 'booking-form-date', listeners:{ 'blur':function(df) { if (Ext.get('instant_confirm_cb').dom.checked) { var disableLunch = false; var disableDinner = false; var date = df.getValue(); var date2 = df.getValue(); var tmr = new Date(date2.setDate(date2.getDate()+1)).clearTime(); //if date falls in weekend or friday var day = date.getDay(); if (day == 6) { //sat if (disable_instant_confirm_sat_lunch) { disableLunch = true; } if (disable_instant_confirm_sat_dinner) { disableDinner = true; } } else if (day == 5) { //fri if (disable_instant_confirm_sat_eve) { disableDinner = true; } } else if (day == 0) { //sun if (disable_instant_confirm_sun_lunch) { disableLunch = true; } if (disable_instant_confirm_sun_dinner) { disableDinner = true; } } //if day is in ph or ph eve if (!(disableLunch&&disableDinner)) { if (disable_instant_confirm_ph_lunch || disable_instant_confirm_ph_dinner) { //ph //get all dates in ph store and compare phStore.each(function(rec){ var datestring = rec.get('date'); var d=Date.parse("datestring"); //d is time long var ph_date = new Date(); ph_date.setTime(d); if (ph_date.getTime()==date.getTime()) { if (disable_instant_confirm_ph_lunch) { disableLunch = true; } if (disable_instant_confirm_ph_dinner) { disableDinner = true; } } }); } if (disable_instant_confirm_ph_eve) { //ph eve //get all dates in ph store and compare phStore.each(function(rec){ var datestring = rec.get('date'); var d=Date.parse(datestring); //d is time long var ph_date = new Date(); ph_date.setTime(d); //get selected_date+1 and compare if (ph_date.getTime()==tmr.getTime()) { if (disable_instant_confirm_ph_eve) { disableDinner = true; } } }); } } //if day is special if (!(disableLunch&&disableDinner)&&disable_instant_confirm_has_other) { var instant_confirm_disabled_dates = rest_rec.get('instant_confirm_disabled_dates'); if (instant_confirm_disabled_dates && instant_confirm_disabled_dates.length!=0) { for (var i=0; i).getTime()+')
'
}
]
}
,{
columnWidth:.42,
id:'vcode-3',
hidden:true,
items:[
{
xtype:'panel',
border: false,
style:'font-size:11px;',
html: 'Letters are not case-sensitive'
}
]
}//end verification code
//******************E-mail ID****************************
,{
columnWidth:1,
height:5,
id:'emailid-1',
hidden:true,
style:'line-height:5px;border-bottom:1px solid #eeeeee;',
html:' '
}
,{
columnWidth:.3,
layout: 'form',
id:'emailid-2',
hidden:true,
style:'padding-top:10px;padding-left:10px;',
items: [{
xtype:'textfield',
width: 145,
fieldLabel: 'E-mail 电子邮件',
maxLength: 128,
validationDelay: validationDelayInMillis,
allowBlank:false,
validator: function(value){
// return validateEmail(value);
var email_valid_msg = validateEmail(value);
if (email_valid_msg+'' != 'true') {
return email_valid_msg;
}
var username_valid_msg = checkUsernameAvailability(value);
if (username_valid_msg+'' != 'true') {
return username_valid_msg;
}
return true;
},
id: 'booking-form-email_id',
name: 'booking-form-email_id'
}]
}
,{
columnWidth:.7,
id:'emailid-3',
hidden:true,
style:'padding-top:10px;line-height:14px;',
html:"
This e-mail will be used as your user ID. Please check e-mail for more info after booking." +
" You can keep track of your booking records and manage rewards points after sign in." +
" The latest & greatest discounts, promotions, news etc. will be sent to this email."
}
,{
columnWidth:1,
height: 20
}
]
,buttonAlign:'center'
,buttons: [
{
id: 'submit-btn',
minWdith:100,
text: 'Book',
handler: doSubmit
},
{
text: 'Close',
minWdith:100,
handler: function(){Ext.getCmp('restaurant-booking-form').destroy()}
}
]
});
Ext.getCmp('submit-btn').on('render', function(){
if (bookingId && bookingId.length!=0) {
//modifying booking record, hide sign in components
has_user_signin = true;
Ext.getCmp('signin-checkbox').hide();
for (var i=1; i<=4; i++) {
Ext.getCmp('existing-user-'+i).hide();
}
for (var i=1; i<=3; i++) {
Ext.getCmp('emailid-'+i).hide();
}
bookingStore.load({
params: {
},
callback: function(records){
var restId = records[0].get('rest_id');
Ext.getCmp('rest-id').setValue(restId);
var diningDate = records[0].get('dining_date2');
var diningTime = records[0].get('dining_time2');
if (diningTime.charAt(0) == '0') {
diningTime = diningTime.substring(1, diningTime.length);
}
Ext.getCmp('booking-form-date').setValue(diningDate);
Ext.getCmp('booking-form-time').setValue(diningTime);
var noOfPerson = records[0].get('no_of_persons');
Ext.getCmp('booking-form-noofperson').setValue(noOfPerson);
var vipRoom = Url.replaceEscape(records[0].get('viproom'));
Ext.getCmp('booking-form-viproom').setValue(vipRoom);
var otherRequirements = Url.replaceEscape(records[0].get('other_requirements'));
Ext.getCmp('booking-form-other-requirements').setValue(otherRequirements);
var contactTitle = Url.replaceEscape(records[0].get('title'));
Ext.getCmp('booking-form-title').setValue(contactTitle);
var contactName = Url.replaceEscape(records[0].get('name'));
if (contactName && contactName.length != 0) {
Ext.getCmp('booking-form-name').setValue(contactName);
}
var contactMobileCtryCode = records[0].get('mobile_ctry_code');
Ext.getCmp('booking-form-mobile-ctrycode').setValue(contactMobileCtryCode);
var contactMobile = records[0].get('mobile');
Ext.getCmp('booking-form-mobile').setValue(contactMobile);
var contactEmail = Url.replaceEscape(records[0].get('email'));
Ext.getCmp('booking-form-email').setValue(contactEmail);
var contactVia = records[0].get('contact_via');
if (contactVia && contactVia.length != 0) {
if (contactVia == 'Email') {
contactVia = 'E-mail';
Ext.getCmp('contact-phone-no').hide();
Ext.getCmp('contact-phone-no-dash').hide();
Ext.getCmp('contact-phone-no-ctrycode').hide();
Ext.getCmp('contact-email').show();
}
Ext.getCmp('booking-form-contactvia').setValue(contactVia);
}
var contactPreferredLanguage = records[0].get('diner_preferred_language');
Ext.getCmp('booking-form-preferred-language').setValue(contactPreferredLanguage);
}
})
} else {
loadUserContacts();
}
});
var win = Ext.getCmp('restaurant-booking-form');
if (win) {
win.show();
return;
}
//Create window*****************************************************************************
var booking_form = new Ext.Window({
id: 'restaurant-booking-form',
title: 'Restaurant Booking Form',
width: 650,
height:'auto',
draggable:false,
autoScroll:true,
border:false,
buttonAlign:'center',
items:[
panel
]
});
restStore.on('load', function(store, records){
if (records && records.length != 0) {
rest_rec = records[0];
restId = records[0].get('id');
Ext.getCmp('rest-id').setValue(restId);
var vip_room = rest_rec.get('viproom');
if (vip_room=='' || vip_room.toLowerCase()=='no' || vip_room.toLowerCase()=='n') {
//if (vip_room.toLowerCase()=='no' || vip_room.toLowerCase()=='n') {
Ext.getCmp('booking-form-viproom').disable();
}
Ext.getCmp('restaurant-booking-form').setTitle('Restaurant Booking Form' + ' - ' + rest_rec.get('name') + '');
}
});
booking_form.on('show', function(){
restStore.load({
params: {
'rest-id': restId
}
});
});
booking_form.show();
//validate username***************************************************
function validateUsername(username) {
if (username=="") {
return true;
}
var msg = checkUsername2(username);
if (msg.length != 0) {
return msg;
}
//Create store to check user login*********************************************************
var store = new Ext.data.JsonStore({
url: '/CommonServlet?action=checkUsernameAvailability'
,root: 'results'
,fields: ['success', 'exist', 'msg']
});
//backend check user availability
store.load({
params: {
username: username
},
callback: function(records){
for (var x = 0; x < records.length; x++){
var status = records[x].get('success');
var exist = records[x].get('exist');
if (status == 'true' && exist == 'no') {
Ext.getCmp('login-form-username').markInvalid("This username doesn't exist.");
err_username = true;
return;
}
if (status == 'true' && exist == 'yes') {
err_username = false;
return;
}
}
}
});
return true;
}
//validate password***************************************************
function validatePassword() {
var cmp = Ext.getCmp('login-form-password');
var password = cmp.getValue();
var msg = checkPassword2(password);
if (msg.length != 0) {
return msg;
}
return true;
}
//validate email*******************************************************
function validateEmail(email) {
if (email.length == 0) {
return true;
}
var msg = checkEmail(email);
if (msg.length != 0) {
return msg;
}
return true;
}
function checkUserRegistration() {
var hp_ctry_code = Ext.getCmp('booking-form-mobile-ctrycode').getValue();
var hp = Ext.getCmp('booking-form-mobile').getValue();
if (hp=="") {
return;
}
//Create store to check user login*********************************************************
var store = new Ext.data.JsonStore({
url: '/CommonServlet?action=checkUserRegistrationByHP'
,root: 'results'
,fields: ['req_reg']
});
//backend check user availability
Ext.getCmp('submit-btn').disable();
store.load({
params: {
hp: hp,
hp_ctry_code: hp_ctry_code
},
callback: function(records){
if (records && records.length!=0){
var s_req_reg = records[0].get('req_reg');
if (!has_user_signin && (s_req_reg == 'y' || s_req_reg == 'Y')) {
req_reg = true;
if (Ext.getCmp('booking-form-contactvia').getValue()!='E-mail') {
for (var i=1; i<=3; i++) {
Ext.getCmp('emailid-'+i).show();
}
}
} else {
req_reg = false;
for (var i=1; i<=3; i++) {
Ext.getCmp('emailid-'+i).hide();
}
}
}
Ext.getCmp('submit-btn').enable();
}
});
}
function checkUsernameAvailability(username) {
if (username=="") {
return true;
}
var msg = checkUsername2(username);
if (msg.length != 0) {
return msg;
}
//Create store to check user login*********************************************************
var signUpStore = new Ext.data.JsonStore({
url: '/CommonServlet?action=checkUsernameAvailability'
,root: 'results'
,fields: ['success', 'exist', 'msg']
});
//backend check user availability
signUpStore.load({
params: {
username: username
},
callback: function(records){
for (var x = 0; x < records.length; x++){
var status = records[x].get('success');
var exist = records[x].get('exist');
if (status == 'true' && exist == 'no') {
errEmailID = false;
//return true;
}
if (status == 'true' && exist == 'yes') {
Ext.getCmp('booking-form-email_id').markInvalid('This e-mail has been registered.');
errEmailID = true;
//return 'This email has been registered.';
}
}
}
});
return true;
}
}
function clickInstantConfirmCB() {
var cb_checked = Ext.get('instant_confirm_cb').dom.checked;
if (cb_checked) {
if (!rest_rec) {
return;
}
if (!isPHStoreLoaded) {
alert('Error loading criteria for instant confirmation. Please reload the page and try again.');
Ext.get('instant_confirm_cb').dom.checked = false;
return;
}
Ext.getCmp('booking-form-viproom').disable();
Ext.getCmp('booking-form-other-requirements').disable();
//set max no of pax
var instant_confirm_no_of_pax = rest_rec.get('instant_confirm_no_of_pax');
Ext.getCmp('booking-form-noofperson').maxValue = instant_confirm_no_of_pax;
var value = Ext.getCmp('booking-form-noofperson').getValue();
if (value) {
Ext.getCmp('booking-form-noofperson').setValue(value); //to trigger validation
}
//set time
var instant_confirm_lunch_lb = rest_rec.get('instant_confirm_lunch_lb');
var instant_confirm_lunch_ub = rest_rec.get('instant_confirm_lunch_ub');
var instant_confirm_dinner_lb = rest_rec.get('instant_confirm_dinner_lb');
var instant_confirm_dinner_ub = rest_rec.get('instant_confirm_dinner_ub');
var newTimeList = [];
var index1 = timeStore.find('time', instant_confirm_lunch_lb);
var index2 = timeStore.find('time', instant_confirm_lunch_ub);
for (var i=index1; i | My Account | Sign Out';
} else {
is_agent = '';
}
} else {
/* for (var i=1; i<=3; i++) {
Ext.getCmp('emailid-'+i).show();
}
*/ }
}
});
}
',
'
',
{
getDisplayCss: function(str) {
if (str && str.length!=0) {
return "";
}
return 'display:none;';
}
,getDiscountStr: function(discount) {
if (discount && discount.length != 0) {
return ''+discount+'';
}
return 'No';
}
,getOtherBenefitsStr: function(other_benefits) {
if (other_benefits && other_benefits.length != 0) {
return ''+other_benefits+'';
}
return 'No';
}
,getPointsRateStr: function(points_rate) {
if (points_rate == 0) {
return points_rate;
}
return ''+points_rate+'';
}
,getPointsRateDisplayCss: function(rate) {
if (rate!=0) {
return "";
}
return 'display:none;';
}
,getDisplayCss: function(str){
if (str && str.length != 0) {
return '';
}
return 'display:none;';
}
,getInstantConfirmDisplayCss: function(str) {
if (str && str.toLowerCase()=="y") {
return "";
}
return 'display:none;';
}
,replaceEscape: function(str){
return Url.replaceEscape(str);
}
}
);
RestSummaryPanel = Ext.extend(Ext.DataView, {
frame: true
,loadingText: 'loading...'
,itemSelector: 'table'
,style:''
,tpl: restTpl
});
var doLoadContact = function() {
var isUsernameValid = Ext.getCmp('login-form-username').isValid();
var isPasswordValid = Ext.getCmp('login-form-password').isValid();
var username = Ext.getCmp('login-form-username').getValue();
var password = Ext.getCmp('login-form-password').getValue();
if (username.length == 0) {
Ext.getCmp('login-form-username').markInvalid("User name cannot be empty.");
isUsernameValid = false;
}
if (password.length == 0) {
Ext.getCmp('login-form-password').markInvalid("Password cannot be empty.");
isPasswordValid = false;
}
if (err_username || !isUsernameValid || !isPasswordValid) {
errMsg = 'Some fields contain errors. Please correct them first.';
errWindow.show();
return;
}
//backend check user credentials
var err_username = false;
var loginStore = new Ext.data.JsonStore({
url: '/CommonServlet?action=doUserLogin'
,root: 'results'
,fields: ['success', 'msg']
});
loginStore.load({
params: {
id: username,
pwd: password
},
callback: function(records){
for (var x = 0; x < records.length; x++){
var status = records[x].get('success');
if (status == 'false') {
errMsg = records[x].get('msg');
errWindow.show();
return;
}
}
loadUserContacts();
}
});
}
var ds = new Ext.data.JsonStore({
url: '/RestaurantServlet?action=getRestaurantSummary'
,root: 'results'
,totalProperty: 'totalCount'
,id: 'id'
,fields: ['id', 'name', 'phone', 'photo', 'district', 'cuisine', 'discount', 'occasion', 'viproom', 'expense', 'address', 'points_rate', 'other_benefits', 'buffet']
});
// Custom rendering Template
var resultTpl = new Ext.XTemplate(
'',
'',
'
',
'
',
'
| ',
'Instant confirmation | ', '
',
'',
'
',
'
',
'| Phone 电话: | ', '{phone} | ', '
| Discount 折扣: | ', '{discount:this.getDiscountStr} | ', '
| Other benefits: | ', '{other_benefits:this.getOtherBenefitsStr} | ', '
| Address 地址: | ', '{address} | ', '
| Note 注意: | ', '{other_notes:this.replaceEscape} | ', '
',
'',
'
',
'',
'',
'
',
'
', '
| {name} | ', ' | ',
'
| Phone: | ', '{phone} | ', '
| Discount: | ', '{discount:this.getBenefitStr} | ', '
| Other benefits: | ', '{other_benefits:this.getBenefitStr} | ', '
| Points rate: | ', '{points_rate:this.getPointsRateStr} | ', '
| Cuisine: | ', '{cuisine} | ', '
| VIP room: | ', '{viproom} | ', '
| Buffet: | ', '{buffet} | ', '
| Address: | ', '{address} | ', '
'+benefit+'
';
}
return 'No';
}
},
{
getPointsRateStr: function(points_rate) {
if (points_rate == 0) {
return points_rate;
}
return ''+points_rate+'
';
}
},
{
getPointsRateDisplayCss: function(rate) {
if (rate!=0) {
return "";
}
return 'display:none;';
}
},
{
getDisplayCss: function(str){
if (str && str.length != 0) {
return '';
}
return 'display:none;';
}
}
);
var currentDate = new Date();
var date = new Date();
//define main view****************************************************************************************
var panel = new Ext.FormPanel({
url:'/RestaurantServlet',
id:'booking-form-panel',
autoHeight: true,
autoScroll: false,
frame: true,
layout: 'column',
labelAlign:'top',
items: [
{
columnWidth:1,
items:[
new Ext.ux.BubblePanel({
style:'padding:0 10px 15px;font-size;11px;',
bodyStyle:'padding:0 10px;line-height:16px;',
html:'Note: Reservation Operating Hours: 9:30am - 6:30pm, daily' + 'SMS confirmation will be sent within 15 minutes for bookings, subjected to availability and operating hours of the establishment. Bookings made outside operating hours will be processed ASAP once operations resume.' }) ] }, { columnWidth:1, layout:'form', style:'padding-top:10px;padding-left:12px;', labelAlign:'left', labelWidth:120, items:[ { xtype: 'combo', store: ds, fieldLabel: 'Restaurant search', emptyText: '', displayField:'name', typeAhead: false, loadingText: 'Searching...', width: 475, bodyStyle:'', pageSize:10, minChars: 1, queryDelay: 1000, hideTrigger:true, emptyText: "Enter part of the restaurant name to start search", tpl: resultTpl, itemSelector: 'div.search-item' ,onSelect: function(record){ // override default onSelect to do redirect this.setValue(''); this.collapse(); restStore.load({ params: { 'rest-id': record.get("id") } }); } /* //workaround for extjs bug ,listeners: { expand: function(combo) { if (combo.assetHeight == 0 && combo.pageSize > 0 && Ext.isIE7) combo.assetHeight = 28; } } */ } ] }, { columnWidth:1, items:[ new RestSummaryPanel({ store: restStore }) ] }, { columnWidth:.45, layout:'column', style:'padding-top:10px;', items:[ { columnWidth:.5, layout:'form', bodyStyle:'padding:0 0 0 10px;', items: [{ xtype:'datefield', fieldLabel: 'Dining date 用餐日期', allowBlank: false, width: 100, value:currentDate.clearTime(), minValue:currentDate.clearTime(), maxValue:new Date(date.setMonth(date.getMonth()+noOfMonthsAhead)).clearTime(), maxText:'It is too far from current date. Call our hotline 6699-7071 if you have special requests.', disabledDatesText: 'This date is not allowed for instant confirmation.', disabledDaysText: 'This date is not allowed for instant confirmation.', //disabledDates:['10/15/2009','10/31/2009','11/01/2009','11/04/2009','12/01/2009'], //disabledDates:undefined, //disabledDays:[0,6], id: 'booking-form-date', name: 'booking-form-date', listeners:{ 'blur':function(df) { if (Ext.get('instant_confirm_cb').dom.checked) { var disableLunch = false; var disableDinner = false; var date = df.getValue(); var date2 = df.getValue(); var tmr = new Date(date2.setDate(date2.getDate()+1)).clearTime(); //if date falls in weekend or friday var day = date.getDay(); if (day == 6) { //sat if (disable_instant_confirm_sat_lunch) { disableLunch = true; } if (disable_instant_confirm_sat_dinner) { disableDinner = true; } } else if (day == 5) { //fri if (disable_instant_confirm_sat_eve) { disableDinner = true; } } else if (day == 0) { //sun if (disable_instant_confirm_sun_lunch) { disableLunch = true; } if (disable_instant_confirm_sun_dinner) { disableDinner = true; } } //if day is in ph or ph eve if (!(disableLunch&&disableDinner)) { if (disable_instant_confirm_ph_lunch || disable_instant_confirm_ph_dinner) { //ph //get all dates in ph store and compare phStore.each(function(rec){ var datestring = rec.get('date'); var d=Date.parse("datestring"); //d is time long var ph_date = new Date(); ph_date.setTime(d); if (ph_date.getTime()==date.getTime()) { if (disable_instant_confirm_ph_lunch) { disableLunch = true; } if (disable_instant_confirm_ph_dinner) { disableDinner = true; } } }); } if (disable_instant_confirm_ph_eve) { //ph eve //get all dates in ph store and compare phStore.each(function(rec){ var datestring = rec.get('date'); var d=Date.parse(datestring); //d is time long var ph_date = new Date(); ph_date.setTime(d); //get selected_date+1 and compare if (ph_date.getTime()==tmr.getTime()) { if (disable_instant_confirm_ph_eve) { disableDinner = true; } } }); } } //if day is special if (!(disableLunch&&disableDinner)&&disable_instant_confirm_has_other) { var instant_confirm_disabled_dates = rest_rec.get('instant_confirm_disabled_dates'); if (instant_confirm_disabled_dates && instant_confirm_disabled_dates.length!=0) { for (var i=0; i
{time}
',
id: 'booking-form-time',
name: 'booking-form-time',
value:'7:00 PM',
listeners:{
'blur':function(combo){
triggerTimeValidation(combo.store);
}
}
}]
}
,{
columnWidth:.5,
layout:'form',
bodyStyle:'padding:0 0 0 10px;',
items: [{
xtype:'numberfield',
width: 100,
fieldLabel: 'No of person 人数',
allowBlank: false,
allowDecimals: false,
allowNegative: false,
id: 'booking-form-noofperson',
name: 'booking-form-noofperson'
}]
}
,{
columnWidth:.5,
layout:'form',
items: [{
xtype:'combo',
width: 100,
fieldLabel: 'VIP room 包厢',
store: viproomStore,
displayField: 'viproom',
valueField: 'viproom',
mode: 'local',
editable: false,
triggerAction: 'all',
tpl: '{viproom}
{title}
{contactvia}
{language}
This e-mail will be used as your user ID. Please check e-mail for more info after booking. You can keep track of your booking records and manage rewards points after sign in. The latest & greatest discounts, promotions, news etc. will be sent to this email.