From 47d882d1fc70395f8e8148a4a972c4e8ae9089ac Mon Sep 17 00:00:00 2001
From: "M.Ravi" <mondi.ravi@gmail.com>
Date: Sun, 11 Jun 2017 16:29:24 +0530
Subject: [PATCH] Moved the calculator to the index.html template

---
 .../templates/datacenterlight/index.html      | 140 +++++++++++++-----
 1 file changed, 102 insertions(+), 38 deletions(-)

diff --git a/datacenterlight/templates/datacenterlight/index.html b/datacenterlight/templates/datacenterlight/index.html
index ee2a6ac8..073ab81d 100755
--- a/datacenterlight/templates/datacenterlight/index.html
+++ b/datacenterlight/templates/datacenterlight/index.html
@@ -238,31 +238,69 @@
                 </div>
 
                 <div class="col-xs-12 col-md-6 hero-feature">
-                    <div class="card">
-                        <div class="caption">
-                            <div class="title">
-                               <h3>{% trans "VM hosting" %} </h3> 
+                    <div class="price-calc-section-landing">
+                        <div class="card">
+                            <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
+                            <div class="caption">
+                                <form id="order_form" method="POST" action="">
+                                    {% csrf_token %}
+                                    <div class="title">
+                                       <h3>{% trans "VM hosting" %} </h3>
+                                    </div>
+                                    <div class="price">
+                                        <span id="total">15</span>
+                                        <span>CHF</span>
+                                    </div>
+                                    <div class="descriptions">
+                                        <div class="description">
+                                            <p>{% trans "Hosted in Switzerland" %}</p>
+                                        </div>
+                                        <div class="description">
+                                            <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
+                                            <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>
+                                        </div>
+                                        <div class="description">
+                                            <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
+                                            <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>
+                                        </div>
+                                        <div class="description">
+                                            <i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
+                                            <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>
+                                        </div>
+                                        <div class="description select-configuration input">
+                                            <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="description input">
+                                            <label for="name">Name</label>
+                                            <input type="text" name="name" placeholder="Your Name">
+                                        </div>
+                                        <div class="description input">
+                                            <label for="email">Email</label>
+                                            <input type="email" name="email" placeholder="Your Email">
+                                        </div>
+                                    </div>
+                                    <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
+                                </form>
                             </div>
-                          <div class="price">
-                              <span>15 CHF/month</span>
-                          </div>
-                          <div class="descriptions">
-                              <div class="description">
-                                <p>{% trans "Based in Switzerland" %}</p>
-                              </div>
-                              <div class="description">
-                                <p>1 Core, </p>
-                              </div>
-                              <div class="description">
-                                <p>2 GB RAM, </p>
-                              </div>
-                              <div class="description">
-                                <p>{% trans "10 GB Storage (SSD)" %}</p>
-                              </div>
-                          </div>
-						  <a href="{% url 'datacenterlight:order' %}" class="btn btn-primary">{% trans "Order Now!" %}</a>
-                      </div>
-                      <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
+                            <div>
+                                <div id="error_message_box" class="error-message-box"></div>
+                            </div>
+                        </div>
                     </div>
 
                 </div>
@@ -366,22 +404,48 @@
 
     <!-- jQuery -->
     <script src="{% static 'datacenterlight/js/jquery.js' %}"></script>
-
-<script type="text/javascript">
-      window.onload=function(){
-        $('.selectpicker').selectpicker({
-             style: 'btn-link',
-             windowPadding: 10,
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $.validator.setDefaults({
+                ignore: []
+            });
+            $('#order_form').validate({
+                wrapper: 'div',
+                errorLabelContainer: "#error_message_box",
+                rules: {
+                    name: {
+                        required: true,
+                        minlength: 3
+                    },
+                    email: {
+                        required: true,
+                        email: true
+                    }
+                },
+                messages: {
+                    name: "Please enter your name",
+                    email: "Please enter a valid email address"
+                },
+                submitHandler: function (form) {
+                    return true;
+                }
+            });
         });
 
-  		$.ajax({
-	        url: "{% url 'datacenterlight:beta_access' %}",
-				context: document.body
-			}).done(function(response) {
-				$('#beta_access_form').html(response);
-			});
-       };
-</script>
+        window.onload=function(){
+          $('.selectpicker').selectpicker({
+               style: 'btn-link',
+               windowPadding: 10,
+          });
+          $.ajax({
+            url: "{% url 'datacenterlight:beta_access' %}",
+                context: document.body
+            }).done(function(response) {
+                $('#beta_access_form').html(response);
+          });
+        };
+    </script>
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>