templates/notification.html

{% extends 'base.html' %} {% block head %}
<link rel="stylesheet" href="../static/notification.css" />
{% endblock %} {% block conteudo %}
<dialog id="modalPageCandidato">
  <div id="modal-content-page-candidato"></div>
</dialog>
<main>
  <div class="buttons">
    <button
      onclick="showToast(successMsg)"
      type="button"
      class="btn btn-success"
    >
      Success
    </button>
    <button onclick="showToast(warningMsg)" type="button" class="btn btn-info">
      Info
    </button>
    <button onclick="showToast(errorMsg)" type="button" class="btn btn-warning">
      Warning
    </button>
    <button id="modalclick">Modal</button>
  </div>
</main>
<div id="toastBoxInetum"></div>

{% endblock %} {% block finalscript %}
<script>
  let toastBox = document.getElementById("toastBoxInetum");
  let successMsg =
    '<i class="bi bi-check-circle-fill"></i> Candidato adicionado com sucesso!';
  let errorMsg =
    '<i class="bi bi-exclamation-triangle-fill"></i> Erro ao adicionar candidato!';
  let warningMsg = '<i class="bi bi-hourglass-split"></i> Iniciando...';
  function showToast(msg) {
    let toast = document.createElement("div");
    toast.classList.add("toastInetum");
    toast.innerHTML = msg;
    toastBox.appendChild(toast);

    if (msg.includes("Erro")) {
      toast.classList.add("error-proccess");
      setTimeout(() => {
        toast.style.transition = "opacity 0.5s ease";
        toast.style.opacity = 0;
        setTimeout(() => {
          toast.remove();
        }, 500);
      }, 6000);
    }
    if (msg.includes("Iniciando")) {
      toast.classList.add("warning-proccess");
      setTimeout(() => {
        toast.style.transition = "opacity 0.5s ease";
        toast.style.opacity = 0;
        setTimeout(() => {
          toast.remove();
        }, 500);
      }, 3000);
    }
    if (msg.includes("adicionado")) {
      toast.classList.add("success-proccess");
      setTimeout(() => {
        toast.style.transition = "opacity 0.4s ease";
        toast.style.opacity = 0;
        setTimeout(() => {
          toast.remove();
        }, 500);
      }, 6000);
    }
  }
</script>
<script>
  var dialog = $("#modalPageCandidato");
  var modalContent = $("#modal-content-page-candidato");
  modalContent.text("Dados atualizados com sucesso");
  $("#modalclick").click(function () {
    dialog.fadeIn();
  });
</script>
{% endblock %}