Use table for consulates info

This commit is contained in:
Maks Snegov 2024-04-24 16:33:16 -07:00
parent 99e61bb1fc
commit 91672725fa
2 changed files with 25 additions and 19 deletions

View File

@ -74,9 +74,7 @@
<!-- consulates -->
<div class="row">
<div class="col">
Consulates:
</div>
<div class="col">Consulates:</div>
</div>
<div id="consulatesConfig">
</div>

View File

@ -83,35 +83,43 @@
await chrome.storage.local.get(['__consulates']).then((result) => {
let consulates = result['__consulates'];
let html = '';
let html = `
<table class="table table-striped">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">City</th>
<th scope="col" style="white-space: nowrap;">Current Date</th>
<th scope="col" style="white-space: nowrap;">Best Date</th>
<th scope="col">Autobook</th>
</tr>
</thead>
<tbody>
`
for (let c in consulates) {
console.log(c, consulates[c])
let cSelected = consulates[c].isSelected === true ? "checked" : "";
let cAutobook = consulates[c].autobook === true ? "checked" : "";
let cName = c.replace(/ /g, '&nbsp;')
let cId = consulates[c].id;
html += `
<div class="row">
<div class="col">
<tr>
<td>
<div class="form-check form-checkbox" style="text-align: left;">
<input class="form-check-input" type="checkbox" role="switch" id="isSelected-${cId}" ${cSelected}>
</div>
</div>
<div class="col">${cName}</div>
<div class="col"><span id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></div>
<div class="col"><span id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></div>
<div class="col">
</td>
<td style="white-space: nowrap;">${c}</td>
<td style="white-space: nowrap;"><span id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></td>
<td style="white-space: nowrap;"><span id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
<td>
<div class="form-check form-switch" style="text-align: left;">
<input class="form-check-input" type="checkbox" role="switch" id="autobook-${cId}" ${cAutobook}>
<label class="form-check-label" for="autobook-${cId}">Autobook</label>
</div>
</div>
<!--<label class="form-check-label" for="autobook-${cId}">Autobook</label>-->
</div>
</td>
</tr>
`;
}
if (html === '') {
html = "No consulates found.";
}
html += `</tbody></table>`;
document.getElementById('consulatesConfig').innerHTML = html;
for (let c in consulates) {