add spinners

This commit is contained in:
Joe Tretter
2020-05-08 14:10:08 -05:00
parent d1521c9e9f
commit 874f77a6ef
2 changed files with 48 additions and 5 deletions

View File

@@ -192,6 +192,34 @@ body {
cursor: copy; cursor: copy;
} }
.spinner {
z-index:100;
position:absolute;
display:none
}
#spinner-optionChain {
color:red;
top: 65px;
left: 305px;
}
#spinner-symbol {
color:red;
left: 305;
top: 0;
margin-top: -20px;
}
#spinner-time {
color:red;
left: 305px;
top: 20px;
}
#spinner-date {
color:red;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding:0px; padding:0px;
} }

View File

@@ -31,10 +31,19 @@ let createMasterFilterFrame=()=>{
<h2 id='tbSelectedTime'></h2> <h2 id='tbSelectedTime'></h2>
<div id='spinner' style='z-index:100; position:absolute;display:none'> <div id='spinner-optionChain' class='spinner'>
<h1 style='color:red'>*</h1> <h1>*</h1>
</div> </div>
`; <div id='spinner-symbol' class='spinner'>
<h1>*</h1>
</div>
<div id='spinner-time' class='spinner'>
<h1>*</h1>
</div>
<div id='spinner-date' class='spinner'>
<h1>*</h1>
</div>
`;
let _filterContext={}; // TODO: This is bad, grown design - should be replaced with a proper object oriented structure and observer pattern. let _filterContext={}; // TODO: This is bad, grown design - should be replaced with a proper object oriented structure and observer pattern.
Object.defineProperty(me,"selectedDate",{ Object.defineProperty(me,"selectedDate",{
@@ -64,6 +73,7 @@ let createMasterFilterFrame=()=>{
} }
me.fetchSymbols=()=>{ me.fetchSymbols=()=>{
$("#spinner-symbol").show();
$.get({ $.get({
url:"/getSymbols" url:"/getSymbols"
}).done(response=>{ }).done(response=>{
@@ -75,6 +85,7 @@ let createMasterFilterFrame=()=>{
} }
aAllSymbols=aAllSymbols.sort(); aAllSymbols=aAllSymbols.sort();
me.refreshSymbolList(aAllSymbols); me.refreshSymbolList(aAllSymbols);
$("#spinner-symbol").hide();
}); });
} }
@@ -125,19 +136,20 @@ let createMasterFilterFrame=()=>{
} }
me.requestOptionChain=()=>{ me.requestOptionChain=()=>{
$("#spinner").show(); $("#spinner-optionChain").show();
$.ajax({ $.ajax({
url:"/getOptionChain?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol + "&Time="+ _filterContext.selectedTime url:"/getOptionChain?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol + "&Time="+ _filterContext.selectedTime
}).done(response=>{ }).done(response=>{
dta=JSON.parse(response[0].Data); dta=JSON.parse(response[0].Data);
//console.log("received",dta); //console.log("received",dta);
$("#spinner").hide();
displayOptionChain(); displayOptionChain();
$("#tbUnderlyingPrice").text(dta.underlyingPrice.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2})); $("#tbUnderlyingPrice").text(dta.underlyingPrice.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2}));
$("#spinner-optionChain").hide();
}); });
} }
me.showTimesForDay=()=>{ me.showTimesForDay=()=>{
$("#spinner-time").show();
return $.ajax({ return $.ajax({
url:"/getTimes?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol url:"/getTimes?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol
}).done(response=>{ }).done(response=>{
@@ -163,17 +175,20 @@ let createMasterFilterFrame=()=>{
} }
$("#lbTime").change(); $("#lbTime").change();
$("#spinner-time").hide();
}); });
} }
me.getAvailDatesForSymbol=(theSymbol)=>{ me.getAvailDatesForSymbol=(theSymbol)=>{
$("#spinner-date").show();
return $.ajax({ return $.ajax({
url:"/getDates?Symbol=" + theSymbol url:"/getDates?Symbol=" + theSymbol
}).done(response=>{ }).done(response=>{
let availableDates=response; let availableDates=response;
//console.log(availableDates); //console.log(availableDates);
_filterContext.availableDates=availableDates; _filterContext.availableDates=availableDates;
$("#spinner-date").hide();
}); });
} }