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>

28
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)=>{
if (e.date !== undefined) {
console.log("DatePicker changed date",e.date); console.log("DatePicker changed date",e.date);
filterContext.theDate=e.date.toISOString().substr(0,10); filterContext.theDate=e.date.toISOString().substr(0,10);
showTimesForDay(filterContext.theDate); 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()){
filterContext.selectedTime=$("#lbTime").val();
console.log("Time changed", );
requestOptionChain(); 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;
}); });
} }

34
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,7 +155,6 @@ 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=()=>{
@@ -152,13 +165,9 @@ 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">
<h1>${dta.symbol}</h1>
<hr>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
${Object.keys(dta.callExpDateMap).map(datesOut).join('')} ${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
</ul </ul>
</div>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<table id='tblOptionChain' class="table table-sm table-hover"> <table id='tblOptionChain' class="table table-sm table-hover">
@@ -179,4 +188,9 @@ ${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
`; `;
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();
}
} }