mravi/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix and add input values in calc

Browse source
This commit is contained in:
Henry Bravo 2017-05-25 16:16:18 -05:00
commit 22a876e134
3 changed files with 22 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
datacenterlight/static/datacenterlight/css/landing-page.css
View file

@ -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;

13
datacenterlight/static/datacenterlight/js/main.js
View file

@ -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);

12
datacenterlight/templates/datacenterlight/pricing.html
View file

@ -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>