lunax/ocw
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

no more session.shs requests, less requests to use

Browse source
This commit is contained in:
selfisekai 2020-11-03 22:54:55 +01:00
parent 0d7e172494
commit ce97de9adb
1 changed files with 155 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

308
front/src/index.ts
View file

@ -201,149 +201,150 @@ const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
}; };
}; };
const refreshPackages = () => const refreshPackages = async (response?: Package[]) => {
request("packages", {}).then((res: Package[]) => { const res: Package[] = response || (await request("packages", {}));
const table = document.querySelector("tbody")!; const table = document.querySelector("tbody")!;
res.reverse().forEach((shipment) => { res.reverse().forEach((shipment) => {
const row = table.insertRow(); const row = table.insertRow();
const id = row.insertCell(0); const id = row.insertCell(0);
const sender = row.insertCell(1); const sender = row.insertCell(1);
const status = row.insertCell(2); const status = row.insertCell(2);
const locker = row.insertCell(3); const locker = row.insertCell(3);
const details = row.insertCell(4); const details = row.insertCell(4);
const opener = row.insertCell(5); const opener = row.insertCell(5);
row.dataset.pickupPointLat = shipment.pickupPoint.location.latitude.toString(); row.dataset.pickupPointLat = shipment.pickupPoint.location.latitude.toString();
row.dataset.pickupPointLon = shipment.pickupPoint.location.longitude.toString(); row.dataset.pickupPointLon = shipment.pickupPoint.location.longitude.toString();
row.dataset.pickupPointDescription = shipment.pickupPoint.description; row.dataset.pickupPointDescription = shipment.pickupPoint.description;
row.dataset.pickupPointName = shipment.pickupPoint.name; row.dataset.pickupPointName = shipment.pickupPoint.name;
row.dataset.pickupPointStatus = shipment.pickupPoint.status; row.dataset.pickupPointStatus = shipment.pickupPoint.status;
row.dataset.pickupPointStreet = shipment.pickupPoint.address.street; row.dataset.pickupPointStreet = shipment.pickupPoint.address.street;
row.dataset.pickupPointStreetNumber = shipment.pickupPoint.address.buildingNumber; row.dataset.pickupPointStreetNumber = shipment.pickupPoint.address.buildingNumber;
row.dataset.pickupPointCity = shipment.pickupPoint.address.city; row.dataset.pickupPointCity = shipment.pickupPoint.address.city;
row.dataset.pickupPointProvince = shipment.pickupPoint.address.province; row.dataset.pickupPointProvince = shipment.pickupPoint.address.province;
row.dataset.pickupPointPostCode = shipment.pickupPoint.address.postCode; row.dataset.pickupPointPostCode = shipment.pickupPoint.address.postCode;
row.dataset.openCode = shipment.openCode; row.dataset.openCode = shipment.openCode;
row.dataset.id = shipment.shipmentNumber; row.dataset.id = shipment.shipmentNumber;
row.dataset.sender = shipment.senderName; row.dataset.sender = shipment.senderName;
row.dataset.status = shipment.status; row.dataset.status = shipment.status;
id.innerText = shipment.shipmentNumber; id.innerText = shipment.shipmentNumber;
sender.innerText = shipment.senderName; sender.innerText = shipment.senderName;
status.innerText = shipment.status; status.innerText = shipment.status;
locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`; locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`;
const showDetailsAction = document.createElement("a"); const showDetailsAction = document.createElement("a");
showDetailsAction.classList.add("button", "is-light", "is-small"); showDetailsAction.classList.add("button", "is-light", "is-small");
showDetailsAction.innerHTML = "Info"; showDetailsAction.innerHTML = "Info";
showDetailsAction.addEventListener("click", async (event) => { showDetailsAction.addEventListener("click", async (event) => {
const detailsBox = document.querySelector(".details-box")! as HTMLDivElement; const detailsBox = document.querySelector(".details-box")! as HTMLDivElement;
detailsBox.style.display = "block"; detailsBox.style.display = "block";
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset; const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
// maybe this looks like shit, but it works // maybe this looks like shit, but it works
let leafletLoaded = false; let leafletLoaded = false;
try { try {
leafletLoaded = !!L; leafletLoaded = !!L;
} catch (e) { } catch (e) {
if (!(e instanceof ReferenceError)) { if (!(e instanceof ReferenceError)) {
throw e; throw e;
}
} }
if (!leafletLoaded) { }
document.querySelector("head")!.appendChild(leafletLoaderCSS); if (!leafletLoaded) {
document.querySelector("head")!.appendChild(leafletLoaderJS); document.querySelector("head")!.appendChild(leafletLoaderCSS);
await new Promise((resolve, reject) => { document.querySelector("head")!.appendChild(leafletLoaderJS);
leafletLoaderJS.addEventListener("load", () => { await new Promise((resolve, reject) => {
resolve(); leafletLoaderJS.addEventListener("load", () => {
}); resolve();
leafletLoaderJS.addEventListener("error", () => {
reject();
});
}); });
map = L.map("map"); leafletLoaderJS.addEventListener("error", () => {
} reject();
map!.setView([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)], 17); });
L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", { });
attribution: map = L.map("map");
'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>', }
maxZoom: 19, map!.setView([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)], 17);
}).addTo(map!); L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
// delete previous markers attribution:
while (markers.length > 0) { 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
// @ts-ignore it's always marker, while loop checks length maxZoom: 19,
map.removeLayer(markers.pop()); }).addTo(map!);
} // delete previous markers
const marker = L.marker([ while (markers.length > 0) {
parseFloat(data.pickupPointLat!), // @ts-ignore it's always marker, while loop checks length
parseFloat(data.pickupPointLon!), map.removeLayer(markers.pop());
]).addTo(map!); }
markers.push(marker); const marker = L.marker([
const openButton = detailsBox.querySelector( parseFloat(data.pickupPointLat!),
".modal-card-foot button.is-primary", parseFloat(data.pickupPointLon!),
)! as HTMLButtonElement; ]).addTo(map!);
if (data.status === PackageStatus.READY_TO_PICKUP) { markers.push(marker);
openButton.removeAttribute("disabled"); const openButton = detailsBox.querySelector(
openButton.onclick = (e: Event) => { ".modal-card-foot button.is-primary",
e.preventDefault(); )! as HTMLButtonElement;
(document.querySelector(".details-box")! as HTMLElement).style.display = "none"; if (data.status === PackageStatus.READY_TO_PICKUP) {
const { dataset } = (event.target as Element).parentNode!.parentNode as HTMLElement; openButton.removeAttribute("disabled");
openLocker( openButton.onclick = (e: Event) => {
dataset.pickupPointLat!, e.preventDefault();
dataset.pickupPointLon!, (document.querySelector(".details-box")! as HTMLElement).style.display = "none";
dataset.openCode!, const { dataset } = (event.target as Element).parentNode!.parentNode as HTMLElement;
dataset.id!, openLocker(
); dataset.pickupPointLat!,
}; dataset.pickupPointLon!,
} else { dataset.openCode!,
openButton.setAttribute("disabled", "true"); dataset.id!,
openButton.onclick = null; );
} };
const infoTable = detailsBox.querySelector(".details-text")! as HTMLTableElement; } else {
// remove previous data from table openButton.setAttribute("disabled", "true");
Array.from(infoTable.tBodies).forEach((tbody) => tbody.remove()); openButton.onclick = null;
([ }
["Status", "status"], const infoTable = detailsBox.querySelector(".details-text")! as HTMLTableElement;
[ // remove previous data from table
"Pickup point", Array.from(infoTable.tBodies).forEach((tbody) => tbody.remove());
(d) => `${d.pickupPointName} (${d.pickupPointStatus}) ([
["Status", "status"],
[
"Pickup point",
(d) => `${d.pickupPointName} (${d.pickupPointStatus})
${d.pickupPointDescription} ${d.pickupPointDescription}
${d.pickupPointStreet} ${d.pickupPointStreetNumber} ${d.pickupPointStreet} ${d.pickupPointStreetNumber}
${d.pickupPointProvince} ${d.pickupPointProvince}
${d.pickupPointPostCode} ${d.pickupPointCity}`, ${d.pickupPointPostCode} ${d.pickupPointCity}`,
], ],
["Sender", "sender"], ["Sender", "sender"],
["Open code", "openCode"], ["Open code", "openCode"],
["Package number", "id"], ["Package number", "id"],
] as [string, string | ((d: typeof data) => string)][]).forEach(([key, value]) => { ] as [string, string | ((d: typeof data) => string)][]).forEach(([key, value]) => {
const infoRow = infoTable.insertRow(); const infoRow = infoTable.insertRow();
const keyCell = infoRow.insertCell(); const keyCell = infoRow.insertCell();
keyCell.innerText = key; keyCell.innerText = key;
const valueCell = infoRow.insertCell(); const valueCell = infoRow.insertCell();
if (typeof value === "string") { if (typeof value === "string") {
valueCell.innerText = `${data[value]}`; valueCell.innerText = `${data[value]}`;
} else { } else {
valueCell.innerText = value(data); valueCell.innerText = value(data);
} }
});
}); });
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);
}); });
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", () => { window.addEventListener("load", () => {
const login = document.querySelector(".login-form")!; const login = document.querySelector(".login-form")!;
login.addEventListener("submit", (event) => { login.addEventListener("submit", (event) => {
@ -453,29 +454,30 @@ window.addEventListener("load", () => {
}); });
}); });
request("session", {}).then((res) => { request("packages", {}).then((res) => {
switch (parseInt(res.status, 10)) { if (Array.isArray(res)) {
case 200: // logged in, verified e-mail and phone, res is the package list
// logged in, verified e-mail and phone refreshPackages(res);
refreshPackages().then(() => { (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block"; // just to be sure
}); localStorage.removeItem("phone");
localStorage.removeItem("phone"); } else {
break; switch (parseInt(res.status, 10)) {
case -1: case -1:
// not logged in // not logged in
[".login-box", ".register-box"].forEach((elementName) => { [".login-box", ".register-box"].forEach((elementName) => {
(document.querySelector(elementName)! as HTMLDivElement).style.display = "block"; (document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
}); });
break; break;
case -2: case -2:
(document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block"; (document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block";
break; break;
case -3: case -3:
(document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block"; (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
break; break;
default: default:
openError(res.description || res.msg || `Session error: ${res.status}`); openError(res.description || res.msg || `Session error: ${res.status}`);
}
} }
}); });
}); });