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;
}
#tbSymbol {
position: absolute;
top: 0;
left: 550;
width: 100px;
}
#frmMasterFilter {
position:absolute;
left:0;

2
index.html
View File

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

28
js/masterFilter.js
View File

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

76
js/optiTrainer.js
View File

@@ -1,5 +1,6 @@
var costAmount=0;
var allCombinations;
var optionChainContext={};
$(document).ready(_=>{
dta=fakeDta;
@@ -55,8 +56,14 @@ let dta={};
let datesOut=(dateInp)=>{
let date=dateInp.split(':')[0];
let days=dateInp.split(':')[1];
return `<li><a href="#" onclick="fillChainTable('${dateInp}')">${date}<br><center>(DTE: ${days})</center></a></li>`
let dte=dateInp.split(':')[1];
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)=>{
@@ -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();
optionChainContext.selectedDte=dteOnly;
let allCalls=dta.callExpDateMap[expirationDate];
let allPuts=dta.putExpDateMap[expirationDate];
console.log(expirationDate,allCalls,allPuts);
//console.log(expirationDate,allCalls,allPuts);
let allStrikes=Object.keys(allCalls);
for (let i=0;i<allStrikes.length;i++){
@@ -141,42 +155,42 @@ let fillChainTable=(expirationDate)=>{
let rowData={strike:theStrike,call:singleStrikeCall,put:singleStrikePut}
fillChainRow(rowData);
}
}
let displayOptionChain=()=>{
let app=window.document.getElementById('app');
$("#wrapperOptionChain").remove();
let newNode=document.createElement("div");
newNode.setAttribute("id","wrapperOptionChain");
newNode.innerHTML=`
<div class="container-fluid " id="frmOptionChainMain">
<div class="col-md-12">
<div class="tabbable">
<h1>${dta.symbol}</h1>
<hr>
<ul class="nav nav-tabs">
${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
</ul
</div>
</div>
<div class="col-md-12">
<table id='tblOptionChain' class="table table-sm table-hover">
<thead>
let app=window.document.getElementById('app');
$("#wrapperOptionChain").remove();
let newNode=document.createElement("div");
newNode.setAttribute("id","wrapperOptionChain");
newNode.innerHTML=`
<div class="container-fluid " id="frmOptionChainMain">
<div class="col-md-12">
<ul class="nav nav-tabs">
${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
</ul>
</div>
<div class="col-md-12">
<table id='tblOptionChain' class="table table-sm table-hover">
<thead>
<tr>
<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>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr><!-- Dummy row --></tr>
</tbody>
</table>
</div>
</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();
}
}