filter date by symbol, re-organize files a bit

client/js/masterFilter.js

@@ -0,0 +1,135 @@
+var filterContext={};
+
+let createMasterFilterFrame=()=>{
+	let theFrameDiv=document.createElement("div");
+	theFrameDiv.setAttribute("id","frmMasterFilter");
+	theFrameDiv.className="container-fluid " 
+	window.document.getElementById('app').append(theFrameDiv);
+	
+    theFrameDiv.innerHTML=`
+        <div id='datePicker'></div>
+
+		<select size='5' onchange='symbolChanged()' id='lbSymbol'>
+			<option>[LOADING]</option>
+        </select>	
+        
+        <select size='5' onchange='timeChanged()' id='lbTime'>
+            <option>[WAITING]</option>
+        </select>
+
+        <h1 id='tbSymbol'></h1>
+		<!--button onclick='rq()'>LOAD</button-->
+    `;
+    
+    fetchSymbols();
+
+	return true;
+}
+
+let beforeShowDay=(theDate)=>{
+    let isoDate=theDate.toISOString().substr(0,10);
+    //console.log("BeforeShow",isoDate,theDate);
+
+    let isDateFound=false;
+    for (let i=0;i<filterContext.availableDates.length;i++){
+        if (filterContext.availableDates[i].Date===theDate.toISOString().substr(0,10)){
+            isDateFound=true;
+            break;
+        };
+    }
+
+    if (!isDateFound) {
+        return {enabled:false, tooltip:"No data"};
+    }
+}
+
+let fetchSymbols=()=>{
+	$.get({
+		url:"/getSymbols"
+	}).done(response=>{
+		let allSymbols=response;
+		console.log(allSymbols);
+		refreshSymbolList(allSymbols);
+	});
+}
+
+let getCurrentSymbol=()=>{
+    return(filterContext.theSymbol=$("#lbSymbol").val());
+}
+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=()=>{
+    if (filterContext.selectedTime!==$("#lbTime").val()){
+        filterContext.selectedTime=$("#lbTime").val();
+        console.log("Time changed", );
+        requestOptionChain();
+    }
+}
+
+let requestOptionChain=()=>{
+	$.ajax({
+		url:"/getOptionChain?Date=" + filterContext.theDate + "&Symbol=" + filterContext.theSymbol + "&Time="+filterContext.selectedTime
+	}).done(response=>{
+		dta=JSON.parse(response[0].Data);
+		//console.log("received",dta);
+		displayOptionChain();
+	});
+}
+
+let showTimesForDay=()=>{
+    return $.ajax({
+		url:"/getTimes?Date=" + filterContext.theDate + "&Symbol=" + filterContext.theSymbol
+	}).done(response=>{
+		let availableTimes=response;
+		//console.log(availableTimes);
+        let lbTime=$("#lbTime");
+        lbTime.empty();
+        allTimes = availableTimes;
+        for (let i=0;i<allTimes.length;i++){
+            theTime=allTimes[i].Time;
+            let selectedFlag="";
+            if (i==4) {
+                selectedFlag="selected";
+            }
+            lbTime.append($(`<option ${selectedFlag}>${theTime}</option>`))
+        }
+        $("#lbTime").change();
+    });
+    
+}
+
+let getAvailDatesForSymbol=(theSymbol)=>{
+    return $.ajax({
+		url:"/getDates?Symbol=" + theSymbol
+	}).done(response=>{
+		let availableDates=response;
+		//console.log(availableDates);
+		filterContext.availableDates=availableDates;
+	});
+}
+
+let refreshSymbolList=(allSymbols)=>{
+    let lbSymbol=$("#lbSymbol");
+    lbSymbol.empty();
+    for (let i=0;i<allSymbols.length;i++){
+        theSymbol=allSymbols[i].Symbol;
+        console.log(theSymbol);
+        lbSymbol.append($(`<option>${theSymbol}</option>`))
+    }
+}

client/js/optiTrainer.js

@@ -0,0 +1,203 @@
+var costAmount=0;
+var allCombinations;
+var optionChainContext={};
+
+$(document).ready(_=>{
+	dta={};
+	createOrderFrame();
+	createMasterFilterFrame();
+	let selectDataFirst=_=>{
+		return {enabled:false, tooltip:"Select a Ticker!"};
+	}
+	$("#datePicker").datepicker({beforeShowDay:selectDataFirst});
+});
+
+let createOrderFrame=()=>{
+	let theFrameDiv=document.createElement("div");
+	theFrameDiv.setAttribute("id","frmOrder");
+	theFrameDiv.className="container-fluid "; 
+	window.document.getElementById('app').append(theFrameDiv);
+	
+	theFrameDiv.innerHTML=`
+		<button onclick="clearOrder()" type="button" class="btn btn-danger">Clear All</button>
+		<br>
+		<span id='lbCost' class="bold">Gain $</span><span id='lbCostAmount'>0</span>
+		<ul id='listOrderItems'>
+		</ul>
+	`;
+}
+
+let clearOrder=()=>{
+	costAmount=0;
+	$("#listOrderItems").empty();
+	showCostAmount();
+}
+
+let addToOrder=(openType,optionData)=>{
+	optionData=JSON.parse(optionData.replace(/'/g,'"'));
+	console.log("AddToOrder",openType,optionData);
+	
+	let price=(openType.substr(0,1)==="b")?optionData.ask:optionData.bid;
+	price=price*100;
+
+	let priceEffect=price * ((openType.substr(0,1)==="b")?-1:1);
+	costAmount+=priceEffect;
+	showCostAmount();
+	$("#listOrderItems").append(`<li><a class='danger' onclick='removeFromOrder(this,${priceEffect});'>[X]</a> ${openType} | ${optionData.symbol} | ${price.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2})}</li>`);
+}
+
+let removeFromOrder=(ele,priceEffect)=>{
+	costAmount-=priceEffect;
+	let li=ele.parentElement;
+	li.parentElement.removeChild(li);
+	showCostAmount();
+}
+
+let showCostAmount=_=>{
+	$("#lbCostAmount").text(costAmount.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2}));
+}
+
+let dta={};
+
+let datesOut=(dateInp)=>{
+	let date=dateInp.split(':')[0];
+	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)=>{
+	let artifact="";
+	let classes=(callData.delta < 0.5)?" otm":" itm";
+		
+	for (let i=0;i< allColumns.length;i++){
+		let cellValue=Number(callData[allColumns[i]]).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
+		
+		artifact+=`
+			<td class="${classes} ralign">${cellValue}</td>
+		`;
+	}	
+	let strCallJSON=JSON.stringify(callData).replace(/"/g,"\\'");
+
+	bidFrm=Number(callData.bid).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
+	askFrm=Number(callData.ask).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
+	
+	classes += " priceClick";
+	
+	artifact+=`
+		<td class="${classes} ralign" onclick="addToOrder('sell','${strCallJSON}')"><a href="#" title="Sell">${bidFrm}</a></td>
+		<td class="${classes} ralign" onclick="addToOrder('buy','${strCallJSON}')"><a href="#" title="Buy">${askFrm}</a></td>
+	`;
+	return artifact;
+}
+
+let getPutArtifact=(putData,allColumns)=>{
+	let artifact="";
+	let classes=(putData.delta > -0.5)?" otm":" itm";
+		
+	for (let i=0;i< allColumns.length;i++){
+		let cellValue=Number(putData[allColumns[i]]).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
+		
+		artifact+=`
+			<td class="${classes} ralign">${cellValue}</td>
+		`;
+	}	
+	
+	let strPutJSON=JSON.stringify(putData).replace(/"/g,"\\'");
+	
+	bidFrm=Number(putData.bid).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
+	askFrm=Number(putData.ask).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
+	
+	artifact+=`
+		<td class="${classes} ralign" onclick="addToOrder('sell','${strPutJSON}')"><a href="#" title="Sell">${bidFrm}</a></td>
+		<td class="${classes} ralign" onclick="addToOrder('buy','${strPutJSON}')"><a href="#" title="Buy">${askFrm}</a></td>
+	`;
+	return artifact;
+}
+
+let getStrikeArtifact=(strike)=>{
+	return `
+		<th class="center bold ">${strike}</th>
+	`;
+}
+
+let fillChainRow=(rowData)=>{
+	let theTable=document.getElementById("tblOptionChain");
+	let theNewRow=theTable.insertRow(-1);
+	let allColumns=["delta","theta"];
+	
+	theNewRow.innerHTML=getCallArtifact(rowData.call,allColumns) + getStrikeArtifact(rowData.strike) + getPutArtifact(rowData.put,allColumns);
+}
+
+let clearChainTable=()=>{
+	let theTable=document.getElementById("tblOptionChain");
+	for (let i=theTable.rows.length;i>3;i--){
+		theTable.deleteRow(-1);
+	}
+}
+
+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);
+	
+	let allStrikes=Object.keys(allCalls);
+	for (let i=0;i<allStrikes.length;i++){
+		let theStrike=allStrikes[i];
+		let singleStrikeCall=allCalls[theStrike][0];
+		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=`
+		<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>
+						<tr><!-- Dummy row --></tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	`;
+
+	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();
+	}
+}