From 98f094e5b850daa09b8575670eee6ce3cfd6812b Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Tue, 19 Sep 2017 15:03:06 +0530 Subject: [PATCH 01/19] initial changes --- hosting/static/hosting/css/order.css | 2 +- hosting/static/hosting/img/icon-pdf.svg | 18 ++ hosting/static/hosting/img/icon-print.svg | 17 ++ .../hosting/includes/_navbar_user.html | 6 +- hosting/templates/hosting/order_detail.html | 287 +++++++++--------- hosting/urls.py | 3 +- 6 files changed, 180 insertions(+), 153 deletions(-) create mode 100644 hosting/static/hosting/img/icon-pdf.svg create mode 100644 hosting/static/hosting/img/icon-print.svg diff --git a/hosting/static/hosting/css/order.css b/hosting/static/hosting/css/order.css index e8bc0328..f2f7993b 100644 --- a/hosting/static/hosting/css/order.css +++ b/hosting/static/hosting/css/order.css @@ -1,4 +1,4 @@ -.order-detail-container {padding-top: 70px; padding-bottom: 70px; margin-bottom: 70px;} +.order-detail-container {padding-top: 70px;padding-bottom: 70px;/* margin-bottom: 70px; */max-width: 720px;margin: 0 auto;} .order-detail-container .invoice-title h2, .invoice-title h3 { display: inline-block; diff --git a/hosting/static/hosting/img/icon-pdf.svg b/hosting/static/hosting/img/icon-pdf.svg new file mode 100644 index 00000000..20fc9c48 --- /dev/null +++ b/hosting/static/hosting/img/icon-pdf.svg @@ -0,0 +1,18 @@ + + + + icon-pdf + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/hosting/static/hosting/img/icon-print.svg b/hosting/static/hosting/img/icon-print.svg new file mode 100644 index 00000000..e440f326 --- /dev/null +++ b/hosting/static/hosting/img/icon-print.svg @@ -0,0 +1,17 @@ + + + + 54471 + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/hosting/templates/hosting/includes/_navbar_user.html b/hosting/templates/hosting/includes/_navbar_user.html index d06477ca..126dd1e6 100644 --- a/hosting/templates/hosting/includes/_navbar_user.html +++ b/hosting/templates/hosting/includes/_navbar_user.html @@ -37,11 +37,7 @@
  • {% get_current_language as LANGUAGE_CODE %} - {% if LANGUAGE_CODE == 'en-us'%} -   Deutsch - {% else %} -   English - {% endif %} +
    • diff --git a/hosting/templates/hosting/order_detail.html b/hosting/templates/hosting/order_detail.html index 39c59808..f07aa998 100644 --- a/hosting/templates/hosting/order_detail.html +++ b/hosting/templates/hosting/order_detail.html @@ -7,168 +7,163 @@
    {% if messages %} -
    -
    -
    -
    - {% for message in messages %} - {{ message }} - {% endfor %} -
    +
    + {% for message in messages %} + {{ message }} + {% endfor %}
    -
    {% endif %} {% if not error %} -
    -
    -
    -

    {{page_header_text}}

    -

    - {% if order %} - {% trans "Order #"%} {{order.id}} - {% endif %} -

    -
    -
    -
    -
    -
    - {% trans "Date"%}:
    - - {% if order %} - {{order.created_at|date:'Y-m-d H:i'}} - {% else %} - {% now "Y-m-d H:i" %} - {% endif %} -

    +
    +
    +
    +

    {{page_header_text}}

    +

    {% if order %} - {% trans "Status:"%}
    - {% if order.status == 'Approved' %} - - {% trans "Approved" %} - - {% else %} - - {% trans "Declined" %} - + {% trans "Order #"%} {{order.id}} {% endif %} -

    - {% endif %} -

    + +
    +
    +
    +
    +
    + {% trans "Date"%}:
    + + {% if order %} + {{order.created_at|date:'Y-m-d H:i'}} + {% else %} + {% now "Y-m-d H:i" %} + {% endif %} +

    + {% if order %} + {% trans "Status:"%}
    + {% if order.status == 'Approved' %} + + {% trans "Approved" %} + + {% else %} + + {% trans "Declined" %} + + {% endif %} +

    + {% endif %} +
    + +
    +
    +
    +

    {% trans "Billed To:"%}

    + {% if order %} + {{user.name}}
    + {{order.billing_address.street_address}},{{order.billing_address.postal_code}}
    + {{order.billing_address.city}}, + {{order.billing_address.country}}. + {% else %} + {% with request.session.billing_address_data as billing_address %} + {{billing_address.cardholder_name}}
    + {{billing_address.street_address}}, + {{billing_address.postal_code}}
    + {{billing_address.city}}, + {{billing_address.country}}. + {% endwith %} + {% endif %} +
    +
    -
    -
    -

    {% trans "Billed To:"%}

    - {% if order %} - {{user.name}}
    - {{order.billing_address.street_address}},{{order.billing_address.postal_code}}
    - {{order.billing_address.city}}, - {{order.billing_address.country}}. - {% else %} - {% with request.session.billing_address_data as billing_address %} - {{billing_address|get_value_from_dict:'cardholder_name'}}
    - {{billing_address|get_value_from_dict:'street_address'}}, - {{billing_address|get_value_from_dict:'postal_code'}}
    - {{billing_address|get_value_from_dict:'city'}}, - {{billing_address|get_value_from_dict:'country'}}. - {% endwith %} - {% endif %} -
    -
    - -
    -
    -
    -
    - {% trans "Payment Method:"%}
    - {% if order %} - {{order.cc_brand}} {% trans "ending in" %} **** - {{order.last4}}
    - {{user.email}} - {% else %} - {{cc_brand}} {% trans "ending in" %} **** - {{cc_last4}}
    - {{request.session.user.email}} - {% endif %} -
    +
    +
    +
    + {% trans "Payment Method:"%}
    + {% if order %} + {{order.cc_brand}} {% trans "ending in" %} **** + {{order.last4}}
    + {{user.email}} + {% else %} + {{cc_brand}} {% trans "ending in" %} **** + {{cc_last4}}
    + {{request.session.user.email}} + {% endif %} +
    +
    -
    -
    -
    -

    {% trans "Order summary"%}

    -
    -
    - {% if request.session.specs %} - {% with request.session.specs as vm %} -

    {% trans "Cores"%} - {{vm.cpu}} -

    +
    +
    +

    {% trans "Order summary"%}

    -

    {% trans "Memory"%} - {{vm.memory}} GB -

    -
    -

    {% trans "Disk space"%} - {{vm.disk_size}} GB -

    -
    -

    {% trans "Configuration"%} - {{request.session.template.name}} -

    -
    -

    {% trans "Total"%} -

    - {{vm.price}} CHF - /{% trans "Month" %} - +

    + {% if request.session.specs %} + {% with request.session.specs as vm %} +

    {% trans "Cores"%} + {{vm.cpu}}

    -

    - {% endwith %} - {% else %} -

    {% trans "Cores"%} - {{vm.cores}} -

    -
    -

    {% trans "Memory"%} - {{vm.memory}} GB -

    -
    -

    {% trans "Disk space"%} - {{vm.disk_size}} GB -

    -
    -

    {% trans "Total"%}

    {{vm.price}} - CHF /{% trans "Month" %} -

    +
    +

    {% trans "Memory"%} + {{vm.memory}} GB +

    +
    +

    {% trans "Disk space"%} + {{vm.disk_size}} GB +

    +
    +

    {% trans "Configuration"%} + {{request.session.template.name}} +

    +
    +

    {% trans "Total"%} +

    + {{vm.price}} CHF + /{% trans "Month" %} + +

    +

    + {% endwith %} + {% else %} +

    {% trans "Cores"%} + {{vm.cores}} +

    +
    +

    {% trans "Memory"%} + {{vm.memory}} GB +

    +
    +

    {% trans "Disk space"%} + {{vm.disk_size}} GB +

    +
    +

    {% trans "Total"%}

    {{vm.price}} + CHF /{% trans "Month" %} +

    + {% endif %} +
    +
    + {% if not order %} +
    + {% csrf_token %} +
    +
    +

    {% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.

    +
    +
    + +
    +
    +
    {% endif %}
    -
    - {% if not order %} -
    - {% csrf_token %} -
    -
    -

    {% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.

    -
    -
    - -
    -
    -
    - {% endif %}
    -
    {% endif %}
    diff --git a/hosting/urls.py b/hosting/urls.py index 2868c717..bc14c3a6 100644 --- a/hosting/urls.py +++ b/hosting/urls.py @@ -9,9 +9,10 @@ from .views import ( HostingPricingView, CreateVirtualMachinesView, HostingBillListView, HostingBillDetailView, SSHKeyDeleteView, SSHKeyCreateView, SSHKeyListView, SSHKeyChoiceView, DashboardView, SettingsView) - +from django.views.generic import TemplateView urlpatterns = [ + url(r'test/?$', TemplateView.as_view(template_name='hosting/order_detail.html')), url(r'index/?$', IndexView.as_view(), name='index'), url(r'django/?$', DjangoHostingView.as_view(), name='djangohosting'), url(r'dashboard/?$', DashboardView.as_view(), name='dashboard'), From 37017dd31ad0adafda7a59106c3789f15c192ce3 Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Wed, 20 Sep 2017 23:06:51 +0530 Subject: [PATCH 02/19] minor mods --- hosting/static/hosting/css/order.css | 7 +- hosting/templates/hosting/order_detail.html | 290 ++++++++++---------- 2 files changed, 148 insertions(+), 149 deletions(-) diff --git a/hosting/static/hosting/css/order.css b/hosting/static/hosting/css/order.css index f2f7993b..bdd124c9 100644 --- a/hosting/static/hosting/css/order.css +++ b/hosting/static/hosting/css/order.css @@ -1,4 +1,9 @@ -.order-detail-container {padding-top: 70px;padding-bottom: 70px;/* margin-bottom: 70px; */max-width: 720px;margin: 0 auto;} +.order-detail-container { + max-width: 600px; + margin: 100px auto; + border: 1px solid #ccc; + padding: 30px; +} .order-detail-container .invoice-title h2, .invoice-title h3 { display: inline-block; diff --git a/hosting/templates/hosting/order_detail.html b/hosting/templates/hosting/order_detail.html index f07aa998..3d1ffd35 100644 --- a/hosting/templates/hosting/order_detail.html +++ b/hosting/templates/hosting/order_detail.html @@ -9,161 +9,155 @@ {% if messages %}
    {% for message in messages %} - {{ message }} + {{ message }} {% endfor %}
    {% endif %} {% if not error %} -
    -
    -
    -

    {{page_header_text}}

    -

    - {% if order %} - {% trans "Order #"%} {{order.id}} - {% endif %} -

    -
    -
    -
    -
    -
    - {% trans "Date"%}:
    - - {% if order %} - {{order.created_at|date:'Y-m-d H:i'}} - {% else %} - {% now "Y-m-d H:i" %} - {% endif %} -

    - {% if order %} - {% trans "Status:"%}
    - {% if order.status == 'Approved' %} - - {% trans "Approved" %} - - {% else %} - - {% trans "Declined" %} - - {% endif %} -

    - {% endif %} -
    - -
    -
    -
    -

    {% trans "Billed To:"%}

    - {% if order %} - {{user.name}}
    - {{order.billing_address.street_address}},{{order.billing_address.postal_code}}
    - {{order.billing_address.city}}, - {{order.billing_address.country}}. - {% else %} - {% with request.session.billing_address_data as billing_address %} - {{billing_address.cardholder_name}}
    - {{billing_address.street_address}}, - {{billing_address.postal_code}}
    - {{billing_address.city}}, - {{billing_address.country}}. - {% endwith %} - {% endif %} -
    -
    - -
    -
    -
    -
    - {% trans "Payment Method:"%}
    - {% if order %} - {{order.cc_brand}} {% trans "ending in" %} **** - {{order.last4}}
    - {{user.email}} - {% else %} - {{cc_brand}} {% trans "ending in" %} **** - {{cc_last4}}
    - {{request.session.user.email}} - {% endif %} -
    -
    -
    -
    -
    - -
    -
    -

    {% trans "Order summary"%}

    -
    -
    - {% if request.session.specs %} - {% with request.session.specs as vm %} -

    {% trans "Cores"%} - {{vm.cpu}} -

    -
    -

    {% trans "Memory"%} - {{vm.memory}} GB -

    -
    -

    {% trans "Disk space"%} - {{vm.disk_size}} GB -

    -
    -

    {% trans "Configuration"%} - {{request.session.template.name}} -

    -
    -

    {% trans "Total"%} -

    - {{vm.price}} CHF - /{% trans "Month" %} - -

    -

    - {% endwith %} - {% else %} -

    {% trans "Cores"%} - {{vm.cores}} -

    -
    -

    {% trans "Memory"%} - {{vm.memory}} GB -

    -
    -

    {% trans "Disk space"%} - {{vm.disk_size}} GB -

    -
    -

    {% trans "Total"%}

    {{vm.price}} - CHF /{% trans "Month" %} -

    - {% endif %} -
    -
    - {% if not order %} -
    - {% csrf_token %} -
    -
    -

    {% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.

    -
    -
    - -
    -
    -
    +

    + {% blocktrans %}{{page_header_text|default:'Invoice'}}{% endblocktrans %} +

    +
    +

    + {% if order %} + {% trans "Order #"%} {{order.id}} {% endif %} +

    +
    +
    +
    +
    +
    + {% trans "Date"%}:
    + + {% if order %} + {{order.created_at|date:'Y-m-d H:i'}} + {% else %} + {% now "Y-m-d H:i" %} + {% endif %} +

    + {% if order %} + {% trans "Status:"%}
    + {% if order.status == 'Approved' %} + + {% trans "Approved" %} + + {% else %} + + {% trans "Declined" %} + + {% endif %} +

    + {% endif %} +
    + +
    +
    +
    +

    {% trans "Billed To:"%}

    + {% if order %} + {{user.name}}
    + {{order.billing_address.street_address}},{{order.billing_address.postal_code}}
    + {{order.billing_address.city}}, + {{order.billing_address.country}}. + {% else %} + {% with request.session.billing_address_data as billing_address %} + {{billing_address.cardholder_name}}
    + {{billing_address.street_address}}, + {{billing_address.postal_code}}
    + {{billing_address.city}}, + {{billing_address.country}}. + {% endwith %} + {% endif %} +
    +
    + +
    +
    +
    +
    + {% trans "Payment Method:"%}
    + {% if order %} + {{order.cc_brand}} {% trans "ending in" %} **** + {{order.last4}}
    + {{user.email}} + {% else %} + {{cc_brand}} {% trans "ending in" %} **** + {{cc_last4}}
    + {{request.session.user.email}} + {% endif %} +
    + +

    {% trans "Order summary"%}

    +
    +
    + {% if request.session.specs %} + {% with request.session.specs as vm %} +

    {% trans "Cores"%} + {{vm.cpu}} +

    +
    +

    {% trans "Memory"%} + {{vm.memory}} GB +

    +
    +

    {% trans "Disk space"%} + {{vm.disk_size}} GB +

    +
    +

    {% trans "Configuration"%} + {{request.session.template.name}} +

    +
    +

    {% trans "Total"%} +

    + {{vm.price}} CHF + /{% trans "Month" %} + +

    +

    + {% endwith %} + {% else %} +

    {% trans "Cores"%} + {{vm.cores}} +

    +
    +

    {% trans "Memory"%} + {{vm.memory}} GB +

    +
    +

    {% trans "Disk space"%} + {{vm.disk_size}} GB +

    +
    +

    {% trans "Total"%}

    {{vm.price}} + CHF /{% trans "Month" %} +

    + {% endif %} +
    +
    + {% if not order %} +
    + {% csrf_token %} +
    +
    +

    {% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.

    +
    +
    + +
    +
    +
    + {% endif %} {% endif %}
    From 98eb2f85d8913d36733467eedea0f1dce9ed50df Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Thu, 21 Sep 2017 01:19:38 +0530 Subject: [PATCH 03/19] printing pdf --- hosting/static/hosting/css/order.css | 16 + hosting/static/hosting/js/html2pdf.js | 387 ++++++++++++++++++++ hosting/templates/hosting/order_detail.html | 27 +- 3 files changed, 421 insertions(+), 9 deletions(-) create mode 100644 hosting/static/hosting/js/html2pdf.js diff --git a/hosting/static/hosting/css/order.css b/hosting/static/hosting/css/order.css index bdd124c9..3e916cdd 100644 --- a/hosting/static/hosting/css/order.css +++ b/hosting/static/hosting/css/order.css @@ -20,3 +20,19 @@ .order-detail-container .table > tbody > tr > .thick-line { border-top: 2px solid; } + +.order-detail-container .dashboard-title-thin { + margin-top: 0; +} + +.order-detail-container .dashboard-title-thin .un-icon { + margin-top: -6px; +} + +.order-detail-container .dashboard-title-thin .svg-img { + height: 20px; + margin-right: 5px; + margin-top: -2px; + width: 20px; + margin-top: -6px; +} \ No newline at end of file diff --git a/hosting/static/hosting/js/html2pdf.js b/hosting/static/hosting/js/html2pdf.js new file mode 100644 index 00000000..45ae5b0c --- /dev/null +++ b/hosting/static/hosting/js/html2pdf.js @@ -0,0 +1,387 @@ +/** + * @license + * + * MIT License + * + * Copyright (c) 2017 Erik Koopmans + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +/** + * Generate a PDF from an HTML element or string using html2canvas and jsPDF. + * + * @param {Element|string} source The source element or HTML string. + * @param {Object=} opt An object of optional settings: 'margin', 'filename', + * 'image' ('type' and 'quality'), and 'html2canvas' / 'jspdf', which are + * sent as settings to their corresponding functions. + */ +var html2pdf = (function(html2canvas, jsPDF) { + + /* ---------- MAIN FUNCTION ---------- */ + + var html2pdf = function(source, opt) { + // Handle input. + opt = objType(opt) === 'object' ? opt : {}; + var source = html2pdf.parseInput(source, opt); + + // Determine the PDF page size. + var pageSize = jsPDF.getPageSize(opt.jsPDF); + pageSize.inner = { + width: pageSize.width - opt.margin[1] - opt.margin[3], + height: pageSize.height - opt.margin[0] - opt.margin[2] + }; + pageSize.inner.ratio = pageSize.inner.height / pageSize.inner.width; + + // Copy the source element into a PDF-styled container div. + var container = html2pdf.makeContainer(source, pageSize); + var overlay = container.parentElement; + + // Get the locations of all hyperlinks. + if (opt.enableLinks) { + // Find all anchor tags and get the container's bounds for reference. + opt.links = []; + var links = container.querySelectorAll('a'); + var containerRect = unitConvert(container.getBoundingClientRect(), pageSize.k); + + // Treat each client rect as a separate link (for text-wrapping). + Array.prototype.forEach.call(links, function(link) { + var clientRects = link.getClientRects(); + for (var i=0; i