add spinners

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;
 }

client/js/masterFilter.js

@@ -31,8 +31,17 @@ let createMasterFilterFrame=()=>{
 		
 		<h2 id='tbSelectedTime'></h2>
 		
-		<div id='spinner' style='z-index:100; position:absolute;display:none'>
-  			<h1 style='color:red'>*</h1>
+		<div id='spinner-optionChain' class='spinner'>
+  			<h1>*</h1>
+		</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>
 	`;
 
@@ -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();
 		});
 	}