gistfile1.js

<script type="text/javascript">
  var grat_error="<%=t :rate_policy_grat_too_low_warn %>";                   // gratuity error
  var is_usca_rate=false;
  <% if @operator.is_us_or_ca -%>
    is_usca_rate=true;
  <% end -%>
  var operator_slug = "<%= @operator.url_slug%>";

  var self_url_slug = '<%=@operator.url_slug%>';                             // variables for building the edit url for the grid
  var grid_edit_url = '/operators/'+self_url_slug+'/service_ports/update?';  // the url that update requests are sent to
  var grid_url      = '/operators/'+self_url_slug+'/service_ports/index';    // variables for the data source used to populate the grid
  var validPricingMethods = ["Flat", "Hourly"];                              // available options for the pricingMethodColumn dropdown
  var validParkingOptions = ["Actual", "Included"];                          // available options for the parkingColumn dropdown
  var validTollsOptions = ["Actual", "Included"];                            // available options for the tollsColumn dropdown

  // ----------------------------------------------------------------
  // Define javascript objects that represent each column
  //
  // Note: This allows us to have a single place to set the various attributes for a particular column
  //       Elsewhere in this file, we define methods that parse through the list of of columns, pulling out a particular attribute
  //       and then returning a string list or array list of those values
  //
  //       This allows us to avoid having to manually enter/update long strings of values to set column attributes
  //       like colSorting, headerLabel, etc.  Instead, we can just define those values for each "column object" below
  //       and let the javascript build the string for us.
  //
  //       This is especially helpful when columns are added or removed or when other major changes are made to this grid.
  // ----------------------------------------------------------------
  var portNameColumn = {
    index: 0,
    validator: "null",
    sorting: "str",
    resizing: true,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Ports",
    columnId: "port_name_text",
  }

  var serviceAreaIdColumn = {
    index: 1,
    validator: null,
    sorting: "na",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "ServiceAreaId",
    secondaryHeaderLabel: null,
    columnId: "service_area_id",
  }

  var pricingMethodColumn = {
    index: 2,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Pricing",
    secondaryHeaderLabel: null,
    columnId: "service_area[port_pricing_type]",
  }

  var serviceTypeIdColumn = {
    index: 3,
    validator: null,
    sorting: "na",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "ServiceTypeId",
    secondaryHeaderLabel: null,
    columnId: "service_type_id",
  }

  var minimumHoursColumn = {
    index: 4,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Minimum Hours (if hourly)",
    secondaryHeaderLabel: null,
    columnId: "service_type[minimum_hours]",
  }

  var pickupEnabledColumn = {
    index: 5,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Pickup",
    secondaryHeaderLabel: "Enabled",
    columnId: "service_area[port_services_from]",
  }

  var pickupFeeColumn = {
    index: 6,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "#cspan",
    secondaryHeaderLabel: "Fee",
    columnId: "rate_policy[pickup_fee]",
  }

  var dropoffEnabledColumn = {
    index: 7,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Pickup",
    secondaryHeaderLabel: "Enabled",
    columnId: "service_area[port_services_to]",
  }

  var dropoffFeeColumn = {
    index: 8,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "#cspan",
    secondaryHeaderLabel: "Fee",
    columnId: "rate_policy[dropoff_fee]",
  }

  var ratePolicyIdColumn = {
    index: 9,
    validator: null,
    sorting: "na",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "RatePolicyId",
    secondaryHeaderLabel: null,
    columnId: "rate_policy_id",
  }

  var meetInsideColumn = {
    index: 10,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Meet Inside",
    secondaryHeaderLabel: null,
    columnId: "rate_policy[meet_inside_fee]",
  }

  var parkingColumn = {
    index: 11,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Parking",
    secondaryHeaderLabel: null,
    columnId: "rate_policy[parking_fee]",
  }

  var tollsColumn = {
    index: 12,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Tolls",
    secondaryHeaderLabel: null,
    columnId: "rate_policy[tolls_fee]",
  }

  var stopFeeColumn = {
    index: 13,
    validator: null,
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Stop Fee",
    secondaryHeaderLabel: null,
    columnId: "rate_policy[addtl_stops_fee]",
  }

  var gratuityColumn = {
    index: 14,
    validator: "ValidGratuity",
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Gratuity (% of base rate)",
    secondaryHeaderLabel: null,
    columnId: "rate_policy[gratuity_pct]",
  }

  var taxColumn = {
    index: 15,
    validator: "ValidTaxPct",
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Tax (% of base rate)",
    secondaryHeaderLabel: null,
    columnId: "rate_policy[tax_pct]",
  }

  var surchargeColumn = {
    index: 16,
    validator: "ValidSurchargePct",
    sorting: "str",
    resizing: false,
    rowAlignment: "center",
    headerAlignmentStyles: "padding-left: 0px;text-align:left;",
    headerLabel: "Surcharge (% of base rate)",
    secondaryHeaderLabel: null,
    columnId: "rate_policy[surcharge_pct]",
  }


  // -------------------------------------------------------
  // Create an array that contains the "column objects" defined above
  //
  // Note: This is primarily used as a way to iterate over the list of
  //       column objects so that we can pull out certain values and build
  //       a string or array from those values, since this is what many DHTMLX
  //       functions take as an argument
  //
  // TODO: could also create a function that sorts contents of the columns Array by their index,
  //       so that the ordering of the contents below won't matter.
  // -------------------------------------------------------
  var columns = [
    portNameColumn,
    serviceAreaIdColumn,
    pricingMethodColumn,
    serviceTypeIdColumn,
    minimumHoursColumn,
    pickupEnabledColumn,
    pickupFeeColumn,
    dropoffEnabledColumn,
    dropoffFeeColumn,
    ratePolicyIdColumn,
    meetInsideColumn,
    parkingColumn,
    tollsColumn,
    stopFeeColumn,
    gratuityColumn,
    taxColumn,
    surchargeColumn
  ]

  // -------------------------------------------------------
  // Variables used to store the string or array list of
  // various attributes of the column objects.  These variables
  // are ultimately used as arguments to DHTMLX functions.
  // -------------------------------------------------------
  var sortingOptions = getSortingOptions();
  var resizingOptions = getResizingOptions();
  var rowAlignmentOptions = getRowAlignmentOptions();
  var headerAlignmentStyles = getHeaderAlignmentStyles();
  var validators = getValidators();
  var headerLabels = getHeaderLabels();
  var secondaryHeaderLabels = getSecondaryHeaderLabels();
  var columnIdStrings = getColumnIds()

  $(document).ready(function() {
    create_transfer_rate_policy_grid();
  });

  // -------------------------------------------------------
  //  Create the transfer_rate_policy_grid
  // -------------------------------------------------------
  function create_transfer_rate_policy_grid() {

    // ---------------------------------
    // dhtmlxGrid
    // ---------------------------------
    ratePoliciesGrid = new dhtmlXGridObject('transfer_rates_grid');

    // basic grid settings
    ratePoliciesGrid.setImagePath('/images/dhtmlx/');
    ratePoliciesGrid.setSkin("light");
    //ratePoliciesGrid.setMathRound(2);
    ratePoliciesGrid.preventIECaching(true);
    ratePoliciesGrid.enableEditEvents(true);
    ratePoliciesGrid.enableSmartRendering(true);

    // ---------------------------------
    // settings for grid columns
    // ---------------------------------
    ratePoliciesGrid.setColSorting(sortingOptions);
    ratePoliciesGrid.enableResizing(resizingOptions);
    ratePoliciesGrid.setColAlign(rowAlignmentOptions);
    ratePoliciesGrid.enableValidation(true);
    ratePoliciesGrid.setColValidators(validators);

    // ---------------------------------
    // set column headers/subheaders and add row-spans and column-spans as needed
    // ---------------------------------
    ratePoliciesGrid.setHeader(headerLabels);
    ratePoliciesGrid.attachHeader(secondaryHeaderLabels);

    // ---------------------------------
    // set column types (checkboxes, combo boxes, editable text, etc)
    // ---------------------------------
    ratePoliciesGrid.setColumnExcellType(pricingMethodColumn.index,"coro");
    ratePoliciesGrid.setColumnExcellType(parkingColumn.index,"coro");
    ratePoliciesGrid.setColumnExcellType(tollsColumn.index,"coro");
    ratePoliciesGrid.setColumnExcellType(pickupEnabledColumn.index,"ch");
    ratePoliciesGrid.setColumnExcellType(dropoffEnabledColumn.index,"ch");
    ratePoliciesGrid.setColumnExcellType(pickupFeeColumn.index,"edn");
    ratePoliciesGrid.setColumnExcellType(dropoffFeeColumn.index,"edn");
    ratePoliciesGrid.setColumnExcellType(stopFeeColumn.index,"price");
    ratePoliciesGrid.setColumnExcellType(gratuityColumn.index,"edn");
    ratePoliciesGrid.setColumnExcellType(taxColumn.index,"edn");
    ratePoliciesGrid.setColumnExcellType(surchargeColumn.index,"edn");

    // ---------------------------------
    // set number format for certain columns
    // ---------------------------------
    ratePoliciesGrid.setNumberFormat("$000",pickupFeeColumn.index);
    ratePoliciesGrid.setNumberFormat("$000",dropoffFeeColumn.index);
    ratePoliciesGrid.setNumberFormat("000%",gratuityColumn.index);
    ratePoliciesGrid.setNumberFormat("000.00%",taxColumn.index);
    ratePoliciesGrid.setNumberFormat("000%",surchargeColumn.index);

    // ---------------------------------
    // set options for select boxes used within grid
    // ---------------------------------
    setPricingMethodOptionsForGrid(ratePoliciesGrid);
    setParkingOptionsForGrid(ratePoliciesGrid);
    setTollsOptionsForGrid(ratePoliciesGrid);

    // ---------------------------------
    // set hidden columns
    // ---------------------------------
    ratePoliciesGrid.setColumnHidden(serviceAreaIdColumn.index,true);
    ratePoliciesGrid.setColumnHidden(serviceTypeIdColumn.index,true);
    ratePoliciesGrid.setColumnHidden(ratePolicyIdColumn.index,true);

    // ---------------------------------
    // set column IDs which are used to as the parameter names for requests sent to the update action
    //
    // instead of using the default c[0], c[1], c[2],... generic column references as the parameter names
    //   see this page for details:
    //   http://docs.dhtmlx.com/doku.php?id=dhtmlxdataprocessor:config_debug
    // ---------------------------------
    ratePoliciesGrid.setColumnIds(columnIdStrings);

    // ---------------------------------
    // attach various functions we've written to events that are looked for by DHTMLX
    // ---------------------------------
    ratePoliciesGrid.attachEvent("onXLS", showWaitingForData);
    ratePoliciesGrid.attachEvent("onXLE", hideWaitingForData);

    // ---------------------------------
    // initialize grid and load data
    // ---------------------------------
    ratePoliciesGrid.init();

    // ---------------------------------
    // set column widths for grid
    //
    // TODO: see if there's a way to set column widths for all columns using a string
    //       then add width parameters to each column object defined above and write
    //       a method to build the string that will be passed to the function that sets
    //       the widths
    //
    //       (see setColumnMinWidth)
    // ---------------------------------
    ratePoliciesGrid.setColWidth(portNameColumn.index, 29);
    ratePoliciesGrid.setColWidth(pricingMethodColumn.index, 8);
    ratePoliciesGrid.setColWidth(minimumHoursColumn.index, 10);
    ratePoliciesGrid.setColWidth(pickupEnabledColumn.index, 8);
    ratePoliciesGrid.setColWidth(pickupFeeColumn.index, 8);
    ratePoliciesGrid.setColWidth(dropoffEnabledColumn.index, 8);
    ratePoliciesGrid.setColWidth(dropoffFeeColumn.index, 8);
    ratePoliciesGrid.setColWidth(meetInsideColumn.index, 7);
    ratePoliciesGrid.setColWidth(parkingColumn.index, 8);
    ratePoliciesGrid.setColWidth(tollsColumn.index, 7);
    ratePoliciesGrid.setColWidth(stopFeeColumn.index, 6);
    ratePoliciesGrid.setColWidth(gratuityColumn.index, 8);
    ratePoliciesGrid.setColWidth(taxColumn.index, 7);
    ratePoliciesGrid.setColWidth(surchargeColumn.index, 10);

    // ---------------------------------
    // load data into the grid from the given URL
    // ---------------------------------
    ratePoliciesGrid.load("/operators/" + operator_slug + "/service_ports/");

    // -------------------------------------------------------------------------------
    // dhtmlxDataProcessor
    // -------------------------------------------------------------------------------

    // ---------------------------------
    // initialize the dataProcessor
    //   used to send requests to the update action, etc
    // ---------------------------------
    var data_processor = new dataProcessor(grid_edit_url);
    data_processor.init(ratePoliciesGrid);
    data_processor.setUpdateMode("cell")

    // ---------------------------------
    // tells dataProcessor to use the ratePoliciesGrid's columnIDs for parameter names instead of the generic param names
    // ---------------------------------
    data_processor.enableDataNames(true);

    // ---------------------------------
    // setup dataProcessor to check validations before sending data to server
    // ---------------------------------
    data_processor.setVerificator(gratuityColumn.index, dhtmlxValidation.isValidGratuity);
    data_processor.setVerificator(taxColumn.index, dhtmlxValidation.isValidTaxPct);
    data_processor.setVerificator(surchargeColumn.index, dhtmlxValidation.isValidSurchargePct);


    // ---------------------------------
    // if there's an error returned, hilight the row to red
    // ---------------------------------
    data_processor.defineAction("error", function (node) {
      ratePoliciesGrid.setRowColor(node.getAttribute("sid"), "red");
      $(".message").html(node.getAttribute("errors"));
      rp_data_processor.stopOnError = true;
    });

    // ---------------------------------
    // clear out "errored" rows when necessary
    // ---------------------------------
    data_processor.setOnAfterUpdate(function (id, type) {
      ratePoliciesGrid.setRowColor(id, "white");
      $(".message").html("");
    });
  }

  // ---------------------------------
  // need to DRY these up
  // just about the same thing is being done in other js files
  // but functions are called showSpinner or something simiar
  // ---------------------------------
  function showWaitingForData(){
    $('#waiting_for_data').show();
  }

  function hideWaitingForData(){
    $('#waiting_for_data').hide();
  }

  function setPricingMethodOptionsForGrid(grid) {
    for (i in validPricingMethods) {
      grid.getCombo(pricingMethodColumn.index).put(validPricingMethods[i], validPricingMethods[i]);
    }
  }

  function setParkingOptionsForGrid(grid) {
    for (i in validParkingOptions) {
      grid.getCombo(parkingColumn.index).put(validParkingOptions[i], validParkingOptions[i]);
    }
  }

  function setTollsOptionsForGrid(grid) {
    for (i in validTollsOptions) {
      grid.getCombo(tollsColumn.index).put(validTollsOptions[i], validTollsOptions[i]);
    }
  }

  function getSortingOptions() {
    var output = [];
    for (i in columns) { output.push(columns[i].sorting) }
    return output.toString();
  }

  function getResizingOptions() {
    var output = [];
    for (i in columns) { output.push(columns[i].resizing) }
    return output.toString();
  }

  function getRowAlignmentOptions() {
    var output = [];
    for (i in columns) { output.push(columns[i].rowAlignment) }
    return output.toString();
  }

  function getValidators() {
    var output = [];
    for (i in columns) { output.push(columns[i].validator) }
    return output.toString();
  }

  function getHeaderAlignmentStyles() {
    var output = [];
    for (i in columns) { output.push(columns[i].headerAlignmentStyles) }
    return output; // has to be returned as an Array of Strings
  }

  function getHeaderLabels() {
    var output = [];
    for (i in columns) { output.push(columns[i].headerLabel) }
    return output.toString();
  }

  function getSecondaryHeaderLabels() {
    var output = [];

    for (i in columns) {
      label = columns[i].secondaryHeaderLabel
      if (label == null) { label = "#rspan" }
      output.push(label)
    }

    return output.toString();
  }

  function getColumnIds() {
    var output = [];
    for (i in columns) { output.push(columns[i].columnId) }
    return output.toString();
  }


  // ---------------------------------
  // Validation functions for grid columns
  //   Note: be sure to cross reference these with the validations
  //   defined in ruby in the models that are used to make up this
  //   grid
  //
  // Note: method names are prefaced with "is" when defined below, but when called,
  //       you call them without the "is".  So a method defined as "isValidValue"
  //       would be called as "ValidValue".
  //       See documentation for details:
  //       http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:validation_extension&s[]=setcolvalidators#defining_custom_rules_for_validation_extension
  //
  // Validation & Options:
  //  -Meet Inside: Show dropdown menu selections (Included in Price, Not Offered, $10, $15, $20, $25, $30)
  //  -Gratuity: only allow values 10%-15%
  // ---------------------------------
  var gratuityMin = <%= RatePolicy::GRATUITY_MIN %>;
  var gratuityMax = <%= RatePolicy::GRATUITY_MAX %>;
  var taxPctMin = <%= RatePolicy::TAX_PCT_MIN %>;
  var taxPctMax = <%= RatePolicy::TAX_PCT_MAX %>;
  var surchargePctMin = <%= RatePolicy::SURCHARGE_PCT_MIN %>;
  var surchargePctMax = <%= RatePolicy::SURCHARGE_PCT_MAX %>;

  dhtmlxValidation.isValidGratuity = function(columnValue) {
    return (columnValue >= gratuityMin && columnValue <= gratuityMax) && (columnValue != "")
  }

  dhtmlxValidation.isValidTaxPct = function(columnValue) {
    return (columnValue >= taxPctMin && columnValue <= taxPctMax) && (columnValue != "")
  }

  dhtmlxValidation.isValidSurchargePct = function(columnValue) {
    return (columnValue >= surchargePctMin && columnValue <= surchargePctMax) && (columnValue != "")
  }

</script>