Commit 91b17afc authored by Floreal Cabanettes's avatar Floreal Cabanettes
Browse files

Add backbone of adding already existing alignment file

parent 0295c795
......@@ -325,6 +325,42 @@ footer hr {
margin-top: 0;
}
h4.header-form {
text-align: center;
}
#tabs {
border-bottom: 2px solid black;
margin-bottom: 10px;
margin-top: 15px;
}
#tabs .tab {
display: inline-block;
background-color: #c8c8c8;
padding: 5px 25px 5px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#tabs .tab.active {
background-color: #eeeeee;
font-weight: bold;
}
#tabs .tab:hover {
background-color: #f7f7f7;
}
div.buttons {
margin-top: 20px;
}
div.footnotes {
margin-top: 25px;
}
/* Notify.js */
.notifyjs-corner {
top: 50px !important;
......@@ -548,6 +584,10 @@ div.in-label {
width: 300px;
}
div.in-label.grp2 {
width: 365px;
}
div.submit-form table input[type=text], div.submit-form table input[type=email] {
border: 1px solid #A9A9A9;
border-image: none;
......
......@@ -7,12 +7,13 @@ dgenies.run = {};
dgenies.run.s_id = null;
dgenies.run.allowed_ext = [];
dgenies.run.max_upload_file_size = -1
dgenies.run.files = [undefined, undefined];
dgenies.run.files = [undefined, undefined, undefined, undefined, undefined];
dgenies.run.allow_upload = false;
dgenies.run.ping_interval = null;
dgenies.run.target_example = "";
dgenies.run.query_example = "";
dgenies.run.tool_has_ava = {};
dgenies.run.enabled = true;
dgenies.run.init = function (s_id, allowed_ext, max_upload_file_size=1073741824, target_example="", query_example="",
tool_has_ava={}) {
......@@ -30,6 +31,8 @@ dgenies.run.init = function (s_id, allowed_ext, max_upload_file_size=1073741824,
dgenies.run.restore_form = function () {
dgenies.run.change_fasta_type("query", $("select.query").find(":selected").text().toLowerCase(), true);
dgenies.run.change_fasta_type("target", $("select.target").find(":selected").text().toLowerCase(), true);
dgenies.run.change_fasta_type("queryidx", $("select.query").find(":selected").text().toLowerCase(), true);
dgenies.run.change_fasta_type("targetidx", $("select.target").find(":selected").text().toLowerCase(), true);
};
dgenies.run.upload_next = function () {
......@@ -57,6 +60,10 @@ dgenies.run.allowed_file = function (filename) {
dgenies.run.allowed_ext.indexOf(filename.rsplit('.', 2).splice(1).join(".").toLowerCase()) !== -1);
};
dgenies.run._init_fileupload = function(fasta) {
//TODO: factorise init_file_uploads
};
dgenies.run.init_fileuploads = function () {
$('input.file-query').fileupload({
dataType: 'json',
......@@ -220,9 +227,28 @@ dgenies.run.set_events = function() {
$("select.target").change(function() {
dgenies.run.change_fasta_type("target", $("select.target").find(":selected").text().toLowerCase())
});
$("select.queryidx").change(function() {
dgenies.run.change_fasta_type("queryidx", $("select.queryidx").find(":selected").text().toLowerCase())
});
$("select.targetidx").change(function() {
dgenies.run.change_fasta_type("targetidx", $("select.targetidx").find(":selected").text().toLowerCase())
});
$("select.alignfile").change(function() {
dgenies.run.change_fasta_type("alignfile", $("select.alignfile").find(":selected").text().toLowerCase())
});
$("button#example").click(function() {
dgenies.run.fill_examples();
});
$("#tabs .tab").click(function() {
dgenies.run.show_tab($(this).attr("id"));
})
};
dgenies.run.show_tab = function(tab) {
$(`#tabs #${tab}`).addClass("active");
$(`#tabs .tab:not(#${tab})`).removeClass("active");
$(`.tabx:not(${tab})`).hide();
$(`.tabx.${tab}`).show();
};
dgenies.run.change_fasta_type = function (fasta, type, keep_url=false) {
......@@ -251,6 +277,7 @@ dgenies.run.set_filename = function (name, fasta) {
};
dgenies.run.disable_form = function () {
dgenies.run.enabled = false;
$("input, select, button").prop("disabled", true);
};
......@@ -267,6 +294,7 @@ dgenies.run.enable_form = function () {
dgenies.run.hide_success("target");
dgenies.run.files = [undefined, undefined];
dgenies.run.restore_form();
dgenies.run.enabled = true;
};
dgenies.run.do_submit = function () {
......@@ -333,19 +361,43 @@ dgenies.run.valid_form = function () {
}
}
//Check input target:
if ($("input#target").val().length === 0) {
$("label.file-target").addClass("error");
dgenies.run.add_error("Target fasta is required!");
has_errors = true;
let tab = $("#tabs .tab.active").attr("id");
/* TAB 1 */
if (tab === "tab1") {
//Check input target:
if ($("input#target").val().length === 0) {
$("label.file-target").addClass("error");
dgenies.run.add_error("Target fasta is required!");
has_errors = true;
}
//Check input query:
let tool = $("input[name=tool]:checked").val();
if (!dgenies.run.tool_has_ava[tool] && $("input#query").val().length === 0) {
$("label.file-query").addClass("error");
dgenies.run.add_error("Query fasta is required!");
has_errors = true;
}
}
//Check input query:
let tool = $("input[name=tool]:checked").val();
if (!dgenies.run.tool_has_ava[tool] && $("input#query").val().length === 0) {
$("label.file-query").addClass("error");
dgenies.run.add_error("Query fasta is required!");
has_errors = true;
/* TAB 2 */
else {
if ($("input#targetidx").val().length === 0) {
$("label.file-targetidx").addClass("error");
dgenies.run.add_error("Target file is required!");
has_errors = true;
}
if ($("input#queryidx").val().length === 0) {
$("label.file-queryidx").addClass("error");
dgenies.run.add_error("Query file is required!");
has_errors = true;
}
if ($("input#alignfile").val().length === 0) {
$("label.file-align").addClass("error");
dgenies.run.add_error("Alignment file is required!");
has_errors = true;
}
}
// Returns
......@@ -413,7 +465,19 @@ dgenies.run.check_url = function (url) {
url.startsWith("example://");
};
dgenies.run.reset_other_tab = function(tab) {
if (tab === "tab1") {
$("input#alignfile").val("");
dgenies.run.files[2] = undefined;
$("input#targetidx").val("");
dgenies.run.files[3] = undefined;
$("input#queryidx").val("");
dgenies.run.files[4] = undefined;
}
};
dgenies.run.start_uploads = function() {
let tab = $("#tabs .tab.active").attr("id");
let query_type = parseInt($("select.query").val());
let has_uploads = false;
let query_val = $("input#query").val();
......
......@@ -20,6 +20,12 @@
{{ tools_ava }});
{% endblock %}
{% block content %}
{% set fnote = 1 %}
<style>
.tab2 {
display: none;
}
</style>
<form id="submit_minimap" method=post action="#">
<h2 class="title-launch">Launch map analysis</h2>
<div class="errors-submit">
......@@ -49,16 +55,26 @@
{% if mode == "webserver" %}
<tr class="email">
<td>
<label for="email" class="email">E-mail*</label>
<label for="email" class="email">E-mail <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup>{% set fnote = fnote + 1 %}</label>
</td>
<td>
<input type="email" name="email" id="email" value="{{ email }}" required/>
</td>
</tr>
{% endif %}
<tr class="target">
<tr>
<td colspan="2">
<div id="tabs">
<div class="tab active" id="tab1">New alignment</div>
<div class="tab" id="tab2">Plot alignment</div>
</div>
</td>
</tr>
{# Tab 1 #}
<tr class="target tabx tab1">
<td>
<label for="file_target" class="file-target">Target fasta**</label>
<label for="file_target" class="file-target">Target fasta <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup></label>
</td>
<td class="input-group">
<select class="select-type-input target">
......@@ -81,9 +97,9 @@
<div class="file-size target"></div>
</td>
</tr>
<tr class="query">
<tr class="query tabx tab1">
<td>
<label for="file_query" class="file-query">Query fasta**</label>
<label for="file_query" class="file-query">Query fasta <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup></label>
</td>
<td class="input-group">
<select class="select-type-input query">
......@@ -107,7 +123,7 @@
</td>
</tr>
{% if tools | length > 1 %}
<tr>
<tr class="tabx tab1">
<td>
<label class="tools">Aligner</label>
</td>
......@@ -126,16 +142,112 @@
<input type="radio" name="tool" id="tool" value="{{ tools[0] }}" style="display: none;"
checked/>
{% endif %}
{# Tab 2 #}
<tr class="alignfile tabx tab2">
<td>
<label for="file_align" class="file-align">Alignment file <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup>{% set fnote = fnote + 1 %}</label>
</td>
<td class="input-group">
<select class="select-type-input alignfile">
<option value="0">Local</option>
<option value="1">Url</option>
</select>
<div class="alignfile-label in-label">
<div id="progress-alignfile" class="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<input id="alignfile" name="alignfile" class="form-control show-file" type="text" value="" readonly/>
</div>
<button class="btn btn-file" type="button" id="button-alignfile" title="Select a file">
<span class="glyphicon glyphicon-folder-open"></span>&nbsp
</button>
<div class="loading-file alignfile" style="display: none"></div>
<div class="upload-success alignfile" style="display: none"></div>
<div class="file-size alignfile"></div>
</td>
</tr>
<tr class="targetidx tabx tab2">
<td>
<label for="file_targetidx" class="file-targetidx">Target file<sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup></label>
</td>
<td class="input-group">
<select class="select-type-input targetidx">
<option value="0">Local</option>
<option value="1">Url</option>
</select>
<div class="targetidx-label in-label">
<div id="progress-targetidx" class="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<input id="targetidx" name="targetidx" class="form-control show-file" type="text" value="" readonly/>
</div>
<button class="btn btn-file" type="button" id="button-targetidx" title="Select a file">
<span class="glyphicon glyphicon-folder-open"></span>&nbsp
</button>
<div class="loading-file targetidx" style="display: none"></div>
<div class="upload-success targetidx" style="display: none"></div>
<div class="file-size targetidx"></div>
</td>
</tr>
<tr class="queryidx tabx tab2">
<td>
<label for="file_queryidx" class="file-queryidx">Query file<sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup>{% set fnote = fnote + 1 %}</label>
</td>
<td class="input-group">
<select class="select-type-input queryidx">
<option value="0">Local</option>
<option value="1">Url</option>
</select>
<div class="queryidx-label in-label">
<div id="progress-queryidx" class="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<input id="queryidx" name="queryidx" class="form-control show-file" type="text" value="" readonly/>
</div>
<button class="btn btn-file" type="button" id="button-queryidx" title="Select a file">
<span class="glyphicon glyphicon-folder-open"></span>&nbsp
</button>
<div class="loading-file queryidx" style="display: none"></div>
<div class="upload-success queryidx" style="display: none"></div>
<div class="file-size queryidx"></div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
<p class="afterworlff">* We will send you results by mail.</p>
<p class="afterworlff">** Can be gzipped.</p>
<button type="button" id="submit">Submit</button>
{% if example %}
<button type="button" id="example">Load example</button>
{% endif %}
<div class="buttons">
<button type="button" id="submit">Submit</button>
{% if example %}
<button type="button" id="example">Load example</button>
{% endif %}
</div>
<div class="footnotes">
{% set fnote = 1 %}
{% if mode == "webserver" %}
<p class="afterworlff"><sup id="fn{{ fnote }}"><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup> We will send you results by mail.</p>
{% set fnote = fnote + 1 %}
{% endif %}
<div class="tabx tab1">
{% set fnote_tab = fnote %}
<p class="afterworlff"><sup id="fn{{ fnote_tab }}"><a href="#fn{{ fnote_tab }}" id="ref{{ fnote_tab }}">{{ fnote_tab }}</a></sup> Can be gzipped.</p>
{% set fnote_tab = fnote_tab + 1 %}
</div>
<div class="tabx tab2">
{% set fnote_tab = fnote %}
<p class="afterworlff"><sup id="fn{{ fnote_tab }}"><a href="#fn{{ fnote_tab }}" id="ref{{ fnote_tab }}">{{ fnote_tab }}</a></sup> In PAF or MAF format.</p>
{% set fnote_tab = fnote_tab + 1 %}
<p class="afterworlff"><sup id="fn{{ fnote_tab }}"><a href="#fn{{ fnote_tab }}" id="ref{{ fnote_tab }}">{{ fnote_tab }}</a></sup> Fasta file or index built by <a href="#">our tool</a>.</p>
{% set fnote_tab = fnote_tab + 1 %}
</div>
</div>
</div>
<div id="uploading-loading" style="display:none;">Uploading files...</div>
<div class="hidden-input-files">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment