- Implement price change

- Remember the last selected Symbol

client/css/optiTrainer.css

@@ -82,6 +82,14 @@ body {
 	background-color: #cccccc;
 }
 
+#frmChangePrice {
+	position: absolute;
+	width: 200px;
+	background-color: #FF0000;
+	border-radius: 4px;
+	padding: 10px;
+}
+
 #frmOrder { 
 	background-color:#ccff00;
 	position:fixed;

client/js/masterFilter.js

@@ -93,6 +93,7 @@ let createMasterFilterFrame=()=>{
 		return(_filterContext.theSymbol);
 	}
 	me.symbolChanged=(newSymbol)=>{
+		localStorage["defaults"]=JSON.stringify({Symbol:newSymbol});
 		newSymbol=me.toBrokerName(newSymbol);
 		console.log("symbolChanged",newSymbol);
 		_filterContext.theSymbol=newSymbol

client/js/optiTrainer.js

@@ -5,10 +5,20 @@ $(document).ready(_=>{
 	dta={};
 	createOrderFrame();
 	createMasterFilterFrame();
+
 	let selectDataFirst=_=>{
 		return {enabled:false, tooltip:"Select a Ticker!"};
 	}
 	$("#datePicker").datepicker({beforeShowDay:selectDataFirst});
+
+	let selectedSymbol;
+	try {
+		selectedSymbol=JSON.parse(localStorage["defaults"]).Symbol;
+		document.getElementById("frmMasterFilter").symbolChanged(selectedSymbol);
+	} catch (ex) {
+		console.log("No symbol found to preset",ex);
+	}
+	
 });
 
 

client/js/orderFrame.js

@@ -9,6 +9,17 @@ let createOrderFrame=()=>{
 		<div id='lbCostAmount'>0</div>
 		<ul id='listOrderItems'>
 		</ul>
+		<div class="wrapper" id="frmChangePrice" style="display:none">		
+			<div class="input-group">
+			<span class="input-group-addon">$</span>
+			<input type="text" class="form-control" id='changePriceValue' aria-label="Amount (to the nearest dollar)">
+			<span class="input-group-addon">.00</span>
+			</div>
+			<div style="text-align:right">
+			<button class="btn btn-success" type="button" onclick='$("#frmChangePrice").data("targetLine").changePrice($("#changePriceValue").val()/100);$(frmChangePrice).hide();'>OK</button>
+			<button class="btn btn-primary" type="button" onclick='$(frmChangePrice).hide();'>CANCEL</button>
+			</div>
+		</div>
 	`;
 	$('#app').append(me);
 
@@ -32,6 +43,7 @@ let createOrderFrame=()=>{
 			}
 			if (me.getElementsByClassName("quantity")[0] !== undefined) {
 				me.getElementsByClassName("quantity")[0].innerText = me.quantity;
+				me.getElementsByClassName("singlePrice")[0].innerText = me.singleCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2}).padStart(7,"\xa0");
 				me.getElementsByClassName("totalCost")[0].innerText = me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2});
 			}
 		};
@@ -49,6 +61,19 @@ let createOrderFrame=()=>{
 			}
 		}
 
+		me.displayFrmPriceChange=_=>{
+				$("#changePriceValue").val(parseInt(me.price*100,10));
+				let clickElePos=$(event.target).position();
+				$("#frmChangePrice").css("left",clickElePos.left).css("top",clickElePos.top);
+				$("#frmChangePrice").data('targetLine',event.target.parentElement);
+				$("#frmChangePrice").show();
+		}
+
+		me.changePrice=newPrice=>{
+			me.price=newPrice;
+			me.updateNumbers();
+		}
+
 		me.removeFromOrder=_=>{
 			me.quantity=0;
 			me.updateNumbers();
@@ -70,12 +95,13 @@ let createOrderFrame=()=>{
 		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==="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> 
+			<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='plusMinus' onclick='this.parentElement.displayFrmPriceChange();'>@</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>
+				<a class='plusMinus' onclick='this.parentElement.parentElement.increaseQty();'>[+]</a><a class='plusMinus' onclick='this.parentElement.parentElement.decreaseQty();'>[-]</a>
 			</div>
 			<div class='orderItemLine2'>
-			${optionDetails.symbol} ${optionDetails.date} ${optionDetails.putCall} ${optionDetails.strike} =&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>
 		`;