evoleasing-public/local/components/evolution/calculator/templates/.default/script.js

var calculation = { car_price: 0, CAR_PRICE_MIN: 0, CAR_PRICE_MAX:0, initial_payment: 0, lease_period: 0, monthly_payment: 0, redemption_payment: 0, tax_savings: 0, vat_reimbursement: 0 };

function calculator(props)
{
	for(let i in calculation)
	{
		calculation[i] = parseInt(props[i], 10);
	}

	$("#FORM_FIELD_PRICE").val(calculation.car_price);
	$("#FORM_FIELD_PREPAID").val(calculation.initial_payment);
	$("#FORM_FIELD_TERM").val(calculation.lease_period);
	$("#FORM_FIELD_REDEMPTION").val(calculation.redemption_payment);
}

function calculate(param, value)
{
	if(param !== undefined)
	{
		calculation[param] = value;
	}

	$("#FORM_FIELD_PRICE").val(calculation.car_price);
	$("#FORM_FIELD_PREPAID").val(calculation.initial_payment);
	$("#FORM_FIELD_TERM").val(calculation.lease_period);
	$("#FORM_FIELD_REDEMPTION").val(calculation.redemption_payment);

	$.post("/api/calculation/", 
	{
		car_price: calculation.car_price, 
		initial_payment: calculation.initial_payment, 
		lease_period: calculation.lease_period, 
		redemption_payment: calculation.redemption_payment, 	
	}, function(response)
	{
		for(let i in response)
		{ calculation[i] = parseInt(response[i], 10); }

		$("#calculator_monthly_payment_value").text(calculation['monthly_payment'].toLocaleString());
		$("#calculator_tax_savings_value").text((calculation['tax_savings'] + calculation['vat_reimbursement']).toLocaleString());
		$("#calculator_tax_savings_percent").text(Math.round((calculation['tax_savings']+calculation['vat_reimbursement']) / (calculation['car_price'] / 100)));
	}, "json");
}

function calculator_car_price_save()
{
	var v = parseInt($("#calculator_car_price_input").val(), 10);
	console.log(v, calculation['CAR_PRICE_MIN'], calculation['CAR_PRICE_MAX']);
	if(v >= calculation['CAR_PRICE_MIN'] && v <= calculation['CAR_PRICE_MAX'])
	{
		var $input_range_car_price = $(`#calculation_car_price`);
		$input_range_car_price.val(v).change();
		calculate('car_price', v);

		$("#calculator_car_price_text").show();
		$("#calculator_car_price_editor").hide();
	}
	else
	{
		$("#calculator_car_price_text").show();
		$("#calculator_car_price_editor").hide();
	}
}

$(function()
{
	var $document = $(document);
	var selector = '[data-rangeslider]';
	var $element = $(selector);

	// For ie8 support
	var textContent = ('textContent' in document) ? 'textContent' : 'innerText';

	// Example functionality to demonstrate a value feedback
	function valueOutput(element) 
	{
		var value = element.value;
		var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
		if($(element).data('slider-name') === "car_price")
		{
			output[textContent] = parseInt(value, 10).toLocaleString();
		}
		else
		{
			output[textContent] = value;
		}
	}

	$document.on('input', 'input[type="range"], ' + selector, function(e) 
	{
		valueOutput(e.target);
	});

	// Example functionality to demonstrate disabled functionality
	$document.on('click', '#js-example-disabled button[data-behaviour="toggle"]', function(e) 
	{
		var $inputRange = $(selector, e.target.parentNode);

		if ($inputRange[0].disabled) {
			$inputRange.prop("disabled", false);
		}
		else {
			$inputRange.prop("disabled", true);
		}
		$inputRange.rangeslider('update');
	});

	// Example functionality to demonstrate programmatic value changes
	$document.on('click', '#js-example-change-value button', function(e) {
		var $inputRange = $(selector, e.target.parentNode);
		var value = $('input[type="number"]', e.target.parentNode)[0].value;

		$inputRange.val(value).change();
	});

	// Example functionality to demonstrate programmatic attribute changes
	$document.on('click', '#js-example-change-attributes button', function(e) 
	{
		var $inputRange = $(selector, e.target.parentNode);
		var attributes = {
			min: $('input[name="min"]', e.target.parentNode)[0].value,
			max: $('input[name="max"]', e.target.parentNode)[0].value,
			step: $('input[name="step"]', e.target.parentNode)[0].value
		};

		$inputRange.attr(attributes);
		$inputRange.rangeslider('update', true);
	});

	// Example functionality to demonstrate destroy functionality
	$document
	.on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
		$(selector, e.target.parentNode).rangeslider('destroy');
	})
	.on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
		$(selector, e.target.parentNode).rangeslider({ polyfill: false });
	});

	// Example functionality to test initialisation on hidden elements
	$document.on('click', '#js-example-hidden button[data-behaviour="toggle"]', function(e) {
		var $container = $(e.target.previousElementSibling);
		$container.toggle();
	});

	// Basic rangeslider initialization
	$element.rangeslider({
		// Deactivate the feature detection
		polyfill: false,
		// Callback function
		onInit: function() {
			valueOutput(this.$element[0]);
		},
		// Callback function
		onSlide: function(position, value) {
			//console.log('onSlide');
			//console.log('position: ' + position, 'value: ' + value);
		},
		// Callback function
		onSlideEnd: function(position, value) 
		{
			calculate(this.$element.attr('data-slider-name'), value);
			//console.log('position: ' + position, 'value: ' + value);
		}
	});

	$("#calculator_car_price_text").on("click", function()
	{
		$("#calculator_car_price_input").val(parseInt(calculation.car_price, 10));
		$("#calculator_car_price_text").hide();
		$("#calculator_car_price_editor").show();
	});

	$("#calculator_car_price_save").on("click", function()
	{
		calculator_car_price_save();
	});

	$("#calculator_car_price_input").on("keydown", function(event)
	{
		if(event.keyCode === 13)
		{
			event.preventDefault();
			calculator_car_price_save();
		}
	});
});