RunasSudo/MedicineSearch
1
Fork 0
Code Issues 2 Pull Requests Releases Activity

Show loading spinner before database loaded

Browse Source
This commit is contained in:
RunasSudo 2023-01-26 20:03:07 +11:00
parent 013f7d02bd
commit 15989d5a2b
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
1 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
html/index.html
View File

@ -33,25 +33,35 @@
<a class="navbar-brand" href=" ">PBS medicine search</a>
</div>
</nav>
<div class="container pt-4">
<div>
<input class="form-control" id="search-input" placeholder="Search…" autocomplete="off">
<div class="container pt-4" id="loading-page">
<div class="text-center" id="loading-content">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="mt-2">
Loading…
</div>
</div>
<div>
<table id="search-results" class="table mt-2">
<thead>
<tr>
<th class="col-1">Item code</th>
<th class="col-8">Drug</th>
<th class="col-1">Quantity</th>
<th class="col-1">Repeats</th>
<th class="col-1">Restriction</th>
</tr>
</thead>
<tbody>
<td colspan="5" class="text-center">Enter a search term above to show results</th>
</tbody>
</table>
<div id="app-content" style="display:none">
<div>
<input class="form-control" id="search-input" placeholder="Search…" autocomplete="off">
</div>
<div>
<table id="search-results" class="table mt-2">
<thead>
<tr>
<th class="col-1">Item code</th>
<th class="col-8">Drug</th>
<th class="col-1">Quantity</th>
<th class="col-1">Repeats</th>
<th class="col-1">Restriction</th>
</tr>
</thead>
<tbody>
<td colspan="5" class="text-center">Enter a search term above to show results</th>
</tbody>
</table>
</div>
</div>
<footer class="border-top pt-4 mt-4">
<p class="text-muted">Results sourced from the PBS database as at January 2023. This tool is made available in the hope that it will be useful, but <b>WITHOUT ANY WARRANTY</b>; without even the implied warranty of <b>MERCHANTABILITY</b> or <b>FITNESS FOR A PARTICULAR PURPOSE</b>. Information provided in this tool is intended for reference by medical professionals. Nothing in this tool is intended to constitute medical advice.</p>
@ -88,6 +98,10 @@
threshold: 2,
onSelectItem: onClickSearchItem
});
// Hide loading spinner
document.getElementById('loading-content').style.display = 'none';
document.getElementById('app-content').style.display = 'block';
}
function onClickSearchItem(item) {