diff --git a/client/css/optiTrainer.css b/client/css/optiTrainer.css
index c23dbed..4650afe 100644
--- a/client/css/optiTrainer.css
+++ b/client/css/optiTrainer.css
@@ -192,6 +192,34 @@ body {
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 {
padding:0px;
}
diff --git a/client/js/masterFilter.js b/client/js/masterFilter.js
index 2cf82e6..1f9bfbe 100644
--- a/client/js/masterFilter.js
+++ b/client/js/masterFilter.js
@@ -31,10 +31,19 @@ let createMasterFilterFrame=()=>{
-
-
*
+
+
*
- `;
+
+
*
+
+
+
*
+
+
+
*
+
+ `;
let _filterContext={}; // TODO: This is bad, grown design - should be replaced with a proper object oriented structure and observer pattern.
Object.defineProperty(me,"selectedDate",{
@@ -64,6 +73,7 @@ let createMasterFilterFrame=()=>{
}
me.fetchSymbols=()=>{
+ $("#spinner-symbol").show();
$.get({
url:"/getSymbols"
}).done(response=>{
@@ -75,6 +85,7 @@ let createMasterFilterFrame=()=>{
}
aAllSymbols=aAllSymbols.sort();
me.refreshSymbolList(aAllSymbols);
+ $("#spinner-symbol").hide();
});
}
@@ -125,19 +136,20 @@ let createMasterFilterFrame=()=>{
}
me.requestOptionChain=()=>{
- $("#spinner").show();
+ $("#spinner-optionChain").show();
$.ajax({
url:"/getOptionChain?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol + "&Time="+ _filterContext.selectedTime
}).done(response=>{
dta=JSON.parse(response[0].Data);
//console.log("received",dta);
- $("#spinner").hide();
displayOptionChain();
$("#tbUnderlyingPrice").text(dta.underlyingPrice.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2}));
+ $("#spinner-optionChain").hide();
});
}
me.showTimesForDay=()=>{
+ $("#spinner-time").show();
return $.ajax({
url:"/getTimes?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol
}).done(response=>{
@@ -163,17 +175,20 @@ let createMasterFilterFrame=()=>{
}
$("#lbTime").change();
+ $("#spinner-time").hide();
});
}
me.getAvailDatesForSymbol=(theSymbol)=>{
+ $("#spinner-date").show();
return $.ajax({
url:"/getDates?Symbol=" + theSymbol
}).done(response=>{
let availableDates=response;
//console.log(availableDates);
_filterContext.availableDates=availableDates;
+ $("#spinner-date").hide();
});
}