add calculator placeholder to cms_integration

datacenterlight/cms_models.py

@@ -26,6 +26,10 @@ class CMSIntegration(models.Model):
     navbar_placeholder = PlaceholderField(
         'datacenterlight_navbar', related_name='dcl-navbar-placeholder+'
     )
+    calculator_placeholder = PlaceholderField(
+        'datacenterlight_calculator',
+        related_name='dcl-calculator-placeholder+'
+    )
     domain = models.ForeignKey(Site, null=True, blank=True)
 
     class Meta:
@@ -288,7 +292,7 @@ class DCLSectionPromoPluginModel(CMSPlugin):
         return extra_classes
 
 
-class DCLCustomPricingModel(CMSPlugin):
+class DCLCalculatorPluginModel(CMSPlugin):
     pricing = models.ForeignKey(
         VMPricing,
         related_name="dcl_custom_pricing_vm_pricing",

datacenterlight/cms_plugins.py

@@ -1,3 +1,4 @@
+from cms.models.pluginmodel import CMSPlugin
 from cms.plugin_base import CMSPluginBase
 from cms.plugin_pool import plugin_pool
 
@@ -6,7 +7,7 @@ from .cms_models import (
     DCLFooterPluginModel, DCLLinkPluginModel, DCLNavbarDropdownPluginModel,
     DCLSectionIconPluginModel, DCLSectionImagePluginModel,
     DCLSectionPluginModel, DCLNavbarPluginModel,
-    DCLSectionPromoPluginModel, DCLCustomPricingModel
+    DCLSectionPromoPluginModel, DCLCalculatorPluginModel
 )
 from .models import VMTemplate, VMPricing
 
@@ -21,7 +22,7 @@ class DCLSectionPlugin(CMSPluginBase):
     allow_children = True
     child_classes = [
         'DCLSectionIconPlugin', 'DCLSectionImagePlugin',
-        'DCLSectionPromoPlugin', 'UngleichHTMLPlugin'
+        'DCLSectionPromoPlugin', 'UngleichHTMLPlugin', 'DCLCalculatorPlugin'
     ]
 
     def render(self, context, instance, placeholder):
@@ -30,14 +31,18 @@ class DCLSectionPlugin(CMSPluginBase):
         )
         context['children_to_side'] = []
         context['children_to_content'] = []
+        context['children_calculator'] = []
         if instance.child_plugin_instances is not None:
             right_children = [
                 'DCLSectionImagePluginModel',
-                'DCLSectionIconPluginModel'
+                'DCLSectionIconPluginModel',
             ]
             for child in instance.child_plugin_instances:
+                print(child.__dict__)
                 if child.__class__.__name__ in right_children:
                     context['children_to_side'].append(child)
+                elif child.__class__.__name__ == 'CMSPlugin':
+                    context['children_calculator'].append(child)
                 else:
                     context['children_to_content'].append(child)
         return context
@@ -75,50 +80,42 @@ class DCLSectionPromoPlugin(CMSPluginBase):
 @plugin_pool.register_plugin
 class DCLCalculatorPlugin(CMSPluginBase):
     module = "Datacenterlight"
-    name = "DCL Calculator Section Plugin"
+    name = "DCL Calculator Plugin"
-    model = DCLSectionPluginModel
+    model = DCLCalculatorPluginModel
     render_template = "datacenterlight/cms/calculator.html"
     cache = False
-    allow_children = True
+    require_parent = True
-    child_classes = [
-        'DCLSectionPromoPlugin', 'UngleichHTMLPlugin', 'DCLCustomPricingPlugin'
-    ]
 
     def render(self, context, instance, placeholder):
         context = super(DCLCalculatorPlugin, self).render(
             context, instance, placeholder
         )
         context['templates'] = VMTemplate.objects.all()
-        context['children_to_content'] = []
+    #     pricing_plugin_model = None
-        pricing_plugin_model = None
+    #     if instance.child_plugin_instances is not None:
-        if instance.child_plugin_instances is not None:
+    #         for child in instance.child_plugin_instances:
-            context['children_to_content'].extend(
+    #             if child.__class__.__name__ == 'DCLCustomPricingModel':
-                instance.child_plugin_instances
+    #                 # The second clause is just to make sure we pick up the
-            )
+    #                 # most recent CustomPricing, if more than one is present
-            for child in instance.child_plugin_instances:
+    #                 if (pricing_plugin_model is None or child.pricing_id >
-                if child.__class__.__name__ == 'DCLCustomPricingModel':
+    #                         pricing_plugin_model.model.pricing_id):
-                    # The second clause is just to make sure we pick up the
+    #                     pricing_plugin_model = child
-                    # most recent CustomPricing, if more than one is present
-                    if (pricing_plugin_model is None or child.pricing_id >
-                            pricing_plugin_model.model.pricing_id):
-                        pricing_plugin_model = child
-
-        if pricing_plugin_model:
-            context['vm_pricing'] = VMPricing.get_vm_pricing_by_name(
-                name=pricing_plugin_model.pricing.name
-            )
-        else:
-            context['vm_pricing'] = VMPricing.get_default_pricing()
 
+    #     if pricing_plugin_model:
+    #         context['vm_pricing'] = VMPricing.get_vm_pricing_by_name(
+    #             name=pricing_plugin_model.pricing.name
+    #         )
+    #     else:
+    #         context['vm_pricing'] = VMPricing.get_default_pricing()
         return context
 
 
-@plugin_pool.register_plugin
+# @plugin_pool.register_plugin
-class DCLCustomPricingPlugin(CMSPluginBase):
+# class DCLCustomPricingPlugin(CMSPluginBase):
-    module = "Datacenterlight"
+#     module = "Datacenterlight"
-    name = "DCL Custom Pricing Plugin"
+#     name = "DCL Custom Pricing Plugin"
-    model = DCLCustomPricingModel
+#     model = DCLCustomPricingModel
-    render_plugin = False
+#     render_plugin = False
 
 
 @plugin_pool.register_plugin

datacenterlight/migrations/0021_cmsintegration_calculator_placeholder.py

@@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2018-04-25 09:20
+from __future__ import unicode_literals
+
+import cms.models.fields
+from django.db import migrations
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('datacenterlight', '0020_merge'),
+        ('cms', '0014_auto_20160404_1908'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='cmsintegration',
+            name='calculator_placeholder',
+            field=cms.models.fields.PlaceholderField(editable=False, null=True, on_delete=django.db.models.deletion.CASCADE,
+                                                     related_name='dcl-calculator-placeholder+', slotname='datacenterlight_calculator', to='cms.Placeholder'),
+        ),
+        migrations.RenameModel(
+            old_name='DCLCustomPricingModel',
+            new_name='DCLCalculatorPluginModel',
+        ),
+    ]

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -776,7 +776,7 @@ textarea {
   width: 100%;
   margin: 0 auto;
   background: #fff;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.15);
   padding-bottom: 40px;
   border-radius: 7px;
   text-align: center;
@@ -929,7 +929,7 @@ textarea {
 }
 
 
-@media(max-width:991px) {
+@media(max-width:767px) {
   .section-sm-center .split-text,
   .section-sm-center .space {
     text-align: center !important;

datacenterlight/templates/datacenterlight/cms/calculator.html

@@ -1,16 +1,5 @@
-<div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
-  <div class="container">
-    <div class="row">
-      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %} split-text">
-        {% include "datacenterlight/cms/includes/_section_split_content.html" %}
-      </div>
-      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}">
 <div class="price-calc-section">
   <div class="card">
-            {% include "datacenterlight/includes/_calculator_form.html" %}
+    {% include "datacenterlight/includes/_calculator_form.html" with vm_pricing=instance.pricing %}
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </div>

datacenterlight/templates/datacenterlight/cms/section.html

@@ -2,17 +2,24 @@
 
 <section class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
   <div class="container">
-    {% if children_to_side|length %}
+    {% if children_to_side|length or children_calculator|length %}
       <div class="row">
         <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %} split-text">
           {% include "datacenterlight/cms/includes/_section_split_content.html" %}
         </div>
         <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %} split-figure">
+          {% if children_calculator|length %}
+            {% for plugin in children_calculator %}
+              {% render_plugin plugin %}
+            {% endfor %}
+          {% endif %}
+          {% if children_to_side %}
             <div class="section-figure">
               {% for plugin in children_to_side %}
                 {% render_plugin plugin %}
               {% endfor %}
             </div>
+          {% endif %}
         </div>
       </div>
     {% else %}

datacenterlight/templates/datacenterlight/includes/_calculator_form.html

@@ -17,7 +17,7 @@
         <h3>{% trans "VM hosting" %} </h3>
     </div>
     <div class="price">
-        <span id="total">15</span>
+        <span id="total"></span>
         <span>CHF/{% trans "month" %}</span>
         {% if vm_pricing.vat_inclusive %}
         <div class="price-text">

dynamicweb/settings/base.py

@@ -352,6 +352,18 @@ CMS_PLACEHOLDER_CONF = {
             },
         ]
     },
+    'datacenterlight_calculator': {
+        'name': _('Datacenterlight Calculator'),
+        'plugins': ['DCLCalculatorPlugin'],
+        'default_plugins': [
+            {
+                'plugin_type': 'DCLCalculatorPlugin',
+                'values': {
+                    'pricing_id': 1
+                },
+            },
+        ]
+    },
 }
 
 CMS_PERMISSION = True

hosting/static/hosting/css/price_calculator.css

@@ -1,7 +1,7 @@
 /* Create VM calculator */
 
 .price-calc-section {
-    padding: 80px 40px !important;
+    padding: 20px 0 !important;
 }
 
 @media (max-width: 768px) {
@@ -40,7 +40,7 @@
 }
 
 .price-calc-section .card {
-    width: 50%;
+    /* width: 50%; */
     margin: 0 auto;
     background: #fff;
     box-shadow: 1px 3px 6px 2px rgba(0, 0, 0, 0.2);
@@ -52,7 +52,7 @@
 
 @media (min-width: 768px) {
     .price-calc-section .card {
-        margin-left: 0;
+        /* margin-left: 0; */
     }
 }
 

hosting/static/hosting/js/initial.js

@@ -153,4 +153,84 @@ $( document ).ready(function() {
             $('.navbar-fixed-top.topnav').css('padding-right', topnavPadding-scrollbarWidth);
         }
     });
+
+    /* ---------------------------------------------
+     Scripts initialization
+     --------------------------------------------- */
+    var cardPricing = {
+        'cpu': {
+            'id': 'coreValue',
+            'value': 1,
+            'min': 1,
+            'max': 48,
+            'interval': 1
+        },
+        'ram': {
+            'id': 'ramValue',
+            'value': 2,
+            'min': 1,
+            'max': 200,
+            'interval': 1
+        },
+        'storage': {
+            'id': 'storageValue',
+            'value': 10,
+            'min': 10,
+            'max': 2000,
+            'interval': 10
+        }
+    };
+
+    function _initPricing() {
+        _fetchPricing();
+
+        $('.fa-minus-circle.left').click(function(event) {
+            var data = $(this).data('minus');
+
+            if (cardPricing[data].value > cardPricing[data].min) {
+                cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval;
+            }
+            _fetchPricing();
+        });
+        $('.fa-plus-circle.right').click(function(event) {
+            var data = $(this).data('plus');
+            if (cardPricing[data].value < cardPricing[data].max) {
+                cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval;
+            }
+            _fetchPricing();
+        });
+
+        $('.input-price').change(function() {
+            var data = $(this).attr("name");
+            cardPricing[data].value = $('input[name=' + data + ']').val();
+            _fetchPricing();
+        });
+    }
+
+    function _fetchPricing() {
+        Object.keys(cardPricing).map(function(element) {
+            $('input[name=' + element + ']').val(cardPricing[element].value);
+        });
+        _calcPricing();
+    }
+
+    function _calcPricing() {
+        if(typeof window.coresUnitPrice === 'undefined'){
+            window.coresUnitPrice = 5;
+        }
+        if(typeof window.ramUnitPrice === 'undefined'){
+            window.coresUnitPrice = 2;
+        }
+        if(typeof window.ssdUnitPrice === 'undefined'){
+            window.ssdUnitPrice = 0.6;
+        }
+        console.log(coresUnitPrice, ramUnitPrice, ssdUnitPrice, cardPricing)
+        var total = (cardPricing['cpu'].value * window.coresUnitPrice) +
+                    (cardPricing['ram'].value * window.ramUnitPrice) +
+                    (cardPricing['storage'].value * window.ssdUnitPrice);
+        total = parseFloat(total.toFixed(2));
+        $("#total").text(total);
+    }
+
+    _initPricing();
 });

hosting/templates/hosting/base_short.html

@@ -1,5 +1,5 @@
-{% load staticfiles bootstrap3%}
+{% load staticfiles i18n cms_tags sekizai_tags %}
-{% load i18n %}
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -29,6 +29,9 @@
     {% block css_extra %}
     {% endblock css_extra %}
 
+    {% render_block "css" postprocessor "compressor.contrib.sekizai.compress" %}
+    {% render_block "js" postprocessor "compressor.contrib.sekizai.compress" %}
+
     <!-- Custom Fonts -->
     <link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
     <link href="{% static 'datacenterlight/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
@@ -48,7 +51,7 @@
 </head>
 
 <body>
-
+    {% cms_toolbar %}
 
     {% block navbar %}
         {% include "hosting/includes/_navbar_user.html" %}

hosting/templates/hosting/create_virtual_machine.html

@@ -1,7 +1,9 @@
 {% extends "hosting/base_short.html" %}
-{% load staticfiles bootstrap3 i18n %}
+{% load staticfiles bootstrap3 i18n cms_tags %}
 
 {% block content %}
+
+
 <div class="dashboard-container create-vm-container">
     <div class="row">
         <div class="col-sm-5">
@@ -17,14 +19,8 @@
                 {% endif %}
           </div>
         </div>
-        <div class="col-sm-6">
+        <div class="col-sm-6 hosting-calculator">
-            <div class="price-calc-section no-padding">
+            {% render_placeholder cms_integration.calculator_placeholder %}
-                <div class="landing card">
-                    <div class="caption">
-                        {% include "hosting/calculator_form.html" %}
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </div>

hosting/views.py

@@ -32,6 +32,7 @@ from stored_messages.settings import stored_messages_settings
 
 from datacenterlight.models import VMTemplate
 from datacenterlight.tasks import create_vm_task
+from datacenterlight.utils import get_cms_integration
 from membership.models import CustomUser, StripeCustomer
 from opennebula_api.models import OpenNebulaManager
 from opennebula_api.serializers import (
@@ -1003,7 +1004,11 @@ class CreateVirtualMachinesView(LoginRequiredMixin, View):
 
     @method_decorator(decorators)
     def get(self, request, *args, **kwargs):
-        context = {'templates': VMTemplate.objects.all()}
+        print(get_cms_integration('default'))
+        context = {
+            'templates': VMTemplate.objects.all(),
+            'cms_integration': get_cms_integration('default'),
+        }
         return render(request, self.template_name, context)
 
     @method_decorator(decorators)