joe/OptiTrainer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joe Tretter
2020-04-25 20:56:09 -05:00
parent b5f71423b3
commit 17d89d34e3
3 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/css/optiTrainer.css
View File

@@ -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 {

27
client/js/masterFilter.js
View File

@@ -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();

12
client/js/optiTrainer.js
View File

@@ -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>