nova/Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

added spinners to admin home

Browse Source
This commit is contained in:
Rohan Sircar 2020-07-26 13:29:49 +05:30
parent e443ea3fd4
commit b9ad037f60
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/main/frontend/admin/pages/Home.ts
View File

@ -5,9 +5,14 @@ import log from "loglevel";
export async function stats(): Promise<void> { export async function stats(): Promise<void> {
const stats = await getStats(Credentials.authToken); const stats = await getStats(Credentials.authToken);
$("#totalMessages").text(stats.totalMessages); setTimeout(() => {
$("#totalUsers").text(stats.totalUsers); $(".admin-stats-spinner").hide();
$("#totalOnlineUsers").text(stats.totalOnlineUsers);
$("#numMessagesToday").text(stats.numMessagesToday); $("#totalMessages").text(stats.totalMessages).removeAttr("hidden");
$("#totalUsers").text(stats.totalUsers).removeAttr("hidden");
$("#totalOnlineUsers").text(stats.totalOnlineUsers).removeAttr("hidden");
$("#numMessagesToday").text(stats.numMessagesToday).removeAttr("hidden");
}, 1000);
log.debug(stats); log.debug(stats);
} }

28
src/main/resources/templates/admin/home.html
View File

@ -8,7 +8,7 @@
<script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script>
<script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" <script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js"
data-template-prefix="../" defer="defer" th:if="false"></script> data-template-prefix="../" defer="defer" th:if="false"></script>
<th:block th:include="fragments/admin :: headFragment"></th:block> <th:block th:include="fragments/admin :: headFragment"></th:block>
</head> </head>
<!-- TODO <!-- TODO
@ -58,7 +58,10 @@
<div <div
class="text-xs font-weight-bold text-primary-dark text-uppercase mb-1"> class="text-xs font-weight-bold text-primary-dark text-uppercase mb-1">
Total Users</div> Total Users</div>
<div class="h5 mb-0 font-weight-bold " id="totalUsers">0</div> <div class="h5 mb-0 font-weight-bold " id="totalUsers" hidden>0</div>
<div
class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
</div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<i class="fas fa-users fa-2x text-gray-300"></i> <i class="fas fa-users fa-2x text-gray-300"></i>
@ -77,7 +80,11 @@
<div class="col mr-2"> <div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1"> <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
Total Messages</div> Total Messages</div>
<div class="h5 mb-0 font-weight-bold text-light" id="totalMessages">0</div> <div class="h5 mb-0 font-weight-bold text-light" id="totalMessages" hidden>0
</div>
<div
class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
</div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<i class="fas fa-comments fa-2x text-gray-300"></i> <i class="fas fa-comments fa-2x text-gray-300"></i>
@ -93,11 +100,16 @@
<div class="card-body"> <div class="card-body">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col mr-2"> <div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Users Online <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Users
Online
</div> </div>
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col-auto"> <div class="col-auto">
<div class="h5 mb-0 mr-3 font-weight-bold text-white" id="totalOnlineUsers">0</div> <div class="h5 mb-0 mr-3 font-weight-bold text-white"
id="totalOnlineUsers" hidden>0</div>
<div
class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
</div>
</div> </div>
<!-- <div class="col"> <!-- <div class="col">
<div class="progress progress-sm mr-2"> <div class="progress progress-sm mr-2">
@ -125,7 +137,11 @@
<div class="col mr-2"> <div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1"> <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
Messages Today</div> Messages Today</div>
<div class="h5 mb-0 font-weight-bold text-white">0</div> <div class="h5 mb-0 font-weight-bold text-white" id="numMessagesToday"
hidden>0</div>
<div
class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
</div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<i class="fas fa-comment fa-2x text-gray-300"></i> <i class="fas fa-comment fa-2x text-gray-300"></i>