Refactor the booking confirmation related JS files so that they become standalone modules.

This commit is contained in:
Alex Tselegidis 2022-01-13 11:33:46 +01:00
parent 43ad017d7a
commit f327fd5221
3 changed files with 58 additions and 59 deletions

View file

@ -37,7 +37,7 @@ class Booking_confirmation extends EA_Controller {
*/
public function of()
{
$appointment_hash = $this->uri->segment(2);
$appointment_hash = $this->uri->segment(3);
$occurrences = $this->appointments_model->get(['hash' => $appointment_hash]);
@ -52,8 +52,6 @@ class Booking_confirmation extends EA_Controller {
unset($appointment['notes']);
$customer = $this->customers_model->find($appointment['id_users_customer']);
$provider = $this->providers_model->find($appointment['id_users_provider']);
$this->providers_model->only($provider, [
@ -76,15 +74,20 @@ class Booking_confirmation extends EA_Controller {
$company_name = setting('company_name');
html_vars([
'page_title' => lang('success'),
script_vars([
'appointment_data' => $appointment,
'provider_data' => $provider,
'customer_data' => $customer,
'service_data' => $service,
'company_name' => $company_name,
'google_api_scope' => 'https://www.googleapis.com/auth/calendar',
'google_api_key' => config('google_api_key'),
'google_client_id' => config('google_api_key'),
]);
html_vars([
'page_title' => lang('success'),
]);
$this->load->view('pages/booking_confirmation', html_vars());
}
}

View file

@ -1,13 +1,3 @@
<?php
/**
* @var string $company_name
* @var array $appointment_data
* @var array $provider_data
* @var array $customer_data
* @var array $service_data
*/
?>
<?php extend('layouts/message_layout') ?>
<?php section('content') ?>
@ -42,19 +32,15 @@
<?php endif ?>
</div>
<script>
var GlobalVariables = {
csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>,
appointmentData: <?= json_encode($appointment_data) ?>,
providerData: <?= json_encode($provider_data) ?>,
customerData: <?= json_encode($customer_data) ?>,
serviceData: <?= json_encode($service_data) ?>,
companyName: <?= json_encode($company_name) ?>,
googleApiKey: <?= json_encode(config('google_api_key')) ?>,
googleClientId: <?= json_encode(config('google_client_id')) ?>,
googleApiScope: 'https://www.googleapis.com/auth/calendar'
};
</script>
<?php section('content') ?>
<?php section('scripts') ?>
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
<script src="<?= asset_url('assets/js/pages/booking_confirmation.js') ?>"></script>
<?php section('scripts') ?>

View file

@ -9,26 +9,7 @@
* @since v1.0.0
* ---------------------------------------------------------------------------- */
$(document).ready(function () {
/**
* Event: Add Appointment to Google Calendar "Click"
*
* This event handler adds the appointment to the users Google Calendar Account. The event is going to
* be added to the "primary" calendar. In order to use the API the javascript client library provided by
* Google is necessary.
*/
$('#add-to-google-calendar').on('click', function () {
gapi.client.setApiKey(GlobalVariables.googleApiKey);
gapi.auth.authorize(
{
client_id: GlobalVariables.googleClientId,
scope: GlobalVariables.googleApiScope,
immediate: false
},
handleAuthResult
);
});
App.Pages.BookingConfirmation = (function () {
/**
* Handle Authorization Result
*
@ -45,14 +26,14 @@ $(document).ready(function () {
// The user has granted access, add the appointment to his calendar. Before making the event.insert request
// the the event resource data must be prepared.
var providerData = GlobalVariables.providerData;
var providerData = App.Vars.provider_data;
var appointmentData = GlobalVariables.appointmentData;
var appointmentData = App.Vars.appointment_data;
// Create a valid Google Calendar API resource for the new event.
var resource = {
summary: GlobalVariables.serviceData.name,
location: GlobalVariables.companyName,
summary: App.Vars.service_data.name,
location: App.Vars.company_name,
start: {
dateTime: moment.tz(appointmentData.start_datetime, providerData.timezone).format()
},
@ -61,9 +42,8 @@ $(document).ready(function () {
},
attendees: [
{
email: GlobalVariables.providerData.email,
displayName:
GlobalVariables.providerData.first_name + ' ' + GlobalVariables.providerData.last_name
email: App.Vars.provider_data.email,
displayName: App.Vars.provider_data.first_name + ' ' + App.Vars.provider_data.last_name
}
]
};
@ -121,4 +101,34 @@ $(document).ready(function () {
);
}
}
});
function bindEventHandlers() {
/**
* Event: Add Appointment to Google Calendar "Click"
*
* This event handler adds the appointment to the users Google Calendar Account. The event is going to
* be added to the "primary" calendar. In order to use the API the javascript client library provided by
* Google is necessary.
*/
$('#add-to-google-calendar').on('click', function () {
gapi.client.setApiKey(App.Vars.google_api_key);
gapi.auth.authorize(
{
client_id: App.Vars.google_client_id,
scope: App.Vars.google_api_scope,
immediate: false
},
handleAuthResult
);
});
}
function initialize() {
bindEventHandlers();
}
document.addEventListener('DOMContentLoaded', initialize);
return {};
})();