Как модернизировать систему бронирования с помощью Acuity Scheduling

 
selectDay : function( d ) {
    if ( d ) {
        // Create am instance
        var day = moment( this.month ).date ( d );

        // If it's in the past, exit
        if ( day.isBefore( moment(), 'day' ) ) {
            return;
        }

        this.day = day;
        this.hours = [];

        this.$http.get( 'availability/times', { date : this.day.format( 'YYYY-MM-DD' ) } ).then( function( response ) {          
            
            var available = response.data.map( function( item ) {
                return moment( item.time ).hour( );
            });

            for ( var h = 7; h  -1 )
                });
            }

        });
        
        this.time = null;
    }
},

Теперь давайте обратим наше внимание на HTML:

 
<li class="col-md-4" v-bind:class="{ 'active' : day }">
	<header>Choose a Time</header>
	<ol class="times" v-if="day">
		<li class="header">
			{{ day | formatDateTime 'ddd Do MMM YYYY' }}
		</li>
		<li v-for="hour in hours" v-bind:class="{ 'available' : hour.available }" v-on:click="selectTime( hour )">
			<div class="hour">{{ hour.h | time }}</div>
		</li>
	</ol>
	<div class="loading" v-if="day && !hours.length">
		<p><img src="/assets/ajax-loader.gif"></p>
		<p>Loading times...</p>
	</div>
</li>

Здесь мы создаем упорядоченный список часов в дне, настраивая класс CSS в зависимости от того, доступен этот слот или нет. Мы прилагаем обработчик кликов, который вызывает метод selectTime()

Наконец, нам нужно реализовать метод selectTime()

 
selectTime : function( hour ) {
    if ( hour.available ) {
        this.time = moment( this.day ).hours( hour.h ).minutes( 0 ).seconds( 0 );      
    }
}

Все, что мы делаем здесь, это клонирование текущего дня и установка времени. Настройка, которая «активирует» последний шаг, показывая форму планирования.

Оформление заказа

Сейчас мы находимся в точке, где у нас есть определенный временной интервал, поэтому пришло время осуществить процесс бронирования.

Учащийся должен будет предоставить некоторую личную информацию. По умолчанию обязательны следующие три поля:

1. Имя ученика
2. Фамилия учащегося
3. Их адрес электронной почты

В сочетании с выбранными датой и временем этого будет достаточно, чтобы запланировать урок.

При желании вы также можете набрать номер телефона, который вы можете установить как «обязательный» на панели управления Acuity.

Acuity также предоставляет возможность создавать настраиваемые поля. Например, вы можете захотеть создать поле для сбора места получения или выгрузки для урока, чтобы указать, является ли это первым уроком клиента, или принять ваши условия. Мы не будем этого делать, чтобы все было относительно просто, но вы можете узнать больше в соответствующем разделе документации .

На скриншоте ниже показано, как будет выглядеть форма бронирования:

Давайте создадим HTML:

 
<li class="col-md-4" v-bind:class="{ 'active' : time }">
	<header>Confirm Booking</header>
	<div v-if="time" class="book">            
		<header class="well">
			<p>You've selected:</p>
			<h4>{{ time | formatDateTime 'HH:mm' }}</h4>
			<h5>{{ time | formatDateTime 'ddd Do MMM YYYY' }}</h5>
		</header>
		<form v-form name="bookingForm" v-on:submit.prevent="confirm" v-if="bookingStatus == 'pending'">
			<fieldset>
				<div class="alert alert-danger" v-if="bookingForm.$submitted && !bookingForm.$valid">
					<p v-if="bookingForm.firstName.$error.required">First name is required.</p>
					<p v-if="bookingForm.lastName.$error.required">Last name is required.</p>
					<p v-if="bookingForm.email.$error.required">Email is required.</p>
					<p v-if="bookingForm.email.$error.email">Email is not valid.</p>
				</div>
				<div class="form-group">
					<input type="text" name="firstName" placeholder="First name" class="form-control" v-model="learner.firstName" v-form-ctrl required>
				</div>
				<div class="form-group">
					<input type="text" name="lastName" placeholder="Last name" class="form-control" v-model="learner.lastName" v-form-ctrl required>
				</div>
				<div class="form-group">
					<input type="email" name="email" placeholder="E-mail" class="form-control" v-model="learner.email" v-form-ctrl required>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-lg btn-primary">Book Now</button>
				</div>      
			</fieldset>
		</form>
		<div class="loading" v-if="bookingStatus == 'sending'">
			<p><img src="/assets/ajax-loader.gif"></p>                  
			<p>Making booking...</p>
		</div>
		<div class="confirmed" v-if="bookingStatus == 'confirmed'">
			<p>Your booking is confirmed. Your reference is:</p>
			<h3>{{ booking.id }}</h3>
			<footer>
				<button class="btn btn-lg btn-primary" v-on:click="reset">Start Over</button>
			</footer>
		</div>
	</div>
</li>

Это может выглядеть немного скучно, но это относительно просто. По сути, это сопоставление элементов управления формы с соответствующими свойствами свойства learner

 
confirm : function() {
    if ( this.bookingForm.$valid ) {
        this.bookingStatus = 'sending';

        var data = this.learner;
        data.datetime = this.time.format();

        this.$http.post( 'appointments', data ).then( function( response ) {
            this.booking = response.data;
            this.bookingStatus = 'confirmed';
        });
    }
}

 
/**
 * Acts as a proxy to `/appointments`
 * We can use this to actually make an appointment
 */
$app->post( 'api/appointments', function( Request $request ) use ( $app ) {

    // Build the data by decoding the JSON and then injecting the `appointmentTypeID`.
    $data = json_decode( $request->getContent(), true ) + [ 'appointmentTypeID' => $app[ 'appointmentTypeID' ] ];   

    // Make the request...
    $response = $app[ 'client' ]->request( 
        '/appointments',
        [
            'method'    =>  'POST',
            'data'      =>  $data,
        ]
    );    

    // If there's an error, write it to the log
    if ( $response[ 'status_code' ] !== 200 ) {
        $app[ 'logger' ]->error( $response[ 'message' ] );
    }
  
    // ...and return it
    return json_encode( $response );

});