include axios and show toasts

This commit is contained in:
Florian Hoss 2022-04-05 21:21:48 +02:00
parent 712af41c28
commit 5b2252d6bd
5 changed files with 69 additions and 19 deletions

View file

@ -10,6 +10,31 @@
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{{end}}
{{define "toasts"}}
<div class="position-absolute bottom-0 end-0 mb-3 me-3">
<div id="errorToast" class="toast align-items-center text-white bg-danger border-0" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div id="errorToastContent" class="toast-body">
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
<div class="position-absolute bottom-0 end-0 mb-3 me-3">
<div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div id="successToastContent" class="toast-body">
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
{{end}}
{{define "navbar"}}
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
@ -63,12 +88,33 @@
{{end}}
{{define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const button_logout = document.getElementById("button-logout");
const username = getCookie("username");
const myHeaders = new Headers();
myHeaders.append('username', username);
const errorToastEl = document.getElementById('errorToast');
const errorToastContent = document.getElementById('errorToastContent');
const errorToast = new bootstrap.Toast(errorToastEl, {delay: 3000})
const successToastEL = document.getElementById('successToast');
const successToastContent = document.getElementById('successToastContent');
const successToast = new bootstrap.Toast(successToastEL, {delay: 3000});
function showErrorToast(message) {
errorToastContent.innerText = message;
errorToast.show();
}
function showSuccessToast(message) {
successToastContent.innerText = message;
successToast.show();
}
function setCookie(cookie_name, cookie_value, cookie_expiry) {
const d = new Date();
d.setTime(d.getTime() + (cookie_expiry * 24 * 60 * 60 * 1000));
@ -126,7 +172,6 @@
event.preventDefault();
event.stopPropagation();
} else {
document.getElementById("button").disabled = true;
event.preventDefault();
let data = new FormData();
let form_element = document.getElementsByClassName('form-control');
@ -139,4 +184,4 @@
}, false);
}
</script>
{{end}}
{{end}}