Commit 2db5df5a authored by Olga Brani's avatar Olga Brani
Browse files

New create group page.

Changes in resources page.
Style fixes 
parent 9242be55
......@@ -28,7 +28,7 @@ img.right { margin:0 0 1em 1em; float:right;}
.top-msg p.title span { border-bottom:2px dotted #fff; padding:0 0 10px 0;}
.top-msg.active { display:block;}
.top-msg +.mainlogo { margin-top:-73px;}
.top-msg .close { position:absolute; bottom:20px; right:20px; font-size:1.3em; font-weight:bold; border:0 none; color:#fff; text-decoration:none;}
.top-msg .close { position:absolute; bottom:20px; right:20px; font-size:1.3em; border:0 none; color:#fff; text-decoration:none;}
.top-msg .close:hover { color:#000;}
.top-msg.success { background-color:#77C596; color: #fff}
.top-msg.error { background-color:#EF4F54; color: #fff}
......@@ -357,9 +357,10 @@ table.alt-style tr td a.open { background-position:-16px 0}
/* quotas-form */
.quotas-form fieldset { background:url(../images/dots.jpg) repeat-x scroll center bottom transparent; margin-bottom:3em; padding-bottom:3em; position:relative; }
.quotas-form fieldset legend { color:#55B577; font-size:1.308em; margin-bottom:2em; }
.quotas-form .with-checkbox .checkbox-widget { margin-top:14px; }
.quotas-form .with-checkbox span.info { bottom:19px; }
.quotas-form fieldset legend { color:#55B577; font-size:1.154em; margin-bottom:3em; position:relative; }
.quotas-form fieldset legend span { color:#222; }
.quotas-form .with-checkbox .checkbox-widget { margin-top:12px; }
.quotas-form .with-checkbox span.info { bottom:22px; }
.quotas-form .form-row.submit { text-align:center; }
.quotas-form input[type="submit"] { margin:15px 0; background-color:#B3B3B3 }
.quotas-form input[type="submit"]:hover { background:#55B577 }
......@@ -371,20 +372,23 @@ table.alt-style tr td a.open { background-position:-16px 0}
.quotas-form fieldset ul li a { display:block; width:82px; height:82px; overflow:hidden; }
.quotas-form fieldset ul li a:hover img { margin-top:-151px; }
.quotas-form fieldset ul li a.selected img { margin-top:-313px; }
.quotas-form fieldset ul li a.selected:focus { outline:0 none; }
.quotas-form p.msg { color:#B3B3B3; }
.quotas-form fieldset legend { margin-bottom:1em; font-size:1.154em }
.quotas-form a.delete { position:absolute; right:0; top:0; color:#B3B3B3; }
.quotas-form .quota { display:none; }
.quotas-form a.delete { position:absolute; right:0; top:0; color:#B3B3B3; z-index:2 }
.quotas-form .group { display:none; position:relative; background:url(../images/dots.jpg) repeat-x scroll center bottom; margin-bottom:2em; padding-bottom:2em;}
.quotas-form .group fieldset { background:transparent; margin-bottom:1em; padding-bottom:1em; }
.quotas-form .group fieldset legend { margin-bottom:1em; padding-bottom:1em; }
.quotas-form fieldset ul li.rel+li.rel { background:url(../images/quota-related-bg.png) no-repeat left center; }
.quotas-form .quota .with-checkbox input[type="text"] { width:100px; margin:10px 0 0; float:left;}
.quotas-form .quota .with-checkbox label { position:absolute; left:0; top:0; }
.quotas-form .quota .with-checkbox p { padding-left:224px; float:left; }
.quotas-form .quota .double-checkbox { float:left; }
.quotas-form .quota .double-checkbox + .double-checkbox label { display:none; }
.quotas-form .quota .double-checkbox + .double-checkbox p { padding-left:20px; }
.quotas-form .quota .double-checkbox .checkbox-widget { position:static; }
.quotas-form .double-checks label { font-size:1.077em; }
.quotas-form .double-checks .form-row { float:left; margin-right:10px;}
.quotas-form .double-checks .with-checkbox .checkbox-widget { left:0; }
.quotas-form .double-checks .with-checkbox input[type="text"] { width:60px; float:left; margin:9px 15px -9px; display:none; padding:6px; }
.quotas-form .double-checks .with-checkbox label{ width:auto; float:left; margin-left:35px; }
.quotas-form .double-checks .with-checkbox input[type="text"].hideshow { display:block; }
form.quotas-form legend span.info { top:0; bottom:auto; left:250px; }
form.quotas-form legend span.info span { width:400px; }
.quotas-form .with-checkbox+.with-checkbox { width:196px; }
/* stats */
.stats ul { margin:0; padding:0; list-style:none outside none; }
.stats ul li { margin:0 0 1em 0; padding:0 0 1em 0; list-style:none outside none; background:url(../images/stats-line.jpg) repeat-x left bottom}
......
......@@ -229,35 +229,6 @@ $(document).ready(function() {
$(this).hide();
})
// quota form actions
$('.quotas-form ul li a').click(function(e){
e.preventDefault();
$(this).addClass('selected');
var id = $(this).attr('id');
$('.quotas-form fieldset').each(function() {
if($(this).hasClass(id)) {
$(this).show('slow');
}
});
});
$('.quotas-form fieldset .delete').click(function(e){
e.preventDefault();
$(this).parents('fieldset').find('input').val('');
$(this).parents('fieldset').hide('slow');
fieldsetClass = $(this).parents('fieldset').attr('class').replace('quota ', '');
$('.quotas-form ul li a').each(function() {
if($(this).attr('id')==fieldsetClass) {
$(this).removeClass('selected');
}
});
})
});
......
......@@ -7,6 +7,7 @@
var $this = $(this);
var el = $('<a class="checkbox-widget" href="javascript:void(0)"/>');
var form = $this.closest(".form-row");
var className = $this.attr('class');
// add class to identify form rows which contain a checkbox
form.addClass("with-checkbox");
......@@ -20,7 +21,13 @@
var src = e.srcElement.nodeName;
if (src == "LABEL" || src == "label") {
el.toggleClass("checked");
};
if ($this.attr('checked')=='checked') {
($this.removeAttr('checked'))
} else {
$this.attr('checked','checked')
}
})
}
}
......@@ -28,8 +35,11 @@
if ($this.attr('checked')) {
el.addClass("checked");
}
el.addClass(className);
el.click(function() {
el.toggleClass("checked");
$this.attr('checked', el.hasClass("checked"));
......@@ -105,3 +115,4 @@
};
})( jQuery );
$(document).ready(function() {
// quota form actions
$('.quotas-form ul li a').click(function(e){
//e.preventDefault();
if ( !$(this).hasClass('selected')){
$(this).addClass('selected');
var id = $(this).attr('id');
$('.quotas-form .group').each(function() {
if( $(this).hasClass(id) ) {
$(this).appendTo('.foo');
$(this).show('slow');
$(this).find('input')[0].focus();
}
});
}
});
$('.quotas-form .group .delete').click(function(e){
$(this).siblings('fieldset').find('input').val('');
$(this).siblings('fieldset').find('.checkbox-widget.unlimited').addClass('checked');
$(this).siblings('fieldset').find('.checkbox-widget.limited').removeClass('checked');
$(this).siblings('fieldset').find('input[type="checkbox"].limited').removeAttr('checked');
$(this).siblings('fieldset').find('input[type="checkbox"].unlimited').attr('checked','checked');
$(this).siblings('fieldset').find('.double-checks input[type="text"]').removeClass('hideshow');
$(this).parents('.group').appendTo('.not-foo');
$(this).parents('.group').hide('slow');
groupClass = $(this).parents('.group').attr('class').replace('group ', '');
$('.quotas-form ul li a').each(function() {
if($(this).attr('id')==groupClass) {
$(this).removeClass('selected');
}
});
});
$('.quotas-form .checkbox-widget.limited').click(function(e){
e.preventDefault();
$(this).siblings('input[type="text"]').toggleClass('hideshow');
$(this).siblings('input[type="text"]').focus();
parentdiv = $(this).parents('.form-row').prev('.form-row');
parentdiv.find('input[type="checkbox"].unlimited').removeAttr('checked');
parentdiv.find('.checkbox-widget').removeClass('checked');
});
$('.quotas-form .checkbox-widget.unlimited').click(function(e){
parentdiv = $(this).parents('.form-row').next('.form-row');
parentdiv.find('.checkbox-widget').removeClass('checked');
parentdiv.find('input[type="checkbox"].limited').removeAttr('checked');
parentdiv.find('input[type="text"]').val('');
parentdiv.find('input[type="text"]').removeClass('hideshow');
})
});
\ No newline at end of file
......@@ -2,10 +2,20 @@
{% block page.body %}
{% block headjs %}
{{ block.super }}
<script src="{{ IM_STATIC_URL }}js/quotas.js"></script>
{% endblock %}
<form action="" method="post" class="withlabels quotas-form">{% csrf_token %}
<fieldset>
<legend>1. CREATE GROUP</legend>
<legend>
1. CREATE GROUP
<span class="info">
<em>more info</em>
<span>Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text</span>
</span>
</legend>
<div class="form-row">
<p class="clearfix">
<label for="id">ID</label>
......@@ -17,7 +27,7 @@
</span>
</p>
</div>
<div class="form-row with-errors ">
<div class="form-row">
<p class="clearfix">
<label for="name">Name</label>
......@@ -28,7 +38,7 @@
<span>Help Text</span>
</span>
</p>
<div class="form-error" style="left: 270.1px; top: 21.2px; width: 292px; margin-left: 224px; margin-bottom: 5px;">This field is required.<br></div>
</div>
<div class="form-row">
<p class="clearfix">
......@@ -64,9 +74,9 @@
</span>
</p>
</div>
<div class="form-row with-checkbox">
<div class="form-row ">
<p class="clearfix ">
<a href="javascript:void(0)" class="checkbox-widget"></a><label for="id_moderation_enabled" class="checkbox-label">Moderation enabled</label>
<label for="id_moderation_enabled">Modaration</label>
<input type="checkbox" id="id_moderation_enabled" name="moderation_enabled" autocomplete="off" style="display: none;">
<span class="extra-img">&nbsp;</span>
<span class="info">
......@@ -75,97 +85,191 @@
</span>
</p>
</div>
<div class="double-checks">
<label>Max users per group</label>
<div class="form-row">
<p class="clearfix">
<label for="vm_per_user_unlimited">Unlimited</label>
<input type="checkbox" id="vm_per_user_unlimited" name="vm_per_user_unlimited" class="unlimited" checked="checked">
</p>
</div>
<div class="form-row">
<p class="clearfix">
<label for="vm_per_user_limited">Limited</label>
<input type="checkbox" id="vm_per_user_limited" name="vm_per_user_limited" class="limited">
<input type="text" id="vm_user_limited_num"/>
</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>2. CHOOSE RESOURCES</legend>
<fieldset id="icons">
<legend>
2. CHOOSE RESOURCES
<span class="info">
<em>more info</em>
<span>Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text</span>
</span>
</legend>
{% for key in groups.items %}
{% endfor %}
<ul class="clearfix">
<li><a href="#" id="vm">VM</a></li>
<li><a href="#" id="storage">STORAGE</a></li>
<li class="rel"><a href="#" id="cpu">CPU</a></li>
<li class="rel"><a href="#" id="ram">RAM</a></li>
<li class="rel"><a href="#" id="diskspace">DISKSPACE</a></li>
<li><a href="#vm_1" id="vm_1"><img src="/static/im/images/create-resource-vm.png" alt="vm"/></a></li>
<li><a href="#storage_1" id="storage_1"><img src="/static/im/images/create-resource-storage.png" alt="storage"/></a></li>
</ul>
<p class="msg">if you choose CPU without selecting any VMs you must also select RAM and DISKSPACE</p>
</fieldset>
<fieldset class="quota vm">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>VM</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_vms">Total VM</label>
<input type="text" name="num_vms">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota storage">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>STORAGE</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_vms">Total storage</label>
<input type="text" name="num_vms">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota cpu">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>CPU</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_vms">Total cpu</label>
<input type="text" name="num_cpu">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota ram">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>RAM</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_ram">Total ram</label>
<input type="text" name="num_ram">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<fieldset class="quota diskspace">
<a href="#" class="delete"><strong>X</strong> remove resource</a>
<legend>DISKSPACE</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_diskspace">Total diskspace</label>
<input type="text" name="num_diskspace">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
</fieldset>
<div class="foo">
</div>
<div class="not-foo">
<div class="group vm_1">
<a href="#icons" class="delete"><strong>X</strong> remove resource</a>
<fieldset class="quota vm" style="background:none;">
<legend>VM</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_vms">Total VMs</label>
<input type="text" name="num_vms">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="double-checks">
<label>Max VMs per user</label>
<div class="form-row">
<p class="clearfix">
<label for="vm_per_user_unlimited">Unlimited</label>
<input type="checkbox" id="vm_per_user_unlimited" name="vm_per_user_unlimited" class="unlimited" checked="checked">
</p>
</div>
<div class="form-row">
<p class="clearfix">
<label for="vm_per_user_limited">Limited</label>
<input type="checkbox" id="vm_per_user_limited" name="vm_per_user_limited" class="limited">
<input type="text" id="vm_user_limited_num"/>
</p>
</div>
</div>
</fieldset>
<fieldset class="quota cpu" style="background:none;">
<legend>cpu</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_cpu">Total cpus</label>
<input type="text" name="num_cpu">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="double-checks">
<label>Max cpus per user</label>
<div class="form-row">
<p class="clearfix">
<label for="cpu_per_user_unlimited">Unlimited</label>
<input type="checkbox" id="cpu_per_user_unlimited" name="cpu_per_user_unlimited" class="unlimited" checked="checked">
</p>
</div>
<div class="form-row">
<p class="clearfix">
<label for="cpu_per_user_limited">Limited</label>
<input type="checkbox" id="cpu_per_user_limited" name="cpu_per_user_limited" class="limited">
<input type="text" id="cpu_user_limited_num"/>
</p>
</div>
</div>
</fieldset>
<fieldset class="quota ram">
<legend>ram</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_ram">Total ram</label>
<input type="text" name="num_ram">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="double-checks">
<label>Max ram per user</label>
<div class="form-row">
<p class="clearfix">
<label for="ram_per_user_unlimited">Unlimited</label>
<input type="checkbox" id="ram_per_user_unlimited" name="ram_per_user_unlimited" class="unlimited" checked="checked">
</p>
</div>
<div class="form-row">
<p class="clearfix">
<label for="ram_per_user_limited">Limited</label>
<input type="checkbox" id="ram_per_user_limited" name="ram_per_user_limited" class="limited">
<input type="text" id="ram_user_limited_num"/>
</p>
</div>
</div>
</fieldset>
</div>
<div class="group storage_1">
<a href="#icons" class="delete"><strong>X</strong> remove resource</a>
<fieldset class="quota storage">
<legend>STORAGE</legend>
<div class="form-row">
<p class="clearfix">
<label for="num_storage">Total storage</label>
<input type="text" name="num_storage">
<span class="extra-img">&nbsp;</span>
<span class="info">
<em>more info</em>
<span>Help Text</span>
</span>
</p>
</div>
<div class="double-checks">
<label>Max Storage per user</label>
<div class="form-row">
<p class="clearfix">
<label for="storage_per_user_unlimited">Unlimited</label>
<input type="checkbox" id="storage_per_user_unlimited" name="storage_per_user_unlimited" class="unlimited" checked="checked">
</p>
</div>
<div class="form-row">
<p class="clearfix">
<label for="storage_per_user_limited">Limited</label>
<input type="checkbox" id="storage_per_user_limited" name="storage_per_user_limited" class="limited">
<input type="text" id="storage_user_limited_num"/>
</p>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-row submit">
<input type="submit" value="SUBMIT" class="submit altcol" autocomplete="off">
<input type="submit" value="SUBMIT" class="submit altcol" autocomplete="off">
</div>
</form>
<script>
</script>
{% endblock %}
......@@ -14,7 +14,13 @@
<h3>{{ r.description }}</h3>
<p>
{{ r.ratio|floatformat }}% Used<br>
You are using {{ r.currValue }} {{ r.unit }} out of your {{ r.maxValue }}{{ r.unit }} {{ r.plural|capfirst }} - Aouch!
You are using {{ r.currValue }} {{ r.unit }} out of your {{ r.maxValue }}{{ r.unit }}
{% if r.maxValue == '1' %}
{{ r.name|capfirst}}
{% else %}
{{ r.plural|capfirst }}
{% endif %}
- Aouch!
</p>
</div>
<div class="bar">
......
......@@ -1050,8 +1050,8 @@ def resource_list(request):
'name': 'vm',
'description': 'Number Of Vms',
'unit':'',
'maxValue':'100',
'currValue':'50'
'maxValue':'1',
'currValue':'1'
},{
'name': 'ram',
'description':'Total Ram Usage',
......@@ -1113,6 +1113,31 @@ def resource_list(request):
extra_context={'form': form, 'data':data})
def group_create_demo(request):
resource_catalog = {
'groups': {
'compute': {
'cyclades.vm': { 'unit': 'number' },
'cyclades.ram': { 'unit': 'bytes' },
'cyclades.cpu': { 'unit': 'number' }
},