error and areyousure modals

master
selfisekai 2020-11-03 21:38:47 +01:00
parent 260687dfaf
commit 7308f37598
2 changed files with 46 additions and 28 deletions

View File

@ -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";

View File

@ -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">