design updates
selfisekai
parent
59c7d2bc97
commit
5286035359
|
|
@ -1,223 +1,6 @@
|
|||
// eslint-disable-next-line spaced-comment
|
||||
///<reference path="../node_modules/@types/leaflet/index.d.ts" />
|
||||
|
||||
let phone = 0;
|
||||
const leafletLoaderJS = document.createElement("script");
|
||||
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
|
||||
leafletLoaderJS.setAttribute(
|
||||
"integrity",
|
||||
"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==",
|
||||
);
|
||||
leafletLoaderJS.setAttribute("crossorigin", "anonymous");
|
||||
const leafletLoaderCSS = document.createElement("link");
|
||||
leafletLoaderCSS.setAttribute("rel", "stylesheet");
|
||||
leafletLoaderCSS.setAttribute("href", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css");
|
||||
leafletLoaderCSS.setAttribute(
|
||||
"integrity",
|
||||
"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==",
|
||||
);
|
||||
leafletLoaderCSS.setAttribute("crossorigin", "anonymous");
|
||||
|
||||
const request = (resource: string, data: any) =>
|
||||
fetch(`/api/${resource}.shs`, {
|
||||
method: "POST",
|
||||
body: new URLSearchParams(data).toString(),
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
}).then((res) => res.json());
|
||||
|
||||
const openError = (content: string) => {
|
||||
const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
|
||||
const txt = <HTMLSpanElement>errorBox.querySelector(".error-box-text")!;
|
||||
txt.innerText = content;
|
||||
errorBox.style.display = "block";
|
||||
};
|
||||
|
||||
const openLockerConfirm = (lat: string, lon: string, openCode: string, id: string) => {
|
||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
||||
request("collect", {
|
||||
lat,
|
||||
lon,
|
||||
openCode,
|
||||
id,
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
openError(res.description || res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
|
||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "block";
|
||||
(document.querySelector(".areyousure-button") as HTMLElement)!.onclick = () => {
|
||||
openLockerConfirm(lat, lon, openCode, id);
|
||||
};
|
||||
};
|
||||
|
||||
const refreshPackages = () =>
|
||||
request("packages", {}).then((res) => {
|
||||
const table = document.querySelector("tbody")!;
|
||||
res.forEach((shipment: Package) => {
|
||||
const row = table.insertRow();
|
||||
const id = row.insertCell(0);
|
||||
const sender = row.insertCell(1);
|
||||
const status = row.insertCell(2);
|
||||
const locker = row.insertCell(3);
|
||||
const details = row.insertCell(4);
|
||||
const opener = row.insertCell(5);
|
||||
|
||||
row.dataset.pickupPointLat = shipment.pickupPoint.location.latitude.toString();
|
||||
row.dataset.pickupPointLon = shipment.pickupPoint.location.longitude.toString();
|
||||
row.dataset.pickupPointDescription = shipment.pickupPoint.description;
|
||||
row.dataset.pickupPointName = shipment.pickupPoint.name;
|
||||
row.dataset.pickupPointStatus = shipment.pickupPoint.status;
|
||||
row.dataset.pickupPointStreet = shipment.pickupPoint.address.street;
|
||||
row.dataset.pickupPointStreetNumber = shipment.pickupPoint.address.buildingNumber;
|
||||
row.dataset.pickupPointCity = shipment.pickupPoint.address.city;
|
||||
row.dataset.pickupPointProvince = shipment.pickupPoint.address.province;
|
||||
row.dataset.pickupPointPostCode = shipment.pickupPoint.address.postCode;
|
||||
row.dataset.openCode = shipment.openCode;
|
||||
row.dataset.id = shipment.shipmentNumber;
|
||||
row.dataset.sender = shipment.senderName;
|
||||
row.dataset.status = shipment.status;
|
||||
|
||||
id.innerText = shipment.shipmentNumber;
|
||||
sender.innerText = shipment.senderName;
|
||||
status.innerText = shipment.status;
|
||||
locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`;
|
||||
|
||||
const showDetailsAction = document.createElement("a");
|
||||
showDetailsAction.classList.add("button", "is-light", "is-small");
|
||||
showDetailsAction.innerHTML = "Info";
|
||||
|
||||
showDetailsAction.addEventListener("click", (event) => {
|
||||
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
||||
document.querySelector("head")!.appendChild(leafletLoaderCSS);
|
||||
document.querySelector("head")!.appendChild(leafletLoaderJS);
|
||||
leafletLoaderJS.addEventListener("load", () => {
|
||||
const map = L.map("map").setView(
|
||||
[parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)],
|
||||
17,
|
||||
);
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution:
|
||||
'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
L.marker([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)]).addTo(map);
|
||||
});
|
||||
});
|
||||
|
||||
const openAction = document.createElement("a");
|
||||
openAction.classList.add("button", "is-light", "is-small");
|
||||
openAction.innerHTML = "Open";
|
||||
if (shipment.status == "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!);
|
||||
});
|
||||
} else {
|
||||
openAction.setAttribute("disabled", "");
|
||||
}
|
||||
|
||||
opener.appendChild(openAction);
|
||||
details.appendChild(showDetailsAction);
|
||||
});
|
||||
});
|
||||
window.addEventListener("load", () => {
|
||||
const login = document.querySelector(".login-form")!;
|
||||
login.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
request("login", {
|
||||
login: form.login.value,
|
||||
password: form.password.value,
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
refreshPackages().then(() => {
|
||||
[".login-box", ".register-box"].forEach((elementName) => {
|
||||
(document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
|
||||
});
|
||||
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
||||
});
|
||||
} else {
|
||||
openError(res.msg || "Error during login. Try again in a while?");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const logout = document.querySelector(".logout-button")!;
|
||||
logout.addEventListener("click", () => {
|
||||
request("logout", {}).then(() => {
|
||||
document.location.reload();
|
||||
});
|
||||
});
|
||||
|
||||
const register = document.querySelector(".register-form")!;
|
||||
register.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
phone = form.phone.value;
|
||||
const res = await request("register", {
|
||||
login: form.login.value,
|
||||
password: form.password.value,
|
||||
phone: form.phone.value,
|
||||
});
|
||||
if (res.status == 200) {
|
||||
[".register-box", ".login-box"].forEach((element) => {
|
||||
(document.querySelector(element)! as HTMLDivElement).style.display = "none";
|
||||
});
|
||||
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
|
||||
} else {
|
||||
openError(res.description || res.msg);
|
||||
}
|
||||
});
|
||||
|
||||
const sms = document.querySelector(".sms-form")!;
|
||||
sms.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
const res = await request("smscode", {
|
||||
code: form.code.value,
|
||||
phone,
|
||||
});
|
||||
if (res.status == 200) {
|
||||
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "none";
|
||||
await refreshPackages();
|
||||
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
||||
} else {
|
||||
openError(res.description || res.msg);
|
||||
}
|
||||
});
|
||||
|
||||
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";
|
||||
});
|
||||
|
||||
request("session", {}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
// logged in
|
||||
refreshPackages().then(() => {
|
||||
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
||||
});
|
||||
} else {
|
||||
// not logged in
|
||||
[".login-box", ".register-box"].forEach((elementName) => {
|
||||
(document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
interface Package {
|
||||
openCode: string;
|
||||
pickupPoint: Locker;
|
||||
|
|
@ -355,3 +138,225 @@ enum PackageStatus {
|
|||
/** Upłynął termin odebrania paczki z Paczkomatu tymczasowego, ale paczka nadal jest w nim magazynowana - czeka na przyjazd kuriera, który ją zabierze do pierwotnie wybranego Paczkomatu. */
|
||||
STACK_PARCEL_IN_BOX_MACHINE_PICKUP_TIME_EXPIRED = "stack_parcel_in_box_machine_pickup_time_expired",
|
||||
}
|
||||
|
||||
let phone = 0;
|
||||
const leafletLoaderJS = document.createElement("script");
|
||||
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
|
||||
leafletLoaderJS.setAttribute(
|
||||
"integrity",
|
||||
"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==",
|
||||
);
|
||||
leafletLoaderJS.setAttribute("crossorigin", "anonymous");
|
||||
const leafletLoaderCSS = document.createElement("link");
|
||||
leafletLoaderCSS.setAttribute("rel", "stylesheet");
|
||||
leafletLoaderCSS.setAttribute("href", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css");
|
||||
leafletLoaderCSS.setAttribute(
|
||||
"integrity",
|
||||
"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==",
|
||||
);
|
||||
leafletLoaderCSS.setAttribute("crossorigin", "anonymous");
|
||||
|
||||
const openError = (content: string) => {
|
||||
const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
|
||||
const txt = <HTMLSpanElement>errorBox.querySelector(".error-box-text")!;
|
||||
txt.innerText = content;
|
||||
errorBox.style.display = "block";
|
||||
};
|
||||
|
||||
const request = (resource: string, data: any) =>
|
||||
fetch(`/api/${resource}.shs`, {
|
||||
method: "POST",
|
||||
body: new URLSearchParams(data).toString(),
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.catch((err: Error) => {
|
||||
openError(err.message);
|
||||
throw new Error(`Rejected promise ${err.message}`);
|
||||
});
|
||||
|
||||
const openLockerConfirm = (lat: string, lon: string, openCode: string, id: string) => {
|
||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
||||
request("collect", {
|
||||
lat,
|
||||
lon,
|
||||
openCode,
|
||||
id,
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
openError(res.description || res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
|
||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "block";
|
||||
(document.querySelector(".areyousure-button") as HTMLElement)!.onclick = () => {
|
||||
openLockerConfirm(lat, lon, openCode, id);
|
||||
};
|
||||
};
|
||||
|
||||
const refreshPackages = () =>
|
||||
request("packages", {}).then((res: Package[]) => {
|
||||
const table = document.querySelector("tbody")!;
|
||||
res.reverse().forEach((shipment) => {
|
||||
const row = table.insertRow();
|
||||
const id = row.insertCell(0);
|
||||
const sender = row.insertCell(1);
|
||||
const status = row.insertCell(2);
|
||||
const locker = row.insertCell(3);
|
||||
const details = row.insertCell(4);
|
||||
const opener = row.insertCell(5);
|
||||
|
||||
row.dataset.pickupPointLat = shipment.pickupPoint.location.latitude.toString();
|
||||
row.dataset.pickupPointLon = shipment.pickupPoint.location.longitude.toString();
|
||||
row.dataset.pickupPointDescription = shipment.pickupPoint.description;
|
||||
row.dataset.pickupPointName = shipment.pickupPoint.name;
|
||||
row.dataset.pickupPointStatus = shipment.pickupPoint.status;
|
||||
row.dataset.pickupPointStreet = shipment.pickupPoint.address.street;
|
||||
row.dataset.pickupPointStreetNumber = shipment.pickupPoint.address.buildingNumber;
|
||||
row.dataset.pickupPointCity = shipment.pickupPoint.address.city;
|
||||
row.dataset.pickupPointProvince = shipment.pickupPoint.address.province;
|
||||
row.dataset.pickupPointPostCode = shipment.pickupPoint.address.postCode;
|
||||
row.dataset.openCode = shipment.openCode;
|
||||
row.dataset.id = shipment.shipmentNumber;
|
||||
row.dataset.sender = shipment.senderName;
|
||||
row.dataset.status = shipment.status;
|
||||
|
||||
id.innerText = shipment.shipmentNumber;
|
||||
sender.innerText = shipment.senderName;
|
||||
status.innerText = shipment.status;
|
||||
locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`;
|
||||
|
||||
const showDetailsAction = document.createElement("a");
|
||||
showDetailsAction.classList.add("button", "is-light", "is-small");
|
||||
showDetailsAction.innerHTML = "Info";
|
||||
|
||||
showDetailsAction.addEventListener("click", (event) => {
|
||||
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
||||
document.querySelector("head")!.appendChild(leafletLoaderCSS);
|
||||
document.querySelector("head")!.appendChild(leafletLoaderJS);
|
||||
leafletLoaderJS.addEventListener("load", () => {
|
||||
const map = L.map("map").setView(
|
||||
[parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)],
|
||||
17,
|
||||
);
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
|
||||
attribution:
|
||||
'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
L.marker([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)]).addTo(map);
|
||||
});
|
||||
});
|
||||
|
||||
const openAction = document.createElement("a");
|
||||
openAction.classList.add("button", "is-light", "is-small");
|
||||
openAction.innerHTML = "Open";
|
||||
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!);
|
||||
});
|
||||
} else {
|
||||
openAction.setAttribute("disabled", "");
|
||||
}
|
||||
|
||||
opener.appendChild(openAction);
|
||||
details.appendChild(showDetailsAction);
|
||||
});
|
||||
});
|
||||
window.addEventListener("load", () => {
|
||||
const login = document.querySelector(".login-form")!;
|
||||
login.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
request("login", {
|
||||
login: form.login.value,
|
||||
password: form.password.value,
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
refreshPackages().then(() => {
|
||||
[".login-box", ".register-box"].forEach((elementName) => {
|
||||
(document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
|
||||
});
|
||||
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
||||
});
|
||||
} else {
|
||||
openError(res.msg || "Error during login. Try again in a while?");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const logout = document.querySelector(".logout-button")!;
|
||||
logout.addEventListener("click", () => {
|
||||
request("logout", {}).then(() => {
|
||||
document.location.reload();
|
||||
});
|
||||
});
|
||||
|
||||
const register = document.querySelector(".register-form")!;
|
||||
register.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
phone = form.phone.value;
|
||||
const res = await request("register", {
|
||||
login: form.login.value,
|
||||
password: form.password.value,
|
||||
phone: form.phone.value,
|
||||
});
|
||||
if (res.status == 200) {
|
||||
[".register-box", ".login-box"].forEach((element) => {
|
||||
(document.querySelector(element)! as HTMLDivElement).style.display = "none";
|
||||
});
|
||||
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
|
||||
} else {
|
||||
openError(res.description || res.msg);
|
||||
}
|
||||
});
|
||||
|
||||
const sms = document.querySelector(".sms-form")!;
|
||||
sms.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
const res = await request("smscode", {
|
||||
code: form.code.value,
|
||||
phone,
|
||||
});
|
||||
if (res.status == 200) {
|
||||
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "none";
|
||||
await refreshPackages();
|
||||
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
||||
} else {
|
||||
openError(res.description || res.msg);
|
||||
}
|
||||
});
|
||||
|
||||
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";
|
||||
});
|
||||
|
||||
request("session", {}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
// logged in
|
||||
refreshPackages().then(() => {
|
||||
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
||||
});
|
||||
} else {
|
||||
// not logged in
|
||||
[".login-box", ".register-box"].forEach((elementName) => {
|
||||
(document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
|||
}
|
||||
|
||||
#map {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.error-box-text {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,9 +81,9 @@
|
|||
<div class="error-box message is-danger">
|
||||
<div class="message-header">Error</div>
|
||||
<div class="message-body">
|
||||
<span class="error-box-text font-style-monospace"></span>
|
||||
<span class="error-box-text"></span>
|
||||
<div class="control">
|
||||
<a class="error-box-button button is-light">OK</a>
|
||||
<a class="error-box-button button is-danger">OK</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue