update SMS.ru UI

This commit is contained in:
Alexander Popov 2022-09-13 22:40:21 +03:00
parent 94480744c1
commit efd0097cb5
Signed by: iiiypuk
GPG Key ID: D8C9B59A9F04A70C
2 changed files with 24 additions and 14 deletions

View File

@ -15,22 +15,27 @@
</div> </div>
<section class="bg-dark text-bg-dark w-100 p-3"> <section class="bg-dark text-bg-dark w-100 p-3">
<div class="fw-bold"> <div class="border-bottom border-danger fw-bold pb-2 mb-3">
Today: Today:
<label id="data-today"></label> <label id="data-today"></label>
</div> </div>
<div class="row"> <div class="card border-danger bg-dark text-bg-dark">
<div class="col">SMS.ru</div> <div class="d-flex align-items-center justify-content-between card-header border-danger">
<div class="col-6"> <p class="m-0">SMS.ru</p>
<button id="button-smsru-update" class="btn btn-sm btn-outline text-bg-dark">
🔄 update
</button>
</div>
<div class="card-body">
<h5 class="card-title">Количество SMS</h5>
<p class="card-text">
<div class="progress"> <div class="progress">
<div id="data-smsru-progress" class="progress-bar progress-bar-striped bg-danger" role="progressbar" <div id="data-smsru-progress" class="progress-bar progress-bar-striped bg-danger" role="progressbar"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
style="width: 100%"></div> style="width: 100%"></div>
</div> </div>
</div> </p>
<div class="col text-end">
<button id="button-smsru-update" class="btn btn-sm btn-outline-primary">Update</button>
</div> </div>
</div> </div>
</section> </section>

View File

@ -20,11 +20,16 @@ function smsruUpdateMessages() {
fetch('/api/v1.0/smsru_status') fetch('/api/v1.0/smsru_status')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.used_today === null) data.used_today = 0;
smsProgress.setAttribute('aria-valuenow', data.used_today); smsProgress.setAttribute('aria-valuenow', data.used_today);
smsProgress.setAttribute('aria-valuemax', data.total_free); smsProgress.setAttribute('aria-valuemax', data.total_free);
smsProgress.setAttribute('style', `width: ${data.used_today / data.total_free * 100}%`); if (data.used_today > 0) {
smsProgress.setAttribute('style', `width: ${data.total_free / data.used_today}%`);
}
else {
smsProgress.setAttribute('style', `width: 100%`);
}
smsProgress.innerText = `Лимит: ${data.used_today} из ${data.total_free}`; smsProgress.innerText = `Лимит: ${data.used_today} из ${data.total_free}`;
}); });
// console.log(smsProgress);
} }