js.html

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<!-- Custom client-side JavaScript code. -->
<script>

const saveBtn = document.getElementById("saveBtn");
const resetBtn = document.getElementById("resetBtn");
const numInputs = document.querySelectorAll('input[type="number"]');
const overlay = document.getElementById('overlay');
const toastAlert = document.getElementById("toast");
const assignBtn = document.getElementById("assignBtn");
const fillBtn = document.getElementById("fillBtn");
const eraseBtn = document.getElementById("eraseBtn");

const tooltipTriggerList = document.querySelectorAll(
  '[data-bs-toggle="tooltip"]'
);
const tooltipList = [...tooltipTriggerList].map(
  (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
);

saveBtn.addEventListener("click", (e) => {
  e.preventDefault();
  const numSessions = document.getElementById("num-sessions").value;
  const numChoices = document.getElementById("num-choices").value;
  overlay.classList.add('visible');
  // console.log(numSessions, numChoices);
  google.script.run
    .withSuccessHandler((event) => success(event))
    .withFailureHandler((event) => failure("Failed to update values. Try signing out of other Google accounts before trying again."))
    .updateValues(numSessions, numChoices);
});

resetBtn.addEventListener("click", () => {
  overlay.classList.add('visible');
  google.script.run
    .withSuccessHandler((event) => success(event))
    .withFailureHandler((event) => failure(event))
    .resetProperties();
});

numInputs.forEach((input) => {
  input.addEventListener("input", (e) => {
    if (e.target.value <= 0) e.target.value = 1;
  });
});

assignBtn.addEventListener("click", () => {
  overlay.classList.add("visible");
  google.script.run
    .withSuccessHandler((event) => success(event))
    .withFailureHandler((event) => failure(event))
    .assignParticipants();
})

fillBtn.addEventListener("click", () => {
  overlay.classList.add("visible");
  google.script.run
    .withSuccessHandler((event) => success(event))
    .withFailureHandler((event) => failure(event))
    .randomAssign();
})

eraseBtn.addEventListener("click", () => {
  overlay.classList.add('visible');
  google.script.run
    .withSuccessHandler((event) => success(event))
    .withFailureHandler((event) => failure(event))
    .eraseAssignments();
})

function success(text) {
  const alert = bootstrap.Toast.getOrCreateInstance(toastAlert);
  console.log(alert);
  document.getElementById("result").innerText = text;
  toastAlert.classList.remove("bg-danger");
  toastAlert.classList.add("bg-success");
  alert.show();
  overlay.classList.remove('visible');
}

function failure(text) {
  const alert = bootstrap.Toast.getOrCreateInstance(toastAlert);
  document.getElementById("result").innerText = text;
  toastAlert.classList.remove("bg-success");
  toastAlert.classList.add("bg-danger");
  alert.show();
  overlay.classList.remove('visible');
}
  
</script>