Refactored calculator form code and disabled the Order Now button by default
This commit is contained in:
		
					parent
					
						
							
								11108a4d59
							
						
					
				
			
			
				commit
				
					
						87fb40400b
					
				
			
		
					 2 changed files with 77 additions and 260 deletions
				
			
		|  | @ -1,6 +1,5 @@ | |||
| {% extends "datacenterlight/base.html" %} | ||||
| {% load staticfiles i18n%} | ||||
| {% get_current_language as LANGUAGE_CODE %} | ||||
| 
 | ||||
| {% block content %} | ||||
| 
 | ||||
|  | @ -139,94 +138,7 @@ | |||
|                         <div class="landing card"> | ||||
|                             <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt=""> | ||||
|                             <div class="caption"> | ||||
|                                 <form id="order_form" method="POST" action="" data-toggle="validator" role="form"> | ||||
|                                     {% csrf_token %} | ||||
|                                     <div class="title"> | ||||
|                                        <h3>{% trans "VM hosting" %} </h3> | ||||
|                                     </div> | ||||
|                                     <div class="price"> | ||||
|                                         <span id="total">15</span> | ||||
|                                         <span>CHF/{% trans "month" %}</span> | ||||
|                                         <div class="price-text"> | ||||
|                                             <p>{% trans "VAT included" %}</p> | ||||
|                                         </div> | ||||
|                                     </div> | ||||
|                                     <div class="descriptions"> | ||||
|                                         <div class="description form-group"> | ||||
|                                             <p>{% trans "Hosted in Switzerland" %}</p> | ||||
|                                         </div> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input"> | ||||
|                                             <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i> | ||||
|                                             <input class="input-price select-number" type="number"  min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required> | ||||
|                                             <span> Core</span> | ||||
|                                             <i class="fa fa-plus-circle right" data-plus="cpu"  aria-hidden="true"></i> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"></div> | ||||
|                                         </div> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input"> | ||||
|                                             <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i> | ||||
|                                             <input id="ramValue" class="input-price select-number" type="number"  min="2" max="200"  name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required> | ||||
|                                             <span> GB RAM</span> | ||||
|                                             <i class="fa fa-plus-circle right" data-plus="ram"  aria-hidden="true"></i> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"></div> | ||||
|                                         </div> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input"> | ||||
|                                             <i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i> | ||||
|                                             <input id="storageValue" class="input-price select-number" type="number"  min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required> | ||||
|                                             <span>{% trans "GB Storage (SSD)" %}</span> | ||||
|                                             <i class="fa fa-plus-circle right" data-plus="storage"  aria-hidden="true"></i> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"></div> | ||||
|                                         </div> | ||||
|                                         <div class="description select-configuration input form-group justify-center"> | ||||
|                                             <label for="config">OS</label> | ||||
|                                             <select name="config" id=""> | ||||
|                                                 {% for template in templates %} | ||||
|                                                     <option value="{{template.id}}">{{template.name}} </option> | ||||
|                                                 {% endfor %} | ||||
|                                             </select> | ||||
|                                         </div> | ||||
|                                         <input type="hidden" name="total"> | ||||
|                                         <!--<div class="description check-ip"> | ||||
|                                             <input type="checkbox" name="ipv6"> Ipv6 Only<br> | ||||
|                                         </div>--> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input justify-center"> | ||||
|                                             <label for="name" class="control-label">{% trans "Name"%}</label> | ||||
|                                             <input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"> | ||||
|                                                 {% for message in messages %} | ||||
|                                                     {% if 'name' in message.tags %} | ||||
|                                                     <ul class="list-unstyled"><li> | ||||
|                                                         {{ message|safe }} | ||||
|                                                     </li></ul> | ||||
|                                                     {% endif %} | ||||
|                                                 {% endfor %} | ||||
|                                             </div> | ||||
|                                         </div> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input justify-center"> | ||||
|                                             <label for="email" class="control-label">{% trans "Email"%}</label> | ||||
|                                             <input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"> | ||||
|                                                 {% for message in messages %} | ||||
|                                                     {% if 'email' in message.tags %} | ||||
|                                                      <ul class="list-unstyled"><li> | ||||
|                                                         {{ message|safe }} | ||||
|                                                     </li></ul> | ||||
|                                                     {% endif %} | ||||
|                                                 {% endfor %} | ||||
|                                             </div> | ||||
|                                         </div> | ||||
|                                     </div> | ||||
|                                     <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input> | ||||
|                                 </form> | ||||
|                             {% include "datacenterlight/calculator_form.html" %} | ||||
|                             </div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|  |  | |||
|  | @ -1,10 +1,7 @@ | |||
| {% extends "datacenterlight/base.html" %} | ||||
| {% load staticfiles i18n%} | ||||
| {% get_current_language as LANGUAGE_CODE %} | ||||
| 
 | ||||
| {% block content %} | ||||
| 
 | ||||
|      | ||||
|     <!-- Why Data Center Light? --> | ||||
|     <div class="full-whydcl-sec"> | ||||
|         <div class="whydcl-header whydcl-section" id="why_dcl"> | ||||
|  | @ -126,9 +123,6 @@ | |||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                  | ||||
| 				 | ||||
|                  | ||||
|             </div> | ||||
|         </div> | ||||
|         </div> | ||||
|  | @ -150,94 +144,7 @@ | |||
|                         <div class="landing card"> | ||||
|                             <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt=""> | ||||
|                             <div class="caption"> | ||||
|                                 <form id="order_form" method="POST" action="" data-toggle="validator" role="form"> | ||||
|                                     {% csrf_token %} | ||||
|                                     <div class="title"> | ||||
|                                        <h3>{% trans "VM hosting" %} </h3> | ||||
|                                     </div> | ||||
|                                     <div class="price"> | ||||
|                                         <span id="total">15</span> | ||||
|                                         <span>CHF/{% trans "month" %}</span> | ||||
|                                         <div class="price-text"> | ||||
|                                             <p>{% trans "VAT included" %}</p> | ||||
|                                         </div> | ||||
|                                     </div> | ||||
|                                     <div class="descriptions"> | ||||
|                                         <div class="description form-group"> | ||||
|                                             <p>{% trans "Hosted in Switzerland" %}</p> | ||||
|                                         </div> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input"> | ||||
|                                             <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i> | ||||
|                                             <input class="input-price select-number" type="number"  min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required> | ||||
|                                             <span> Core</span> | ||||
|                                             <i class="fa fa-plus-circle right" data-plus="cpu"  aria-hidden="true"></i> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"></div> | ||||
|                                         </div> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input"> | ||||
|                                             <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i> | ||||
|                                             <input id="ramValue" class="input-price select-number" type="number"  min="2" max="200"  name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required> | ||||
|                                             <span> GB RAM</span> | ||||
|                                             <i class="fa fa-plus-circle right" data-plus="ram"  aria-hidden="true"></i> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"></div> | ||||
|                                         </div> | ||||
|                                         <div class="form-group"> | ||||
|                                             <div class="description input"> | ||||
|                                             <i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i> | ||||
|                                             <input id="storageValue" class="input-price select-number" type="number"  min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required> | ||||
|                                             <span>{% trans "GB Storage (SSD)" %}</span> | ||||
|                                             <i class="fa fa-plus-circle right" data-plus="storage"  aria-hidden="true"></i> | ||||
|                                             </div> | ||||
|                                             <div class="help-block with-errors"></div> | ||||
|                                         </div> | ||||
|                                         <div class="description select-configuration input form-group justify-center"> | ||||
|                                             <label for="config">OS</label> | ||||
|                                             <select name="config" id=""> | ||||
|                                                 {% for template in templates %} | ||||
|                                                     <option value="{{template.id}}">{{template.name}} </option> | ||||
|                                                 {% endfor %} | ||||
|                                             </select> | ||||
|                                         </div> | ||||
|                                         <input type="hidden" name="total"> | ||||
|                                         <!--<div class="description check-ip"> | ||||
|                                             <input type="checkbox" name="ipv6"> Ipv6 Only<br> | ||||
|                                         </div>--> | ||||
|                                             <div class="form-group"> | ||||
|                                                 <div class="description input justify-center"> | ||||
|                                                 <label for="name" class="control-label">{% trans "Name"%}</label> | ||||
|                                                 <input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required> | ||||
|                                                 </div> | ||||
|                                                 <div class="help-block with-errors"> | ||||
|                                                     {% for message in messages %} | ||||
|                                                         {% if 'name' in message.tags %} | ||||
|                                                             <ul class="list-unstyled"><li> | ||||
|                                                                 {{ message|safe }} | ||||
|                                                             </li></ul> | ||||
|                                                         {% endif %} | ||||
|                                                     {% endfor %} | ||||
|                                                 </div> | ||||
|                                             </div> | ||||
|                                             <div class="form-group"> | ||||
|                                                 <div class="description input justify-center"> | ||||
|                                                 <label for="email" class="control-label">{% trans "Email"%}</label> | ||||
|                                                 <input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required> | ||||
|                                                 </div> | ||||
|                                                 <div class="help-block with-errors"> | ||||
|                                                     {% for message in messages %} | ||||
|                                                         {% if 'email' in message.tags %} | ||||
|                                                              <ul class="list-unstyled"><li> | ||||
|                                                                 {{ message|safe }} | ||||
|                                                             </li></ul> | ||||
|                                                         {% endif %} | ||||
|                                                     {% endfor %} | ||||
|                                                 </div> | ||||
|                                             </div> | ||||
|                                     </div> | ||||
|                                     <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input> | ||||
|                                 </form> | ||||
|                             {% include "datacenterlight/calculator_form.html" %} | ||||
|                             </div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|  | @ -249,6 +156,4 @@ | |||
|     </div> | ||||
|      | ||||
|     <!-- End Why Data Center Light? --> | ||||
| 
 | ||||
|   | ||||
| {% endblock %} | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue