diff --git a/css/optiTrainer.css b/css/optiTrainer.css index 0ed4a60..94a5942 100644 --- a/css/optiTrainer.css +++ b/css/optiTrainer.css @@ -24,6 +24,13 @@ body { width: 100px; } +#tbSymbol { + position: absolute; + top: 0; + left: 550; + width: 100px; +} + #frmMasterFilter { position:absolute; left:0; diff --git a/index.html b/index.html index 67d449a..8adefef 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ -SPY +OptionTrainer
diff --git a/js/masterFilter.js b/js/masterFilter.js index 2111c88..2bcf47d 100644 --- a/js/masterFilter.js +++ b/js/masterFilter.js @@ -17,6 +17,7 @@ let createMasterFilterFrame=()=>{ +

`; @@ -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{ } 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)=>{ - console.log("DatePicker changed date",e.date); - filterContext.theDate=e.date.toISOString().substr(0,10); - showTimesForDay(filterContext.theDate); + 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()); - requestOptionChain(); - + 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${theTime}`)) + let selectedFlag=""; + if (i==4) { + selectedFlag="selected"; + } + lbTime.append($(``)) } - + $("#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; }); } diff --git a/js/optiTrainer.js b/js/optiTrainer.js index 6c31ec1..120b471 100644 --- a/js/optiTrainer.js +++ b/js/optiTrainer.js @@ -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 `
  • ${date}
    (DTE: ${days})
    • ` + let dte=dateInp.split(':')[1]; + let attrActive=""; + if (optionChainContext.selectedDte === dte) { + attrActive="active"; + //fillChainTable(dateInp,date); + } + + return `
  • ${date}
    (DTE: ${dte})
    • ` } 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{ let singleStrikePut=allPuts[theStrike][0]; 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=` -
    -
    -
    -

    ${dta.symbol}

    -
    -
      -${Object.keys(dta.callExpDateMap).map(datesOut).join('')} -
    -
    -
    - - - - - - - - - - - - -
    CALLSPUTS
    DeltaThetaBidAskStrikeDeltaThetaBidAsk
    -
    -
    -`; + let app=window.document.getElementById('app'); + $("#wrapperOptionChain").remove(); + let newNode=document.createElement("div"); + newNode.setAttribute("id","wrapperOptionChain"); + newNode.innerHTML=` +
    +
    +
      + ${Object.keys(dta.callExpDateMap).map(datesOut).join('')} +
    +
    +
    + + + + + + + + + + + + +
    CALLSPUTS
    DeltaThetaBidAskStrikeDeltaThetaBidAsk
    +
    +
    + `; -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(); + } }