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

refactor menu lists on compounds list page + more/less links

Former-commit-id: aa0b65eb2886ffc98f4504b09ec06e4ddaff7e10
parent c4be4c61
No related branches found
No related tags found
No related merge requests found
......@@ -9,6 +9,18 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static/Kekule.js-master/release/kekule.js?modules=chemWidget,openbabel,indigo"></script>
<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{
url.searchParams.delete(paramName);
}
var modifiedUrl = url.toString();
window.location = modifiedUrl;
};
</script>
</head>
<body>
......
......@@ -29,69 +29,14 @@
</div>
</nav>
</div>
{% include "kekule_display.html" %}
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form>
<fieldset class="form-group row border border-info m-2">
<div class="bg-info col-12"><legend>PPI</legend></div>
{% for ppi in selected_ppis %}
<div class="form-check col-12">
<label class="form-check-label">
<input class="form-check-input text-right" type="checkbox" checked value="{{ ppi.id }}" onchange="this.form.submit()" name="ppi" style="width: auto; margin-right: 1em;">
{{ ppi.name }}
</label>
</div>
{% endfor %}
{% for ppi in ppis|slice:":5" %}
<div class="form-check col-12">
<label class="form-check-label">
<input class="form-check-input text-right" type="checkbox" value="{{ ppi.id }}" onchange="this.form.submit()" name="ppi" style="width: auto; margin-right: 1em;">
{{ ppi.name }}
</label>
</div>
{% endfor %}
</fieldset>
<fieldset class="form-group row border border-info m-2">
<div class="bg-info col-12"><legend>Disease</legend></div>
{% for disease in selected_diseases %}
<div class="form-check col-12">
<label class="form-check-label">
<input class="form-check-input text-right" type="checkbox" checked value="{{ disease.id }}" onchange="this.form.submit()" name="disease" style="width: auto; margin-right: 1em;">
{{ disease.name }}
</label>
</div>
{% endfor %}
{% for disease in diseases|slice:":5" %}
<div class="form-check col-12">
<label class="form-check-label">
<input class="form-check-input text-right" type="checkbox" value="{{ disease.id }}" onchange="this.form.submit()" name="disease" style="width: auto; margin-right: 1em;">
{{ disease.name }}
</label>
</div>
{% endfor %}
</fieldset>
<fieldset class="form-group row border border-info m-2">
<div class="bg-info col-12"><legend>Organism</legend></div>
{% for taxonomy in selected_taxonomies %}
<div class="form-check col-12">
<label class="form-check-label">
<input class="form-check-input text-right" type="checkbox" checked value="{{ taxonomy.id }}" onchange="this.form.submit()" name="taxonomy" style="width: auto; margin-right: 1em;">
{{ taxonomy.name }}
</label>
</div>
{% endfor %}
{% for taxonomy in taxonomies|slice:":5" %}
<div class="form-check col-12">
<label class="form-check-label">
<input class="form-check-input text-right" type="checkbox" value="{{ taxonomy.id }}" onchange="this.form.submit()" name="taxonomy" style="width: auto; margin-right: 1em;">
{{ taxonomy.name }}
</label>
</div>
{% endfor %}
</fieldset>
{% include "multiselection_list_menu.html" with label="PPI" selected_list=selected_ppis unselected_list=ppis param_name="ppi" limit_param_name="ppis_limit" limit_param_value=ppis_limit %}
{% include "multiselection_list_menu.html" with label="Disease" selected_list=selected_diseases unselected_list=diseases param_name="disease" limit_param_name="diseases_limit" limit_param_value=diseases_limit %}
{% include "multiselection_list_menu.html" with label="Organism" selected_list=selected_taxonomies unselected_list=taxonomies param_name="taxonomy" limit_param_name="taxonomies_limit" limit_param_value=taxonomies_limit %}
</form>
</div>
<main class="col-12 col-md-9 col-xl-10 pl-md-5 bd-content" role="main">
......
<fieldset class="form-group row border border-info m-2">
<div class="bg-info col-12">
<legend>{{ label }}
{% if limit_param_value %}
<a href="#" class="float-right text-light" title="Display all {{ label }}s" onclick="modifyUrl('{{ limit_param_name }}',null);">[+]</a>
<input type="hidden" name="{{ limit_param_name }}" value="{{ limit_param_value }}" />
{% endif %}
{% if not limit_param_value %}
<a href="#" class="float-right text-light" title="Show only top 5 {{ label }}s" onclick="modifyUrl('{{ limit_param_name }}',5);">[-]</a>
{% endif %}
</legend>
</div>
{% for element in selected_list %}
<div class="form-check col-12">
<label class="form-check-label">
<input 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;">
{{ element.name }}
</label>
</div>
{% endfor %}
{% 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;">
{{ element.name }}
</label>
</div>
{% endfor %}
</fieldset>
......@@ -195,12 +195,30 @@ def compound_list(request):
compounds = compounds.filter(compoundaction__ppi__id__in=request.GET.getlist('ppi'))
if request.GET.get('disease'):
compounds = compounds.filter(compoundaction__ppi__diseases__id__in=request.GET.getlist('disease'))
selected_ppis = Ppi.objects.filter(id__in=request.GET.getlist('ppi'))
try:
ppis_limit = int(request.GET.get('ppis_limit'))
except:
ppis_limit = None
try:
diseases_limit = int(request.GET.get('diseases_limit'))
except:
diseases_limit = None
try:
taxonomies_limit = int(request.GET.get('taxonomies_limit'))
except:
taxonomies_limit = None
selected_ppis = Ppi.objects.filter(id__in=request.GET.getlist('ppi'))
ppis = Ppi.objects.exclude(id__in=request.GET.getlist('ppi'))
if ppis_limit is not None:
ppis = ppis[:ppis_limit]
selected_diseases = Disease.objects.filter(id__in=request.GET.getlist('disease'))
diseases = Disease.objects.exclude(id__in=request.GET.getlist('disease'))
if diseases_limit is not None:
diseases = diseases[:diseases_limit]
selected_taxonomies = Taxonomy.objects.filter(id__in=request.GET.getlist('taxonomy'))
taxonomies = Taxonomy.objects.exclude(id__in=request.GET.getlist('taxonomy'))
if taxonomies_limit is not None:
taxonomies = taxonomies[:taxonomies_limit]
# handle pagination in compounds list
paginator = Paginator(compounds, 5)
page = request.GET.get('page')
......@@ -215,10 +233,13 @@ def compound_list(request):
return render(request, 'compound_list.html', {'compounds': compounds,
'selected_ppis': selected_ppis,
'ppis': ppis,
'ppis_limit': ppis_limit,
'selected_diseases': selected_diseases,
'diseases': diseases,
'diseases_limit': ppis_limit,
'selected_taxonomies': selected_taxonomies,
'taxonomies': taxonomies})
'taxonomies': taxonomies,
'taxonomies_limit': taxonomies_limit})
def compound_card(request, compound_id):
try:
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment