From 874f77a6efcc5b92b4456570d1f4d4382b45b937 Mon Sep 17 00:00:00 2001
From: Joe Tretter <j.tretter@gmail.com>
Date: Fri, 8 May 2020 14:10:08 -0500
Subject: [PATCH] add spinners

---
 client/css/optiTrainer.css | 28 ++++++++++++++++++++++++++++
 client/js/masterFilter.js  | 25 ++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 5 deletions(-)

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=()=>{
 		
 		<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>
+	`;
 
 	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();
 		});
 	}