99 lines
3.4 KiB
JavaScript
99 lines
3.4 KiB
JavaScript
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> <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>
|
|
<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} => <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;
|
|
}
|
|
|