public/app.js
// Then it sends the query off to the server and manages the response.
Then it sends the query off to the server and manages the response.
Then it sends the query off to the server and manages the response .
function onClickEventBehaviorOfGenerateQueryButton(event)
  {
    event.preventDefault();
    let queryExpression = "?";
    function allBlanks(arrayOfValues) 
    {
      function isBlank(thisValue) 
      {
        return thisValue == "";
      }  
      return arrayOfValues.every(isBlank);
    } 
    let whereClauseGroupWrapper = document.querySelectorAll(".whereClauseGroupWrapper")[0];
    let whereClauseElementValues = [];
    whereClauseGroupWrapper.querySelectorAll(".resetElement").forEach(function(element) 
    {
      whereClauseElementValues.push(element.value);
    }); 
    let indexOfFirstWhereClauseBlankSelector = whereClauseElementValues.indexOf("")
    let userHasMadeAFilterExpression = !allBlanks(whereClauseElementValues);
    if(userHasMadeAFilterExpression)
    {
      if(indexOfFirstWhereClauseBlankSelector == whereClauseElementValues.length -1) 
      {
        queryExpression = queryExpression + "WHERE" + ":;"
        whereClauseElementValues.forEach(function(element){
          if(element != "")
          {
            queryExpression = queryExpression + element + ":;"
          } 
        });
      }
      else 
      {
        alert('The filter expression must be filled out completely or must be completely blank' + '\n' + 'Please check your work.')
        return 
      }
    } 
    let orderByClauseGroupWrapper = document.querySelectorAll(".orderByClauseGroupWrapper")[0];
    let orderByClauseElementValues = [];
    orderByClauseGroupWrapper.querySelectorAll(".resetElement").forEach(function(element) 
    {
      orderByClauseElementValues.push(element.value);
    }); 
    let indexOfFirstOrderByClauseBlankSelector = orderByClauseElementValues.indexOf("")
    let userHasMadeAnOrderByExpression = !allBlanks(orderByClauseElementValues);
    if(userHasMadeAnOrderByExpression)
    {
      if(indexOfFirstOrderByClauseBlankSelector == orderByClauseElementValues.length -1) 
      {
        queryExpression = queryExpression + "ORDERBY" + ":;"
        orderByClauseElementValues.forEach(function(element){
          if(element != "")
          {
            queryExpression = queryExpression + element + ":;"
          } 
        });
      }
      else 
      {
        alert('The order-by expression must be filled out completely or must be completely blank' + '\n' + 'Please check your work.')
        return 
      }
    } 
    queryExpression = queryExpression.replace(/#/g, "{[POUND]}");
    queryExpression = queryExpression.replace(/&/g, "{[AMPERSAND]}");
    queryExpression = queryExpression.replace(/=/g, "{[EQUALS]}");
    queryExpression = queryExpression.replace(/\\/g, "{[BACK-SLASH]}");    
    queryExpression = queryExpression.replace(/\'/g, "{[SINGLE-QUOTE]}");
    queryExpression = queryExpression.replace(/\+/g, "{[PLUS]}");
    document.querySelector(".queryExpressionTextArea").value = queryExpression;
  } 
function onClickEventBehaviorOfGenerateQueryButton ( event ) { event . preventDefault ( ) ; let queryExpression = "?" ; function allBlanks ( arrayOfValues ) { function isBlank ( thisValue ) { return thisValue == "" ; } return arrayOfValues . every ( isBlank ) ; } let whereClauseGroupWrapper = document . querySelectorAll ( ".whereClauseGroupWrapper" ) [ 0 ] ; let whereClauseElementValues = [ ] ; whereClauseGroupWrapper . querySelectorAll ( ".resetElement" ) . forEach ( function ( element ) { whereClauseElementValues . push ( element . value ) ; } ) ; let indexOfFirstWhereClauseBlankSelector = whereClauseElementValues . indexOf ( "" ) let userHasMadeAFilterExpression = ! allBlanks ( whereClauseElementValues ) ; if ( userHasMadeAFilterExpression ) { if ( indexOfFirstWhereClauseBlankSelector == whereClauseElementValues . length - 1 ) { queryExpression = queryExpression + "WHERE" + ":;" whereClauseElementValues . forEach ( function ( element ) { if ( element != "" ) { queryExpression = queryExpression + element + ":;" } } ) ; } else { alert ( 'The filter expression must be filled out completely or must be completely blank' + '\n' + 'Please check your work.' ) return } } let orderByClauseGroupWrapper = document . querySelectorAll ( ".orderByClauseGroupWrapper" ) [ 0 ] ; let orderByClauseElementValues = [ ] ; orderByClauseGroupWrapper . querySelectorAll ( ".resetElement" ) . forEach ( function ( element ) { orderByClauseElementValues . push ( element . value ) ; } ) ; let indexOfFirstOrderByClauseBlankSelector = orderByClauseElementValues . indexOf ( "" ) let userHasMadeAnOrderByExpression = ! allBlanks ( orderByClauseElementValues ) ; if ( userHasMadeAnOrderByExpression ) { if ( indexOfFirstOrderByClauseBlankSelector == orderByClauseElementValues . length - 1 ) { queryExpression = queryExpression + "ORDERBY" + ":;" orderByClauseElementValues . forEach ( function ( element ) { if ( element != "" ) { queryExpression = queryExpression + element + ":;" } } ) ; } else { alert ( 'The order-by expression must be filled out completely or must be completely blank' + '\n' + 'Please check your work.' ) return } } queryExpression = queryExpression . replace ( / # / g , "{[POUND]}" ) ; queryExpression = queryExpression . replace ( / & / g , "{[AMPERSAND]}" ) ; queryExpression = queryExpression . replace ( / = / g , "{[EQUALS]}" ) ; queryExpression = queryExpression . replace ( / \\ / g , "{[BACK-SLASH]}" ) ; queryExpression = queryExpression . replace ( / \' / g , "{[SINGLE-QUOTE]}" ) ; queryExpression = queryExpression . replace ( / \+ / g , "{[PLUS]}" ) ; document . querySelector ( ".queryExpressionTextArea" ) . value = queryExpression ; }
Then it sends the query off to the server and manages the response.
Then it sends the query off to the server and manages the response .
// Stop it from redirecting anywhere // This will contain the finished query expression that we will send to the server. // Define a function that will check if every element in an array is blank. // This will be used to determine if the user filled out the form. // The following will examine one of the elements of the array   // and return true if blank - otherwise it will return false. // .every is an array method that will call the function isBlank  // once for every element in the array selectorElementValues. // it will return true if every element is blank. // End of: function allBlanks(arrayOfValues){...}  // End of: Define a function that will check if every element in an array is blank. // Start of: Begin building a query expression by examining the filter control elements. // Only the where and order by clauses matter for the fetch from the server. // The select clause controls and records-per-page control can be  // examined and used after the records have been returned by the fetch. // 1. Make an array from the where clause elements. // Create an empty array to hold the values contained in the where clause select elements. // Create a handle to address the group wrapper.  // We can use this to keep the search for control elements limited to the where clause controls. // Create an empty array to hold the values of the where clause controls elements. // Store the values of each select element in the new array. // .resetElement is just a class that all the elements of interest have in common. // Push the values onto the array. // 2. Ensure all but the last element contains a value or that none of the  // elements contain values and then generate the query expression. // In other words:  // Make sure the user filled out the filter form(s) completely or not at all. // If the filter form(s) is/are completely filled out the create the query expression. // Find out which element in the array is the first element to contain a blank value. // If it's the last one then we know the form has been filled out completely. // Find out if all the values in the array selectorElementValues are blank. // If they are then we know that the form was not filled out at all in  // which case we should ignore the form. // If not all the elements are blank then then user has made a filter expression. // If the first blank is the very last element in the array then // we know that the form has been filled out compelely. // The form has been filled out completely so populate the query expression with data from the controls. // The user did not fill out the form competely so bail out of the process. // Stop the process. // End of: if(userHasMadeAFilterExpression){...} // End of: Begin build a query expression by examining the filter control elements. // Start of: Add any orderby clauses to the query expression. // 1. Make an array from the orderby clause elements. // Create an empty array to hold the values contained in the orderby clause select elements. // Create a handle to address the group wrapper.  // We can use this to keep the search for control elements limited to the orderby clause controls. // Create an empty array to hold the values of the orderby clause controls elements. // Store the values of each select element in the new array. // .resetElement is just a class that all the elements of interest have in common. // Push the values onto the array. // 2. Ensure all but the last element contains a value or that none of the  // elements contain values and then add to the query expression. // In other words:  // Make sure the user filled out the orderby form(s) completely or not at all. // If the orderby form(s) is/are completely filled out then add to the query expression. // Find out which element in the array is the first element to contain a blank value. // If it's the last one then we know the form has been filled out completely. // Find out if all the values in the array selectorElementValues are blank. // If they are then we know that the form was not filled out at all in  // which case we should ignore the form. // If not all the elements are blank then then user has made an orderby expression. // If the first blank is the very last element in the array then // we know that the form has been filled out compelely. // The form has been filled out completely so populate the query expression with data from the controls. // The user did not fill out the form competely so bail out of the process. // Stop the process. // End of: if(userHasMadeAFilterExpression){...} // End of: Add any orderby clauses to the query expression. // Start of: Replace troublesome symbols in the query expression // DON'T USE THE FOLLOWING SYMBOLS OR THE %ESCAPES IN THE QUERY EXPRESSION // CODE BELOW SWAPS THESE FOR SOMETHING COMPLETELY DIFFERENT. // PoundStops the Process-%23 // Ampersand breaks the expression into two parts-%26 // Equal stops the process-%3D // THE FOLLOWING SYMBOLS PRODUCE UNEXPECTED BEHAVIOR: // cODE BELOW SWAPS THESE FOR SOMETHING COMPLETELY DIFFERENT.     // Backslash is escaped with another backslash no matter what-%5C // Single Quote inserts Esc automatically and inserts a back slash in the result-%27 // Plus shows as a space-%2B  // THE FOLLOWING SYMBOLS PRODUCE UNEXPECTED BUT HARMLESS BEHAVIOR: // IT'S OK TO LEAVE THESE AS IS. WE WON'T NOTICE THEM IN THE FINAL RESULT. // Space inserts the Esc automatically-%20 // DoubleQInsertsEscAutomatically-%22    // LessThanInsertsEscAutomatically-%3C // GreaterThanInsertsEscAutomatically-%3E      // THE FOLLOWING SYMBOLS BEHAVE AS EXPECTED:     // Accent-` // Exclaimation-! // AtSign-@ // Dollar-$ // Percent-% // Carrot-^ // Asterisk-* // OpenParen-( // CloseParen-) // LowDash-_ // OpenBrace-{ // CloseBrace-} // OpenBracket-[ // CloseBracket-] // Pipe-| // Colon-: // Semi-; // Coma-, // Period-. // Question-?- // ForwardSlash-/-:; // We are pulling out these troublesome symbols from the queryExpression and replacing  // them with something different before sending them to the server. // We will reverse the process at the server. // Escaping the following with a backslash now stops the system from inserting an extra backslash in the result. // End of: Replace troublesome symbols in the query expression // Send the query off with the fetch function below.  // Commented out because this now has it's own button to run the query. // runQuery(queryExpression); // End of: function onClickEventBehaviorOfGenerateQueryButton(event)