From efd0097cb5179eab80a620d1f1da0c83c0b7122e Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Tue, 13 Sep 2022 22:40:21 +0300
Subject: [PATCH] update SMS.ru UI

---
 public/index.html | 27 ++++++++++++++++-----------
 public/js/app.js  | 11 ++++++++---
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/public/index.html b/public/index.html
index e88d7b0..0c68e23 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,22 +15,27 @@
 		</div>
 
 		<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:
 				<label id="data-today"></label>
 			</div>
 
-			<div class="row">
-				<div class="col">SMS.ru</div>
-				<div class="col-6">
-					<div class="progress">
-						<div id="data-smsru-progress" class="progress-bar progress-bar-striped bg-danger" role="progressbar"
-						aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
-						style="width: 100%"></div>
-					</div>
+			<div class="card border-danger bg-dark text-bg-dark">
+				<div class="d-flex align-items-center justify-content-between card-header border-danger">
+					<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="col text-end">
-					<button id="button-smsru-update" class="btn btn-sm btn-outline-primary">Update</button>
+				<div class="card-body">
+					<h5 class="card-title">Количество SMS</h5>
+					<p class="card-text">
+						<div class="progress">
+							<div id="data-smsru-progress" class="progress-bar progress-bar-striped bg-danger" role="progressbar"
+							aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
+							style="width: 100%"></div>
+						</div>
+					</p>
 				</div>
 			</div>
 		</section>
diff --git a/public/js/app.js b/public/js/app.js
index 6d4c9e4..312b09e 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -20,11 +20,16 @@ function smsruUpdateMessages() {
   fetch('/api/v1.0/smsru_status')
   .then(response => response.json())
   .then(data => {
+    if (data.used_today === null) data.used_today = 0;
+
     smsProgress.setAttribute('aria-valuenow', data.used_today);
     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}`;
   });
-
-  // console.log(smsProgress);
 }