vinchent/udemy-go-web-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Using JS module on the book button

Browse Source
This commit is contained in:
Muyao CHEN 2024-06-29 17:01:26 +02:00
parent e5e5a93565
commit 310f61539c
1 changed files with 137 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
reservation.html
View File

@ -19,6 +19,10 @@
.notie-container {
box-shadow: none;
}
.datepicker {
z-index: 10000;
}
</style>
</head>
@ -110,6 +114,7 @@
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
<script src="https://unpkg.com/notie"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
@ -140,17 +145,147 @@
// notie
function notify(msg, msgType) {
console.log("Test")
notie.alert({
type: msgType,
text: msg,
});
}
document.getElementById("dummy").addEventListener('click', () => {
console.log("Test1")
notify("This is a message", "success");
// sweetalert2
function notifyModal(title, text, icon, confirmButtonText) {
Swal.fire({
title: title,
text: text,
icon: icon,
confirmButtonText: confirmButtonText
})
}
// Prompt is out Javascript module for all alerts, notifications, and custom popup dialogs
function Prompt() {
let toast = function (c) {
const {
msg = "",
icon = "success",
position = "top-end",
} = c
const Toast = Swal.mixin({
toast: true,
title: msg,
position: position,
icon: icon,
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({})
}
let success = function (c) {
const {
msg = "",
title = "",
footer = "",
} = c
Swal.fire({
icon: 'success',
title: title,
text: msg,
footer: footer,
})
}
let error = function (c) {
const {
msg = "",
title = "",
footer = "",
} = c
Swal.fire({
icon: 'error',
title: title,
text: msg,
footer: footer,
})
}
async function custom(c) {
const {
msg = "",
title = "",
} = c;
const {value: formValues} = await Swal.fire({
title: title,
html: msg,
backdrop: false,
focusConfirm: false,
showCancelButton: true,
willOpen: () => {
console.log("test")
const elem = document.getElementById('reservation-dates-modal')
const rp = new DateRangePicker(elem, {
"format": "yyyy-mm-dd",
showOnFocus: true,
});
},
didOpen: () => {
return [
document.getElementById('start').removeAttribute("disabled"),
document.getElementById('end').removeAttribute("disabled"),
]
},
preConfirm: () => {
return [
document.getElementById('start').value,
document.getElementById('end').value,
]
},
})
if (formValues) {
Swal.fire(JSON.stringify(formValues))
}
}
return {
toast: toast,
success: success,
error: error,
custom: custom,
}
}
document.getElementById("dummy").addEventListener('click', () => {
notify("This is a message", "success");
// notifyModal("title", "text", "success", "confirm");
// Prompt().toast({msg: "Prompt Test"})
Prompt().success({msg: "Success!"})
// Prompt().error({msg: "Ooops"})
let html = `
<form action="reservation.html" method="get" novalidate class="needs-validation">
<div id="reservation-dates-modal" class="row">
<div class="col mb-3">
<input disabled required type="text" class="form-control" name="start" id="start" placeholder="Arrival">
</div>
<div class="col mb-3">
<input disabled required type="text" class="form-control" name="end" id="end" placeholder="Departure">
</div>
</div>
</form>
`;
Prompt().custom({title: "Choose your dates", msg: html})
});
</script>
</body>