From 5b747069dd245e391d9f0e7390a348450266e623 Mon Sep 17 00:00:00 2001
From: Joe Tretter <j.tretter@gmail.com>
Date: Thu, 30 Apr 2020 17:29:31 -0500
Subject: [PATCH] Selectable column information

---
 .gitignore                 |  1 +
 client/css/optiTrainer.css | 13 ++++++--
 client/js/optiTrainer.js   | 66 +++++++++++++++++++++++++++++++++++---
 client/js/orderFrame.js    | 18 +++++++++--
 4 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index b6cf75d..2677754 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,3 +109,4 @@ dist
 .vscode-test
 server/quoteDBs/consolidated.sqlite3
 server/quoteDBs/processedDBs
+server/quoteDBs/*.7z
diff --git a/client/css/optiTrainer.css b/client/css/optiTrainer.css
index ff97909..460f441 100644
--- a/client/css/optiTrainer.css
+++ b/client/css/optiTrainer.css
@@ -105,6 +105,8 @@ body {
 
 #frmOrder ul li {
 	border-top:1px solid blue;
+	font-family: monospace;
+    font-size: 12px;
 }
 
 #frmOrder div.orderItemLine2 {
@@ -148,7 +150,12 @@ body {
 	position:absolute;
 	left:300;
 	top:80px;
-	width:800px;
+	min-width:800px;
+}
+
+.btn-myColSelection {
+	padding-top: 0;
+	padding-bottom: 0;
 }
 
 .ralign { text-align:right;	}
@@ -172,8 +179,8 @@ body {
 }
 .plusMinusContainer{
 	position: absolute;
-    margin-top: -20;
-    left: 250;
+    margin-top: -17;
+    left: 238;
 }
 
 .priceClick {
diff --git a/client/js/optiTrainer.js b/client/js/optiTrainer.js
index b476cfc..69b6ecf 100644
--- a/client/js/optiTrainer.js
+++ b/client/js/optiTrainer.js
@@ -31,7 +31,10 @@ let getCallArtifact=(callData,allColumns)=>{
 	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});
+		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>
@@ -56,7 +59,10 @@ let getPutArtifact=(putData,allColumns)=>{
 	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});
+		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>
@@ -86,7 +92,8 @@ let getStrikeArtifact=(strike)=>{
 let fillChainRow=(rowData)=>{
 	let theTable=document.getElementById("tblOptionChain");
 	let theNewRow=theTable.insertRow(-1);
-	let allColumns=["delta","theta","vega"];
+	let allColumns=JSON.parse(localStorage["KPIs"]);
+	allColumns.length=3;
 	
 	theNewRow.innerHTML=getCallArtifact(rowData.call,allColumns) + getStrikeArtifact(rowData.strike) + getPutArtifact(rowData.put,allColumns);
 }
@@ -121,13 +128,49 @@ let fillChainTable=(expirationDate,dateOnly)=>{
 	}	
 }
 
+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 " id="frmOptionChainMain">	
+		<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('')}
@@ -140,7 +183,7 @@ let displayOptionChain=()=>{
 							<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'>Vega</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'>Vega</th><th class='ralign'>Bid</th><th class='ralign'>Ask</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><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>
@@ -151,7 +194,20 @@ let displayOptionChain=()=>{
 		</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){
diff --git a/client/js/orderFrame.js b/client/js/orderFrame.js
index 594232e..5006f9b 100644
--- a/client/js/orderFrame.js
+++ b/client/js/orderFrame.js
@@ -55,13 +55,27 @@ let createOrderFrame=()=>{
 			me.parentElement.removeChild(me);
 		}
 
+		let splitOptionDetails=(input)=>{
+			let symbolRest=input.split("_");
+			let symbol=symbolRest[0];
+			
+			let putCall=(symbolRest[1].indexOf("P")>-1)?"P":"C";
+			let dateStrike = symbolRest[1].split(putCall);
+			let date = dateStrike[0].replace(/(..)(..)(..)/,"20$3-$1-$2");
+			let strike = dateStrike[1];
+
+			return({symbol:symbol, putCall:putCall, date:date, strike:strike });
+		}
+
+		let optionDetails=splitOptionDetails(optionData.symbol);
+
 		me.innerHTML=`
-			<a class='danger' onclick='this.parentElement.removeFromOrder();'>[X]</a> <b>${myMasterFilter.selectedDate}|${myMasterFilter.selectedTime.substr(0,5)}</b>|<span class="opentype${openType}">${openType}</span>@<span class="singlePrice">${Math.abs(me.singleCostAmount).toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>|<span class='quantity'>${me.quantity}</span> 
+			<a class='danger' onclick='this.parentElement.removeFromOrder();'>[X]</a> <b>${myMasterFilter.selectedDate}|${myMasterFilter.selectedTime.substr(0,5)}</b>|<span class="opentype${openType}">${((openType==="buy")?" ":"") + openType}</span>@<span class="singlePrice">${Math.abs(me.singleCostAmount).toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2}).padStart(7,"\xa0")}</span>|<span class='quantity'>${me.quantity}</span> 
 			<div class='plusMinusContainer'>
 			<a class='plusMinus' onclick='this.parentElement.parentElement.increaseQty();'>[+]</a><a class='plusMinus' onclick='this.parentElement.parentElement.decreaseQty();'>[-]</a>
 			</div>
 			<div class='orderItemLine2'>
-			${optionData.symbol} =&gt; <span class='totalCost'>${me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>
+			${optionDetails.symbol} ${optionDetails.date} ${optionDetails.putCall} ${optionDetails.strike} =&gt;  <span class='totalCost'>${me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>
 			</div>
 		`;