Fix and add input values in calc
This commit is contained in:
parent
792219f6ac
commit
22a876e134
|
@ -544,6 +544,7 @@ h6 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-calc-section .text .section-heading::before{
|
.price-calc-section .text .section-heading::before{
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -592,10 +593,15 @@ h6 {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-calc-section .card .description span{
|
.price-calc-section .card .description span{
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
.price-calc-section .card .description input{
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
.price-calc-section .card .description i{
|
.price-calc-section .card .description i{
|
||||||
color: #29427A;
|
color: #29427A;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -94,21 +94,27 @@
|
||||||
var data = $(this).data('minus');
|
var data = $(this).data('minus');
|
||||||
|
|
||||||
if(cardPricing[data].value > cardPricing[data].min){
|
if(cardPricing[data].value > cardPricing[data].min){
|
||||||
cardPricing[data].value --;
|
cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval;
|
||||||
}
|
}
|
||||||
_fetchPricing();
|
_fetchPricing();
|
||||||
});
|
});
|
||||||
$('.fa-plus-circle.right').click(function(event){
|
$('.fa-plus-circle.right').click(function(event){
|
||||||
var data = $(this).data('plus');
|
var data = $(this).data('plus');
|
||||||
if(cardPricing[data].value < cardPricing[data].max){
|
if(cardPricing[data].value < cardPricing[data].max){
|
||||||
cardPricing[data].value = cardPricing[data].value + cardPricing[data].interval;
|
cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval;
|
||||||
}
|
}
|
||||||
_fetchPricing();
|
_fetchPricing();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('.input-price').change(function(){
|
||||||
|
var data = $(this).attr("name");
|
||||||
|
cardPricing[data].value = $('input[name='+data+']').val();
|
||||||
|
_fetchPricing();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
function _fetchPricing(){
|
function _fetchPricing(){
|
||||||
Object.keys(cardPricing).map(function(element){
|
Object.keys(cardPricing).map(function(element){
|
||||||
$('#'+cardPricing[element].id).text(cardPricing[element].value);
|
//$('#'+cardPricing[element].id).val(cardPricing[element].value);
|
||||||
$('input[name='+element+']').val(cardPricing[element].value);
|
$('input[name='+element+']').val(cardPricing[element].value);
|
||||||
});
|
});
|
||||||
_calcPricing();
|
_calcPricing();
|
||||||
|
@ -116,6 +122,7 @@
|
||||||
|
|
||||||
function _calcPricing(){
|
function _calcPricing(){
|
||||||
var total = (cardPricing['cpu'].value * 5) + (2* cardPricing['ram'].value) + (0.6* cardPricing['storage'].value)
|
var total = (cardPricing['cpu'].value * 5) + (2* cardPricing['ram'].value) + (0.6* cardPricing['storage'].value)
|
||||||
|
console.log(total);
|
||||||
total = parseFloat(total.toFixed(2));
|
total = parseFloat(total.toFixed(2));
|
||||||
|
|
||||||
$("#total").text(total);
|
$("#total").text(total);
|
||||||
|
|
|
@ -123,17 +123,20 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
|
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
|
||||||
<span id="coreValue">1</span><span> Core</span>
|
<input class="input-price" type="number" min="1" max="42" id="coreValue" name="cpu">
|
||||||
|
<span> Core</span>
|
||||||
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
|
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
|
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
|
||||||
<span id="ramValue">2</span><span> GB RAM</span>
|
<input id="ramValue" class="input-price" type="number" min="2" max="200" name="ram">
|
||||||
|
<span> GB RAM</span>
|
||||||
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
|
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
|
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
|
||||||
<span id="storageValue">15</span><span>{% trans "GB Storage (SSD)" %}</span>
|
<input id="storageValue" class="input-price" type="number" min="10" max="500" step="10" name="storage">
|
||||||
|
<span>{% trans "GB Storage (SSD)" %}</span>
|
||||||
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
|
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -145,9 +148,6 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" name="cpu">
|
|
||||||
<input type="hidden" name="ram">
|
|
||||||
<input type="hidden" name="storage">
|
|
||||||
<input type="hidden" name="total">
|
<input type="hidden" name="total">
|
||||||
<!--<div class="description check-ip">
|
<!--<div class="description check-ip">
|
||||||
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
|
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
|
||||||
|
|
Loading…
Reference in a new issue