laudom/ocw
2
0
Fork 0
Code Issues 4 Pull requests Packages Projects Releases Wiki Activity

styling update

Browse source
This commit is contained in:
selfisekai 2020-10-08 00:44:02 +02:00
parent 9cfa9074c5
commit a0f9b543ba
3 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
front/src/index.ts
View file

@ -5,6 +5,9 @@ const request = (resource: string, data: any) =>
method: "POST", method: "POST",
body: new URLSearchParams(data).toString(), body: new URLSearchParams(data).toString(),
credentials: "include", credentials: "include",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
}).then((res) => res.json()); }).then((res) => res.json());
const openLockerConfirm = (lat: string, lon: string, openCode: string, id: string) => { const openLockerConfirm = (lat: string, lon: string, openCode: string, id: string) => {
@ -44,7 +47,7 @@ const refreshPackages = () =>
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 openAction = row.insertCell(4); const opener = row.insertCell(4);
row.dataset.lat = shipment.pickupPoint.location.latitude.toString(); row.dataset.lat = shipment.pickupPoint.location.latitude.toString();
row.dataset.lon = shipment.pickupPoint.location.longitude.toString(); row.dataset.lon = shipment.pickupPoint.location.longitude.toString();
@ -55,11 +58,14 @@ const refreshPackages = () =>
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 openAction = document.createElement("a");
openAction.classList.add("button", "is-light", "is-small");
openAction.innerHTML = "Open"; openAction.innerHTML = "Open";
openAction.addEventListener("click", (event) => { 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!); openLocker(data.lat!, data.lon!, data.openCode!, data.id!);
}); });
opener.appendChild(openAction);
// console.log(shipment); // console.log(shipment);
}); });

1
front/src/style.scss
View file

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

23
webroot/index.html
View file

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