Commit 4ed5fd66 authored by Hervé  MENAGER's avatar Hervé MENAGER
Browse files

various improvements to URL manipulations

- refactor JS in ippidb-query-url
- remove page number when filters change (FIX #117)
parent 9fb3603a
Pipeline #15787 passed with stages
in 10 minutes and 16 seconds
$(document).ready(function(){
$(document).ready(function() {
var marvinModal = new MarvinModal(
'marvin-div',
'modal-marvin',
'smiles-textarea',
'marvinApplyButton',
function (smilesString){
function(smilesString) {
var fingerprint = '';
if(smilesString.trim()!==''){
if (smilesString.trim() !== '') {
fingerprint = $('input[name=fingerprint]:checked').val();
modifyUrl('similar_to',fingerprint+':'+smilesString);
}else{
modifyUrl('similar_to', null);
queryUrl.modify('similar_to', fingerprint + ':' + smilesString);
} else {
queryUrl.modify('similar_to', null);
}
}
);
});
});
\ No newline at end of file
class QueryUrl {
constructor(loadingEl) {
this.url = new URL(location.href);
this.loadingEl = loadingEl
}
modify(paramName, paramValue) {
if (Array.isArray(paramValue)) {
// set multiple values for one parameter
this.url.searchParams.delete(paramName);
paramValue.forEach(function(value) {
this.url.searchParams.append(paramName, value);
});
} else if (paramValue != null) {
// set one value for one parameter
this.url.searchParams.set(paramName, paramValue);
} else if (Array.isArray(paramName)) {
// unset value for multiple parameters
paramName.forEach(function(name) {
this.url.searchParams.delete(name);
});
} else {
// unset value for one parameter
this.url.searchParams.delete(paramName);
}
this.go();
}
changeSelection(paramName, values) {
values = values || $('input[name=' + paramName + ']:checked').map(function(_, el) { return $(el).val(); }).get();
this.modify(paramName, values);
}
removeFromSelection(paramName, value) {
var selectedValues = this.url.searchParams.getAll(paramName);
selectedValues.splice(selectedValues.indexOf(value), 1);
this.modify(paramName, selectedValues);
}
go() {
var modifiedUrl = this.url.toString();
window.location = modifiedUrl;
if (this.loadingEl) {
$('#loadingModal').modal();
}
}
}
\ No newline at end of file
......@@ -31,38 +31,6 @@
{% block extra_js %}{% endblock %}
<script type="text/javascript">
var modifyUrl = function(paramName, paramValue){
var url = new URL(location.href);
if(Array.isArray(paramValue)){
url.searchParams.delete(paramName);
paramValue.forEach(function(value){
url.searchParams.append(paramName,value);
});
} else if (paramValue!=null){
url.searchParams.set(paramName, paramValue);
}else if (Array.isArray(paramName)){
paramName.forEach(function(name){
url.searchParams.delete(name);
});
}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);
}
var removeFromSelection = function(paramName, value){
var url = new URL(location.href);
var selectedValues = url.searchParams.getAll(paramName);
selectedValues.splice(selectedValues.indexOf(value), 1);
modifyUrl(paramName, selectedValues);
}
var multiselectTypeAhead = function(idSearch, selection, onSelect){
var bh = new Bloodhound({
......@@ -300,9 +268,9 @@
var toggleCheckBox = function(id){
var cb = $('#'+id);
if(cb.prop('checked')==true){
modifyUrl(id,cb.prop('checked'));
queryUrl.changeSelection(id,cb.prop('checked'));
}else{
modifyUrl(id,null);
queryUrl.changeSelection(id,null);
}
}
......
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ label }}
<a href="#" style="color: #495057;" onclick="modifyUrl('{{ param_name }}',null)"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color: #495057;" onclick="queryUrl.modify('{{ param_name }}',null)"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
\ No newline at end of file
......@@ -12,9 +12,10 @@
<script src="/static/js/ippidb-compoundws.js"></script>
<script src="/static/js/ippidb-marvinjsmodal.js"></script>
<script src="/static/js/compound_list.js"></script>
<script src="/static/js/ippidb-query-url.js" type="text/javascript"></script>
<script>
function openNav() {
console.log('test');
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
document.getElementById("main").style.marginLeft = "0px";
}
......@@ -49,7 +50,7 @@
Search
</h1>
<div class="filter_item" style="display: inline-flex; width:100%;">
<input style="width: 100%;" id="q" value="{{ q | default_if_none:"" }}" class="form-control col-9" type="search" placeholder="Search" onchange="modifyUrl('q',$('#q').val());">
<input style="width: 100%;" id="q" value="{{ q | default_if_none:"" }}" class="form-control col-9" type="search" placeholder="Search" onchange="queryUrl.modify('q',$('#q').val());">
</div>
<hr>
<h1 class="side_menu_title">
......@@ -211,18 +212,18 @@
</button>
<div class="dropdown-menu" aria-labelledby="sortMenuButto">
{% for sort_by_value, sort_by_entry in sort_by_options.items %}
<a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="modifyUrl('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
<a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="queryUrl.modify('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
{% endfor %}
</div>
</div>
<span class="compounds_display_btn ml-1 pb-0">
<a class="btn btn-default btn-outline-primary compounds_display_btn {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="modifyUrl('display', 'v')"{% endif %}>
<a class="btn btn-default btn-outline-primary compounds_display_btn {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="queryUrl.modify('display', 'v')"{% endif %}>
<i class="fa fa-th" title="Thumbnails"></i>
</a>
<a class="btn btn-default btn-outline-primary compounds_display_btn {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="modifyUrl('display', 'l')"{% endif %}>
<a class="btn btn-default btn-outline-primary compounds_display_btn {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="queryUrl.modify('display', 'l')"{% endif %}>
<i class="fa fa-bars" title="List"></i>
</a>
<a class="btn btn-default btn-outline-primary compounds_display_btn {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="modifyUrl('display', 't')"{% endif %}>
<a class="btn btn-default btn-outline-primary compounds_display_btn {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="queryUrl.modify('display', 't')"{% endif %}>
<i class="fa fa-table" title="Table"></i>
</a>
</span>
......@@ -336,4 +337,8 @@
{% include "slider_modal.html" with label="LE" param_name="le" param_min=le_min param_max=le_max param_value=le param_value_min=le_value_min param_value_max=le_value_max step='0.1' param_label='Select a cutoff value for the LE of the compounds to be selected'%}
{% include "slider_modal.html" with label="LLE" param_name="lle" param_min=lle_min param_max=lle_max param_value=lle param_value_min=lle_value_min param_value_max=lle_value_max step='1' param_label='Select a cutoff value for the LLE of the compounds to be selected'%}
{% endblock %}
<script>
var queryUrl = new QueryUrl($('#loadingModal'));
</script>
{% endblock %}
\ No newline at end of file
......@@ -69,18 +69,18 @@
</button>
<div class="dropdown-menu" aria-labelledby="sortMenuButto">
{% for sort_by_value, sort_by_entry in sort_by_options.items %}
<a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="modifyUrl('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
<a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="queryUrl.modify('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
{% endfor %}
</div>
</div>
<span class="btn-group col-md-2">
<a class="btn btn-default btn-outline-primary {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="modifyUrl('display', 'v')"{% endif %}>
<a class="btn btn-default btn-outline-primary {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="queryUrl.modify('display', 'v')"{% endif %}>
<i class="fa fa-th" title="Thumbnails"></i>
</a>
<a class="btn btn-default btn-outline-primary {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="modifyUrl('display', 'l')"{% endif %}>
<a class="btn btn-default btn-outline-primary {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="queryUrl.modify('display', 'l')"{% endif %}>
<i class="fa fa-bars" title="List"></i>
</a>
<a class="btn btn-default btn-outline-primary {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="modifyUrl('display', 't')"{% endif %}>
<a class="btn btn-default btn-outline-primary {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="queryUrl.modify('display', 't')"{% endif %}>
<i class="fa fa-table" title="Table"></i>
</a>
</span>
......@@ -135,7 +135,7 @@
<div class="input-group input-group-sm">
<input id="pageNumber" type="number" min="1" max="{{compounds.paginator.num_pages}}" step="1" placeholder="page #" style="width: 4em;" aria-label="Page number">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" onclick="modifyUrl('page',$('#pageNumber').val())">Go</button>
<button class="btn btn-outline-primary" type="button" onclick="queryUrl.modify('page',$('#pageNumber').val())">Go</button>
</div>
</div>
</li>
......
......@@ -25,7 +25,7 @@
<div class="input-group input-group-sm">
<input id="pageNumber" type="number" min="1" max="{{ paginator.num_pages }}" step="1" placeholder="page #" style="width: 4em;" aria-label="Page number">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" onclick="modifyUrl('page',$('#pageNumber').val())">Go</button>
<button class="btn btn-outline-primary" type="button" onclick="queryUrl.modify('page',$('#pageNumber').val())">Go</button>
</div>
</div>
</li>
......
......@@ -2,13 +2,13 @@
{% with '-'|add:col_id as col_id_desc %}
<th scope="col" title="{{ col_title }}">
{% if col_id == sort_by %}
<a onclick="modifyUrl('sort_by','{{ col_id_desc }}')" title="click to sort descending on {{ col_name }}" href="#">{{ col_name | capfirst }}</a>
<a onclick="queryUrl.modify('sort_by','{{ col_id_desc }}')" title="click to sort descending on {{ col_name }}" href="#">{{ col_name | capfirst }}</a>
<i class="fa fa-sort-up" title="sorted by ascending {{ col_name }}" style="color:#9baab7;"></i>
{% elif col_id_desc == sort_by %}
<a onclick="modifyUrl('sort_by','{{ col_id }}')" title="click to sort ascending on {{ col_name }}" href="#">{{ col_name | capfirst }}</a>
<a onclick="queryUrl.modify('sort_by','{{ col_id }}')" title="click to sort ascending on {{ col_name }}" href="#">{{ col_name | capfirst }}</a>
<i class="fa fa-sort-down" title="sorted by descending {{ col_name }}" style="color:#9baab7;"></i>
{% elif col_id in sort_by_options %}
<a onclick="modifyUrl('sort_by','{{ col_id }}')" title="click to sort ascending on {{ col_name }}" href="#">{{ col_name | capfirst }}</a>
<a onclick="queryUrl.modify('sort_by','{{ col_id }}')" title="click to sort ascending on {{ col_name }}" href="#">{{ col_name | capfirst }}</a>
{% else %}
{{ col_name | capfirst }}
{% endif %}
......
......@@ -168,7 +168,7 @@
<script>
function changeFieldsSelection(){
var selectedFields = $('input[name=field]:checked').map(function(_, el) { return $(el).val(); }).get();
modifyUrl('fields', selectedFields);
queryUrl.modify('fields', selectedFields);
}
</script>
<button class="btn btn-secondary close_btn" data-dismiss="modal"><i class="fas fa-times" style="width: .5em;"></i> Close</button>
......
......@@ -61,7 +61,7 @@
</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-{{ param_name }}').modal('hide'); changeSelection('{{ param_name }}');">Apply</button>
<button type="button" class="btn btn-primary" onclick="$('#modal-{{ param_name }}').modal('hide'); queryUrl.changeSelection('{{ param_name }}');">Apply</button>
</div>
</div>
</div>
......
{% if values %}
{% for value in values %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ value.name|default:value }}
<a href="#" style="color: #495057;" onclick="removeFromSelection('{{ param_name }}', '{{ value.id|default:value }}')"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color: #495057;" onclick="queryUrl.removeFromSelection('{{ param_name }}', '{{ value.id|default:value }}')"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endfor %}
{% endif %}
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%" title="{{ param_value }}">{{ param_label }}: {% include "compound_smiles_draw.html" with id='similar_to' smile=param_value width='30' height='16' theme="dark"%}
<a href="#" style="color: #495057;" onclick="modifyUrl(['{{ param_name }}','sort_by'])"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color: #495057;" onclick="queryUrl.modify(['{{ param_name }}','sort_by'])"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ param_label }}: {{ param_value_min }} to {{ param_value_max }}
<a href="#" style="color:#495057;" onclick="removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color:#495057;" onclick="queryUrl.removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
\ No newline at end of file
......@@ -9,9 +9,6 @@
</div>
<div class="modal-body">
<label for="{{ param_name }}">{{ param_label }}</label>
<!--
<input id="{{ param_name }}" class="custom-range" type="range" min="{{ param_min }}" max="{{ param_max }}" value="{{ param_value }}" step="{{ step }}" onchange="$('#{{ param_name }}_textvalue').html($('#{{ param_name }}').val());"> <p>Current value: <code id="{{ param_name }}_textvalue">{{ param_value }}</code></p>
-->
<input id="{{ param_name }}" class="custom-range" type="text" value="" data-slider-min="{{ param_min }}" data-slider-max="{{ param_max }}"
data-slider-step="{{ step }}" data-slider-value="[{{ param_value_min|default:param_min }}, {{ param_value_max|default:param_max }}]" style="width:100%"/>
<p>Current selection range: <code id="{{ param_name }}_textvalue_min">{{ param_value_min|default:param_min }}</code> to
......@@ -22,8 +19,8 @@
</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-{{ param_name }}').modal('hide'); modifyUrl('{{ param_name }}',$('#{{ param_name }}').val());">Apply</button>
<button type="button" class="btn btn-primary" onclick="$('#modal-{{ param_name }}').modal('hide'); queryUrl.changeSelection('{{ param_name }}',$('#{{ param_name }}').val());">Apply</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ param_value }}
<a href="#" style="color:#495057;" onclick="removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color:#495057;" onclick="queryUrl.removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
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