merge master
This commit is contained in:
Arvind Tiwari
commit
3ed2399337
68 changed files with 3099 additions and 950 deletions
|
|
@ -38,7 +38,6 @@
|
|||
<![endif]-->
|
||||
|
||||
{% with 'hosting/img/'|add:hosting|add:'-intro-bg.png' as image_static %}
|
||||
alt="">
|
||||
<style media="screen" type="text/css">
|
||||
.intro-header {
|
||||
background: url("{% static image_static %}") no-repeat center center;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<link href="{% static 'hosting/css/orders.css' %}" rel="stylesheet">
|
||||
<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">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
||||
|
|
|
|||
50
hosting/templates/hosting/dashboard.html
Normal file
50
hosting/templates/hosting/dashboard.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
{% extends "hosting/base_short.html" %}
|
||||
{% load staticfiles bootstrap3 i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="hosting-dashboard">
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-container-head">
|
||||
<h1 class="dashboard-title-thin">{% trans "My Dashboard" %}</h1>
|
||||
</div>
|
||||
<div class="hosting-dashboard-content">
|
||||
<a href="{% url 'hosting:create_virtual_machine' %}" class="hosting-dashboard-item">
|
||||
<h2>{% trans "Create VM" %}</h2>
|
||||
<div class="hosting-dashboard-image">
|
||||
<img class="svg-img" src="{% static 'hosting/img/plusVM.svg' %}">
|
||||
</div>
|
||||
</a>
|
||||
<a href="{% url 'hosting:virtual_machines' %}" class="hosting-dashboard-item">
|
||||
<h2>{% trans "My VMs" %}</h2>
|
||||
<div class="hosting-dashboard-image">
|
||||
<img class="svg-img" src="{% static 'hosting/img/vm.svg' %}">
|
||||
</div>
|
||||
</a>
|
||||
<a href="{% url 'hosting:ssh_keys' %}" class="hosting-dashboard-item">
|
||||
<h2>{% trans "My SSH Keys" %}</h2>
|
||||
<div class="hosting-dashboard-image">
|
||||
<img class="svg-img" src="{% static 'hosting/img/key.svg' %}">
|
||||
</div>
|
||||
</a>
|
||||
<a href="{% url 'hosting:orders' %}" class="hosting-dashboard-item">
|
||||
<h2>{% trans "My Bills" %}</h2>
|
||||
<div class="hosting-dashboard-image">
|
||||
<img class="svg-img" src="{% static 'hosting/img/billing.svg' %}">
|
||||
</div>
|
||||
</a>
|
||||
<a href="" class="hosting-dashboard-item">
|
||||
<h2>{% trans "My Settings" %}</h2>
|
||||
<div class="hosting-dashboard-image">
|
||||
<img class="svg-img" src="{% static 'hosting/img/dashboard_settings.svg' %}">
|
||||
</div>
|
||||
</a>
|
||||
<a href="mailto:support@datacenterlight.ch" class="hosting-dashboard-item">
|
||||
<h2>{% trans "Support / Contact" %}</h2>
|
||||
<div class="hosting-dashboard-image">
|
||||
<img class="svg-img" src="{% static 'hosting/img/24-hours-support.svg' %}">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%endblock%}
|
||||
|
|
@ -3,95 +3,64 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div>
|
||||
<div class="orders-container">
|
||||
<div class="row">
|
||||
<div class="container-table col-md-8 col-md-offset-2">
|
||||
<table class="table borderless table-hover">
|
||||
<h3><i class="fa fa-credit-card fa-separate"></i>{% trans "My Orders"%}</h3>
|
||||
<br/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{% trans "Date"%}</th>
|
||||
<th>{% trans "Amount"%}</th>
|
||||
<th>{% trans "Status"%}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in orders %}
|
||||
<tr>
|
||||
<td scope="row">{{ order.id }}</td>
|
||||
<td>{{ order.created_at | date:"M d, Y" }}</td>
|
||||
<td>{{ order.price }} CHF</td>
|
||||
<td>{% if order.approved %}
|
||||
<span class="text-success strong">{% trans "Approved"%}</span>
|
||||
{% else %}
|
||||
<span class="text-danger strong">{% trans "Declined"%}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-default"
|
||||
href="{% url 'hosting:orders' order.id %}">{% trans "View Detail"%}</a>
|
||||
<button type="button" class="btn btn-default" data-toggle="modal"
|
||||
data-target="#Modal{{ order.id }}"><a
|
||||
href="#">{% trans "Cancel Order"%}</a>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<div class="modal fade" id="Modal{{ order.id }}" tabindex="-1" role="dialog"
|
||||
aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-label="Confirm"><span
|
||||
aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
|
||||
<h4 class="modal-title" id="ModalLabel">{% trans "Do you want to delete your order?"%}</h4>
|
||||
|
||||
<form method="post"
|
||||
action="{% url 'hosting:delete_order' order.id %}">
|
||||
{% csrf_token %}
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-danger">{% trans "Delete"%}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if is_paginated %}
|
||||
<div class="pagination">
|
||||
<span class="page-links">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">{% trans "previous"%}</a>
|
||||
{% endif %}
|
||||
<span class="page-current">
|
||||
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
|
||||
</span>
|
||||
{% if page_obj.has_next %}
|
||||
<a href="{{ request.path }}?page={{ page_obj.next_page_number }}">{% trans "next"%}</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-container-head">
|
||||
<h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Orders" %}</h3>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
<div class="dashboard-subtitle"></div>
|
||||
</div>
|
||||
|
||||
<table class="table table-switch">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Order Nr." %}</th>
|
||||
<th>{% trans "Date" %}</th>
|
||||
<th>{% trans "Amount" %}</th>
|
||||
<th>{% trans "Status" %}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in orders %}
|
||||
<tr>
|
||||
<td class="xs-td-inline" data-header="{% trans 'Order Nr.' %}">{{ order.id }}</td>
|
||||
<td class="xs-td-bighalf" data-header="{% trans 'Date' %}">{{ order.created_at | date:"M d, Y" }}</td>
|
||||
<td class="xs-td-smallhalf" data-header="{% trans 'Amount' %}">{{ order.price }}</td>
|
||||
<td data-header="{% trans 'Status' %}">
|
||||
{% if order.approved %}
|
||||
<span class="vm-status-active"><strong>Approved</strong></span>
|
||||
{% else %}
|
||||
<span class="vm-status-failed"><strong>Declined</strong></span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-right last-td">
|
||||
<a class="btn btn-order-detail" href="{% url 'hosting:orders' order.pk %}">{% trans 'See Invoice' %}</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if is_paginated %}
|
||||
<div class="pagination">
|
||||
<span class="page-links">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
|
||||
{% endif %}
|
||||
<span class="page-current">
|
||||
{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}.
|
||||
</span>
|
||||
{% if page_obj.has_next %}
|
||||
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -46,9 +46,9 @@
|
|||
{%trans "Total" %} <span>{%trans "including VAT" %}</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"></div>
|
||||
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-total">{{request.session.specs.price}}
|
||||
CHF
|
||||
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 tbl-total">{{request.session.specs.price}}
|
||||
CHF<span class="dcl-price-month">/{% trans "Month" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,7 +64,6 @@
|
|||
{% csrf_token %}
|
||||
{% bootstrap_field field show_label=False type='fields'%}
|
||||
{% endfor %}
|
||||
{% bootstrap_form_errors form type='non_fields'%}
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard">
|
||||
|
|
@ -91,13 +90,26 @@
|
|||
</form>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p class="card-warning-content card-warning-addtional-margin">
|
||||
{% blocktrans %}
|
||||
You are not making any payment yet. After submitting your card
|
||||
information, you will be taken to the Confirm Order Page.
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
</div>
|
||||
{% if not messages and not form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-addtional-margin">
|
||||
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<div id='payment_error'>
|
||||
{% for message in messages %}
|
||||
{% if 'failed_payment' or 'make_charge_error' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-warning-content card-warning-error">{{ message|safe }}</p>
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-error">
|
||||
{{ error|escape }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="col-xs-6 pull-right">
|
||||
<button id="payment_button_with_creditcard" class="btn btn-success stripe-payment-btn"
|
||||
|
|
@ -135,12 +147,26 @@
|
|||
<div id="card-errors" role="alert"></div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p class="card-warning-content">
|
||||
{% blocktrans %}
|
||||
You are not making any payment yet. After submitting your card
|
||||
information, you will be taken to the Confirm Order Page.
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
{% if not messages and not form.non_field_errors %}
|
||||
<p class="card-warning-content">
|
||||
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<div id='payment_error'>
|
||||
{% for message in messages %}
|
||||
{% if 'failed_payment' or 'make_charge_error' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-warning-content card-warning-error">{{ message|safe }}</p>
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for error in form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-error">
|
||||
{{ error|escape }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="col-xs-6 pull-right">
|
||||
|
|
@ -155,15 +181,6 @@
|
|||
<p class="payment-errors"></p>
|
||||
</div>
|
||||
</div>
|
||||
{% if paymentError %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p>
|
||||
{% bootstrap_alert paymentError alert_type='danger' %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{% block content %}
|
||||
<div>
|
||||
<div class="container virtual-machine-container dashboard-container ">
|
||||
<h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i> {% trans "Your SSH Keys" %}</h1>
|
||||
<h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i> {% trans "My SSH Keys" %}</h1>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<div class="modal-body">
|
||||
<div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
|
||||
<h4 class="modal-title" id="ModalLabel">{% trans "Delete SSH Key"%}</h4>
|
||||
<p class="modal-text">{% trans "Do You want to delete this key?"%}</p>
|
||||
<p class="modal-text">{% trans "Do you want to delete this key?"%}</p>
|
||||
<form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
|
||||
{% csrf_token %}
|
||||
<div class="modal-footer">
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public ssh key" %}</h4>
|
||||
<p style="margin-top: 10px;">{{ user_key.public_key }}</p>
|
||||
<h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public SSH Key" %}</h4>
|
||||
<p class="key_contain" style="margin-top: 10px;">{{ user_key.public_key }}</p>
|
||||
<div class="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,193 +3,110 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div>
|
||||
<div class="virtual-machine-container dashboard-container ">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-md-offset-2">
|
||||
<div class="col-sm-12">
|
||||
<h3><i class="fa fa-cloud fa-separate" aria-hidden="true"></i> {{virtual_machine.name}}</h3>
|
||||
<hr/>
|
||||
<div class="col-md-3"> <!-- required for floating -->
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs tabs-left sideways">
|
||||
<li class="active">
|
||||
<a href="#settings-v" data-toggle="tab">
|
||||
<i class="fa fa-cogs" aria-hidden="true"></i>
|
||||
{% trans "Settings"%}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#billing-v" data-toggle="tab">
|
||||
<i class="fa fa-money" aria-hidden="true"></i>
|
||||
{% trans "Billing"%}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#status-v" data-toggle="tab">
|
||||
<i class="fa fa-signal" aria-hidden="true"></i> {% trans "Status"%}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="settings-v">
|
||||
<div class="row">
|
||||
<div class="col-md-12 inline-headers">
|
||||
<h3>{{virtual_machine.hosting_company_name}}</h3>
|
||||
|
||||
{% if virtual_machine.ipv6 %}
|
||||
<div class="pull-right right-place">
|
||||
<button type="link"
|
||||
data-clipboard-text="{{virtual_machine.ipv4}}" id="copy_vm_id" class="to_copy btn btn-link"
|
||||
data-toggle="tooltip" data-placement="bottom" title="Copied" data-trigger="click">
|
||||
Ipv4: {{virtual_machine.ipv4}} <i class="fa fa-files-o" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="link"
|
||||
data-clipboard-text="{{virtual_machine.ipv6}}" id="copy_vm_id" class="to_copy btn btn-link"
|
||||
data-toggle="tooltip" data-placement="bottom" title="Copied" data-trigger="click">
|
||||
Ipv6: {{virtual_machine.ipv6}} <i class="fa fa-files-o" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<div class="pull-right right-place">
|
||||
<span class="label label-warning"><strong>{% trans "Ip not assigned yet"%}</strong></span>
|
||||
<i data-toggle="tooltip" title="Your ip will be assigned soon" class="fa fa-info-circle" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="well text-center box-setting">
|
||||
<i class="fa fa-cubes" aria-hidden="true"></i>
|
||||
<span>{% trans "Cores"%}</span>
|
||||
<span class="label label-success">{{virtual_machine.cores}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="well text-center box-setting">
|
||||
<i class="fa fa-tachometer" aria-hidden="true"></i> {% trans "Memory"%} <br/>
|
||||
<span class="label label-success">{{virtual_machine.memory}} GB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="well text-center box-setting">
|
||||
<i class="fa fa-hdd-o" aria-hidden="true"></i>
|
||||
<span>{% trans "Disk"%}</span>
|
||||
<span class="label label-success">{{virtual_machine.disk_size|floatformat:2}} GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
</div><!--/col-12-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{% trans "Configuration"%}: {{virtual_machine.configuration}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tab-pane" id="billing-v">
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-md-12 inline-headers">
|
||||
<h3>{% trans "Current pricing"%}</h3>
|
||||
<span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/month</span>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="status-v">
|
||||
<div class="row ">
|
||||
<div class="col-md-12 inline-headers">
|
||||
<h3>{% trans "Current status"%}</h3>
|
||||
|
||||
<div class="pull-right space-above">
|
||||
{% if virtual_machine.state == 'PENDING' %}
|
||||
<span class="label
|
||||
label-warning"><strong>Pending</strong></span>
|
||||
{% elif virtual_machine.state == 'ACTIVE' %}
|
||||
<span class="label
|
||||
label-success"><strong>Online</strong></span>
|
||||
{% elif virtual_machine.state == 'FAILED'%}
|
||||
<span class="label
|
||||
label-danger"><strong>Failed</strong></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if not virtual_machine.status == 'canceled' %}
|
||||
<div class="row">
|
||||
<div class="col-md-12 separate-md">
|
||||
<div class="pull-right">
|
||||
<form method="POST"
|
||||
id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}">
|
||||
{% csrf_token %}
|
||||
</form>
|
||||
|
||||
<button type="text" data-href="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}" data-toggle="modal" data-target="#confirm-cancel" class="btn btn-danger">{% trans "Terminate Virtual Machine"%}</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<br/>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Cancel Modal -->
|
||||
<div class="modal fade" id="confirm-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-label="Confirm"><span
|
||||
aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div>
|
||||
<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4>
|
||||
<p class="modal-text">{% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-danger btn-ok">OK</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / Cancel Modal -->
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="virtual-machine-container dashboard-container">
|
||||
<h1 class="dashboard-title-thin">{% trans "Your Virtual Machine Detail" %}</h1>
|
||||
<div class="vm-detail-contain">
|
||||
<div class="vm-detail-item">
|
||||
<h2 class="vm-detail-title">{% trans "VM Settings" %} <img src="{% static 'hosting/img/settings.svg' %}" class="un-icon"></h2>
|
||||
<h3 class="vm-name">{{virtual_machine.name}}</h3>
|
||||
{% if virtual_machine.ipv6 %}
|
||||
<div class="vm-detail-ip">
|
||||
<p>
|
||||
<span>IPv4:</span>
|
||||
<span class="value">{{virtual_machine.ipv4}}</span>
|
||||
<button data-clipboard-text="{{virtual_machine.ipv4}}" class="to_copy btn btn-link" data-toggle="tooltip" data-placement="left" title="{% trans 'Copied' %}" data-trigger="click">
|
||||
<img class="un-icon" src="{% static 'hosting/img/copy.svg' %}">
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<span>IPv6:</span>
|
||||
<span class="value value-sm-block">{{virtual_machine.ipv6}}</span>
|
||||
<button data-clipboard-text="{{virtual_machine.ipv6}}" class="to_copy btn btn-link" data-toggle="tooltip" data-placement="left" title="{% trans 'Copied' %}" data-trigger="click">
|
||||
<img class="un-icon" src="{% static 'hosting/img/copy.svg' %}">
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="vm-detail-config">
|
||||
<p><span>{% trans "Cores" %}:</span><span class="value">{{virtual_machine.cores}}</span></p>
|
||||
<p><span>{% trans "Memory" %}:</span><span class="value">{{virtual_machine.memory}} GB</span></p>
|
||||
<p><span>{% trans "Disk" %}:</span><span class="value">{{virtual_machine.disk_size|floatformat:2}} GB</span></p>
|
||||
<p><span>{% trans "Configuration" %}:</span><span class="value">{{virtual_machine.configuration}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vm-detail-item">
|
||||
<h2 class="vm-detail-title">{% trans "Billing" %} <img src="{% static 'hosting/img/billing.svg' %}" class="un-icon"></h2>
|
||||
<div class="vm-vmid">
|
||||
<div class="vm-item-subtitle">{% trans "Current Pricing" %}</div>
|
||||
<div class="vm-item-lg">{{virtual_machine.price|floatformat}} CHF/{% trans "Month" %}</div>
|
||||
<a class="btn btn-vm-invoice" href="{% url 'hosting:orders' order.pk %}">{% trans "See Invoice" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vm-detail-item">
|
||||
<h2 class="vm-detail-title">{% trans "Status" %} <img src="{% static 'hosting/img/connected.svg' %}" class="un-icon"></h2>
|
||||
<div class="vm-vmid">
|
||||
<div class="vm-item-subtitle">{% trans "Your VM is" %}</div>
|
||||
{% if virtual_machine.state == 'PENDING' %}
|
||||
<div class="vm-item-lg vm-color-pending">{% trans "Pending" %}</div>
|
||||
{% elif virtual_machine.state == 'ACTIVE' %}
|
||||
<div class="vm-item-lg vm-color-online">{% trans "Online" %}</div>
|
||||
{% elif virtual_machine.state == 'FAILED'%}
|
||||
<div class="vm-item-lg vm-color-failed">{% trans "Failed" %}</div>
|
||||
{% endif %}
|
||||
{% if not virtual_machine.status == 'canceled' %}
|
||||
<form method="POST" id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}">
|
||||
{% csrf_token %}
|
||||
</form>
|
||||
<button data-href="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}" data-toggle="modal" data-target="#confirm-cancel" class="btn btn-vm-term">{% trans "Terminate VM" %}</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vm-contact-us">
|
||||
<div>
|
||||
<h2 class="vm-detail-title">{% trans "Support / Contact" %} <img class="un-icon visible-xs" src="{% static 'hosting/img/24-hours-support.svg' %}"></h2>
|
||||
</div>
|
||||
<div class="vm-contact-us-text text-center">
|
||||
<img class="un-icon hidden-xs" src="{% static 'hosting/img/24-hours-support.svg' %}">
|
||||
<div>
|
||||
<span>{% trans "Something doesn't work?" %}</span> <span>{% trans "We are here to help you!" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a class="btn btn-vm-contact" href="mailto:support@datacenterlight.ch">{% trans "CONTACT" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a class="btn btn-vm-back" href="{% url 'hosting:virtual_machines' %}">{% trans "BACK TO LIST" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Cancel Modal -->
|
||||
<div class="modal fade" id="confirm-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div>
|
||||
<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4>
|
||||
<div class="modal-text">
|
||||
<p>{% trans "Do you want to cancel your Virtual Machine" %} ?</p>
|
||||
<p><strong>{{virtual_machine.name}}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-danger btn-ok">{% trans "OK" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- / Cancel Modal -->
|
||||
{%endblock%}
|
||||
|
|
|
|||
|
|
@ -1,89 +1,77 @@
|
|||
{% extends "hosting/base_short.html" %}
|
||||
{% load staticfiles bootstrap3 i18n %}
|
||||
{% block content %}
|
||||
<div>
|
||||
<div class="dashboard-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 container-table">
|
||||
<table class="table borderless table-hover">
|
||||
<h3 class="pull-left"><i class="fa fa-server fa-separate" aria-hidden="true"></i> {% trans "Virtual Machines"%} </h3>
|
||||
<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="dashboard-container-head">
|
||||
<h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/vm.svg' %}" class="un-icon"> {% trans "Virtual Machines" %}</h3>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not error %}
|
||||
<div class="dashboard-subtitle">
|
||||
<p>{% trans 'To create a new virtual machine, click "Create VM"' %}</p>
|
||||
<div class="text-right">
|
||||
<a class="btn btn-vm" href="{% url 'hosting:create_virtual_machine' %}"><span class="css-plus"></span> <span>{% trans "CREATE VM" %}</span></a>
|
||||
</div>
|
||||
{% if not error %}
|
||||
<p class="pull-right btn-create-vm">
|
||||
<a class="btn btn-success" href="{% url 'hosting:create_virtual_machine' %}" >{% trans "Create VM"%} </a>
|
||||
</p>
|
||||
<br/>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "ID"%}</th>
|
||||
<th>{% trans "Ipv4"%}</th>
|
||||
<th>{% trans "Ipv6"%}</th>
|
||||
<th>{% trans "Status"%}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for vm in vms %}
|
||||
<tr>
|
||||
<td scope="row">{{vm.vm_id}}</td>
|
||||
{% if vm.ipv6 %}
|
||||
<td>{{vm.ipv4}}</td>
|
||||
|
||||
<td>{{vm.ipv6}}</td>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if not error %}
|
||||
<table class="table table-switch">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>IPv4</th>
|
||||
<th>IPv6</th>
|
||||
<th>{% trans "Status" %}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for vm in vms %}
|
||||
<tr>
|
||||
<td data-header="ID">{{vm.vm_id}}</td>
|
||||
{% if vm.ipv6 %}
|
||||
<td data-header="IPv4">{{vm.ipv4}}</td>
|
||||
<td data-header="IPv6">{{vm.ipv6}}</td>
|
||||
{% endif %}
|
||||
<td data-header="{% trans 'Status' %}">
|
||||
{% if vm.state == 'ACTIVE' %}
|
||||
<span class="vm-status-active"><strong>{{vm.state|title}}</strong></span>
|
||||
{% elif vm.state == 'FAILED' %}
|
||||
<span class="vm-status-failed"><strong>{{vm.state|title}}</strong></span>
|
||||
{% else %}
|
||||
<span class="vm-status"><strong>{{vm.state|title}}</strong></span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-right last-td">
|
||||
<a class="btn btn-vm-detail" href="{% url 'hosting:virtual_machines' vm.vm_id %}">{% trans "View Detail" %}</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
<td>
|
||||
|
||||
{% if vm.state == 'ACTIVE' %}
|
||||
<span class="h3 label label-success"><strong> {{vm.state}}</strong></span>
|
||||
{% elif vm.state == 'FAILED' %}
|
||||
<span class="h3 label label-danger"><strong>{{vm.state}}</strong></span>
|
||||
{% else %}
|
||||
<span class="h3 label label-warning"><strong>{{vm.state}}</strong></span>
|
||||
{% endif %}
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-default"><a
|
||||
href="{% url 'hosting:virtual_machines' vm.vm_id %}">{% trans "View Detail"%}</a></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if is_paginated %}
|
||||
<div class="pagination">
|
||||
<span class="page-links">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
|
||||
{% endif %}
|
||||
|
||||
{% if is_paginated %}
|
||||
<div class="pagination">
|
||||
<span class="page-links">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous"%}</a>
|
||||
{% endif %}
|
||||
<span class="page-current">
|
||||
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
|
||||
</span>
|
||||
{% if page_obj.has_next %}
|
||||
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next"%}</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="page-current">
|
||||
{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}.
|
||||
</span>
|
||||
{% if page_obj.has_next %}
|
||||
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{%endblock%}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue