mr.jdwolfe / CRO Autocomplete

// ==UserScript==
// @name         CRO Autocomplete
// @namespace    https://callcenter15.ihotelier.com/
// @version      0.8
// @description  Autocomplete addresses, pop up windows containing comments on Group reservations, and autofill in name in Credit Card field.
// @license      MIT
// @author       Jacob Wolfe
// @match        https://callcenter15.ihotelier.com/callcenter-1.5/bookHotel/*
// @match        https://callcenter15.ihotelier.com/callcenter-1.5/groupReservation/*
// @updateURL    https://openuserjs.org/meta/mr.jdwolfe/CRO_Autocomplete.meta.js
// ==/UserScript==

(function() {
    'use strict';

    // This code below looks for the comments on a block of room. If there are comments, then a JQueryUI popup with the comments is created.
    var comments = document.querySelector("#form1 > div > table > tbody > tr:nth-child(6) > td")
    if (comments) {
        if (comments.innerHTML.indexOf("Comments") != -1) {
            var str = comments.innerHTML;
            var res = str.substring(9);
            if (res != " ") {
                var scriptjq = document.createElement('script');
                scriptjq.src = "https://code.jquery.com/jquery-1.9.1.js";
                var scriptjqui = document.createElement('script');
                scriptjqui.src = "https://code.jquery.com/ui/1.9.1/jquery-ui.js";
                document.body.appendChild(scriptjq);
                document.body.appendChild(scriptjqui);
                var msgdiv = document.createElement('div');
                msgdiv.id = "dialog-message";
                msgdiv.title = "Notes: Please Read!";
                msgdiv.style.background = '#f78f91';
                var msgp = document.createElement('p');
                msgp.innerHTML = '<span class="ui-icon ui-icon-notice" style="float:left; margin:0 7px 50px 0;"></span>' + res.substring(1);
                msgdiv.appendChild(msgp);
                document.body.appendChild(msgdiv);
                var msgscript = document.createElement('script');
                msgscript.text = '$( "#dialog-message" ).dialog({modal: true});';
                document.body.appendChild(msgscript);
                document.querySelector("#groupSearch > div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable > div.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix.ui-draggable-handle > button > span.ui-button-text").setAttribute("style", "height: 1px;");
            }
        }
    }
    // Inject in the Google Places API Library to automatically look up places as an address is typed in.
    var API_js_callback = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCptYxmnhmJbHLqrefa-jLXSdQlTVJfxtA&libraries=places&callback=initPlaces";
    var script = document.createElement('script');
    script.src = API_js_callback;
    var head = document.getElementsByTagName("head")[0];
    (head || document.body).appendChild(script);
    var script2 = document.createElement('script');
    var input, autocomplete;
    // Create a callback script for the Google Places API. This is just a tweak of the example found at - https://developers.google.com/maps/documentation/javascript/places-autocomplete
    script2.text = `
    function initPlaces() {
        input = document.getElementById('Address1');
        input.size = '50';
        autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.setFields(['address_component']);
        autocomplete.addListener('place_changed', fillInAddress);
    };
    var componentForm = {
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'short_name',
        postal_code: 'short_name'
    };
    if (document.getElementById('statelist_0') != null) {
        var componentIds = {
            locality: 'City',
            administrative_area_level_1: 'statelist_0',
            country: 'countryName_0',
            postal_code: 'Zip'
        };
    } else {
        var componentIds = {
            locality: 'City',
            administrative_area_level_1: 'statelist',
            country: 'countrylist',
            postal_code: 'Zip'
        };
    }
    function fillInAddress() {
        var place = autocomplete.getPlace();
        console.log(place);
        if (place.address_components[0].types[0] == "street_number" && place.address_components[1].types[0] == "route") {
            var streetnumber = place.address_components[0]['long_name'];
            var route = place.address_components[1]['short_name'];
            input.value = '';
            input.value = streetnumber + ' ' + route;
        } else {
            var splitme = input.value;
            var splitted = splitme.split(",");
            input.value = splitted[0];
        }
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(componentIds[addressType]).value = val;
            }
        }
        document.getElementById('PhoneDay').focus()
    };`
    document.body.appendChild(script2);
    // Focus on the first name to start typing right away. Add blur listener on the Last Name to fill in the credit card name field automatically.
    document.getElementById('FirstName').focus();
    var lastname = document.getElementById('LastName');
    lastname.addEventListener('blur', fillCCName);
})();

function fillCCName() {
    var firstname = document.getElementById('FirstName');
    var lastname = document.getElementById('LastName');
    var ccfield = document.getElementById('cardHolder');
    ccfield.value = firstname.value + ' ' + lastname.value;
}