{% extends sitebase.html %}
{% block head %}
<script type = "text/javascript"
src = "{% raw qiita_config.portal_dir %}/static/vendor/js/jquery.validate.min.js">
</script>
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
</style>
<script>
$(document).ready(function() {
$("#new_person_div").hide();
$( "#{{creation_form.principal_investigator.id}}" ).chosen({
allow_single_deselect: true
});
$( "#{{creation_form.lab_person.id}}" ).chosen({
allow_single_deselect: true
});
$("#study_title").on("keyup", function() {
var title = $(this).val();
// removing any duplicated whitespaces
title = title.replace(/ +(?= )/g, '');
//remove all utf-8 encoded characters that are not also printable ASCII characters.
title = title.replace(/[^\x20-\x7E]+/g, "");
// removing white spaces from the front of the text
$(this).val(title.trimLeft());
});
$("#new_person_name").on("keyup", function() {
var npn = $(this).val();
// removing any duplicated whitespaces
npn = npn.replace(/ +(?= )/g, '');
//remove all utf-8 encoded characters that are not also printable ASCII characters.
npn = npn.replace(/[^\x20-\x7E]+/g, "");
// removing white spaces from the front of the text
$(this).val(npn.trimLeft());
});
$("#create_study").validate({
ignore: "",
submitHandler: function (form) {
//from http://stackoverflow.com/a/18265708
// let's disable the inputs for the duration of the ajax request
$("#create_study_submit").prop('disabled', true);
// fire off ajax the request
request = $.ajax({
type: "GET",
url: '{% raw qiita_config.portal_dir %}/check_study/',
data: {study_title: $("#study_title")[0].value.trim() {% if study %}, old_study_title: "{% raw study.title.replace('"', '\\"') %}"{% end %} }
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
if (response == 'True') {
form.submit();
}
else {
var title = $("#study_title")[0].value.trim();
$("#create_study_submit").prop('disabled', false);
$("#messagespan").text("Study '" + title + "' already exists! Please choose a different name.");
alert($("#messagespan").text());
$("#study_title").val(title)
}
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown) {
// log the error to the console
console.error(
"The following error occured: " + textStatus, errorThrown);
$("#create_study_submit").prop('disabled', false);
});
},
rules:{
{% for idx, form_item in enumerate(creation_form, start=1) %}
{% if form_item.flags.required %}
{{form_item.name}}: {required:true},
{% end %}
{% end %}
},
messages: {
{% for idx, form_item in enumerate(creation_form, start=1) %}
{% if form_item.flags.required %}
{{form_item.name}}: '{{form_item.label.text}} is required',
{% end %}
{% end %}
},
errorLabelContainer: "#errorspan",
wrapper: "li",
});
$('#{{creation_form.principal_investigator.id}}').on('change', function(e) {
$("#create_study").validate().element("#{{creation_form.principal_investigator.id}}");
});
});
counter = -1;
function add_new_person(name, affiliation, email, phone, address) {
if (name.value == '') {
$("#new_person_name").focus();
return false;
};
if (affiliation.value == '') {
$("#new_person_affiliation").focus();
return false;
};
if (email.value == '') {
$("#new_person_email").focus();
return false;
};
var new_element = '<option value="'+counter+'" "selected">' + name.value + ', ' + affiliation.value + '</option>';
$("#{{creation_form.principal_investigator.id}}").append(new_element);
$("#{{creation_form.lab_person.id}}" ).append(new_element);
$("#{{creation_form.principal_investigator.id}}").trigger("chosen:updated");
$("#{{creation_form.lab_person.id}}" ).trigger("chosen:updated");
$("#new_person_div").hide(400);
$("#create_study").append('<input type="hidden" name="new_people_names" value="' + name.value + '">');
$("#create_study").append('<input type="hidden" name="new_people_affiliations" value="' + affiliation.value + '">');
$("#create_study").append('<input type="hidden" name="new_people_emails" value="' + email.value + '">');
$("#create_study").append('<input type="hidden" name="new_people_phones" value="' + phone.value + '">');
$("#create_study").append('<input type="hidden" name="new_people_addresses" value="' + address.value + '">');
counter -= 1;
};
{% if study %}
function cancel_edition(){
if (confirm("Are you sure you want to go to the study description page? None of the changes will be stored")){
window.location.href = "{% raw qiita_config.portal_dir %}/study/description/{{study.id}}";
}
}
{% end %}
</script>
{% end %}
{% block content %}
<h1>{% if study %}Edit study (ID: {{study.id}}) {% else %}Create a new Study{%end%}</h1>
<hr/>
<h3>If you are planning to load a study with data already present in NCBI SRA or EBI ENA, please complete <a target="_blank" href="https://docs.google.com/forms/d/1SIq_JNWai7cZ2wwjD8xZpTab7qBifLKu3TZm2B363CE/edit?ts=5fbe8c0b&gxids=7628">this form</a> as we may be able to assist.
<hr/>
<h3>
<font color="red">*</font> = Required Field
</h3>
<span id="errorspan" name="errorspan" style="color: red"></span>
<span id="messagespan" name="messagespan" style="color: red"></span>
<br />
<form id="create_study" name="create_study" action={%if study%}'{% raw qiita_config.portal_dir %}/study/edit/{{study.id}}'{%else%}'{% raw qiita_config.portal_dir %}/study/create/'{%end%} method="POST">
<table>
{% for idx, form_item in enumerate(creation_form, start=1) %}
{% set kwargs = {'tabindex': idx, 'class_': 'form-control'} %}
{% set additional_info = form_item.description %}
{# form-item-specific rendering #}
{% if form_item.label.text == 'Environmental Packages' %}
{% set kwargs['size'] = len(form_item.choices) %}
{% set additional_info = 'You can select multiple entries by control-clicking (mac: command-clicking)' %}
{% elif form_item.label.text == 'Principal Investigator'%}
{% set kwargs['class_'] = kwargs['class_'] + ' chzn-select' %}
<tr>
<td></td>
<td><b>Can't find the person you're looking for? <a href="#bot" onclick='$("#new_person_div").show(400); return false;'>Add a person</a></b></td>
</tr>
<tr>
<td></td>
<td>
<div name="new_person_div" id="new_person_div">
<table>
<tr>
<td><b>Name:</b><br><font size=1>Names may only contain ASCII characters </font></td>
<td><input type="text" id="new_person_name" name="new_person_name" class="form-control"></td>
<td><h4> <font color="red">*</font></h4></td>
</tr>
<td><b>Affiliation:</b></td>
<td><input type="text" id="new_person_affiliation" name="new_person_affiliation" class="form-control"></td>
<td><h4> <font color="red">*</font></h4></td>
</tr>
<tr>
<td><b>E-mail Address:</b></td>
<td><input type="text" id="new_person_email" name="new_person_email" class="form-control"></td>
<td><h4> <font color="red">*</font></h4></td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td><input type="text" id="new_person_phone" name="new_person_phone" class="form-control"></td>
</tr>
<tr>
<td><b>Address:</b></td>
<td><input type="text" id="new_person_address" name="new_person_address" class="form-control"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input value="Add Person" type="button" class="btn btn-link" onclick='add_new_person(create_study.new_person_name, create_study.new_person_affiliation, create_study.new_person_email, create_study.new_person_phone, create_study.new_person_address);'></td>
<td><input value="Cancel" type="button" class="btn btn-link" onclick='$("#new_person_div").hide(400); return true;'></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
{% elif form_item.label.text == 'Study Title'%}
{% set additional_info = 'Study titles may only contain ASCII characters' %}
{% end %}
<tr>
<td width="20%">{% raw form_item.label %} <br /> <small>{{additional_info}}</small></td>
<td width="30%">{% raw form_item(**kwargs) %}</td>
<td width="50%">{% if form_item.flags.required %}<font color="red"><h4> *</h4></font>{% end %}</td>
</tr>
{% end %}
</tr>
<tr>
<td>
<a name="bot"><input type='submit' id="create_study_submit" class='btn btn-success' value="{%if study%}Update{%else%}Create{%end%} Study">
{%if study%} <input type='button' id="cancel_form" class='btn btn-default' value="Cancel" onclick="cancel_edition()">{%end%}
</td>
</tr>
</table>
</form>
{% end %}