add all files
This commit is contained in:
@@ -0,0 +1,426 @@
|
||||
<div class="bookingContainer">
|
||||
<div class="bookingTitle">Foglalási folyamat</div>
|
||||
<ul class="steps-indicator steps-3">
|
||||
<li>
|
||||
<div class="stepTitleContainer">
|
||||
<div class="stepLine"></div>
|
||||
<div class="stepCircle activeStep" id="stepCircle1"></div>
|
||||
<div class="stepTitle">LÉPÉS 1</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="stepTitleContainer">
|
||||
<div class="stepLine"></div>
|
||||
<div class="stepCircle" id="stepCircle2"></div>
|
||||
<div class="stepTitle">LÉPÉS 2</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="stepTitleContainer">
|
||||
<div class="stepCircle" id="stepCircle3"></div>
|
||||
<div class="stepTitle">LÉPÉS 3</div>
|
||||
</div>
|
||||
<li>
|
||||
</ul>
|
||||
<div class="totalPanelContainer">
|
||||
<div id="totalPanel">
|
||||
<div class="serviceBookingDateContainer">
|
||||
<div id="serviceBookingDate"></div>
|
||||
<div id="serviceBookingTime"></div>
|
||||
</div>
|
||||
<div class="serviceBookingWorkerContainer">
|
||||
</div>
|
||||
<div class="serviceContent">
|
||||
</div>
|
||||
<div class="totalSelectedTime"></div>
|
||||
<div class="totalPrice"></div>
|
||||
</div>
|
||||
<div id="totalPanelBtnContainer">
|
||||
<div id="totalPanelBtn"><i class="fas fa-caret-right"></i></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<form method="post" action="<?php echo SITEURL;?>booking-process">
|
||||
<div class="BookingStepContainer" id="bookingStep1">
|
||||
|
||||
<div class="totalTime"><input type="time" id="servicelength" name="servicelength" value="00:00"></div>
|
||||
|
||||
<div class="bookingTable">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">Szolgáltatások</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serviceTable">
|
||||
<div class="serviceHeader">
|
||||
<div class="serviceCol serviceNameCol">Szolgáltatás neve</div>
|
||||
<div class="serviceCol"></div>
|
||||
<div class="serviceCol servicePriceCol">Ára</div>
|
||||
<div class="serviceCol serviceInfoCol"></div>
|
||||
<div class="serviceCol serviceCheckCol"></div>
|
||||
</div>
|
||||
<?php
|
||||
$prevousCategory = '';
|
||||
|
||||
if(is_array($services)){
|
||||
foreach($services as $serviceItem){
|
||||
if($serviceItem->service_category != $prevousCategory){
|
||||
?>
|
||||
<div class="serviceRow">
|
||||
<div class="serviceCol" style="width: 100%">
|
||||
<h4><?php echo $serviceItem->service_category;?></h4>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<div class="serviceRow">
|
||||
<div class="serviceCol serviceNameCol" id="serviceName_<?php echo $serviceItem->service_id;?>"><?php echo $serviceItem->service_name;?></div>
|
||||
<div class="serviceCol"><input type="time" class="serviceTime" id="time_<?php echo $serviceItem->service_id;?>" value="<?php echo $serviceItem->service_time;?>"/></div>
|
||||
<div class="serviceCol servicePriceCol" id="servicePrice_<?php echo $serviceItem->service_id;?>"><?php echo $serviceItem->service_price;?></div>
|
||||
<div class="serviceCol serviceInfoCol">
|
||||
<div class="serviceInfoIcon">
|
||||
<i class="fas fa-info-circle"></i><div class="serviceInfoLabel"><?php echo $serviceItem->service_description;?></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serviceCol serviceCheckCol">
|
||||
<input type="hidden" name="service_<?php echo $serviceItem->service_id;?>" value="0"/>
|
||||
|
||||
<input type="checkbox" class="service" id="<?php echo $serviceItem->service_id;?>" name="service_<?php echo $serviceItem->service_id;?>" value="1"/>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$prevousCategory = $serviceItem->service_category;
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bookingButtonContainer">
|
||||
<input type="button" class="rightButton bookingButton" onclick="goToStep(2);" value="Következő"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="BookingStepContainer" id="bookingStep2">
|
||||
<input type="hidden" name="worker_id" id="worker_id" value="">
|
||||
<input type="hidden" name="subpage" id="subpage" value="<?php echo $subpage;?>">
|
||||
<input type="hidden" name="lang" id="lang" value="<?php echo $selectedLang;?>">
|
||||
<div class="bookingHeader">Válassz dolgozót</div>
|
||||
<div class="workerTable">
|
||||
<?php
|
||||
if(is_array($workers)){
|
||||
foreach($workers as $workerItem){
|
||||
?>
|
||||
<label for="worker_<?php echo $workerItem->worker_id;?>">
|
||||
<div class="profileRow">
|
||||
<div class="profileCell profileRadioBtn"><input type="radio" class="workers" id="worker_<?php echo $workerItem->worker_id;?>" onclick="setWorker('<?php echo $workerItem->worker_id;?>')"></div>
|
||||
<div class="profileCell profileImage"><img src="<?php echo SITEURL.'assets/img/'.$workerItem->worker_profile_img;?>"></div>
|
||||
<div class="profileCell">
|
||||
<div class="profileName"><?php echo $workerItem->worker_name;?></div>
|
||||
<div class="profileDescription"><?php echo $workerItem->worker_info;?></div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="bookingButtonContainer">
|
||||
<input type="button" class="leftButton bookingButton" onclick="goToStep(1);" value="Vissza"/>
|
||||
<input type="button" class="rightButton bookingButton" onclick="goToStep(3);" value="Következő"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="BookingStepContainer" id="bookingStep3">
|
||||
<div class="bookingCalendar">
|
||||
<div id="datepicker"></div>
|
||||
</div>
|
||||
<div class="bookingResultsWrapper">
|
||||
<div class="availableTimesContainerTitle"></div>
|
||||
<div class="availableTimesContainer" style="padding:5px;">
|
||||
<input type="hidden" name="booking_date" id="booking_date" value="<?php echo date('Y-m-d');?>">
|
||||
<input type="hidden" name="booking_start_time" id="booking_time" value="">
|
||||
|
||||
<div class="availableTimes">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bookingButtonContainer">
|
||||
<input type="button" class="leftButton bookingButton" onclick="goToStep(2);" value="Vissza"/>
|
||||
<input type="button" class="rightButton bookingButton" id="isTimeSelectedBtn" onclick="goToStep(4);" value="Tovább" disabled/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="BookingStepContainer" id="bookingStep4">
|
||||
|
||||
<div class="formRow">
|
||||
<label class="bookingEmailTitle">Név:</label>
|
||||
<input type="text" class="bookingName" name="guest_name" value="" required>
|
||||
</div>
|
||||
<div class="formRow">
|
||||
<label class="bookingEmailTitle">E-mail:</label>
|
||||
<input type="text" class="bookingEmail" name="guest_email" value="" required>
|
||||
</div>
|
||||
<div class="formRow">
|
||||
<label class="bookingPhoneTitle">Telefon:</label>
|
||||
<input type="text" class="bookingPhone" name="guest_phone" value="" required>
|
||||
</div>
|
||||
|
||||
<div class="bookingButtonContainer">
|
||||
<input type="button" class="leftButton bookingButton" onclick="goToStep(3);" value="Vissza"/>
|
||||
<input type="hidden" name="subpage" value="<?php echo $subpage;?>">
|
||||
<div class="g-recaptcha" data-callback="recaptcha_callback" data-sitekey="6Ld_sS0pAAAAANQrY3ziDGPcsjMOdM9L9WIgAzxd"></div>
|
||||
<input type="submit" id="sendBooking" class="rightButton bookingSubmit" for="bookingStepForm" name="sendBooking" value="Elküld" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#booking_time').change(function(){
|
||||
if($('#booking_time').val() != ''){
|
||||
$('#isTimeSelectedBtn').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
|
||||
$('#totalPanelBtn').click(function(){
|
||||
if($('#totalPanel').is(':visible')){
|
||||
$('#totalPanelBtn').html('<i class="fas fa-caret-left"></i>');
|
||||
$('#totalPanel').hide();
|
||||
$('#totalPanelBtn').css('border-top-left-radius','5px');
|
||||
$('#totalPanelBtn').css('border-bottom-left-radius','5px');
|
||||
|
||||
}
|
||||
else{
|
||||
$('#totalPanelBtn').html('<i class="fas fa-caret-right"></i>');
|
||||
$('#totalPanel').show();
|
||||
$('#totalPanelBtn').css('border-top-left-radius','0px');
|
||||
$('#totalPanelBtn').css('border-bottom-left-radius','0px');
|
||||
}
|
||||
});
|
||||
|
||||
$('.service').click(function(){
|
||||
var totalPrice = 0;
|
||||
var selectedServices = '<div class="selectedServiceTable">';
|
||||
selectedServices += '<div class="totalServiceRow serviceHeader"><div class="selectedServiceCol totalSelectedServiceName">Service name</div><div class="selectedServiceCol totalSelectedServicePrice">Price</div><div class="selectedServiceCol serviceInfoCol"></div><div class="selectedServiceCol serviceCheckCol"></div></div>';
|
||||
|
||||
var classIsChecked = 0;
|
||||
$('#servicelength').val('00:00');
|
||||
$('.service').each(function(i, obj) {
|
||||
if($(this).is(':checked')){
|
||||
classIsChecked = 1;
|
||||
var selected_id = $(this).attr('id');
|
||||
selectedPriceElement = document.getElementById('servicePrice_'+selected_id).innerHTML;
|
||||
totalPrice = totalPrice + parseInt(selectedPriceElement);
|
||||
selectedNameElement = document.getElementById('serviceName_'+selected_id).innerHTML;
|
||||
selectedServices = selectedServices + '<div class="totalServiceRow"><div class="selectedServiceCol totalSelectedServiceName">'+selectedNameElement+'</div><div class="selectedServiceCol totalSelectedServicePrice">'+selectedPriceElement+' kr</div></div>';
|
||||
|
||||
var selectedTotalTime = $('#servicelength').val();
|
||||
const selectedServiceDatetime = new Date('<?php echo date('Y-m-d');?> ' + $('#time_'+selected_id).val());
|
||||
|
||||
var subTotalTimeHours = moment.utc(selectedTotalTime,'HH:mm').add(selectedServiceDatetime.getHours(),'hour').format('HH:mm');
|
||||
var subTotalTimeMinutes = moment.utc(subTotalTimeHours,'HH:mm').add(selectedServiceDatetime.getMinutes(),'minutes').format('HH:mm');
|
||||
//console.log(subTotalTimeMinutes);
|
||||
$('#servicelength').val(subTotalTimeMinutes);
|
||||
}
|
||||
});
|
||||
|
||||
selectedServices +='</div></div></div>';
|
||||
$('.serviceContent').html(selectedServices);
|
||||
$('.totalPrice').html('<span class="totalTitle">Total:</span> <span>' + totalPrice + '</span><span class="totalTitle"> kr</span>');
|
||||
$('.totalSelectedTime').html('<span class="totalTitle">Total time:</span> <span>' + $('#servicelength').val() + '</span>');
|
||||
|
||||
if(classIsChecked){
|
||||
$('#totalPanelBtn').show();
|
||||
$('#totalPanel').show();
|
||||
}
|
||||
else{
|
||||
$('#totalPanelBtn').hide();
|
||||
$('#totalPanel').hide();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
function recaptcha_callback(){
|
||||
$('#sendBooking').prop("disabled", false);
|
||||
}
|
||||
|
||||
$(function(){
|
||||
|
||||
$("#datepicker").datepicker({
|
||||
firstDay: 1,
|
||||
defaultDate: new Date(),
|
||||
dateFormat: 'yy-mm-dd',
|
||||
onSelect: function(dateText) {
|
||||
$('#booking_date').val(this.value);
|
||||
getAvaliableTimesOfTheDay(this.value);
|
||||
//console.log("Selected date: " + dateText + "; input's current value: " + this.value);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
function getAvaliableTimesOfTheDay(selectedDate){
|
||||
$('.bookingResultsWrapper').show();
|
||||
$('#serviceBookingDate').html(selectedDate);
|
||||
$('#serviceBookingDate').show();
|
||||
//console.log(selectedDate);
|
||||
|
||||
$.ajax({
|
||||
url: '<?php echo base_url();?>ajax',
|
||||
type: 'POST',
|
||||
data: {
|
||||
action:'getAvailableTimes',
|
||||
worker_id:$('#worker_id').val(),
|
||||
servicelength:$('#servicelength').val(),
|
||||
selectedDate:selectedDate
|
||||
},
|
||||
error: function() {
|
||||
},
|
||||
//dataType: 'json',
|
||||
success: function(data) {
|
||||
},
|
||||
}).done(function(result){
|
||||
if(result != 0){
|
||||
$('.availableTimes').html(result);
|
||||
}
|
||||
else{
|
||||
$('.availableTimes').html('There is not available time on this day!');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function setSelectedTime(time, id){
|
||||
$('#booking_time').val(time).trigger('change');
|
||||
$('#serviceBookingTime').html(time);
|
||||
$('#serviceBookingTime').show();
|
||||
|
||||
$('.availableBookingTime').each(function(i, obj) {
|
||||
$(this).removeClass('selectedTime');
|
||||
});
|
||||
|
||||
|
||||
//$('#bookingStep4').show();
|
||||
$('#bookingTime_'+id).addClass('selectedTime');
|
||||
}
|
||||
|
||||
function goToStep(stepNumber){
|
||||
|
||||
if(canGotoNextStep(stepNumber)){
|
||||
$('.stepCircle').each(function(i, obj) {
|
||||
$(this).removeClass('activeStep');
|
||||
});
|
||||
|
||||
//$('#stepCircle'+stepNumber).addClass('activeStep');
|
||||
|
||||
$('.BookingStepContainer').each(function(i, obj) {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$('#bookingStep'+stepNumber).show();
|
||||
|
||||
if(stepNumber == 4){
|
||||
$('#stepCircle1').addClass('activeStep');
|
||||
$('#stepCircle2').addClass('activeStep');
|
||||
$('#stepCircle3').addClass('activeStep');
|
||||
}
|
||||
else if(stepNumber == 3){
|
||||
if($("#datepicker").val() != ''){
|
||||
getAvaliableTimesOfTheDay($("#datepicker").val());
|
||||
}
|
||||
|
||||
$('.bookingSummaryContainer').show();
|
||||
$('#stepCircle1').addClass('activeStep');
|
||||
$('#stepCircle2').addClass('activeStep');
|
||||
$('#stepCircle3').addClass('activeStep');
|
||||
}
|
||||
else{
|
||||
if(stepNumber == 1){
|
||||
$('#stepCircle1').addClass('activeStep');
|
||||
}
|
||||
if(stepNumber == 2){
|
||||
$('#stepCircle1').addClass('activeStep');
|
||||
$('#stepCircle2').addClass('activeStep');
|
||||
}
|
||||
$('.bookingSummaryContainer').hide();
|
||||
$('.bookingResultsWrapper').hide();
|
||||
|
||||
}
|
||||
$('html').scrollTop(0);
|
||||
}
|
||||
else{
|
||||
alert('Please fill the required fields!');
|
||||
}
|
||||
}
|
||||
|
||||
function canGotoNextStep(stepNumber){
|
||||
|
||||
$RequiredFieldSelected = 0;
|
||||
if(stepNumber == 2){
|
||||
$('.service').each(function(i, obj) {
|
||||
if($(this).is(':checked')){
|
||||
$RequiredFieldSelected = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
else if(stepNumber == 1){
|
||||
$RequiredFieldSelected = 1;
|
||||
}
|
||||
else if(stepNumber == 4){
|
||||
$RequiredFieldSelected = 1;
|
||||
}
|
||||
else if(stepNumber == 3){
|
||||
$('.workers').each(function(i, obj) {
|
||||
if($(this).is(':checked')){
|
||||
$RequiredFieldSelected = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
else if(stepNumber == 4){
|
||||
if($('#booking_date').val() != '' && $('#booking_time').val() != ''){
|
||||
$RequiredFieldSelected = 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return $RequiredFieldSelected;
|
||||
}
|
||||
|
||||
function setWorker(worker_id){
|
||||
$('#worker_id').val(worker_id);
|
||||
|
||||
$.ajax({
|
||||
url: '<?php echo base_url();?>ajax',
|
||||
type: 'POST',
|
||||
data: {
|
||||
action:'getSelectedWorker',
|
||||
worker_id:worker_id
|
||||
},
|
||||
error: function() {
|
||||
},
|
||||
//dataType: 'json',
|
||||
success: function(data) {
|
||||
},
|
||||
}).done(function(result){
|
||||
$('.serviceBookingWorkerContainer').show();
|
||||
$('.serviceBookingWorkerContainer').html(result);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
|
||||
async defer>
|
||||
</script>
|
||||
Reference in New Issue
Block a user