Misc little changes, fix up the date and time handling, auto select latest date if no date selected. add Vega

client/css/optiTrainer.css

@@ -25,7 +25,12 @@ body {
 }
 
 #lbSymbol {
-	width: 150px;
+	width: 430px;
+}
+#lbSymbol>.dropdown-item {
+    width: 80px;
+    padding: 10px;
+    margin: 2px;
 }
 
 #grpTime {
@@ -33,7 +38,14 @@ body {
 	left:300px;
 	top:40px;
 }
+
 #lbTime {
+	width:260px;
+}
+#lbTime>.dropdown-item {
+    width: 80px;
+    padding: 10px;
+    margin: 2px;
 }
 
 #tbSymbol {
@@ -42,6 +54,7 @@ body {
 	left: 550px;
 	width: 100px;
 	margin-top:0px;
+	color: red;
 }
 
 #tbUnderlyingPrice {
@@ -76,6 +89,7 @@ body {
 	top:250;
 	width:295px;
 	padding-left: 0;
+	z-index:1;
 }
 
 #datePicker {
@@ -86,6 +100,7 @@ body {
 	width:295px;
 	height:245px;
 	padding-left: 25;
+	z-index:1;
 }
 
 #frmOptionChainMain {

client/js/masterFilter.js

@@ -10,7 +10,7 @@ let createMasterFilterFrame=()=>{
         <div id='datePicker'></div>
 
 		<div class="dropdown" id="grpSymbol">
-		  <button class="btn btn-secondary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnSymbol" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		  <button class="btn btn-primary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnSymbol" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			Symbol
 		  </button>
 		  <div class="dropdown-menu" aria-labelledby="ddMnuBtnSymbol" id='lbSymbol'>
@@ -19,7 +19,7 @@ let createMasterFilterFrame=()=>{
 		</div>
 
 		<div class="dropdown" id="grpTime">
-		  <button class="btn btn-secondary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		  <button class="btn btn-primary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			Time
 		  </button>
 		  <div class="dropdown-menu" aria-labelledby="ddMnuBtnTime" id='lbTime'>
@@ -76,6 +76,7 @@ let symbolChanged=(newSymbol)=>{
 	filterContext.theSymbol=newSymbol
     document.title=getCurrentSymbol();
     $("#tbSymbol").text(getCurrentSymbol());
+	
     getAvailDatesForSymbol(getCurrentSymbol()).done(_=>{
         $("#datePicker").datepicker('destroy');
         $("#datePicker").datepicker({beforeShowDay:beforeShowDay})
@@ -86,7 +87,15 @@ let symbolChanged=(newSymbol)=>{
                 showTimesForDay(filterContext.theDate);
             }
         });
-        $("#datePicker").datepicker('setDate',new Date(filterContext.theDate));
+		if (filterContext.theDate === undefined) {
+			console.log("no date in contest, setting date to the last in chain.");
+			filterContext.theDate=filterContext.availableDates[filterContext.availableDates.length-1].Date;
+		}
+		
+		currentTZDate = new Date(Date.parse("2020-04-23") + new Date().getTimezoneOffset()*60000);
+		console.log("setting datepicker date to ", filterContext.theDate, currentTZDate);
+		
+        $("#datePicker").datepicker('setDate',currentTZDate);
     });
 }
 
@@ -95,8 +104,9 @@ let timeChanged=(newTime)=>{
         filterContext.selectedTime=newTime;
 		$("#tbSelectedTime").text(newTime);
         console.log("Time changed", newTime);
-        requestOptionChain();
     }
+	
+	requestOptionChain();
 }
 
 let requestOptionChain=()=>{
@@ -121,13 +131,18 @@ let showTimesForDay=()=>{
         allTimes = availableTimes;
         for (let i=0;i<allTimes.length;i++){
             theTime=allTimes[i].Time;
-            let selectedFlag="";
+			if (filterContext.selectedTime !== undefined) {
+				if (filterContext.selectedTime.substring(0,4) === theTime.substring(0,4)){
+					timeChanged(theTime);
+				}
+			} else {
 				if (i==4) {
 					// select the 4th time in the day... that's usually around 9:30
 					timeChanged(theTime);
 				}
+			}
             //lbTime.append($(`<option ${selectedFlag}>${theTime}</option>`))
-			lbTime.append($(`<button onclick="timeChanged('${theTime}');" class="dropdown-item" type="button">${theTime}</button>`))
+			lbTime.append($(`<button onclick="timeChanged('${theTime}');" class="dropdown-item" type="button">${theTime.substring(0,5)}</button>`))
 
         }
         $("#lbTime").change();

client/js/optiTrainer.js

@@ -63,12 +63,12 @@ let datesOut=(dateInp)=>{
 	let date=dateInp.split(':')[0];
 	let dte=dateInp.split(':')[1];
 	let attrActive="";
-	if (optionChainContext.selectedDte === dte) {
+	if (optionChainContext.selectedDate === date) {
 		attrActive="active";
 		//fillChainTable(dateInp,date);
 	}
 
-	return `<li class="nav-item ${attrActive}"><a href="#" id="TAB_${date}" role="tab" class="nav-link" onclick="fillChainTable('${dateInp}','${dte}')">${date}<br><center>(DTE: ${dte})</center></a></li>`
+	return `<li class="nav-item ${attrActive}"><a href="#" id="TAB_${date}" role="tab" class="nav-link" onclick="fillChainTable('${dateInp}','${date}')">${date}<br><center>(DTE: ${dte})</center></a></li>`
 }
 
 let getCallArtifact=(callData,allColumns)=>{
@@ -131,7 +131,7 @@ let getStrikeArtifact=(strike)=>{
 let fillChainRow=(rowData)=>{
 	let theTable=document.getElementById("tblOptionChain");
 	let theNewRow=theTable.insertRow(-1);
-	let allColumns=["delta","theta"];
+	let allColumns=["delta","theta","vega"];
 	
 	theNewRow.innerHTML=getCallArtifact(rowData.call,allColumns) + getStrikeArtifact(rowData.strike) + getPutArtifact(rowData.put,allColumns);
 }
@@ -143,7 +143,7 @@ let clearChainTable=()=>{
 	}
 }
 
-let fillChainTable=(expirationDate,dteOnly)=>{
+let fillChainTable=(expirationDate,dateOnly)=>{
 	// Maintain Active Tab
 	$(".nav a").on("click", function(){
 		$(".nav").find(".active").removeClass("active");
@@ -151,7 +151,7 @@ let fillChainTable=(expirationDate,dteOnly)=>{
 	 });
 
 	clearChainTable();
-	optionChainContext.selectedDte=dteOnly;
+	optionChainContext.selectedDate=dateOnly;
 	let allCalls=dta.callExpDateMap[expirationDate];
 	let allPuts=dta.putExpDateMap[expirationDate];
 	//console.log(expirationDate,allCalls,allPuts);
@@ -185,7 +185,7 @@ let displayOptionChain=()=>{
 							<th colspan="4" class='center'>CALLS</th><th></th><th colspan="4" class='center'>PUTS</th>
 						</tr>
 						<tr>
-							<th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th><th class='center'>Strike</th><th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th>
+							<th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Vega</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th><th class='center'>Strike</th><th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Vega</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th>
 						</tr>
 					</thead>
 					<tbody>