Disabling a button upon condition in Google App script

user_16004083 0
Viewed 75

I have a code where the PayPal button will be disabled when the payment is made until the current month. However, I noticed that since I have a filter button in my web app which allows user to check the payment history of previous years, if I click the previous year eventhough the payment is made until the current month it is showing the paypal button can anyone help me on this?

Code to disable the button if the payment for current month is done

var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth();
      if (!ar.some(([a,,,d]) => {
        var t = new Date(a);
        return year == t.getFullYear() && month == t.getMonth() && d.toUpperCase() == "PAID";
        })) {
              document.getElementById("digitalgoods-030521182921-1").style.display = "block";
            }

Code for JavaScript.html

<script>
    var username = ""; // Added
    function GetRecords() {
    var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
    spin += " Loading...";
    document.getElementById("LoginButton").innerHTML = spin;

    username = document.getElementById("username").value; // Modified
    var password = document.getElementById("password").value;
    var password = document.getElementById("password").value;
      
      google.script.run.withSuccessHandler(function(output) {
        console.log(output);
        var username = output[1];
        var name = output[2];
        if(output[0] == 'TRUE') {
          document.getElementById("loginDisplay").style.display = "none";
          document.getElementById("dataDisplay").style.display = "block";  
          document.getElementById("errorMessage").innerHTML = "";
          document.getElementById("currentUser").value = name; // CHANGE
          google.script.run.withSuccessHandler(displayTable).GetRecords(username,"None");

        } else if(output[0] == 'FALSE') {
          document.getElementById("firstLastName").innerHTML = "";
          document.getElementById("currentUser").value = "";
          document.getElementById("myFilter").innerHTML = "";
          document.getElementById("errorMessage").innerHTML = "Failed to Login";
          document.getElementById("LoginButton").innerHTML = "Login";   
        }
      }).checkLogin(username, password);
    }
    
    function filter(){
     var filterStr = document.getElementById("filterYear").value;
     google.script.run.withSuccessHandler(displayTable).GetRecords(username, filterStr);
    }

    function displayTable(result) {
    var ar = result.data;
    var filterString = result.filter;
    ar = ar.sort((a, b) => new Date(a).getTime() > new Date(b).getTime() ? -1 : 1).splice(-12); // <--- Added
    var name = document.getElementById("currentUser").value;  // CHANGE
      if(ar.length > 0) {
        var displayTable = '<table class=\"table\" id=\"mainTable\">';

        displayTable += "<tr>";
        displayTable += '<th style=\"text-align: center;\">Month</th>';
        displayTable += '<th style=\"text-align: center;\">House Number</th>';
        displayTable += '<th style=\"text-align: center;\">Street</th>';
        displayTable += '<th style=\"text-align: center;\">Payment Status</th>';
        displayTable += "</tr>";

        ar.forEach(function(item, index) {
          displayTable += "<tr>";
          displayTable += "<td style=\"text-align: center;\">"+item[0]+"</td>";
          displayTable += "<td style=\"text-align: center;\">"+item[1]+"</td>";
          displayTable += "<td style=\"text-align: center;\">"+item[2]+"</td>";
          displayTable += "<td style=\"text-align: center;\">"+item[3]+"</td>";
          displayTable += "</tr>";
        });

        displayTable += "</table>";

      } else {
        var displayTable = "<span style=\"font-weight: bold\" >No Records Found</span>";
      }
      
       var filter = '';
      if(filterString.length > 0) {
        filter += '<label for="years" style="font-size: 20px">Select the Year</label><br><select class="form-control form-control-sm" id="filterYear" name="years" required><option value="" selected>Choose...</option>';
        
        filterString.filter(String).forEach(str => {
          filter += '<option value="'+str+'">'+str+'</option>';
        });
  
        filter += '</select><button class="btn btn-primary" type="button" id="FilterButton" onclick="filter()" >Submit</button>';

        
      }
      
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth();
      if (!ar.some(([a,,,d]) => {
        var t = new Date(a);
        return year == t.getFullYear() && month == t.getMonth() && d.toUpperCase() == "PAID";
        })) {
              document.getElementById("digitalgoods-030521182921-1").style.display = "block";
            }
      document.getElementById("displayRecords").innerHTML = displayTable;
      document.getElementById("firstLastName").innerHTML = "USER: " + name;
      document.getElementById("myFilter").innerHTML = filter;
      document.getElementById("LoginButton").innerHTML = "Login";
      document.getElementById("username").value = '';
      document.getElementById("password").value = '';
    }
    
    //change the link according to ur webapp latest version
    function LogOut(){  
      window.open("https://script.google.com/macros/s/AKfycbwKa4sQ441WUIqmU40laBP0mfiqNMiN-NghEvwUnJY/dev",'_top');
    }
      
    function changePassword(){
    var result = confirm("Want to Change Password?");
    if (result) {
    var newPassword = document.getElementById("newPassword").value;
    google.script.run.withSuccessHandler(() => alert('Password changed')).changePassword(username, newPassword);
    }

  }
    </script>

Before filtering enter image description here

After filtering enter image description here

google-apps-script html javascript
1 Answers

I am a little cloudy on where all your logic is located at in your code, however, if what I have been able to determine about your lines of code that handle certain areas is true...

Set a variable that will check if the button for the select that selects the year has been checked, I believe that is

filter += '</select><button class="btn btn-primary" type="button" id="FilterButton" onclick="filter()" >Submit</button>

Here you have: onclick="filter()"

So if that is indeed the button that fires the older years to be displayed, then set your variable within that functions to false --> yearCheck = false <-- *modified.

Now further up where you define your user variable define the variable there above the GetRecords() function. var checkYear = true;

Once you run the code that contains the conditional to check the filter which I believe has a function there ar.some, you can add the bit that checks to see if that variable is false, && yearCheck !== false. I believe that was your first block of code you posted in your question.

if (!ar.some(([a,,,d]) => {
    var t = new Date(a);
    return year == t.getFullYear() && month == t.getMonth() && d.toUpperCase() == "PAID";
    }) && yearCheck !== false) {
          document.getElementById("digitalgoods-030521182921-1").style.display = "block";
        }

    var yearCheck = true;
    function GetRecords() {
    var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
    spin += " Loading...";
    document.getElementById("LoginButton").innerHTML = spin;



    function filter(){
       var filterStr = document.getElementById("filterYear").value;
       google.script.run.withSuccessHandler(displayTable).GetRecords(username, filterStr);
       yearCheck = false;
    }


    var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth();
      if (!ar.some(([a,,,d]) => {
        var t = new Date(a);
        return year == t.getFullYear() && month == t.getMonth() && d.toUpperCase() == "PAID";
        }) && yearCheck !== false) {
              document.getElementById("digitalgoods-030521182921-1").style.display = "block";
            }

If this does not work, I will remove my answer from your question thread.

user_15335920
Related