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> <a class="navbar-brand" href=" ">PBS medicine search</a>
</div> </div>
</nav> </nav>
<div class="container pt-4"> <div class="container pt-4" id="loading-page">
<div> <div class="text-center" id="loading-content">
<input class="form-control" id="search-input" placeholder="Search…" autocomplete="off"> <div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="mt-2">
Loading…
</div>
</div> </div>
<div> <div id="app-content" style="display:none">
<table id="search-results" class="table mt-2"> <div>
<thead> <input class="form-control" id="search-input" placeholder="Search…" autocomplete="off">
<tr> </div>
<th class="col-1">Item code</th> <div>
<th class="col-8">Drug</th> <table id="search-results" class="table mt-2">
<th class="col-1">Quantity</th> <thead>
<th class="col-1">Repeats</th> <tr>
<th class="col-1">Restriction</th> <th class="col-1">Item code</th>
</tr> <th class="col-8">Drug</th>
</thead> <th class="col-1">Quantity</th>
<tbody> <th class="col-1">Repeats</th>
<td colspan="5" class="text-center">Enter a search term above to show results</th> <th class="col-1">Restriction</th>
</tbody> </tr>
</table> </thead>
<tbody>
<td colspan="5" class="text-center">Enter a search term above to show results</th>
</tbody>
</table>
</div>
</div> </div>
<footer class="border-top pt-4 mt-4"> <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> <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, threshold: 2,
onSelectItem: onClickSearchItem onSelectItem: onClickSearchItem
}); });
// Hide loading spinner
document.getElementById('loading-content').style.display = 'none';
document.getElementById('app-content').style.display = 'block';
} }
function onClickSearchItem(item) { function onClickSearchItem(item) {