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

some cosmetics and usability in progress...

Browse Source
This commit is contained in:
Joe Tretter
2020-03-10 21:46:30 -05:00
parent 34ff5ec68f
commit 7300f999f4
4 changed files with 85 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/optiTrainer.css
View File

@@ -24,6 +24,13 @@ body {
width: 100px; width: 100px;
} }
#tbSymbol {
position: absolute;
top: 0;
left: 550;
width: 100px;
}
#frmMasterFilter { #frmMasterFilter {
position:absolute; position:absolute;
left:0; left:0;

2
index.html
View File

@@ -15,7 +15,7 @@
<script src='js/optiTrainer.js'></script> <script src='js/optiTrainer.js'></script>
<script src='js/masterFilter.js'></script> <script src='js/masterFilter.js'></script>
<title>SPY</title> <title>OptionTrainer</title>
</head> </head>
<body> <body>
<div id='app'></div> <div id='app'></div>

36
js/masterFilter.js
View File

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

90
js/optiTrainer.js
View File

@@ -1,5 +1,6 @@
var costAmount=0; var costAmount=0;
var allCombinations; var allCombinations;
var optionChainContext={};
$(document).ready(_=>{ $(document).ready(_=>{
dta=fakeDta; dta=fakeDta;
@@ -55,8 +56,14 @@ let dta={};
let datesOut=(dateInp)=>{ let datesOut=(dateInp)=>{
let date=dateInp.split(':')[0]; let date=dateInp.split(':')[0];
let days=dateInp.split(':')[1]; let dte=dateInp.split(':')[1];
return `<li><a href="#" onclick="fillChainTable('${dateInp}')">${date}<br><center>(DTE: ${days})</center></a></li>` let attrActive="";
if (optionChainContext.selectedDte === dte) {
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>`
} }
let getCallArtifact=(callData,allColumns)=>{ let getCallArtifact=(callData,allColumns)=>{
@@ -127,11 +134,18 @@ let clearChainTable=()=>{
} }
} }
let fillChainTable=(expirationDate)=>{ let fillChainTable=(expirationDate,dteOnly)=>{
// Maintain Active Tab
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
clearChainTable(); clearChainTable();
optionChainContext.selectedDte=dteOnly;
let allCalls=dta.callExpDateMap[expirationDate]; let allCalls=dta.callExpDateMap[expirationDate];
let allPuts=dta.putExpDateMap[expirationDate]; let allPuts=dta.putExpDateMap[expirationDate];
console.log(expirationDate,allCalls,allPuts); //console.log(expirationDate,allCalls,allPuts);
let allStrikes=Object.keys(allCalls); let allStrikes=Object.keys(allCalls);
for (let i=0;i<allStrikes.length;i++){ for (let i=0;i<allStrikes.length;i++){
@@ -141,42 +155,42 @@ let fillChainTable=(expirationDate)=>{
let rowData={strike:theStrike,call:singleStrikeCall,put:singleStrikePut} let rowData={strike:theStrike,call:singleStrikeCall,put:singleStrikePut}
fillChainRow(rowData); fillChainRow(rowData);
} }
} }
let displayOptionChain=()=>{ let displayOptionChain=()=>{
let app=window.document.getElementById('app'); let app=window.document.getElementById('app');
$("#wrapperOptionChain").remove(); $("#wrapperOptionChain").remove();
let newNode=document.createElement("div"); let newNode=document.createElement("div");
newNode.setAttribute("id","wrapperOptionChain"); newNode.setAttribute("id","wrapperOptionChain");
newNode.innerHTML=` newNode.innerHTML=`
<div class="container-fluid " id="frmOptionChainMain"> <div class="container-fluid " id="frmOptionChainMain">
<div class="col-md-12"> <div class="col-md-12">
<div class="tabbable"> <ul class="nav nav-tabs">
<h1>${dta.symbol}</h1> ${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
<hr> </ul>
<ul class="nav nav-tabs"> </div>
${Object.keys(dta.callExpDateMap).map(datesOut).join('')} <div class="col-md-12">
</ul <table id='tblOptionChain' class="table table-sm table-hover">
</div> <thead>
</div> <tr>
<div class="col-md-12"> <th colspan="4" class='center'>CALLS</th><th></th><th colspan="4" class='center'>PUTS</th>
<table id='tblOptionChain' class="table table-sm table-hover"> </tr>
<thead> <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 colspan="4" class='center'>CALLS</th><th></th><th colspan="4" class='center'>PUTS</th> </tr>
</tr> </thead>
<tr> <tbody>
<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> <tr><!-- Dummy row --></tr>
</tr> </tbody>
</thead> </table>
<tbody> </div>
<tr><!-- Dummy row --></tr> </div>
</tbody> `;
</table>
</div>
</div>
`;
app.appendChild(newNode) app.appendChild(newNode)
// "click" the date if it's the context dte
if ($(".nav").find(".active").children().length > 0){
$(".nav").find(".active").children()[0].click();
}
} }