offer js

offer.js

class UpdateOfferByMetal {
	constructor(offerUpdateMethod, actualValue, event) {
		if (!offerEditingCellInstance) {
			offerEditingCellInstance = this;
		}
		this.offerUpdateMethod = offerUpdateMethod;
		this.actualValue = actualValue;		
		this.obj = event;
		this.offerEditingCell = false;
		this.editStatus = $(this.obj).parent().data('edit-status');
		this.originalHtml = $(this.obj).html();
		this.originalAmount = parseFloat(Number(this.originalHtml.replace(/[^0-9\.]+/g,"")));
		this.offerIncreasedFontColor = '#00CC00';
		this.offerDecreasedFontColor = '#990000';
		this.editFontColor = '#FF0000';
		this.defaultFontColor = '#000000';
		this.defaultBgColor = '#FFFFFF';
		this.updateBgColor = '#CCCCCC';
		this.offerItemActualTotalValue = parseFloat($(this.obj).parent().data('offeritem-actual-total-value'));
		this.offerItemInitialOfferAmount = parseFloat($(this.obj).parent().data('offeritem-initial-offer-amount'));
		this.offerItemInitialOfferPercent = parseFloat($(this.obj).parent().data('offeritem-initial-offer-percent'));
		this.offerItemMetalType = $(this.obj).parent().data('offeritem-metal-type');
		this.offerItemMetalPurity = $(this.obj).parent().data('offeritem-metal-purity');
		this.offerItemMetalPurityType = $(this.obj).parent().data('offeritem-metal-purity-type');
		this.maxOfferValue = this.offerItemActualTotalValue;
		this.minOfferValue = 0;
		// this.updatedOfferItemsArr = [];
		// this.updatedOfferItemsArrIndex = {};

		console.log(this.offerItemMetalType);
		console.log(this.offerItemMetalPurity);
		console.log(this.offerItemMetalPurityType);

		if (offerUpdateMethod === 'percent') {
			this.maxOfferValue = 100.00;
		} 
		
		// Call edit input
		this.updateOfferInput();
		console.log(this.offerItemActualTotalValue);
		console.log(this.offerItemInitialOfferAmount);
		console.log(this.offerItemInitialOfferPercent);
		return offerEditingCellInstance;
	}

	static updateInput(...args) {
		return new UpdateOfferByMetal(...args);
	}

	addOrUpdateOfferItem(object) {
		var index = updatedOfferItemsArrIndex[object.uid];
		if (index === undefined) {
			index = updatedOfferItemsArr.length;
		}
		updatedOfferItemsArrIndex[object.uid] = index;
		updatedOfferItemsArr[index] = object;
		console.log(updatedOfferItemsArr);
		console.log(updatedOfferItemsArrIndex);
	}

	cancelUpdate() {
		$(this.obj).html(this.originalHtml);		
		$(this.obj).parents('td').css("background-color",this.defaultBgColor);		
		$(this.obj).toggleClass('unbinded');
		if (!this.editStatus) {			
			$(this.obj).css("color",this.defaultFontColor);
		}
		offerEditingCell = false;
		offerEditingCellInstance = null;
	}

	updateOfferInput() {
		var input = $(`
			<input id="updateOfferAmountInput" type="number" min="${this.minOfferValue}" max="${this.maxOfferValue}" step="any" /> 
			<br /> 
			<button id="updateOfferAmount" class="btn btn-success btn-xs">Update</button> 
			<button id="cancelOfferUpdate" class="btn btn-danger btn-xs">Cancel</button>
		`);
		// Initialize offer edit input
		// if (this.editStatus !== 'undefined' && this.editStatus != true && this.offerEditingCell != true)
		if (this.offerEditingCell != true)
		{
			input.val(this.originalAmount);
			$(this.obj).empty();
			$(this.obj).html(input);
			$(this.obj).css("color",this.editFontColor);
			$(this.obj).parents('td').css("background-color",this.updateBgColor);						
			$(this.obj).siblings('span.glyphicon').toggle();
			$(this.obj).off('click');
			$(this.obj).toggleClass('unbinded');
			offerEditingCell = true;
		}	
	}

	updateOfferAmount() {
		var updatedAmount = parseFloat($('#updateOfferAmountInput').val());
		updatedAmount = updatedAmount.toFixed(2);		
		var input = updatedAmount;
		var offerDifference = updatedAmount - this.offerItemInitialOfferAmount;
		offerDifference = offerDifference.toFixed(2);
		console.log('Update Amount: ', updatedAmount);
		if (this.offerUpdateMethod === 'percent') {
			// updatedAmount = this.roundUpNum(this.offerItemInitialOfferPercent * (updatedAmount/100));
			updatedAmount = parseFloat((this.offerItemActualTotalValue * (updatedAmount/100))).toFixed(2);
			offerDifference = parseFloat(updatedAmount - this.offerItemInitialOfferAmount).toFixed(2);
		}
		console.log(updatedAmount);
		console.log(offerDifference);
		// Update html
		$(this.obj).empty();
		$(this.obj).html(input);		
		$(this.obj).append('<span class="glyphicon"></span>');
		$(this.obj).parents('td').css("background-color",this.defaultBgColor);
		$(this.obj).toggleClass('unbinded');
		$(this.obj).parent().attr('data-edit-status', true);

		if(updatedAmount > this.offerItemInitialOfferAmount) {
			this.amountIncreasedCSS(offerDifference, this.offerUpdateMethod);
			this.addOrUpdateOfferItem(
				{
					uid:`${this.offerItemMetalType}-${this.offerItemMetalPurity}-${this.offerItemMetalPurityType}`,
					updatedAmount: updatedAmount,
					offerDifference: offerDifference
				}
			);
		} else if(updatedAmount == this.offerItemInitialOfferAmount) {
			$(this.obj).css("color",this.defaultFontColor);
		} else if(updatedAmount < this.offerItemInitialOfferAmount) {
			this.amountDecreasedCSS(offerDifference);
			this.addOrUpdateOfferItem(
				{
					uid:`${this.offerItemMetalType}-${this.offerItemMetalPurity}-${this.offerItemMetalPurityType}`,
					updatedAmount: updatedAmount,
					offerDifference: offerDifference
				}
			);
		}
		offerEditingCell = false;
		offerEditingCellInstance = null;
	}

	amountIncreasedCSS(offerDifference) {
		$(this.obj).css("color",this.offerIncreasedFontColor);
			$(this.obj).css("font-weight","bold");
			$(this.obj).children('span.glyphicon').removeClass('glyphicon-arrow-down');
			$(this.obj).children('span.glyphicon').addClass('glyphicon-arrow-up');
			if (this.offerUpdateMethod === 'dollar') {
				$(this.obj).parent().closest('td').next('td').next('td').next('td')
					.html(`<span>$${offerDifference}</span> <span class="glyphicon glyphicon-arrow-up"></span>`)
					.css({
						"font-weight": "bold",
						"color": this.offerIncreasedFontColor
					});
			} else if (this.offerUpdateMethod === 'percent') {
				$(this.obj).parent().closest('td').next('td').next('td')
					.html(`<span>$${offerDifference}</span> <span class="glyphicon glyphicon-arrow-up"></span>`)
					.css({
						"font-weight": "bold",
						"color": this.offerIncreasedFontColor
					});
			}
	}

	amountDecreasedCSS(offerDifference) {
		$(this.obj).css("color",this.offerDecreasedFontColor);
			$(this.obj).css("font-weight","bold");
			$(this.obj).children('span.glyphicon').removeClass('glyphicon-arrow-up');
			$(this.obj).children('span.glyphicon').addClass('glyphicon-arrow-down');
			if (this.offerUpdateMethod === 'dollar') {
				$(this.obj).parent().closest('td').next('td').next('td').next('td')
					.html(`<span>$${offerDifference}</span> <span class="glyphicon glyphicon-arrow-down"></span>`)
					.css({
						"font-weight": "bold",
						"color": this.offerDecreasedFontColor
					});
			} else if (this.offerUpdateMethod === 'percent') {
				$(this.obj).parent().closest('td').next('td').next('td')
					.html(`<span>$${offerDifference}</span> <span class="glyphicon glyphicon-arrow-down"></span>`)
					.css({
						"font-weight": "bold",
						"color": this.offerDecreasedFontColor
					});
			}
	}
}