Improved code by making more oo

add functionality and ingo in order frm.
2020-04-29 22:56:37 -05:00
parent bd726a01c7
commit 06d86f8c30
7 changed files with 287 additions and 187 deletions
--- a/client/js/orderFrame.js
+++ b/client/js/orderFrame.js
@@ -0,0 +1,95 @@
+let createOrderFrame=()=>{
+	let me = window.myOrderFrame = document.createElement("div");
+	
+	me.setAttribute("id","frmOrder");
+	me.className="container-fluid "; 
+	me.innerHTML=`
+		<button onclick='myOrderFrame.clearOrder()' type="button" class="btn btn-danger">Clear All</button>
+		<br>
+		<div id='lbCostAmount'>0</div>
+		<ul id='listOrderItems'>
+		</ul>
+	`;
+	$('#app').append(me);
+
+	me.addToOrder=(openType,optionData)=>{
+		optionData=JSON.parse(optionData.replace(/'/g,'"'));
+		console.log("AddToOrder",openType,optionData);
+		
+		let me=document.createElement("li");
+		me.multiplier = 100; // assume always 100 multipier
+		me.price = (openType.substr(0,1)==="b")?optionData.ask:optionData.bid; 
+		me.priceEffect = ((openType.substr(0,1)==="b")?-1:1);
+		me.quantity = 1; // at this point, we add 1 by default.
+
+		me.updateNumbers=()=>{
+			let prevTotalCostAmount=me.totalCostAmount;
+			me.singleCostAmount = me.priceEffect * me.multiplier * me.price 
+			me.totalCostAmount = me.singleCostAmount * me.quantity;
+			
+			if ((prevTotalCostAmount !== undefined) && (prevTotalCostAmount !== me.totalCostAmount)) {
+				myOrderFrame.costAmount += (me.totalCostAmount - prevTotalCostAmount);
+			}
+			if (me.getElementsByClassName("quantity")[0] !== undefined) {
+				me.getElementsByClassName("quantity")[0].innerText = me.quantity;
+				me.getElementsByClassName("totalCost")[0].innerText = me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2});
+			}
+		};
+		me.updateNumbers();
+
+		me.increaseQty=_=>{
+			me.quantity += 1;
+			me.updateNumbers();
+		}
+
+		me.decreaseQty=_=>{
+			if (me.quantity>1) { // don't go below 0, if we did, we had to chnage the order type to use the correct (bid/ask) price.
+				me.quantity -= 1;
+				me.updateNumbers();
+			}
+		}
+
+		me.removeFromOrder=_=>{
+			me.quantity=0;
+			me.updateNumbers();
+			me.parentElement.removeChild(me);
+		}
+
+		me.innerHTML=`
+			<a class='danger' onclick='this.parentElement.removeFromOrder();'>[X]</a> ${myMasterFilter.selectedDate}|${myMasterFilter.selectedTime.substr(0,5)}|<span class="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='plusMinus' onclick='this.parentElement.increaseQty();'>[+]</a><a class='plusMinus' onclick='this.parentElement.decreaseQty();'>[-]</a>
+			<div class='orderItemLine2'>
+			${optionData.symbol} =&gt; <span class='totalCost'>${me.totalCostAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2})}</span>
+			</div>
+		`;
+
+		$("#listOrderItems").append(me);
+		
+		// adjust the cumulation on the order frame
+		myOrderFrame.costAmount+=me.totalCostAmount;
+
+	
+	}
+
+
+	me.clearOrder = ()=>{
+		me.costAmount=0;
+		$("#listOrderItems").empty();
+	}
+
+	me.showCostAmount=_=>{
+		$("#lbCostAmount").text(me.costAmount.toLocaleString('en',{minimumFractionDigits: 0, maximumFractionDigits: 2}));
+	}
+
+	let _costAmount={};
+	Object.defineProperty(me,'costAmount',{
+		get:_=>{return(_costAmount);},
+		set: (newVal)=>{
+			console.log("changed cost", newVal);
+			_costAmount=newVal;
+			me.showCostAmount();
+		} 
+	});
+	// InitializeCostAmount
+	me.costAmount=0;
+}
+