Changes in resources page.
Style fixes
.top-msg p.title span { border-bottom:2px dotted #fff; padding:0 0 10px 0;}\r
.top-msg.active { display:block;}\r
.top-msg +.mainlogo { margin-top:-73px;}\r
-.top-msg .close { position:absolute; bottom:20px; right:20px; font-size:1.3em; font-weight:bold; border:0 none; color:#fff; text-decoration:none;}\r
+.top-msg .close { position:absolute; bottom:20px; right:20px; font-size:1.3em; border:0 none; color:#fff; text-decoration:none;}\r
.top-msg .close:hover { color:#000;}\r
.top-msg.success { background-color:#77C596; color: #fff}\r
.top-msg.error { background-color:#EF4F54; color: #fff}\r
/* quotas-form */\r
\r
.quotas-form fieldset { background:url(../images/dots.jpg) repeat-x scroll center bottom transparent; margin-bottom:3em; padding-bottom:3em; position:relative; }\r
-.quotas-form fieldset legend { color:#55B577; font-size:1.308em; margin-bottom:2em; }\r
-.quotas-form .with-checkbox .checkbox-widget { margin-top:14px; } \r
-.quotas-form .with-checkbox span.info { bottom:19px; }\r
+.quotas-form fieldset legend { color:#55B577; font-size:1.154em; margin-bottom:3em; position:relative; }\r
+.quotas-form fieldset legend span { color:#222; }\r
+.quotas-form .with-checkbox .checkbox-widget { margin-top:12px; } \r
+.quotas-form .with-checkbox span.info { bottom:22px; }\r
.quotas-form .form-row.submit { text-align:center; }\r
.quotas-form input[type="submit"] { margin:15px 0; background-color:#B3B3B3 }\r
.quotas-form input[type="submit"]:hover { background:#55B577 }\r
.quotas-form fieldset ul li a { display:block; width:82px; height:82px; overflow:hidden; }\r
.quotas-form fieldset ul li a:hover img { margin-top:-151px; }\r
.quotas-form fieldset ul li a.selected img { margin-top:-313px; }\r
+.quotas-form fieldset ul li a.selected:focus { outline:0 none; }\r
.quotas-form p.msg { color:#B3B3B3; }\r
-.quotas-form fieldset legend { margin-bottom:1em; font-size:1.154em }\r
-.quotas-form a.delete { position:absolute; right:0; top:0; color:#B3B3B3; }\r
-.quotas-form .quota { display:none; }\r
+.quotas-form a.delete { position:absolute; right:0; top:0; color:#B3B3B3; z-index:2 }\r
+.quotas-form .group { display:none; position:relative; background:url(../images/dots.jpg) repeat-x scroll center bottom; margin-bottom:2em; padding-bottom:2em;}\r
+.quotas-form .group fieldset { background:transparent; margin-bottom:1em; padding-bottom:1em; }\r
+.quotas-form .group fieldset legend { margin-bottom:1em; padding-bottom:1em; }\r
.quotas-form fieldset ul li.rel+li.rel { background:url(../images/quota-related-bg.png) no-repeat left center; }\r
-.quotas-form .quota .with-checkbox input[type="text"] { width:100px; margin:10px 0 0; float:left;}\r
-.quotas-form .quota .with-checkbox label { position:absolute; left:0; top:0; }\r
-.quotas-form .quota .with-checkbox p { padding-left:224px; float:left; }\r
-.quotas-form .quota .double-checkbox { float:left; }\r
-.quotas-form .quota .double-checkbox + .double-checkbox label { display:none; }\r
-.quotas-form .quota .double-checkbox + .double-checkbox p { padding-left:20px; }\r
-.quotas-form .quota .double-checkbox .checkbox-widget { position:static; }\r
-\r
-\r
+.quotas-form .double-checks label { font-size:1.077em; }\r
+.quotas-form .double-checks .form-row { float:left; margin-right:10px;}\r
+.quotas-form .double-checks .with-checkbox .checkbox-widget { left:0; }\r
+.quotas-form .double-checks .with-checkbox input[type="text"] { width:60px; float:left; margin:9px 15px -9px; display:none; padding:6px; }\r
+.quotas-form .double-checks .with-checkbox label{ width:auto; float:left; margin-left:35px; }\r
+.quotas-form .double-checks .with-checkbox input[type="text"].hideshow { display:block; }\r
+form.quotas-form legend span.info { top:0; bottom:auto; left:250px; }\r
+form.quotas-form legend span.info span { width:400px; }\r
+.quotas-form .with-checkbox+.with-checkbox { width:196px; }\r
+ \r
/* stats */\r
.stats ul { margin:0; padding:0; list-style:none outside none; }\r
.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}\r
$(this).hide();\r
})\r
\r
- // quota form actions\r
- \r
- $('.quotas-form ul li a').click(function(e){\r
- e.preventDefault();\r
- $(this).addClass('selected');\r
- var id = $(this).attr('id');\r
- $('.quotas-form fieldset').each(function() {\r
- if($(this).hasClass(id)) {\r
- $(this).show('slow');\r
- }\r
- }); \r
- \r
- });\r
- \r
- $('.quotas-form fieldset .delete').click(function(e){\r
- e.preventDefault();\r
- $(this).parents('fieldset').find('input').val('');\r
- $(this).parents('fieldset').hide('slow');\r
- fieldsetClass = $(this).parents('fieldset').attr('class').replace('quota ', '');\r
- $('.quotas-form ul li a').each(function() {\r
- if($(this).attr('id')==fieldsetClass) {\r
- $(this).removeClass('selected');\r
- }\r
- }); \r
- \r
- \r
- })\r
- \r
- \r
\r
});\r
\r
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");
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')
+ }
})
}
}
if ($this.attr('checked')) {
el.addClass("checked");
+
}
+ el.addClass(className);
+
el.click(function() {
el.toggleClass("checked");
$this.attr('checked', el.hasClass("checked"));
};
})( jQuery );
+
--- /dev/null
+$(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
{% 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>
</span>
</p>
</div>
- <div class="form-row with-errors ">
+ <div class="form-row">
<p class="clearfix">
<label for="name">Name</label>
<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">
</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"> </span>
<span class="info">
</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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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 %}
<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">
'name': 'vm',
'description': 'Number Of Vms',
'unit':'',
- 'maxValue':'100',
- 'currValue':'50'
+ 'maxValue':'1',
+ 'currValue':'1'
},{
'name': 'ram',
'description':'Total Ram Usage',
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' }
+ },
+ 'storage': {
+ 'pithos.diskspace' : { 'unit': 'mebibytes' }
+ }
+ }
+ }
+
+
+ return render_response(
+ template='im/astakosgroup_form_demo.html',
+ context_instance=get_context(request),
+ resource_catalog=resource_catalog,
+ groups=resource_catalog['groups'] )
+
+
+
def group_create_list(request):
form = PickResourceForm()
return render_response(
return data
-def group_create_demo(request):
- return render_response(
- template='im/astakosgroup_form_demo.html',
- context_instance=get_context(request))
-
- return data
+
+
@signed_terms_required
@login_required
def timeline(request):
projects / astakos / commitdiff
