wickywills
1/18/2018 - 12:11 PM

Javascript ES5 module setup

Quick template for a ES5 module

;(function () {
    if( !window.quotecalc ){
        window.quotecalc = {};
    }
    
    var self = window.quotecalc;
    
    
    /**
     * Get "Location" value
     * 
     * @type Element.value
     */
    self.location = document.getElementById("bmq-location").value;
    
    
    /**
     * Get "Type of stay" value
     * 
     * @type Element.value
     */
    self.typeOfStay = document.getElementById("bmq-type-of-stay").value;
    
    
    /**
     * Get "Length of vessel" value
     * 
     * @type Element.value
     */
    self.length = document.getElementById("bmq-quote-length").value;
    
    
    /**
     * Get "Number of nights" value
     * 
     * @type Element.value
     */
    self.nights = document.getElementById("bmq-no-of-nights").value;
    
    
    /**
     * User information
     */
    self.userInfo = document.getElementById("bmq-userInfo");
    
    
    /**
     * "Total: " label
     */
    self.totalLabel = document.getElementById("update-total");
    
    
    /**
     * User errors
     */
    self.userErrors = [];


    /**
     * Grab overnight rate
     * 
     * @returns {Number}
     */
    self.getOvernightRate = function () {
        switch (self.location) {
            case "marina":
                return 2.20;
                break;

            case "mid-river-pontoon":
                return 1.50;
                break;

            case "river":
                return 1.20;
                break;
        }
    };
    
    
    /**
     * Grab short stay rate
     * 
     * @returns {Number}
     */
    self.getShortStayRate = function () {
        switch (self.location) {
            case "marina":
                return 1.00;
                break;

            case "mid-river-pontoon":
                return 0.75;
                break;

            case "river":
                return 0.50;
                break;
        }
    };
    
    
    /**
     * Update the "Type of stay" value 
     */
    self.updateTypeOfStay = function () {
        self.typeOfStay = document.getElementById("bmq-type-of-stay").value;
        
        // If overnight, then enable "Number of nights" field, else disable it
        switch (self.typeOfStay) {
            case "overnight":
                self.enableNightsField();
                break;
                
            case "short-stay":
                self.disableNightsField();
                break;
        }
    };
    
    
    /**
     * Update the "Location" value 
     */
    self.updateLocation = function () {
        self.location = document.getElementById("bmq-location").value;
    };
    
    
    /**
     * Update the "Length of vessel" value 
     */
    self.updateLength = function () {
        self.length = document.getElementById("bmq-quote-length").value;
    };
                            
    
    /**
     * Update the "Number of nights" value 
     */
    self.updateNights = function () {
        self.nights = document.getElementById("bmq-no-of-nights").value;
        console.log("Nights" + self.nights);
    };
    
    
    /**
     * Disable "Number of nights" field
     */
    self.disableNightsField = function () {
        var field = document.getElementById("bmq-no-of-nights");
        field.disabled = true;
        field.value = null;
    };
    
    
    /**
     * Enable "Number of nights" field
     */
    self.enableNightsField = function () {
        console.log("enable nights");
        document.getElementById("bmq-no-of-nights").disabled = false;
    };
    
    
    /**
     * Update user information
     */
    self.updateUserInfo = function (message) {
        self.userInfo.style.display = "block";
        self.userInfo.innerHTML = message;
    };


    /**
     * Grab the total depending on the type of stay selection
     * and return to two decimal places
     * 
     * @returns {Number}
     */
    self.getTotal = function () {
        switch (self.typeOfStay) {
            case "overnight":
                return (self.getOvernightRate() * self.length * self.nights).toFixed(2);
                break;

            case "short-stay":
                return (self.getShortStayRate() * self.length).toFixed(2);
                break;
        }
    };
    
    
    /**
     * Validate 
     */
    self.validate = function () {
        self.userErrors = [];
        
        if (self.length === "" ){
            self.userErrors.push("Length field is empty");
        }

        if (self.nights === "" && self.typeOfStay === "overnight"){
            self.userErrors.push("Nights field is empty");
        }   
        
        // If errors, display them, else display total
        if (self.userErrors.length){
            alert(self.userErrors.join("\n"));
        } else {
            self.totalLabel.innerHTML = self.getTotal(); 
        }
    };


    /**
     * First port of call
     */
    self.construct = function () {
        self.updateTypeOfStay();
        self.updateNights();
        self.binds();
    };


    /**
     * User events
     */
    self.binds = function () {
        // When select is changed, refresh the value
        document.getElementById("bmq-type-of-stay").addEventListener("input", function () {
            self.updateTypeOfStay();
        });
        
        // When select is changed, refresh the value
        document.getElementById("bmq-no-of-nights").addEventListener("input", function () {
            self.updateNights();
        });
        
        // When select is changed, refresh the value
        document.getElementById("bmq-location").addEventListener("input", function () {
            self.updateLocation();
        });
        
        // When select is changed, refresh the value
        document.getElementById("bmq-quote-length").addEventListener("input", function () {
            self.updateLength();
            
        });
        
        // Listen for "Calculate" button click event
        document.getElementById("bmq-calculate").addEventListener("click", function () {
            self.userInfo.style.display = "none";
            self.validate();
        });
    };


    self.construct();
})();