error and areyousure modals
This commit is contained in:
parent
260687dfaf
commit
7308f37598
|
@ -160,7 +160,7 @@ leafletLoaderCSS.setAttribute("crossorigin", "anonymous");
|
||||||
|
|
||||||
const openError = (content: string) => {
|
const openError = (content: string) => {
|
||||||
const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
|
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;
|
txt.innerText = content;
|
||||||
errorBox.style.display = "block";
|
errorBox.style.display = "block";
|
||||||
};
|
};
|
||||||
|
@ -284,8 +284,20 @@ const refreshPackages = () =>
|
||||||
)! as HTMLButtonElement;
|
)! as HTMLButtonElement;
|
||||||
if (data.status === PackageStatus.READY_TO_PICKUP) {
|
if (data.status === PackageStatus.READY_TO_PICKUP) {
|
||||||
openButton.removeAttribute("disabled");
|
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 {
|
} else {
|
||||||
openButton.setAttribute("disabled", "true");
|
openButton.setAttribute("disabled", "true");
|
||||||
|
openButton.onclick = null;
|
||||||
}
|
}
|
||||||
const infoTable = detailsBox.querySelector(".details-text")! as HTMLTableElement;
|
const infoTable = detailsBox.querySelector(".details-text")! as HTMLTableElement;
|
||||||
// remove previous data from table
|
// remove previous data from table
|
||||||
|
@ -319,7 +331,7 @@ ${d.pickupPointPostCode} ${d.pickupPointCity}`,
|
||||||
const openAction = document.createElement("a");
|
const openAction = document.createElement("a");
|
||||||
openAction.classList.add("button", "is-light", "is-small");
|
openAction.classList.add("button", "is-light", "is-small");
|
||||||
openAction.innerHTML = "Open";
|
openAction.innerHTML = "Open";
|
||||||
if (shipment.status == PackageStatus.READY_TO_PICKUP) {
|
if (shipment.status === PackageStatus.READY_TO_PICKUP) {
|
||||||
openAction.addEventListener("click", (event) => {
|
openAction.addEventListener("click", (event) => {
|
||||||
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
||||||
openLocker(data.pickupPointLat!, data.pickupPointLon!, data.openCode!, data.id!);
|
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) => {
|
[...Array.from(document.querySelectorAll(".modal-background"))].forEach((element) => {
|
||||||
element.addEventListener("click", () => {
|
element.addEventListener("click", () => {
|
||||||
// eslint-disable-next-line no-param-reassign
|
// 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", () => {
|
element.addEventListener("click", () => {
|
||||||
// eslint-disable-next-line no-param-reassign
|
// eslint-disable-next-line no-param-reassign
|
||||||
element.parentElement!.parentElement!.parentElement!.style.display = "none";
|
element.parentElement!.parentElement!.parentElement!.style.display = "none";
|
||||||
|
|
|
@ -96,22 +96,35 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="areyousure-box message is-warning">
|
<div class="areyousure-box modal">
|
||||||
<div class="message-header">Are you sure?</div>
|
<div class="modal-background"></div>
|
||||||
<div class="message-body">
|
<div class="modal-card">
|
||||||
<div class="control">
|
<header class="modal-card-head">
|
||||||
<a class="areyousure-button button is-danger">Open locker</a>
|
<p class="modal-card-title">Are you sure?</p>
|
||||||
<a class="areyousure-button-deny button">Cancel</a>
|
<button class="delete" aria-label="close"></button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<div class="error-box message is-danger">
|
<div class="error-box modal">
|
||||||
<div class="message-header">Error</div>
|
<div class="modal-background"></div>
|
||||||
<div class="message-body">
|
<div class="modal-card">
|
||||||
<span class="error-box-text"></span>
|
<header class="modal-card-head">
|
||||||
<div class="control">
|
<p class="modal-card-title">Error</p>
|
||||||
<a class="error-box-button button is-danger">OK</a>
|
<button class="delete" aria-label="close"></button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<div class="package-list container">
|
<div class="package-list container">
|
||||||
|
|
Loading…
Reference in a new issue