js.html

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/b93e1e40a9.js" crossorigin="anonymous"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- Custom client-side JavaScript code. -->
<script>
  function init() {
    // getID();
    getComment();
  }

  function success(text) {
    var toastAlert = document.getElementById("toast");
    var alert = new bootstrap.Toast(toastAlert);
    document.getElementById("result").innerHTML = text;
    toastAlert.classList.remove("bg-danger");
    toastAlert.classList.add("bg-success");
    alert.show();
  }

  function failure(text) {
    var toastAlert = document.getElementById("toast");
    var alert = new bootstrap.Toast(toastAlert);
    document.getElementById("result").innerHTML = text;
    toastAlert.classList.remove("bg-success");
    toastAlert.classList.add("bg-danger");
    alert.show();
  }

  function hideMenu() {
    document.getElementById("menu").classList.toggle("show");
  }

  function exportPortfolio() {
    document.getElementById("portfolio").classList.add("spinner");
    google.script.run.withSuccessHandler(function (value) {
      document.getElementById("portfolio").classList.remove("spinner");
      if (value == "Exported successfully to portfolios.") {
        success(value);
      } else {
        failure(value);
      }
    }).withFailureHandler(function (value) {
      document.getElementById("portfolio").classList.remove("spinner");
      failure();
    }).exportPortfolio();
  }

  function getComment() {
    google.script.run.withSuccessHandler(function (value) {
      document.getElementById("commentCol").innerHTML = value;
    }).getComment();
  }

  function updateComment() {
    google.script.run.withSuccessHandler(function (value) {
      document.getElementById("commentCol").innerHTML = value;
    }).updateComment();
  }

  function openDrive() {
    google.script.run.withSuccessHandler(function (value) {
      window.open(value, "_blank");
    }).openDrive();
  }

  function createForm() {
    document.getElementById("newform").classList.add("spinner");
    google.script.run.withSuccessHandler(function (value) {
      document.getElementById("newform").classList.remove("spinner");
      window.open(value, "_blank");
      success("Created New Form");
    }).withFailureHandler(function (value) {
      document.getElementById("newform").classList.remove("spinner");
      failure();
    }).createForm();
  }

  // function createStudentPortfolio() {
  //   document.getElementById("createPortfolioBtn").classList.add("spinner");
  //   google.script.run.withSuccessHandler(function (value) {
  //     document.getElementById("createPortfolioBtn").classList.remove("spinner");
  //     success(value);
  //   }).withFailureHandler(function (value) {
  //     document.getElementById("createPortfolioBtn").classList.remove("spinner");
  //     failure();
  //   }).createStudentPortfolio();
  // }

  function showPicker() {
    google.script.run.withSuccessHandler(function(value) {
    }).showPicker();
  }

  (async function asyncAction() {
    let receiver = new Promise((res, rej) => {
      window.modalDone = res;
    });
    var text = await receiver;
    if (text == "Form imported.") {
      success(text);
    }
    asyncAction();
  })();
  
</script>