some cosmetics and usability in progress...

js/masterFilter.js

@@ -17,6 +17,7 @@ let createMasterFilterFrame=()=>{
             <option>[WAITING]</option>
         </select>
 
+        <h1 id='tbSymbol'></h1>
 		<!--button onclick='rq()'>LOAD</button-->
     `;
     
@@ -27,7 +28,7 @@ let createMasterFilterFrame=()=>{
 
 let beforeShowDay=(theDate)=>{
     let isoDate=theDate.toISOString().substr(0,10);
-    console.log("BeforeShow",isoDate,theDate);
+    //console.log("BeforeShow",isoDate,theDate);
 
     let isDateFound=false;
     for (let i=0;i<filterContext.availableDates.length;i++){
@@ -57,21 +58,28 @@ let getCurrentSymbol=()=>{
 }
 let symbolChanged=_=>{
     console.log("symbolChanged",getCurrentSymbol());
+    document.title=getCurrentSymbol();
+    $("#tbSymbol").text(getCurrentSymbol());
     getAvailDatesForSymbol(getCurrentSymbol).done(_=>{
         $("#datePicker").datepicker('destroy');
         $("#datePicker").datepicker({beforeShowDay:beforeShowDay})
         .on('changeDate', (e)=>{
-            console.log("DatePicker changed date",e.date);
-            filterContext.theDate=e.date.toISOString().substr(0,10);
-            showTimesForDay(filterContext.theDate);
+            if (e.date !== undefined) {
+                console.log("DatePicker changed date",e.date);
+                filterContext.theDate=e.date.toISOString().substr(0,10);
+                showTimesForDay(filterContext.theDate);
+            }
         });
+        $("#datePicker").datepicker('setDate',new Date(filterContext.theDate));
     });
 }
 
 let timeChanged=()=>{
-    console.log("Time changed", filterContext.selectedTime=$("#lbTime").val());
-    requestOptionChain();
-    
+    if (filterContext.selectedTime!==$("#lbTime").val()){
+        filterContext.selectedTime=$("#lbTime").val();
+        console.log("Time changed", );
+        requestOptionChain();
+    }
 }
 
 let requestOptionChain=()=>{
@@ -79,7 +87,7 @@ let requestOptionChain=()=>{
 		url:"http://localhost:3000/getOptionChain?Date=" + filterContext.theDate + "&Symbol=" + filterContext.theSymbol + "&Time="+filterContext.selectedTime
 	}).done(response=>{
 		dta=JSON.parse(response[0].Data);
-		console.log("received",dta);
+		//console.log("received",dta);
 		displayOptionChain();
 	});
 }
@@ -89,15 +97,19 @@ let showTimesForDay=()=>{
 		url:"http://localhost:3000/getTimes?Date=" + filterContext.theDate + "&Symbol=" + filterContext.theSymbol
 	}).done(response=>{
 		let availableTimes=response;
-		console.log(availableTimes);
+		//console.log(availableTimes);
         let lbTime=$("#lbTime");
         lbTime.empty();
         allTimes = availableTimes;
         for (let i=0;i<allTimes.length;i++){
             theTime=allTimes[i].Time;
-            lbTime.append($(`<option>${theTime}</option>`))
+            let selectedFlag="";
+            if (i==4) {
+                selectedFlag="selected";
+            }
+            lbTime.append($(`<option ${selectedFlag}>${theTime}</option>`))
         }
-    
+        $("#lbTime").change();
     });
     
 }
@@ -107,7 +119,7 @@ let getAvailDatesForSymbol=(theSymbol)=>{
 		url:"http://localhost:3000/getDates"
 	}).done(response=>{
 		let availableDates=response;
-		console.log(availableDates);
+		//console.log(availableDates);
 		filterContext.availableDates=availableDates;
 	});
 }