Commit ee7c2be4 authored by Olga Brani's avatar Olga Brani
Browse files

Group create

- Complete form
- Fix data presentation
parent 10476668
......@@ -72,7 +72,7 @@ div.form-stacked { margin-bottom: 4em; }
form.withlabels .checkbox-widget { margin-top:20px; }
form.innerlabels .checkbox-widget + label { position:static; line-height:36px; color:#808080; }
form.innerlabels .checkbox-widget + label + a { border-bottom:1px solid #F89A1C; font-size: 1.1em; }
form span.info { position:absolute;z-index:101; bottom:32px; }
form span.info { position:absolute;z-index:101; top:10px; }
form.innerlabels span.info { left: 290px; }
form.withlabels span.info { left:485px; }
form span.info em { display:block; overflow:hidden; position:absolute; left:0; text-indent:-100px; top:0; height:21px; width:21px; background:url(../images/symbols.png) no-repeat -4px -31px;cursor:pointer; }
......@@ -150,7 +150,7 @@ form+p:first-child, form legend + p { margin-bottom:2em; }
.form-row .dk_option_current a { text-shadow:none; background-color: #E7E7E3; text-decoration:none;}
form.link-like { display:inline-block; margin:0 5px; float:right;}
form.link-like input[type="submit"] { margin:0; padding:0 5px; background:transparent; color:#F89A1C; cursor:pointer; height:auto; }
form.link-like input[type="submit"] { margin:0; padding:0 5px; background:transparent; color:#F89A1C; cursor:pointer; height:auto; line-height:120%; }
form.link-like input[type="submit"]:hover { text-decoration:underline; }
form.link-like.alone { float:none; margin:0;}
form.link-like.alone .form-row { margin:0; }
......
......@@ -364,9 +364,7 @@ table.alt-style tr.tr2 td,
table.alt-style tr.tmore2 td { background:#fff }
table.alt-style tr td.info-td { padding:5px; }
table.alt-style tr td.info-td div { padding:15px; border:1px dashed #000 }
table.alt-style tr td a.more-info { display:inline-block; width:17px; height:16px; background:url(../images/plus-minus.png) no-repeat 0 0; margin-left:10px; }
table.alt-style tr td a.more-info:hover { background-image:url(../images/plus-minus-hover.png); text-decoration:none;}
table.alt-style tr td a.open { background-position:-16px 0}
.projects .details a.edit { float:right; margin-left:20px; }
.projects .details .data { overflow:hidden; }
......@@ -376,10 +374,13 @@ 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.154em; margin-bottom:3em; position:relative; }
.quotas-form fieldset legend span { color:#222; font-size:0.867em; }
.quotas-form legend { color:#55B577; font-size:1.154em; margin-bottom:3em; position:relative; }
.quotas-form legend span { color:#222; font-size:0.867em; }
form.quotas-form legend span.info { position:relative; display:inline-block; top:auto; left:auto; margin-left:10px;}
form.quotas-form legend span.info em { position:static; }
form.quotas-form legend span.info span { width:395px; }
.quotas-form .with-checkbox .checkbox-widget { margin-top:12px; }
.quotas-form .with-checkbox span.info { bottom:22px; }
.quotas-form .with-checkbox span.info { top:15px; }
.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 }
......@@ -407,8 +408,6 @@ table.alt-style tr td a.open { background-position:-16px 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:1px; bottom:auto; left:225px; }
form.quotas-form legend span.info span { width:395px; }
.quotas-form .with-checkbox+.with-checkbox { width:196px; }
.summary dl.alt-style dt { color:#55B577; }
.quotas-form .with-info .double-checks p { clear:both; }
......@@ -420,6 +419,9 @@ form.quotas-form legend span.info span { width:395px; }
.quotas-form .quota input[type="text"] { width:150px;}
.quotas-form .quota .error-msg { display:none; color:red; font-size:0.8em; margin:0; margin-left:224px; margin-bottom:5px; padding:5px; }
.quotas-form .quota .with-errors .error-msg { display:block;}
::-webkit-input-placeholder { color: #D4D4D4; font-style:italic; }
:-moz-placeholder { color: #D4D4D4;font-style:italic; }
/* 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}
......@@ -449,3 +451,8 @@ form.quotas-form legend span.info span { width:395px; }
/* temp style to hide extra menu for groups */
.navigation ul+ul { display:none; }
table .msg-wrap { position:relative; }
table .msg-wrap .dialog { position:absolute; border:1px dashed #ccc; padding:15px; width:200px; bottom:30px; left:0; background:#fff; display:none; }
table .msg-wrap .dialog .submit { min-width:30px; padding:5px 22px; }
table .msg-wrap .dialog .no.submit { float:right; }
......@@ -211,6 +211,11 @@ $(document).ready(function() {
$('table .more-info').click(function(e){
e.preventDefault();
$(this).toggleClass('open');
if ($(this).hasClass('open')){
$(this).html('- less info ')
} else {
$(this).html('+ more info ')
}
$(this).parents('tr').next('tr').toggle();
});
......@@ -220,7 +225,7 @@ $(document).ready(function() {
$(this).parents('.details').children('.data').hide();
$(this).parents('.details').children('.editable').show();
$(this).hide();
})
});
$('.widjet-x').click(function(e){
......@@ -228,10 +233,34 @@ $(document).ready(function() {
$(this).siblings('ul').hide('slow');
$(this).hide();
})
// todo den doulevei
$('#group_create_form').submit(function(){
if ($('.quotas-form .group .form-row.with-errors').length>0 ){
return false;
}
$('.quotas-form .group .form-row.with-errors')[0].focus();
});
$("input.leave, input.join").click(function () {
$(this).parents('.msg-wrap').find('.dialog').show();
return false;
});
$('.msg-wrap .no').click( function(e){
e.preventDefault();
$(this).parents('.dialog').hide();
})
$('.msg-wrap .yes').click( function(e){
e.preventDefault();
$(this).parents('.dialog').siblings('form').submit();
})
});
$(window).resize(function() {
......
function group_form_show_resources(el){
el.addClass('selected');
var id = el.attr('id');
$('.quotas-form .group').each(function() {
if( $(this).hasClass(id) ) {
$(this).appendTo('.foo');
$(this).show('slow');
$(this).find('input')[0].focus()
}
});
}
function bytesToSize2(bytes) {
var sizes = [ 'n/a', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
var i = +Math.floor(Math.log(bytes) / Math.log(1024));
return (bytes / Math.pow(1024, i)).toFixed( 0 ) + sizes[ isNaN( bytes ) ? 0 : i+1 ];
}
$(document).ready(function() {
// ugly fix to transfer data easily
$('.with-info input[name^="is_selected_"]').each(function() {
$(this).parents('.form-row').hide();
});
$('.quotas-form ul li a').click(function(e){
$(this).siblings('input[type="hidden"]').val('1');
// check the hidden input field
$(this).siblings('input[type="hidden"]').attr('checked','checked');
// get the hidden input field without the proxy
// and check the python form field
hidden_name = $(this).siblings('input[type="hidden"]').attr('name').replace("proxy_","");
$("input[name='"+hidden_name+"']").attr('checked','checked');
// prevent extra actions if it is checked
if ( $(this).hasClass('selected')){
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()
}
});
} else {
// show the relevant fieldsets
group_form_show_resources($(this));
}
});
$('.quotas-form .group .delete').click(function(e){
e.preventDefault();
// clear form fields
$(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"]').hide();
// clear errors
$(this).siblings('fieldset').find('.form-row').removeClass('with-errors');
// hide relevant fieldset
$(this).parents('.group').hide('slow', function() {
$(this).appendTo('.not-foo');
});
groupClass = $(this).parents('.group').attr('class').replace('group ', '');
group_class = $(this).parents('.group').attr('class').replace('group ', '');
// unselect group icon
$('.quotas-form ul li a').each(function() {
if($(this).attr('id')==groupClass) {
if($(this).attr('id')==group_class) {
$(this).removeClass('selected');
$(this).siblings('input[type="hidden"]').val('0');
$(this).siblings('input[type="hidden"]').removeAttr('checked');
// get the hidden input field without the proxy
// and check the python form field
hidden_name = $(this).siblings('input[type="hidden"]').attr('name').replace("proxy_","");
$("input[name='"+hidden_name+"']").removeAttr('checked');
}
});
});
$('.quotas-form input.limited').bind("changed", function(e){
console.log($(this).attr('checked'));
if ($(this).attr('checked')){
$(this).siblings('input[type="text"]').toggle();
$(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');
}
// clear hidden fields
$(this).siblings('fieldset').find('input[type="text"]').each(function() {
hidden_name = $(this).attr('name').replace("_proxy","");
hidden_input = $("input[name='"+hidden_name+"']");
hidden_input.val('');
});
});
$('.quotas-form input.unlimited').bind("changed", function(e){
parentdiv = $(this).parents('.form-row').next('.form-row');
if (parentdiv.find('.checkbox-widget').hasClass('checked')){
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"]').hide();
}
});
// if you fill _proxy fields do stuff
$('.quotas-form .quota input[type="text"]').change(function () {
......@@ -83,79 +106,170 @@ $(document).ready(function() {
hidden_name = $(this).attr('name').replace("_proxy","");
var hidden_input = $("input[name='"+hidden_name+"']");
if ($(this).hasClass('dehumanize')){
var flag = 0;
// replace , with . and get number
value = value.replace(",",".");
var num = parseFloat(value);
if ( !num ) { flag = 1}
var bytes = num;
// get suffix. 'i' renders it case insensitive
var suf = value.match( new RegExp('GB|KB|MB|TB|bytes', 'i'));
if (suf){
if (value) {
// actions for humanize fields
if ($(this).hasClass('dehumanize')){
var flag = 0;
// replace , with . and get number
value = value.replace(",",".");
var num = parseFloat(value);
if ( value && !num ) { flag = 1}
var bytes = num;
suf = suf[0].toLowerCase();
// transform to bytes
switch (suf){
case 'bytes':
bytes = num*Math.pow(1024,0);
break;
case 'byte':
bytes = num*Math.pow(1024,0);
break;
case 'kb':
bytes = num*Math.pow(1024,1);
break;
case 'mb':
bytes = num*Math.pow(1024,2);
break;
case 'gb':
bytes = num*Math.pow(1024,3);
break;
case 'tb':
bytes = num*Math.pow(1024,4);
break;
default:
bytes = num;
}
} else {
flag = 1;
// get suffix. 'i' renders it case insensitive
var suf = value.match( new RegExp('GB|KB|MB|TB|bytes|G|K|M|T|byte', 'i'));
if (suf){
suf = suf[0].toLowerCase();
suf = suf.substr(0,1);
// transform to bytes
switch (suf){
case 'b':
bytes = num*Math.pow(1024,0);
break;
case 'k':
bytes = num*Math.pow(1024,1);
break;
case 'm':
bytes = num*Math.pow(1024,2);
break;
case 'g':
bytes = num*Math.pow(1024,3);
break;
case 't':
bytes = num*Math.pow(1024,4);
break;
default:
bytes = num;
}
} else {
if (value) {
flag = 1;
}
}
if ( flag == '1' ){
$(this).parents('.form-row').addClass('with-errors');
bytes = value;
$(this).focus();
} else {
$(this).parents('.form-row').removeClass('with-errors');
}
hidden_input.val(bytes);
}
if ( flag == '1' ){
$(this).parents('.form-row').addClass('with-errors');
return;
} else {
$(this).parents('.form-row').removeClass('with-errors');
// actions for int fields
else {
var is_int = value.match (new RegExp('^[0-9]*$'));
if ( !is_int ){
$(this).parents('.form-row').find('.error-msg').html('Enter a whole number');
$(this).parents('.form-row').addClass('with-errors');
} else {
if ( value == '0'){
$(this).parents('.form-row').find('.error-msg').html('Ensure this value is greater than or equal to 1');
$(this).parents('.form-row').addClass('with-errors');
}else {
$(this).parents('.form-row').removeClass('with-errors');
}
}
hidden_input.val(value);
}
machine_value = bytes;
hidden_input.val(bytes);
} else {
var is_int = value.match (new RegExp('^[0-9]*$'));
if ( !is_int ){
$(this).parents('.form-row').find('.error-msg').html('Enter a whole number');
$(this).parents('.form-row').addClass('with-errors');
} else {
$(this).parents('.form-row').removeClass('with-errors');
hidden_input.val(value);
}
hidden_input.removeAttr('value');
}
});
// if hidden checkboxes are checked, the right group is selected
$('.with-info input[name^="is_selected_"]').each(function() {
if ($(this).attr('checked')){
// get hidden input name
hidden_name = $(this).attr('name');
$("input[name='proxy_"+hidden_name+"']").attr('checked','checked');
// pretend to check the ul li a
// show the relevant fieldsets
var mock_a = $("input[name='proxy_"+hidden_name+"']").siblings('a');
group_form_show_resources(mock_a);
}
});
// if input_uplimit fields are filled,
// fill the _uplimit_proxy ones
$('.with-info input[name$="_uplimit"]').each(function() {
if ($(this).val()){
// get value from input
var value = $(this).val();
// get hidden input name
hidden_name = $(this).attr('name');
var field = $("input[name='"+hidden_name+"_proxy']");
if ( (field.hasClass('dehumanize')) && !($(this).parents('.form-row').hasClass('with-errors'))) {
// for dehumanize fields transform bytes to KB, MB, etc
// unless there is an error
field.val(bytesToSize2(value))
} else {
// else just return the value
field.val(value);
}
var group_class = field.parents('div[class^="group"]').attr('class').replace('group ', '');
// select group icon
$('.quotas-form ul li a').each(function() {
if($(this).attr('id') == group_class) {
$(this).addClass('selected');
$(this).siblings('input[type="hidden"]').attr('checked', 'checked');
// get the hidden input field without the proxy
// and check the python form field
hidden_name = $(this).siblings('input[type="hidden"]').attr('name').replace("proxy_","");
$("input[name='"+hidden_name+"']").attr('checked', 'checked');
group_form_show_resources($(this));
}
});
// if the field has class error, transfer error to the proxy fields
if ( $(this).parents('.form-row').hasClass('with-errors') ) {
field.parents('.form-row').addClass('with-errors');
}
}
});
});
\ No newline at end of file
......@@ -53,7 +53,7 @@
<h3>DETAILS:</h3>
<dl class="alt-style">
<dt>Name</dt>
<dd>{{object.name}}&nbsp;</dd>
<dd>{{ object.name|strip_http }}&nbsp;</dd>
<!--<dt>Type</dt>
<dd>{{object.kindname|capfirst}}&nbsp;</dd>-->
<dt>Issue date:</dt>
......@@ -81,15 +81,32 @@
</div>
<div class="full-dotted">
<h3>RESOURCES:</h3>
<h3>RESOURCES:</h3>
{% if quota %}
<dl class="alt-style">
{% for k in quota|dkeys %}
<dt>{{ k }}</dt>
<dd>{{ quota|lookup:k }}&nbsp;</dd>
{% with resource_catalog|lookup:'resources' as resources %}
{% with resources|lookup_uni:k as info %}
{% with resource_presentation|lookup_uni:k as resource_info %}
<dt>
Max {% if resource_info.is_abbreviation %}{{ info.resource|upper }}{% else %}{{ r.resource }}{% endif %}{% if not info.unit %}s {% endif %} per user
</dt>
<dd>
{% with quota|lookup:k as uplimit%}
{% if uplimit == "inf" %}
unlimited
{% else %}
{{ uplimit }}
{% endif %}
{% endwith%}
</dd>
{% endwith%}
{% endwith %}
{% endwith %}
{% endfor %}
</dl>
{% else %}
......
......@@ -8,7 +8,7 @@
{% block page.body %}
<form action="" method="post" class="withlabels quotas-form">{% csrf_token %}
<form action="" method="post" class="withlabels quotas-form" id="group_create_form">{% csrf_token %}
<fieldset class="with-info">
<legend>
......@@ -25,7 +25,7 @@
<fieldset id="icons">