hosting calculator added
This commit is contained in:
Arvind Tiwari
parent
821f854fc9
commit
c2b5c62014
4 changed files with 334 additions and 66 deletions
|
|
@ -25,6 +25,7 @@
|
|||
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/virtual-machine.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/dashboard.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/price_calculator.css' %}" rel="stylesheet">
|
||||
{% block css_extra %}
|
||||
{% endblock css_extra %}
|
||||
|
||||
|
|
@ -33,9 +34,6 @@
|
|||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<link href="//fonts.googleapis.com/css?family=Lato:300,400,500,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="{% static 'hosting/css/owl.carousel.min.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">
|
||||
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
|
|
|
|||
123
hosting/templates/hosting/calculator_form.html
Normal file
123
hosting/templates/hosting/calculator_form.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
{% load staticfiles i18n%}
|
||||
<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="48" id="coreValue" name="cpu"
|
||||
data-error="{% trans 'Please enter a value in range 1 - 48.' %}" 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">
|
||||
{% for message in messages %}
|
||||
{% if 'cores' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
{{ message|safe }}
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</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 in range 2 - 200.' %}" 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">
|
||||
{% for message in messages %}
|
||||
{% if 'memory' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
{{ message|safe }}
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</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="2000" step="10"
|
||||
name="storage" data-error="{% trans 'Please enter a value in range 10 - 2000.' %}" 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">
|
||||
{% for message in messages %}
|
||||
{% if 'storage' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
{{ message|safe }}
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</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.opennebula_vm_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 disabled" value="{% trans 'Continue' %}"></input>
|
||||
</form>
|
||||
|
|
@ -1,70 +1,31 @@
|
|||
{% extends "hosting/base_short.html" %}
|
||||
{% load staticfiles bootstrap3 i18n %}
|
||||
{% block content %}
|
||||
<div>
|
||||
<div class="dashboard-container" >
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-12">
|
||||
<br/>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="dashboard-container-head">
|
||||
<h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/plusVM.svg' %}" class="un-icon" style="margin-top: -18px;width: 42px;height: 42px;"> {% trans "Create VM" %}</h3>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="price-calc-section no-padding">
|
||||
<div class="landing card">
|
||||
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
|
||||
<div class="caption">
|
||||
{% include "hosting/calculator_form.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% if not error %}
|
||||
<div class="dashboard-title">
|
||||
<h3>{% trans "New Virtual Machine"%} </h3>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="step-title">
|
||||
<h4>{% trans "Step 1. Select VM Template:" %} </h4>
|
||||
</div>
|
||||
<div class="parent-container">
|
||||
<div class="container-os owl-carousel owl-theme" id="containerOs">
|
||||
|
||||
{% for template in templates %}
|
||||
<div class="os-circle" data-id="{{template.id}}">
|
||||
<span class="text" >{{template.name}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<input type="hidden" name="vm_template_id">
|
||||
</div>
|
||||
<div class="step-title">
|
||||
<h4>{% trans "Step2. Select VM Configuration" %}</h4>
|
||||
</div>
|
||||
<div class="parent-container">
|
||||
<div class="container-os config owl-carousel owl-theme">
|
||||
|
||||
{% for config in configuration_options %}
|
||||
<div class="config-box" data-id="{{config.id}}" data-price="{{config.price|floatformat}}">
|
||||
<span>CORE: {{config.cpu|floatformat}}</span>
|
||||
<span>RAM: {{config.memory|floatformat}} GB</span>
|
||||
<span>SSD: {{config.disk_size|floatformat}} GB</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<input type="hidden" name="configuration">
|
||||
</div>
|
||||
<div class="container-button">
|
||||
<div class="price">
|
||||
<span class="label-price">{% trans "Price " %}<span id="priceValue">0</span>{% trans "CHF/Month" %}</span>
|
||||
</div>
|
||||
<button class="btn btn-success" >{% trans "Start VM"%} </button>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{%endblock%}
|
||||
{%endblock%}
|
||||
Loading…
Add table
Add a link
Reference in a new issue