Skip to content

GitLab

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

New create group page. 

Changes in resources page.
Style fixes
parent 9242be55
Hide whitespace changes
Inline Side-by-side
snf-astakos-app/astakos/im/static/im/css/modules.css
View file @ 2db5df5a
......@@ -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}
......
snf-astakos-app/astakos/im/static/im/js/common.js
View file @ 2db5df5a
......@@ -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');
}
});
})
});
......
snf-astakos-app/astakos/im/static/im/js/forms.js
View file @ 2db5df5a
......@@ -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 );
snf-astakos-app/astakos/im/static/im/js/quotas.js 0 → 100644
View file @ 2db5df5a
$(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
snf-astakos-app/astakos/im/templates/im/astakosgroup_form_demo.html
View file @ 2db5df5a
......@@ -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 %}
snf-astakos-app/astakos/im/templates/im/astakosuserquota_list.html
View file @ 2db5df5a
......@@ -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">
......
snf-astakos-app/astakos/im/views.py
View file @ 2db5df5a
......@@ -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' }
},