error and areyousure modals
parent
260687dfaf
commit
7308f37598
|
@ -160,7 +160,7 @@ leafletLoaderCSS.setAttribute("crossorigin", "anonymous");
|
|||
|
||||
const openError = (content: string) => {
|
||||
const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
|
||||
const txt = <HTMLSpanElement>errorBox.querySelector(".error-box-text")!;
|
||||
const txt = <HTMLParagraphElement>errorBox.querySelector(".error-box-text")!;
|
||||
txt.innerText = content;
|
||||
errorBox.style.display = "block";
|
||||
};
|
||||
|
@ -284,8 +284,20 @@ const refreshPackages = () =>
|
|||
)! as HTMLButtonElement;
|
||||
if (data.status === PackageStatus.READY_TO_PICKUP) {
|
||||
openButton.removeAttribute("disabled");
|
||||
openButton.onclick = (e: Event) => {
|
||||
e.preventDefault();
|
||||
(document.querySelector(".details-box")! as HTMLElement).style.display = "none";
|
||||
const { dataset } = (event.target as Element).parentNode!.parentNode as HTMLElement;
|
||||
openLocker(
|
||||
dataset.pickupPointLat!,
|
||||
dataset.pickupPointLon!,
|
||||
dataset.openCode!,
|
||||
dataset.id!,
|
||||
);
|
||||
};
|
||||
} else {
|
||||
openButton.setAttribute("disabled", "true");
|
||||
openButton.onclick = null;
|
||||
}
|
||||
const infoTable = detailsBox.querySelector(".details-text")! as HTMLTableElement;
|
||||
// remove previous data from table
|
||||
|
@ -319,7 +331,7 @@ ${d.pickupPointPostCode} ${d.pickupPointCity}`,
|
|||
const openAction = document.createElement("a");
|
||||
openAction.classList.add("button", "is-light", "is-small");
|
||||
openAction.innerHTML = "Open";
|
||||
if (shipment.status == PackageStatus.READY_TO_PICKUP) {
|
||||
if (shipment.status === PackageStatus.READY_TO_PICKUP) {
|
||||
openAction.addEventListener("click", (event) => {
|
||||
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
||||
openLocker(data.pickupPointLat!, data.pickupPointLon!, data.openCode!, data.id!);
|
||||
|
@ -423,17 +435,6 @@ window.addEventListener("load", () => {
|
|||
}
|
||||
});
|
||||
|
||||
const errorBoxWindow = <HTMLDivElement>document.querySelector(".error-box")!;
|
||||
const errorBoxButton = <HTMLAnchorElement>document.querySelector(".error-box-button")!;
|
||||
errorBoxButton.addEventListener("click", () => {
|
||||
errorBoxWindow.style.display = "none";
|
||||
});
|
||||
|
||||
const areYouNotSureButton = <HTMLAnchorElement>document.querySelector(".areyousure-button-deny")!;
|
||||
areYouNotSureButton.addEventListener("click", () => {
|
||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
||||
});
|
||||
|
||||
[...Array.from(document.querySelectorAll(".modal-background"))].forEach((element) => {
|
||||
element.addEventListener("click", () => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
@ -441,7 +442,11 @@ window.addEventListener("load", () => {
|
|||
});
|
||||
});
|
||||
|
||||
[...Array.from(document.querySelectorAll(".modal button.delete"))].forEach((element) => {
|
||||
([
|
||||
...Array.from(document.querySelectorAll(".modal button.delete")),
|
||||
document.querySelector(".modal .error-box-button"),
|
||||
document.querySelector(".modal .areyousure-button-deny"),
|
||||
].filter((e) => !!e) as HTMLElement[]).forEach((element) => {
|
||||
element.addEventListener("click", () => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.parentElement!.parentElement!.parentElement!.style.display = "none";
|
||||
|
|
|
@ -96,22 +96,35 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="areyousure-box message is-warning">
|
||||
<div class="message-header">Are you sure?</div>
|
||||
<div class="message-body">
|
||||
<div class="control">
|
||||
<a class="areyousure-button button is-danger">Open locker</a>
|
||||
<a class="areyousure-button-deny button">Cancel</a>
|
||||
</div>
|
||||
<div class="areyousure-box modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Are you sure?</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<p class="areyousure-text">The parcel locker will open even if you're not close to it, and so, anyone could take your package.</p>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="areyousure-button button is-danger">Open locker</button>
|
||||
<button class="areyousure-button-deny button">Cancel</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error-box message is-danger">
|
||||
<div class="message-header">Error</div>
|
||||
<div class="message-body">
|
||||
<span class="error-box-text"></span>
|
||||
<div class="control">
|
||||
<a class="error-box-button button is-danger">OK</a>
|
||||
</div>
|
||||
<div class="error-box modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Error</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<p class="error-box-text"></p>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="error-box-button button">OK</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-list container">
|
||||
|
|
Loading…
Reference in New Issue