Reservation Flashcards

1
Q

1Basic:

Reservation Scaffold

A
rails g scaffold
User:	references
Room:	references
Start_date:	datetime
End_date:	datetime
Price:	Integer
Total:	Integer
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

1Basic Reservation:

routes.rb

A

resources :room do
resources: reservations, only: [create]
end

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

1Basic:

reservations_controller.rb

A

Class ReservartionsController

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

1Basic:

_form.html.erb

A

//####Basic _form

<span></span>
<div style="display: none;">
    <span>					   
   <span></span>

</span></div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

2JQuery:

Gemfile

A

gem ‘jquery-ui-rails’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

2JQuery:

application.js

A

//= require jquery-ui/datepicker

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

2JQuery:
JavaScript
_form.html.erb

A

$(function(){
$(‘#reservation_start_date’).datepicker({ dateFormat: ‘dd-mm-yy’ });
$(‘#reservation_end_date’).datepicker({ dateFormat: ‘dd-mm-yy’ });
}); });

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

2JQuery:

_form.html.erb

A

//####Basic _form

<span></span>
<div style="display: none;">
    <span>					   
   <span></span>

</span></div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

3AJAX: Start_date

Reservation_Controller.rb

A
class ReservationsController = ? OR end_date >= ?, today, today)
    render json: reservations
  end
…
end
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

3AJAX: Start_date

routes.rb

A

get ‘/preload’=> ‘reservations#preload’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

3AJAX:
Start_date
_form.html.erb
Part 1 ( Unavailable function)

A
function unavailable(date){
dmy= date.getDate() +"-"+ (date.getMonth()+1)+"-" + date.getFullYear();
  return [$.inArray(dmy, unavailableDates) == -1 ] }
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

3AJAX:
Start_date
_form.html.erb
Part 2: AJAX working the DOM

A
$(function(){  
unavailableDates = [];
  $.ajax({
  url: '/preload',
  data: {'room_id':  },
  dataType: 'json',
  success: function(data){
    $.each(data, function(arrID, arrValue){
      for(var d = new Date(arrValue.start_date); 
      d
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

3AJAX:
Start_date
_form.html.erb
Part 3: AJAX reservation_start_date

A

$(‘#reservation_start_date’).datepicker({
dateFormat: ‘dd-mm-yy’,
minDate: 0,
maxDate: ‘3m’,
beforeShowDay: unavailable ,
onSelect: function(selected) {
$(‘#reservation_end_date’).datepicker(“option”, “minDate”, selected);
$(‘#reservation_end_date’).attr(‘disabled’, false);
} });

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

3AJAX:
Start_date
_form.html.erb
Part 4: AJAX reservation_end_date

A
$('#reservation_end_date').datepicker({ 
       dateFormat: 'dd-mm-yy',
       minDate: 0,
       maxDate: '3m',
       beforeShowDay: unavailable });
      onSelect: function(selected) {
         $('#reservation_start_date').datepicker("option", "maxDate", selected);
}      });
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

4AJAX:
End_date (1/2)
reservations_controller.rb

A

Class ReservartionsController = ? OR end_date >= ?, today, today)
render json: reservations
end

def preview
start_date = Date.parse(params[:start_date])
end_date = Date.parse(params[:end_date])
output = { conflict: is_conflict(start_date, end_date) }
render json: output
end

def create
@reservation = current_user.reservations.create(reservation_params)
redirect_to @reservation.room, notice: “Your reservations have been made…”
end

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

4AJAX:
End_date (2/2)
reservations_controller.rb

A
private
   def is_conflict(start_date, end_date)
     room = Room.find(params[:room_id])
     check = room.reservations.where("?  0?  true: false
  end

def reservation_params
params.require(:reservations).permit(:start_date, :end_date, :price, :total, :room_id)
end
end

17
Q

4AJAX:
End_date
routes.rb

A

get ‘/preview’=> ‘reservations#preview’

18
Q
4AJAX: 
End_date 
_form.html.erb
Part 1: AJAX reservation_end_date
HTML Part (most important fields)
A

xxx

19
Q

4AJAX:
_form.html.erb
Part 2: AJAX
JavaScript General Structure

A
function unavailable(date) 
   $.ajax({   url: '/preload', ..........................................
      $.each(data, function(arrID, arrValue) ...................
      $('#reservation_start_date').datepicker({ ..............
          $.ajax({  url: "/preview", ..........................................
      $('#reservation_start_date').datepicker({...............
          $.ajax({  url: "/preview",...........................................
20
Q

4AJAX:
_form.html.erb
Part 3: AJAX
JavaScript : PRELOAD

A
$.ajax({ url: '/preload',
	     data: {'room_id': },
	     dataType: 'json',
	     success: function(data) {
		$.each(data, function(arrID, arrValue)....
21
Q

4AJAX:
_form.html.erb
Part 4: AJAX
JavaScript : EACH INTERATE LOOP

A

$.each(data, function(arrID, arrValue) { for(var d = new Date(arrValue.start_date);

22
Q

4AJAX:
_form.html.erb
Part 5: AJAX
JavaScript : RESERVATION_START_DATE

A

$(‘#reservation_start_date’).datepicker({
dateFormat: ‘dd-mm-yy’,
minDate: 0,
maxDate: ‘3m’,
beforeShowDay: unavailable,
onSelect: function(selected) {
$(‘#reservation_end_date’).datepicker(“option”, “minDate”, selected);
$(‘#reservation_end_date’).attr(‘disabled’, false);
var start_date = $(this).datepicker(‘getDate’);
var end_date= $(‘#reservation_end_date’). datepicker(‘getDate’);
var days = ((end_date - start_date)/1000/60/60/24) +1
var input = {
‘start_date’: start_date,
‘end_date’: end_date,
‘room_id’:
}
$.ajax({ url: “/preview”, …

23
Q

4AJAX:
_form.html.erb
Part 6: AJAX
JavaScript: AJAX INSIDE RESERVATION_START_DATE

A

$.ajax({
url: “/preview”,
data: input,
success: function(data) {
if (data.conflict) {
$(‘#message’).text(“This date range is not available.”);
$(‘#preview’).hide();
$(‘#btn_book’).attr(‘disabled’, true); }
else {
$(‘#message’).text(“Have a nice trip!”);
$(‘#preview’).show();
$(‘#btn_book’).attr(‘disabled’, false);
var total = days *
$(‘#reservation_days’).text(days);
$(‘#reservation_sum’).text(total);
$(‘#reservation_total’).val(total);
} } }); } });

24
Q

4AJAX:
_form.html.erb
Part 7: AJAX
JavaScript: RESERVATION_END_DATE

A

$(‘#reservation_end_date’).datepicker({
dateFormat: ‘dd-mm-yy’,
minDate: 0,
maxDate: ‘3m’,
beforeShowDay: unavailable,
onSelect: function(selected) {
$(‘#reservation_start_date’).datepicker(“option”, “maxDate”, selected);
var start_date= $(‘#reservation_start_date’).datepicker(‘getDate’);
var end_date = $(this).datepicker(‘getDate’);
var days = (end_date - start_date)/1000/60/60/24
var input = {
‘start_date’: start_date,
‘end_date’: end_date,
‘room_id’:
}
$.ajax({ url: “/preview”, …

25
Q

4AJAX:
_form.html.erb
Part 8: AJAX
JavaScript: AJAX INSIDE RESERVATION_END_DATE

A

$.ajax({
url: “/preview”,
data: input,
success: function(data) {
if (data.conflict) {
$(‘#message’).text(“This date range is not available.”);
$(‘#preview’).hide();
$(‘#btn_book’).attr(‘disabled’, false); }
else {
$(‘#preview’).show();
$(‘#btn_book’).attr(‘disabled’, false);
var total = days *
$(‘#reservation_days’).text(days);
$(‘#reservation_sum’).text(total);
$(‘#reservation_total’).val(total);
} } }); } });