Skip to content
GitLab
Commit 266f1add authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Open source code release (step 3)

parent 2d9fa8a3
Pipeline #30122 passed with stages
in 6 seconds
Hide whitespace changes
Inline Side-by-side
client/bundle.js
View file @ 266f1add
......@@ -7085,6 +7085,30 @@
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2016-2018 Iker Hurtado
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/*
This file implements the Search Module of the application.
It's a container UI component that shows the seach part of the application:
front search interface and search results page.
*/
"use strict";
let util = __webpack_require__(1);
......@@ -7094,6 +7118,7 @@
let PropertiesBox = __webpack_require__(35);
// local utility functions
function getTagHtml(tag, isFormula){
return `<span class="search-label" data-el="${tag}" >
<img src="img/tag.svg" height="16px" class="remove-label"
......@@ -7104,11 +7129,13 @@
</span>`;
}
function replaceDashes(s){
return s.split('-').join('_');
}
class SearchMod {
constructor() {
......@@ -7165,7 +7192,7 @@
<div class="results-page" style="display: none">
</div>
`
`;
this.searchPage = this.element.querySelector('.search-page');
this.searchQueryBox= this.element.getElementsByClassName("search-query-box")[0];
......@@ -7225,11 +7252,6 @@
this._events();
}
/*
attachAndSetEvents(element){
element.appendChild(this.element);
this._events();
}*/
_events() {
// External event - Search button press
......@@ -7745,11 +7767,37 @@
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2016-2018 Iker Hurtado
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/*
This is the UI component implementing the interactive Element Table
in the search front. It need to communicate to other UI components
so it exposes several listeners
*/
"use strict";
let util = __webpack_require__(1);
// constans
const GROUPS = new Map([
[1,['H', 'Li', 'Na', 'K', 'Rb', 'Cs', 'Fr']],
[2,['Be', 'Mg', 'Ca', 'Sr', 'Ba', 'Ra']],
......@@ -7829,6 +7877,9 @@
'Livermorium', 'Tennessine', 'Oganesson'
];
// utility functions
function getElementBlock(elSymbol){
let block;
BLOCKS.forEach(function(value, key) {
......@@ -7854,7 +7905,9 @@
'<b>&nbsp;</b> <div>&nbsp;</div> </td>';
}
/*
/** Group selection not implemented
function getGroupSelectorHtml(num){
return '<th class="group-sel" data-group="'+num+'"><div></div></th>';
}
......@@ -7906,7 +7959,6 @@
get8ElementRowHtml(3);
get8ElementRowHtml(11);
// row 4,5, 6
let counter= 19;
for (let i= 0; i<4; i++){
......@@ -7966,12 +8018,6 @@
this._events();
}
/*
attachAndSetEvents(element){
element.appendChild(this.element);
this._events();
}
*/
_events() {
......@@ -8079,7 +8125,7 @@
}
}
}
} // class ElemenTable
function getElement(e){
......@@ -8106,7 +8152,7 @@
}
// EXPORTS
module.exports = ElemenTable;//{Elementable:Elementable}
module.exports = ElemenTable;
/***/ },
......@@ -8114,13 +8160,36 @@
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2016-2018 Iker Hurtado
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/*
This component implements the list of materials found in the search
*/
"use strict";
let util = __webpack_require__(1);
let InfoSys = __webpack_require__(11);
let LoadingPopup = __webpack_require__(3);
const RESULTS_PER_PAGE= 25;
const RESULTS_PER_PAGE = 25;
class MaterialList {
......@@ -8131,35 +8200,40 @@
this.matMap = new Map();
this.page = 0;
this.searchJson = null;
//this.searchExclusive= true;
this.total_results = 0;
this.pagesNum = 0;
this.element.innerHTML=
`
<div class="title"> Results </div>
<div class="pag-header">
<span class="prevButton"> <img src="img/prev.svg" style="display: inline;" width="7px"/> &nbsp; prev </span> &nbsp;&nbsp;
<span class="prevButton">
<img src="img/prev.svg" style="display: inline;" width="7px"/> &nbsp; prev
</span> &nbsp;&nbsp;
<span class="page"> X </span> &nbsp;&nbsp;
<span class="nextButton"> next &nbsp; <img src="img/next.svg" width="7px" /> </span>
<span class="nextButton"> next &nbsp;
<img src="img/next.svg" width="7px" />
</span>
</div>
<div class="data-container"> </div>`; // results data container
this.titleBox= this.element.getElementsByClassName("title")[0];
this.titleBox = this.element.getElementsByClassName("title")[0];
// Pagination components
this.resultsNrTag= this.element.getElementsByClassName("pag-header")[0];
this.resultsNrTag = this.element.getElementsByClassName("pag-header")[0];
this.prevButton= this.element.getElementsByClassName("prevButton")[0];
this.pageElement= this.element.getElementsByClassName("page")[0];
this.nextButton= this.element.getElementsByClassName("nextButton")[0];
this.prevButton = this.element.getElementsByClassName("prevButton")[0];
this.pageElement = this.element.getElementsByClassName("page")[0];
this.nextButton = this.element.getElementsByClassName("nextButton")[0];
this.resultsContainer= this.element.getElementsByClassName("data-container")[0];
this.resultsContainer = this.element.getElementsByClassName("data-container")[0];
}
attachAndSetEvents(element){
element.appendChild(this.element);
this._events();
}
_events() {
this.nextButton.addEventListener('click', e => {
......@@ -8174,7 +8248,6 @@
this._search();
});
this.resultsContainer.addEventListener('click', (e) => {
if (e.target !== e.currentTarget) { // When the event source is a child
......@@ -8186,12 +8259,12 @@
element = e.target.parentElement.parentElement;
if (element) {
//console.log("SPE ELMENT " + element+' '+element.getAttribute('data-mat-id'));
util.setBrowserHashPath('material', element.getAttribute('data-mat-id'));
}
e.stopPropagation();
}
});
}
......@@ -8206,21 +8279,19 @@
//this.formula= formula;
this.resultsContainer.style.visibility = 'hidden';
this.searchJson= searchJson;
//this.searchExclusive= exclusive;
this.page= 1;
this.searchJson = searchJson;
this.page = 1;
this._search();
}
_search(){
this.searchJson.search_by.page = this.page;
this.searchJson.search_by.per_page = 10;
let postQuery = JSON.stringify(this.searchJson);
console.log('SENDING: ', postQuery);
//console.log('SENDING: ', postQuery);
LoadingPopup.show();
let oReq = util.serverReqPOST(util.getSearchURL(), postQuery, e => {
......@@ -8228,7 +8299,7 @@
//console.log('SENDING: ', data);
if (e.target.status === 200){
this.total_results= data.total_results;
this.pagesNum= (data.pages === null ? 1 : data.pages.pages);//Math.ceil(this.total_results/RESULTS_PER_PAGE);
this.pagesNum= (data.pages === null ? 1 : data.pages.pages);
let matData= data.results;
if (matData.length === 1){
......@@ -8276,29 +8347,31 @@
}); //this._printMatMap();
}
reset(){
this.formula= false;
this.matMap.clear();
this.page= 0;
this.searchJson= null;
//this.searchExclusive= true;
this._updateUI();
}
_updateUI(){
this.titleBox.innerHTML= 'Results (total: '+this.total_results+')';
//this.pagesNum= Math.ceil(this.total_results/RESULTS_PER_PAGE);
this.pageElement.innerHTML= 'page '+this.page+' / '+this.pagesNum;
let html= '';
let html = '';
if (this.matMap.size === 0) {
this.resultsNrTag.style.display = 'none';
this.titleBox.style.display = 'none';
if (this.page === 1) // If there is search without results IF PAGE == 0 THERE ISN'T SEARCH
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';
......@@ -8324,13 +8397,11 @@
this.matMap.forEach((mats, formula) => {
//if (!this.formula || (this.formula && !this.searchExclusive)){
let rFormula = util.getSubscriptedFormula(formula);
html+= '<tr> <td class="formula" colspan="5"><b>'+rFormula+'</b>';
if ( mats.length > 1)
html += '<span style="font-size: 0.86em;"> ('+mats.length+' structures)</span>';
html += '</td></tr>';
// }
mats.forEach( mat => {
let label= (mat.material_name !== null ? mat.material_name : rFormula);
......@@ -8353,14 +8424,7 @@
html +=` </tbody> </table>`;
}
//if (data.length == 20) this.nextButton.disabled= false;
//if (this.page > 1) this.prevButton.disabled= false;
//else this.prevButton.disabled= true;
//this.pageElement.innerHTML= "( "+this.page+" )";
this.resultsContainer.innerHTML= html;
this.resultsContainer.innerHTML = html;
InfoSys.addToInfoSystem(this.resultsContainer);
}
......@@ -8375,115 +8439,37 @@
/***/ function(module, exports, __webpack_require__) {
"use strict";
let util = __webpack_require__(1);
let InfoSys = __webpack_require__(11);
/*
class MaxMinSlider{
constructor(){
this.element = document.createElement('div');
this.element.innerHTML = `
<svg class="maxminslider" xmlns="http://www.w3.org/2000/svg" width="100px" height="40px"
viewBox="0 0 100 40" >
<line class="slider-bar" x1="10" x2="90" y1="30" y2="30" stroke="blue"
stroke-width="4"/>
<circle class="min-btn" cx="10" cy="30" r="6" fill="black"/>
<text class="min-text maxminslider-text" x="10" y="10" text-anchor="start"></text>
<circle class="max-btn" cx="90" cy="30" r="6" fill="black"/>
<text class="max-text maxminslider-text" x="90" y="10" text-anchor="end"></text>
</svg>
`;
//this.bar = this.element.querySelector('.slider-bar');
this.svg = this.element.querySelector('svg');
this.minButton = this.element.querySelector('.min-btn');
this.minText = this.element.querySelector('.min-text');
this.maxButton = this.element.querySelector('.max-btn');
this.maxText = this.element.querySelector('.max-text');
this.BUTTON_R = 6;
this.minButtonDown = false;
this.minButtonInitX = null;
this.MIN_BUTTON_INIT_X = 10;
this.minX = 0;
this.maxButtonDown = false;
this.maxButtonInitX = null;
this.MAX_VALUE = 80;//this.MAX_BUTTON_INIT_X = 90;
this.maxX = this.MAX_VALUE;
console.log('minButton', this.minButton.getBoundingClientRect());
this._events();
}
_events() {
this.minButton.addEventListener( "mousedown", e => this.minButtonDown = true );
this.minButton.addEventListener( "mouseup", e => this.minButtonDown = false );
this.minButton.addEventListener( "mouseleave", e => this.minButtonDown = false );
this.minButton.addEventListener( "mousemove", e => {
//e.preventDefault();
if (this.minButtonInitX === null){
//this.minButtonInitX = this.svg.getBoundingClientRect().left;
this.minButtonInitX = this.minButton.getBoundingClientRect().left+this.BUTTON_R;//
//console.log('left', this.minButtonInitX);
}
if (this.minButtonDown){
this.minX = e.clientX-this.minButtonInitX ;
if (this.minX > 0 && this.minX < this.maxX-this.BUTTON_R){
this.minButton.setAttribute('cx', this.MIN_BUTTON_INIT_X + this.minX);
this.minText.textContent = this.minX*this.factor-250;
}
}
});
this.maxButton.addEventListener( "mousedown", e => this.maxButtonDown = true );
this.maxButton.addEventListener( "mouseup", e => this.maxButtonDown = false );
this.maxButton.addEventListener( "mouseleave", e => this.maxButtonDown = false );
this.maxButton.addEventListener( "mousemove", e => {
//e.preventDefault();
if (this.maxButtonInitX === null)
this.maxButtonInitX = this.maxButton.getBoundingClientRect().left+this.BUTTON_R;//
if (this.maxButtonDown){
this.maxX = e.clientX - this.minButtonInitX;
//console.log('maxButton', e.clientX, this.maxButtonInitX, this.maxX);
if (this.maxX < this.MAX_VALUE && this.minX+this.BUTTON_R < this.maxX){
this.maxButton.setAttribute('cx', this.MIN_BUTTON_INIT_X + this.maxX);
this.maxText.textContent = this.maxX*this.factor;
}
}
/**
* Copyright 2016-2018 Iker Hurtado
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
});
/*
This component implements the UI box (Properties) that allows add filters
to the search
*/
}
"use strict";
setRange(min, max){
this.factor = (max-min)/80;
}
let util = __webpack_require__(1);
let InfoSys = __webpack_require__(11);
}
*/
class PropertiesBox {
......@@ -8705,7 +8691,7 @@
InfoSys.addToInfoSystem(this.element);
/*
/* code for the MaxMinSlider component testing
this.testSlider = this.element.querySelector('.test-slider');
console.log("TAB: ",this.testSlider);
this.slider = new MaxMinSlider();
......@@ -8866,6 +8852,113 @@
module.exports = PropertiesBox;
/* To be implemented in the future
class MaxMinSlider{
constructor(){
this.element = document.createElement('div');
this.element.innerHTML = `
<svg class="maxminslider" xmlns="http://www.w3.org/2000/svg" width="100px" height="40px"
viewBox="0 0 100 40" >
<line class="slider-bar" x1="10" x2="90" y1="30" y2="30" stroke="blue"
stroke-width="4"/>
<circle class="min-btn" cx="10" cy="30" r="6" fill="black"/>
<text class="min-text maxminslider-text" x="10" y="10" text-anchor="start"></text>
<circle class="max-btn" cx="90" cy="30" r="6" fill="black"/>
<text class="max-text maxminslider-text" x="90" y="10" text-anchor="end"></text>
</svg>
`;
//this.bar = this.element.querySelector('.slider-bar');
this.svg = this.element.querySelector('svg');
this.minButton = this.element.querySelector('.min-btn');
this.minText = this.element.querySelector('.min-text');
this.maxButton = this.element.querySelector('.max-btn');
this.maxText = this.element.querySelector('.max-text');
this.BUTTON_R = 6;
this.minButtonDown = false;
this.minButtonInitX = null;
this.MIN_BUTTON_INIT_X = 10;
this.minX = 0;
this.maxButtonDown = false;
this.maxButtonInitX = null;
this.MAX_VALUE = 80;//this.MAX_BUTTON_INIT_X = 90;
this.maxX = this.MAX_VALUE;
console.log('minButton', this.minButton.getBoundingClientRect());
this._events();
}
_events() {
this.minButton.addEventListener( "mousedown", e => this.minButtonDown = true );
this.minButton.addEventListener( "mouseup", e => this.minButtonDown = false );
this.minButton.addEventListener( "mouseleave", e => this.minButtonDown = false );
this.minButton.addEventListener( "mousemove", e => {
//e.preventDefault();
if (this.minButtonInitX === null){
//this.minButtonInitX = this.svg.getBoundingClientRect().left;
this.minButtonInitX = this.minButton.getBoundingClientRect().left+this.BUTTON_R;//
//console.log('left', this.minButtonInitX);
}
if (this.minButtonDown){
this.minX = e.clientX-this.minButtonInitX ;
if (this.minX > 0 && this.minX < this.maxX-this.BUTTON_R){
this.minButton.setAttribute('cx', this.MIN_BUTTON_INIT_X + this.minX);
this.minText.textContent = this.minX*this.factor-250;
}
}
});
this.maxButton.addEventListener( "mousedown", e => this.maxButtonDown = true );
this.maxButton.addEventListener( "mouseup", e => this.maxButtonDown = false );
this.maxButton.addEventListener( "mouseleave", e => this.maxButtonDown = false );
this.maxButton.addEventListener( "mousemove", e => {
//e.preventDefault();
if (this.maxButtonInitX === null)
this.maxButtonInitX = this.maxButton.getBoundingClientRect().left+this.BUTTON_R;//
if (this.maxButtonDown){
this.maxX = e.clientX - this.minButtonInitX;
//console.log('maxButton', e.clientX, this.maxButtonInitX, this.maxX);
if (this.maxX < this.MAX_VALUE && this.minX+this.BUTTON_R < this.maxX){
this.maxButton.setAttribute('cx', this.MIN_BUTTON_INIT_X + this.maxX);
this.maxText.textContent = this.maxX*this.factor;
}
}
});
}
setRange(min, max){
this.factor = (max-min)/80;
}
}
*/
/***/ },
/* 36 */
/***/ function(module, exports) {
......
client/src/search-mod/ElemenTable.view.js
View file @ 266f1add
/**
* Copyright 2016-2018 Iker Hurtado
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at