Creating a Hotel Website with the Booking API

If you haven't viewed Using the Check Availability API, please do that first. Note that the Booking API widget must be upgraded before it will function. This is our third rental website demo. The first apartment rental website was for booking a single unit/item. The second RV rentals website was for booking multiple different types of units/items. This third website also handles multiple different types of units/items, but also multiple units/items of the same type.

So while this website is for booking Hotel rentals, it could just as easily be Apartment rentals, RV rentals, Bounce House rentals, or anything else you can imagine. Below is the website's page code. The checkAvailable API and addBooking API are the two components provided by the Booking Calendar API widget. Please watch the video for a full explanation of all the code.

const Type = {
    STD: 0,
    PREM: 1
}

const DAY_MS = 24 * 60 * 60 * 1000;

var type = Type.STD;
var date = new Date();
var start = date;
var end = date;
var stdRooms = [];
var premRooms = [];

async function available(firstRoom, lastRoom, start, end) {
    let rooms = [];
    for (let i = firstRoom; i <= lastRoom; i++) {
        if (await $w('#api1').checkAvailable(start, end, i)) {
            rooms.push(i);
        }
    }
    return rooms;
}

async function showAvailable() {
    let firstRoom = 1;
    let lastRoom = 3;
    stdRooms = await available(firstRoom, lastRoom, start, end);
    firstRoom = 10;
    lastRoom = 12;
    premRooms = await available(firstRoom, lastRoom, start, end);
    if (stdRooms.length > 0) {
        if (stdRooms.length > 1) {
            $w('#stdAvailable').text = `${stdRooms.length} rooms available`;
        } else {
            $w('#stdAvailable').text = 'Only 1 room available';
        }

    } else {
        $w('#stdAvailable').text = 'No rooms available';
    }
    if (premRooms.length > 0) {
        if (premRooms.length > 1) {
            $w('#premAvailable').text = `${premRooms.length} rooms available`;
        } else {
            $w('#premAvailable').text = 'Only 1 room available';
        }

    } else {
        $w('#premAvailable').text = 'No rooms available';
    }
}

$w.onReady(function () {

    $w('#payForm').hide();
    $w('#errorBox').hide();

    $w('#startDate').onCustomValidation((value, reject) => {
        if (typeof value === 'undefined') return;
        $w('#errorBox').hide();
        start = value;
    });

    $w('#endDate').onCustomValidation(async (value, reject) => {
        if (typeof value === 'undefined') return;
        $w('#errorBox').hide();
        end = value;
        let duration = end.getTime() - start.getTime();
        if ((duration / DAY_MS + 1) > 7) {
            stdRooms = [];
            premRooms = [];
            $w('#errorBox').show();
        } else {
            showAvailable();
        }
    });

    $w('#standardBtn').onClick(() => {
        if (stdRooms.length > 0) {
            $w('#payForm').show();
            type = Type.STD;
        }
    });

    $w('#premiumBtn').onClick(() => {
        if (premRooms.length > 0) {
            $w('#payForm').show();
            type = Type.PREM;
        }
    });

    $w('#payBtn').onClick(async () => {
        if ($w('#email').value.length < 5) return;
        let first = $w('#firstName').value;
        let last = $w('#lastName').value;
        let email = $w('#email').value;
        let phone = $w('#phone').value;
        let room = 0;
        if (type === Type.STD && stdRooms.length > 0) {
            room = stdRooms[0];
        } else if (premRooms.length > 0) {
            room = premRooms[0];
        } else {
            console.log('Failed to book: no rooms available');
            return;
        }
        let success = await $w('#api1').addBooking(start, end, first, last, phone, email, room);
        if (!success) console.log('Failed to book: write to database failed.');
        $w('#payForm').hide();
        showAvailable();
    });

    $w('#close').onClick( () => {
        $w('#payForm').hide();
    })
});

You can also try it out at the Hotel website.