styling update

master
selfisekai 2020-10-08 00:44:02 +02:00
parent 9cfa9074c5
commit a0f9b543ba
3 changed files with 26 additions and 8 deletions

View File

@ -5,6 +5,9 @@ const request = (resource: string, data: any) =>
method: "POST",
body: new URLSearchParams(data).toString(),
credentials: "include",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
}).then((res) => res.json());
const openLockerConfirm = (lat: string, lon: string, openCode: string, id: string) => {
@ -44,7 +47,7 @@ const refreshPackages = () =>
const sender = row.insertCell(1);
const status = row.insertCell(2);
const locker = row.insertCell(3);
const openAction = row.insertCell(4);
const opener = row.insertCell(4);
row.dataset.lat = shipment.pickupPoint.location.latitude.toString();
row.dataset.lon = shipment.pickupPoint.location.longitude.toString();
@ -55,11 +58,14 @@ const refreshPackages = () =>
sender.innerText = shipment.senderName;
status.innerText = shipment.status;
locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`;
const openAction = document.createElement("a");
openAction.classList.add("button", "is-light", "is-small");
openAction.innerHTML = "Open";
openAction.addEventListener("click", (event) => {
const data = ((event.target as Element).parentNode as HTMLElement).dataset;
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
openLocker(data.lat!, data.lon!, data.openCode!, data.id!);
});
opener.appendChild(openAction);
// console.log(shipment);
});

View File

@ -1,3 +1,4 @@
$family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
// TODO: only import necessary styles
@import "../node_modules/bulma/bulma.sass";

View File

@ -8,6 +8,7 @@
<script src="assets/index.js"></script>
</head>
<body>
<div class="container">
<div class="login-box">
LOGIN
<form method="POST" class="login-form">
@ -38,13 +39,22 @@
<input type="submit">
</form>
</div>
<div class="areyousure-box">
Are you sure?
<div class="areyousure-button">Open locker</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>
</div>
</div>
</div>
<div class="error-box">
<span class="error-box-text"></span>
<div class="error-box-button">OK</div>
<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>
<div class="control">
<a class="error-box-button button is-light">OK</a>
</div>
</div>
</div>
<div class="package-list table-container">
<table class="table is-striped">
@ -60,5 +70,6 @@
<tbody></tbody>
</table>
</div>
</div>
</body>
</html>