OptiTrainer/client/js/optiTrainer.js

var allCombinations;
var optionChainContext={};

$(document).ready(_=>{
	dta={};
	createOrderFrame();
	createMasterFilterFrame();
	let selectDataFirst=_=>{
		return {enabled:false, tooltip:"Select a Ticker!"};
	}
	$("#datePicker").datepicker({beforeShowDay:selectDataFirst});
});


let dta={};

let datesOut=(dateInp)=>{
	let date=dateInp.split(':')[0];
	let dte=dateInp.split(':')[1];
	let attrActive="";
	if (optionChainContext.selectedDate === date) {
		attrActive="active";
		//fillChainTable(dateInp,date);
	}

	return `<li class="nav-item ${attrActive}"><a href="#" id="TAB_${date}" role="tab" class="nav-link" onclick="fillChainTable('${dateInp}','${date}')">${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=callData[allColumns["c"+(i+1)]];
		if (!isNaN(cellValue)) { 
			cellValue=Number(cellValue).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="myOrderFrame.addToOrder('sell','${strCallJSON}')"><a title="Sell">${bidFrm}</a></td>
		<td class="${classes} ralign" onclick="myOrderFrame.addToOrder('buy','${strCallJSON}')"><a 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=putData[allColumns["c"+(i+1)]];
		if (!isNaN(cellValue)) { 
			cellValue=Number(cellValue).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});
	
	classes += " priceClick";
	
	artifact+=`
		<td class="${classes} ralign" onclick="myOrderFrame.addToOrder('sell','${strPutJSON}')"><a title="Sell">${bidFrm}</a></td>
		<td class="${classes} ralign" onclick="myOrderFrame.addToOrder('buy','${strPutJSON}')"><a 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=JSON.parse(localStorage["KPIs"]);
	allColumns.length=3;
	
	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,dateOnly)=>{
	// Maintain Active Tab
	$(".nav a").on("click", function(){
		$(".nav").find(".active").removeClass("active");
		$(this).parent().addClass("active");
	 });

	clearChainTable();
	optionChainContext.selectedDate=dateOnly;
	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 getColumnSelection=(colNum)=>{
	if (localStorage["KPIs"] === undefined) {
		localStorage["KPIs"] = '{"c1":"delta","c2":"theta","c3":"vega"}';
	}
	let displayColumnKPIs=JSON.parse(localStorage["KPIs"]);
	let selectedValue=displayColumnKPIs["c"+colNum];

	let capitalize=(theOption)=>{
		// add a blank before each Upper Case letter
		let optionText=theOption.replace(/([A-Z])/g, ' $1').trim();
		// make the first letter upper case
		optionText= optionText.charAt(0).toUpperCase() + optionText.substring(1);
		return(optionText);
	}
	let allOptions=Object.keys(dta.callExpDateMap[Object.keys(dta.callExpDateMap)[0]][Object.keys(dta.callExpDateMap[Object.keys(dta.callExpDateMap)[0]])[0]][0]);
	allOptions=allOptions.sort();
	let me=`
	<div class="dropdown myColDropDown">
		<button class="btn btn-default dropdown-toggle btn-myColSelection" type="button" id="colMenu" + ${colNum} data-toggle="dropdown" aria-expanded="false">${capitalize(selectedValue)}<span class="caret"></span></button>
		<ul class="dropdown-menu" role="menu" aria-labelledby="colMenu" + ${colNum}>
	`;
	
	for (let i=0; i<allOptions.length;i++){
		let theOption=allOptions[i];
		if ((theOption==="bid") || (theOption === "ask")) { continue; } // bid and ask are fix.
		me += `<li role="presentation"><a role="menuitem" tabindex="-1" onclick="myTblOptionChain.changeColKPI(${colNum}, '${theOption}')">${capitalize(theOption)}</a></li>`;
	}

	me += `
		</ul>
		</div>
	`;

	return(me);
}

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 col-md-9" 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'>${getColumnSelection(1)}</th><th class='ralign'>${getColumnSelection(2)}</th><th class='ralign'>${getColumnSelection(3)}</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th><th class='center'>Strike</th><th class='ralign'>${getColumnSelection(1)}</th><th class='ralign'>${getColumnSelection(2)}</th><th class='ralign'>${getColumnSelection(3)}</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)
	myTblOptionChain = $("#tblOptionChain")[0];

	myTblOptionChain.allColumns=["delta","theta","vega"];

	myTblOptionChain.changeColKPI=(colNum, kpi)=>{
		console.log("ChangeKPI",colNum,kpi);
		let displayColumnKPIs=JSON.parse(localStorage["KPIs"]);
		displayColumnKPIs["c"+colNum]=kpi;
		localStorage["KPIs"]=JSON.stringify(displayColumnKPIs);
		displayOptionChain();
	}

	// "click" the date if it's the context dte
	if ($(".nav").find(".active").children().length > 0){
		$(".nav").find(".active").children()[0].click();
	}
}