Skip to content
Snippets Groups Projects
Commit e32a17a6 authored by Hervé MENAGER's avatar Hervé MENAGER
Browse files

continue working on new layout for compound query 

Former-commit-id: 13a5f19e1ca5e4c53333500354862a17bf47ffb1
parent 5efe2a6b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ippisite/ippidb/templates/base.html
+ 26
− 4
View file @ e32a17a6
......@@ -18,21 +18,27 @@
<script src="/static/js/ippidb.js" type="text/javascript"></script>
<script type="text/javascript">
var modifyUrl = function(paramName, paramValue){
var url = new URL(location.href);
if(paramValue!=null){
url.searchParams.set(paramName, paramValue);
}else if(Array.isArray(paramValue)){
if(Array.isArray(paramValue)){
url.searchParams.delete(paramName);
paramValue.forEach(function(value){
url.searchParams.append(value);
url.searchParams.append(paramName,value);
});
} else if (paramValue!=null){
url.searchParams.set(paramName, paramValue);
}else{
url.searchParams.delete(paramName);
}
var modifiedUrl = url.toString();
window.location = modifiedUrl;
$('#loadingModal').modal();
};
var changeSelection = function(paramName){
var selectedFields = $('input[name='+ paramName +']:checked').map(function(_, el) { return $(el).val(); }).get();
modifyUrl(paramName, selectedFields);
}
</script>
</head>
......@@ -136,5 +142,21 @@
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Loading...</h5>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ippisite/ippidb/templates/compound_list.html
+ 14
− 11
View file @ e32a17a6
......@@ -29,20 +29,17 @@
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form>
{% include "multiselection_list_menu.html" with label="PPI" selected_list=selected_ppis unselected_list=ppis param_name="ppi" all_param_name="ppis_all" all_param_value=ppis_all %}
{% include "multiselection_list_menu.html" with label="Disease" selected_list=selected_diseases unselected_list=diseases param_name="disease" all_param_name="diseases_all" all_param_value=diseases_all %}
{% include "multiselection_list_menu.html" with label="Organism" selected_list=selected_taxonomies unselected_list=taxonomies param_name="taxonomy" all_param_name="taxonomies_all" all_param_value=taxonomies_all %}
{% include "multiselection_list_menu.html" with label="Bound complex" selected_list=selected_boundcomplexes unselected_list=boundcomplexes param_name="boundcomplex" all_param_name="boundcomplexes_all" all_param_value=boundcomplexes_all %}
<input type="hidden" name="display" value="{{ display }}" />
</form>
</div>
<main class="col-12 col-md-9 col-xl-10 pl-md-5 bd-content" role="main">
<main class="col-12" role="main">
<form>
<div class="row">
<span class="col-md-10"><span>{{ count }} compounds</span>
{% include "multiselection_button.html" with label="PPI" %}
{% include "multiselection_button.html" with label="Disease" %}
{% include "multiselection_button.html" with label="Organism" %}
{% include "multiselection_button.html" with label="Bound complex" %}
</div>
<div class="row">
<span class="col-md-6"><span>{{ count }} compounds</span>
{% if selected_ppis or selected_diseases or selected_taxonomies or selected_boundcomplexes %}
<span>&nbsp;-&nbsp;filters:&nbsp;</span>
{% if selected_ppis %}
......@@ -130,4 +127,10 @@
{% endif %}
</ul>
</nav>
{% include "multiselection_modal.html" with label="PPI" selected_list=selected_ppis unselected_list=ppis param_name="ppi" all_param_name="ppis_all" all_param_value=ppis_all %}
{% include "multiselection_modal.html" with label="Disease" selected_list=selected_diseases unselected_list=diseases param_name="disease" all_param_name="diseases_all" all_param_value=diseases_all %}
{% include "multiselection_modal.html" with label="Organism" selected_list=selected_taxonomies unselected_list=taxonomies param_name="taxonomy" all_param_name="taxonomies_all" all_param_value=taxonomies_all %}
{% include "multiselection_modal.html" with label="Bound complex" selected_list=selected_boundcomplexes unselected_list=boundcomplexes param_name="boundcomplex" all_param_name="boundcomplexes_all" all_param_value=boundcomplexes_all %}
{% endblock %}
ippisite/ippidb/templates/multiselection_list_menu.html → ippisite/ippidb/templates/multiselection_modal.html
+ 20
− 2
View file @ e32a17a6
<div class="modal fade" id="modal-{{ label }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ label }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<fieldset class="form-group row border border-info m-2">
<div class="bg-info col-12">
<legend>{{ label }}
......@@ -13,7 +23,7 @@
{% for element in selected_list %}
<div class="form-check col-12">
<label class="form-check-label">
<input id="selected-{{ element.id }}" class="form-check-input text-right" type="checkbox" checked value="{{ element.id }}" onchange="this.form.submit()" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
<input id="selected-{{ element.id }}" class="form-check-input text-right" type="checkbox" checked value="{{ element.id }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
{{ element.name }}
</label>
</div>
......@@ -21,9 +31,17 @@
{% for element in unselected_list %}
<div class="form-check col-12">
<label class="form-check-label">
<input class="form-check-input text-right" type="checkbox" value="{{ element.id }}" onchange="this.form.submit()" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
<input class="form-check-input text-right" type="checkbox" value="{{ element.id }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
{{ element.name }}
</label>
</div>
{% endfor %}
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="$('#modal-{{ label }}').modal('hide'); changeSelection('{{ param_name }}');">Apply</button>
</div>
</div>
</div>
</div>
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