Skip to content
GitLab
Commit 9ed3f3b1 authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Rebuild the material list component (2)

parent 3d624d17
Hide whitespace changes
Inline Side-by-side
client/bundle.js
View file @ 9ed3f3b1
......@@ -374,7 +374,6 @@
// global state vars
let materialId = null;
let searchResults = false;
// app-level constants
......@@ -788,7 +787,6 @@
module.exports = {
searchResults,
materialId,
MAT_VIEW: MAT_VIEW,
IMAGE_DIR: IMAGE_DIR,
......@@ -7847,7 +7845,7 @@
//let filterMap = this.filterPanel.getValues();
//this._addFiltersInSearchQuery(filterMap, queryObj);
this.materialList.setSearch(rootQueryObj);
this.materialList.initSearch(rootQueryObj);
//util.setBrowserHashPath('search','results');
this.element.querySelector('.add-box').style.display = 'none';
......@@ -9219,21 +9217,18 @@
constructor(){
this.element = document.createElement('div');
this.element.setAttribute("id",'matlist');
this.formula = false; // **** Maybe this field can be removed
// map containing an entry per system type (if there are materials for it)
this.matMap = new Map();
this.matMap = new Map();
this.page = 0;
this.searchJson = null;
this.total_results = 0;
this.pagesNum = 0;
this.currentSystemType = 'bulk';
this.esQueryObject = null;
this.element.innerHTML=
`
<div id="system-type-tabs" style=" display: inline-block">
<button class="bulk-system-tab" id="add-tab-selected">BULK</button>
<button class="2D-system-tab" >2D</button>
<button class="1D-system-tab" style="padding: 10px 20px;" >1D</button>
<span class="title" >Results<span>
<button id="system-tab-bulk" class="selected">BULK</button>
<button id="system-tab-2D" >2D</button>
<button id="system-tab-1D" >1D</button>
<span class="results-total" >Results<span>
</div>
<div class="pag-header">
<span class="prevButton">
......@@ -9246,7 +9241,7 @@
</div>
<div class="data-container"> </div>`; // results data container
this.titleBox = this.element.getElementsByClassName("title")[0];
this.titleBox = this.element.getElementsByClassName("results-total")[0];
this.tabsBox = this.element.querySelector("#system-type-tabs");
// Pagination components
this.resultsNrTag = this.element.getElementsByClassName("pag-header")[0];
......@@ -9269,45 +9264,37 @@
this.tabsBox.addEventListener( "click", (e) => {
if (e.target !== e.currentTarget) { // When the event source is a child
let className = e.target.className;
let index = className.indexOf('system-tab');
let tabId = e.target.id;
let index = tabId.indexOf('system-tab');
if (index > 0){
let selectingElement;
let selectingTab = className.substring(0, index-1);
if (index >= 0){
let selectingTab = tabId.substring('system-tab'.length+1);
this._updateUI(selectingTab);
/*
this.addPanel.replaceChild(selectingElement, this.addPanel.lastChild);
this.element.querySelector('.add-box').style.display = 'block';
// Change the styles of the buttons
let selEl = this.element.querySelector('.'+this.currentTab+'-add-btn');
this._setTabSelectedStyles(selEl, false);
this._setTabSelectedStyles(e.target, true);
// Change the styles of the tabs
this.element.querySelector('#system-tab-'+this.currentSystemType).className = '';
this.element.querySelector('#system-tab-'+selectingTab).className = 'selected';
// Change the triangle
this.element.querySelector('.'+this.currentTab+'-tri').style.visibility = 'hidden';
this.element.querySelector('.'+selectingTab+'-tri').style.visibility = 'visible';
*/
this.currentTab = selectingTab;
this.currentSystemType = selectingTab;
}
}
});
this.nextButton.addEventListener('click', e => {
if (this.page === this.pagesNum) return;
this.page++;
this._search();
let systemData = this.matMap.get(this.currentSystemType);
if (systemData.page === systemData.totalPages) return;
systemData.page++;
console.log('nextButton page:', systemData.page);
this._paginationSearch();
});
this.prevButton.addEventListener('click', e => {
if (this.page === 1) return;
this.page--;
this._search();
let systemData = this.matMap.get(this.currentSystemType);
if (systemData.page === 1) return;
systemData.page--;
console.log('nextButton page:', systemData.page);
this._paginationSearch();
});
this.resultsContainer.addEventListener('click', (e) => {
......@@ -9329,31 +9316,34 @@
}
/*
_printMatMap(){console.log('MATMAP:');
this.matMap.forEach(function(value, key, ownerMap) {
console.log(key + ' '+JSON.stringify(value));
});
}
*/
setSearch(searchJson){
//this.formula= formula;
this.resultsContainer.style.visibility = 'hidden';
_paginationSearch(){
this.esQueryObject.bool.must[1].match.system_type = this.currentSystemType;
let page = this.matMap.get(this.currentSystemType).page;
this.searchJson = searchJson;
this.page = 1;
let req = util.serverReqPOST(util.getSearchURL()+'?page='+page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(this.esQueryObject), e => {
let data = JSON.parse(e.target.response); console.log('GETTING: ', data);
this.matMap.set(this.currentSystemType, this._createSystemTypeData(data, page, true));
//console.log('this.matMap: ', this.matMap);
this._updateUI(this.currentSystemType);
});
this._search();
}
_search(){
initSearch(searchJson){
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( this.searchJson );
rootQueryObj.bool.must.push( searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
this.esQueryObject = rootQueryObj;
console.log('SENDING: ', JSON.stringify(rootQueryObj));
......@@ -9362,156 +9352,121 @@
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
// Bulk materials request
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), bulke => {
let bulkData = JSON.parse(bulke.target.response); console.log('GETTING: ', bulkData);
this.matMap.set('bulk', createSystemTypeData(bulkData, this.page, bulke.target.status === 200));
this.matMap.set('bulk', this._createSystemTypeData(bulkData, 1, bulke.target.status === 200));
console.log('this.matMap: ', this.matMap);
// 2D materials request
rootQueryObj.bool.must[1].match.system_type = '2D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let twoDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
let twoDReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), twoDe => {
let twoDData = JSON.parse(twoDe.target.response);
this.matMap.set('2D', createSystemTypeData(twoDData, this.page, twoDe.target.status === 200));
this.matMap.set('2D', this._createSystemTypeData(twoDData, 1, twoDe.target.status === 200));
console.log('this.matMap: ', this.matMap);
// 1D materials request
rootQueryObj.bool.must[1].match.system_type = '1D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let oneDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
let oneDReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), oneDe => {
let oneDData = JSON.parse(oneDe.target.response);
this.matMap.set('1D', createSystemTypeData(oneDData, this.page, oneDe.target.status === 200));
this.matMap.set('1D', this._createSystemTypeData(oneDData, 1, oneDe.target.status === 200));
console.log('this.matMap: ', this.matMap);
this._updateUI('bulk');
this.resultsContainer.style.visibility = 'visible';
//this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
this._launchMaterialViewerIfOnlyOne();
});
});
//if (data.total_results === 1){
//util.setBrowserHashPath('material',+matData[0].id);
//util.searchResults = false;
//}else{
//util.searchResults = true;
/*
if (e.target.status === 200){
this.total_results = data.total_results;
this.pagesNum = Math.ceil(data.total_results/RESULTS_PER_PAGE);//0;//(data.pages === null ? 1 : data.pages.pages);
let matData = data.results;
if (this.total_results === 1){
util.setBrowserHashPath('material',+matData[0].id);
util.searchResults = false;
}else{
let systemTypeMatMap = new Map();
this.matMap.set('bulk',
{'materials': systemTypeMatMap, 'page': this.page, 'total': data.total_results}
);
this.setData(systemTypeMatMap, matData);
util.searchResults = true;
}
}else{ // Right query - results not found
this.total_results = 0;
this.pagesNum = 0;
// this.matMap.set('bulk', new Map());
this.setData([]);
}
//this._updateUI();
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
*/
});
/*
oReq.addEventListener("error", e => { // Not valid query
console.log('Search ERROR - Not valid query ');
this.total_results= 0;
this.pagesNum = 0;
this.setData([]);
this._updateUI();
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
*/
function createSystemTypeData(data, page, status){
if (status){
//this.pagesNum = Math.ceil(data.total_results/RESULTS_PER_PAGE);//0;//(data.pages === null ? 1 : data.pages.pages);
let systemTypeMatMap = new Map();
data.results.forEach( mat => {
if (systemTypeMatMap.has(mat.formula_reduced)){
let matArray= systemTypeMatMap.get(mat.formula_reduced);
matArray.push(mat);
}else{
let newArray= []; newArray.push(mat);
systemTypeMatMap.set(mat.formula_reduced, newArray);
}
}); //this._printMatMap();
return { 'materials': systemTypeMatMap,
'page': page,
'total': data.total_results };
}
}else return null; // Right query - results not found
//this.total_results = 0;
//this.pagesNum = 0;
}
_launchMaterialViewerIfOnlyOne(){
let mat;
let sum = 0;
this.matMap.forEach( (materials, systemType) => {
sum += materials.total;
if (materials.total === 1)
mat = materials.materials.values().next().value[0];
});
if (sum === 1) util.setBrowserHashPath('material',+(mat.id));
}
reset(){
this.formula= false;
this.matMap.clear();
this.page= 0;
this.searchJson= null;
this._updateUI();
_createSystemTypeData(data, page, status){
if (status){
let systemTypeMatMap = new Map();
data.results.forEach( mat => {
if (systemTypeMatMap.has(mat.formula_reduced)){
let matArray= systemTypeMatMap.get(mat.formula_reduced);
matArray.push(mat);
}else{
let newArray= []; newArray.push(mat);
systemTypeMatMap.set(mat.formula_reduced, newArray);
}
});
return { 'materials': systemTypeMatMap,
'page': page,
'total': data.total_results,
'totalPages': Math.ceil(data.total_results/RESULTS_PER_PAGE)
};
}else return null; // Right query - results not found
//this.total_results = 0;
}
_updateUI(systemType){
console.log('_updateUI',systemType, this.matMap.get(systemType).total);
let systemData = this.matMap.get(systemType);
console.log('_updateUI',systemType, systemData);
let totalResults = this.matMap.get(systemType).total;
this.titleBox.innerHTML= 'Results (total: '+totalResults+')';
this.pageElement.innerHTML= 'page '+this.page+' / '+Math.ceil(totalResults/RESULTS_PER_PAGE);
this.titleBox.innerHTML= 'Results (total: '+systemData.total+')';
this.pageElement.innerHTML= 'page '+systemData.page+' / '+systemData.totalPages;
let html = '';
if (this.matMap.get(systemType) === null) {
if (systemData === null) {
this.resultsNrTag.style.display = 'none';
this.titleBox.style.display = 'none';
if (this.page === 1)
html+= `<div class="not-found"> No results found </div>`;
//if (this.page === 1)
//html+= `<div class="not-found"> No results found </div>`;
// If there is search without results IF PAGE == 0 THERE ISN'T SEARCH
}else{
this.resultsNrTag.style.display = 'block';
this.titleBox.style.display = 'block';
this.titleBox.style.display = 'inline';
html +=`
<table>
......@@ -9531,7 +9486,7 @@
<tbody>
`;
this.matMap.get(systemType).materials.forEach((mats, formula) => {
systemData.materials.forEach((mats, formula) => {
let rFormula = util.getSubscriptedFormula(formula);
html+= '<tr> <td class="formula" colspan="5"><b>'+rFormula+'</b>';
......
client/css/styles.css
View file @ 9ed3f3b1
......@@ -635,6 +635,11 @@ div#specialRows{margin: 30px 40px;}
#matlist{ width: 742px; margin: 40px auto 40px;}
#system-type-tabs{width: 100%; }
#system-type-tabs button{ font-size: 1.2em; }
#system-type-tabs button.selected { color: #E56400;}
span.results-total { float: right;}
/* #paginationWg erased*/
#matlist .formula {
padding: 20px 0 4px; font-size: 1.1em;
......
client/src/common/util.js
View file @ 9ed3f3b1
......@@ -39,7 +39,6 @@ let Conf = require('../Conf.js');
// global state vars
let materialId = null;
let searchResults = false;
// app-level constants
......@@ -453,7 +452,6 @@ function is2DSystem_temporary_patch(){
module.exports = {
searchResults,
materialId,
MAT_VIEW: MAT_VIEW,
IMAGE_DIR: IMAGE_DIR,
......
client/src/search-mod/MaterialList.view.js
View file @ 9ed3f3b1
......@@ -35,21 +35,18 @@ class MaterialList {
constructor(){
this.element = document.createElement('div');
this.element.setAttribute("id",'matlist');
this.formula = false; // **** Maybe this field can be removed
// map containing an entry per system type (if there are materials for it)
this.matMap = new Map();
this.matMap = new Map();
this.page = 0;
this.searchJson = null;
this.total_results = 0;
this.pagesNum = 0;
this.currentSystemType = 'bulk';
this.esQueryObject = null;
this.element.innerHTML=
`
<div id="system-type-tabs" style=" display: inline-block">
<button class="bulk-system-tab" id="add-tab-selected">BULK</button>
<button class="2D-system-tab" >2D</button>
<button class="1D-system-tab" style="padding: 10px 20px;" >1D</button>
<span class="title" >Results<span>
<button id="system-tab-bulk" class="selected">BULK</button>
<button id="system-tab-2D" >2D</button>
<button id="system-tab-1D" >1D</button>
<span class="results-total" >Results<span>
</div>
<div class="pag-header">
<span class="prevButton">
......@@ -62,7 +59,7 @@ class MaterialList {
</div>
<div class="data-container"> </div>`; // results data container
this.titleBox = this.element.getElementsByClassName("title")[0];
this.titleBox = this.element.getElementsByClassName("results-total")[0];
this.tabsBox = this.element.querySelector("#system-type-tabs");
// Pagination components
this.resultsNrTag = this.element.getElementsByClassName("pag-header")[0];
......@@ -85,45 +82,37 @@ class MaterialList {
this.tabsBox.addEventListener( "click", (e) => {
if (e.target !== e.currentTarget) { // When the event source is a child
let className = e.target.className;
let index = className.indexOf('system-tab');
let tabId = e.target.id;
let index = tabId.indexOf('system-tab');
if (index > 0){
let selectingElement;
let selectingTab = className.substring(0, index-1);
if (index >= 0){
let selectingTab = tabId.substring('system-tab'.length+1);
this._updateUI(selectingTab);
/*
this.addPanel.replaceChild(selectingElement, this.addPanel.lastChild);
this.element.querySelector('.add-box').style.display = 'block';
// Change the styles of the buttons
let selEl = this.element.querySelector('.'+this.currentTab+'-add-btn');
this._setTabSelectedStyles(selEl, false);
this._setTabSelectedStyles(e.target, true);
// Change the styles of the tabs
this.element.querySelector('#system-tab-'+this.currentSystemType).className = '';
this.element.querySelector('#system-tab-'+selectingTab).className = 'selected';
// Change the triangle
this.element.querySelector('.'+this.currentTab+'-tri').style.visibility = 'hidden';
this.element.querySelector('.'+selectingTab+'-tri').style.visibility = 'visible';
*/
this.currentTab = selectingTab;
this.currentSystemType = selectingTab;
}
}
});
this.nextButton.addEventListener('click', e => {
if (this.page === this.pagesNum) return;
this.page++;
this._search();
let systemData = this.matMap.get(this.currentSystemType);
if (systemData.page === systemData.totalPages) return;
systemData.page++;
console.log('nextButton page:', systemData.page);
this._paginationSearch();
});
this.prevButton.addEventListener('click', e => {
if (this.page === 1) return;
this.page--;
this._search();
let systemData = this.matMap.get(this.currentSystemType);
if (systemData.page === 1) return;
systemData.page--;
console.log('nextButton page:', systemData.page);
this._paginationSearch();
});
this.resultsContainer.addEventListener('click', (e) => {
......@@ -145,31 +134,34 @@ class MaterialList {
}
/*
_printMatMap(){console.log('MATMAP:');
this.matMap.forEach(function(value, key, ownerMap) {
console.log(key + ' '+JSON.stringify(value));
});
}
*/
setSearch(searchJson){
//this.formula= formula;
this.resultsContainer.style.visibility = 'hidden';
_paginationSearch(){
this.esQueryObject.bool.must[1].match.system_type = this.currentSystemType;
let page = this.matMap.get(this.currentSystemType).page;
let req = util.serverReqPOST(util.getSearchURL()+'?page='+page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(this.esQueryObject), e => {
this.searchJson = searchJson;
this.page = 1;
let data = JSON.parse(e.target.response); console.log('GETTING: ', data);
this.matMap.set(this.currentSystemType, this._createSystemTypeData(data, page, true));
//console.log('this.matMap: ', this.matMap);
this._updateUI(this.currentSystemType);
});
this._search();
}
_search(){
initSearch(searchJson){
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( this.searchJson );
rootQueryObj.bool.must.push( searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
this.esQueryObject = rootQueryObj;
console.log('SENDING: ', JSON.stringify(rootQueryObj));
......@@ -178,156 +170,121 @@ class MaterialList {
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
// Bulk materials request
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), bulke => {
let bulkData = JSON.parse(bulke.target.response); console.log('GETTING: ', bulkData);
this.matMap.set('bulk', createSystemTypeData(bulkData, this.page, bulke.target.status === 200));
this.matMap.set('bulk', this._createSystemTypeData(bulkData, 1, bulke.target.status === 200));
console.log('this.matMap: ', this.matMap);
// 2D materials request
rootQueryObj.bool.must[1].match.system_type = '2D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let twoDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
let twoDReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), twoDe => {
let twoDData = JSON.parse(twoDe.target.response);
this.matMap.set('2D', createSystemTypeData(twoDData, this.page, twoDe.target.status === 200));
this.matMap.set('2D', this._createSystemTypeData(twoDData, 1, twoDe.target.status === 200));
console.log('this.matMap: ', this.matMap);
// 1D materials request
rootQueryObj.bool.must[1].match.system_type = '1D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let oneDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
let oneDReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+