Skip to content
GitLab
Commit 47094dd7 authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Fixed issue with loading spinner, removed autocomplete feature for material... 

Fixed issue with loading spinner, removed autocomplete feature for material names, added support for using enter to add formula/material name to query.
parent cff6a589
Pipeline #97759 skipped with stage
Expand all Hide whitespace changes
Inline Side-by-side
client/bundle.js
View file @ 47094dd7
This diff is collapsed.
client/conf.js
View file @ 47094dd7
window.nomadEnv = {
apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/",
apiRoot: "https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
//apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/",
......
client/css/styles.css
View file @ 47094dd7
......@@ -511,26 +511,17 @@ div.title span.unfolded::before{
/* Formula and Material name boxes */
.FormulaBox,
.MaterialNameBox{
.TextBox {
display: flex;
justify-content: center;
text-align: left;
background-color: #DDD;
}
.FormulaBox input, .MaterialNameBox input{
.TextBox input[type=text] {
padding: 10px;
border: 0;
font-size: 0.9em;
}
.MaterialNameBox input{
box-sizing: border-box;
width: 100%;
}
.FormulaBox input[type=text]{
box-sizing: border-box;
width: 580px;
}
......@@ -884,7 +875,7 @@ div#specialRows{margin: 20px 40px;}
}
.MaterialList{ /*width: 690px; margin: 0 auto 80px;*/
margin-top: 30px;
margin-top: 25px;
}
/* #paginationWg erased*/
......
client/src/common/LoadingPopup.js
View file @ 47094dd7
......@@ -30,9 +30,6 @@ let loadingPopup = document.querySelector('#loading-popup');
let loadSet = new Set();
function show(id) {
if (!window.allowNewLoadPopup) {
return;
}
loadSet.add(id, true);
let ttRect = loadingPopup.getBoundingClientRect();
let leftPos = (window.innerWidth - ttRect.width)/2;
......
client/src/common/Router.js
View file @ 47094dd7
......@@ -45,14 +45,10 @@ function route() {
if (hashHistory.length && historyLength == length) {
if (hashHistory[hashHistory.length - 2] == hash) {
hashHistory = hashHistory.slice(0, -1);
LoadingPopup.reset();
window.allowNewLoadPopup = false;
} else {
window.allowNewLoadPopup = true;
hashHistory.push(hash);
}
} else {
window.allowNewLoadPopup = true;
hashHistory.push(hash);
historyLength = length;
}
......
client/src/main.js
View file @ 47094dd7
......@@ -40,7 +40,6 @@ let DataStore = require('./material-mod/DataStore.js');
// main DOM elements
let contentElement = document.getElementById('content');
let titleElement = document.querySelector('title');
window.allowNewLoadPopup = true;
var getUrl = window.location;
var guiRoot = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname;
......
client/src/material-mod/Overview.view.js
View file @ 47094dd7
......@@ -532,7 +532,7 @@ class Overview {
this.heatCalcIdBox.innerHTML = '';
} else {
let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id);
LoadingPopup.show();
LoadingPopup.show("overview_thermodynamical");
let query = JSON.stringify({properties: ["thermodynamical_properties"]});
util.serverReqPOST(url, query, e => {
if (e.target.status === 200) {
......@@ -545,7 +545,7 @@ class Overview {
this.phononLoaded = true;
document.getElementById('thermal-props-ov').style.visibility = 'visible';
}
LoadingPopup.hide();
LoadingPopup.hide("overview_thermodynamical");
});
}
}
......
client/src/search-mod/AutocompleteTextfield.js
View file @ 47094dd7
......@@ -39,6 +39,7 @@ class AutocompleteTextfield {
this.listContainer = this.element.querySelector('div');
this.selectListener;
this.index = 0;
// state
this.valueList; // List of autocomplete (possible) values
......@@ -46,17 +47,27 @@ class AutocompleteTextfield {
// event management
this.input.addEventListener("input", (e) => {
this.index = 0;
this._processInput();
});
// react to keyboard navigation
this.input.addEventListener("keydown", (e) => {
const nItems = this.listContainer.children.length;
if (e.keyCode == 40) { // arrow DOWN
if (this._getActiveListItem())
this._setActiveListItem(this._getActiveListItem().nextSibling);
this.index = (index+1) % nItems;
this._setActiveListItem(this.listContainer.children[this.index]);
//if (this._getActiveListItem()) {
//this._setActiveListItem(this._getActiveListItem().nextSibling);
//} else {
//this._setActiveListItem(this.listContainer.children[0]);
//}
} else if (e.keyCode == 38) { // arrow UP
if (this._getActiveListItem())
this._setActiveListItem(this._getActiveListItem().previousSibling);
this.index = (index-1) % nItems;
this._setActiveListItem(this.listContainer.children[this.index]);
//if (this._getActiveListItem()) {
//this._setActiveListItem(this._getActiveListItem().previousSibling);
//}
}
});
......@@ -138,9 +149,10 @@ class AutocompleteTextfield {
this.listContainer.innerHTML = '';
matchingValues.forEach( value => {
matchingValues.forEach( (value, i) => {
const listItem = generateListItem(value, currentInput);
this.listContainer.append(listItem);
// check if a valid option was completely entered. if so, set the focus to the element corresponding to the input
if (value.toUpperCase() === currentInput.toUpperCase())
this._setActiveListItem(listItem);
......
client/src/search-mod/MaterialList.view.js
View file @ 47094dd7
......@@ -86,7 +86,7 @@ class MaterialList {
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
LoadingPopup.show();
LoadingPopup.show("searching");
let reqJson = {
query: this.optimadeQuery,
......@@ -127,20 +127,8 @@ class MaterialList {
document.querySelector('#syntax-error').style.visibility = 'visible';
})
.finally(() => {
LoadingPopup.hide();
LoadingPopup.hide("searching");
});
/*
oReq.addEventListener("error", e => { // Not valid query
console.log('Search ERROR - Not valid query ');
this.total_results= 0;
this.setData([]);
this._updateUI();
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
*/
}
......
client/src/search-mod/MaterialName.view.js
View file @ 47094dd7
......@@ -23,7 +23,7 @@
let util = require('../common/util.js');
let AutocompleteTextfield = require('./AutocompleteTextfield.js');
class MaterialNameBox{
class MaterialNameBox {
constructor() {
this.element = document.createElement('div');
......@@ -61,6 +61,7 @@ class MaterialNameBox{
if (!this.materialNamesLoaded){
let r1 = util.serverReq(util.getSuggestionURL('material_name'), (e) => {
let names = JSON.parse(r1.response).material_name;
console.log(names);
this.materialNameField.setAutocompleteList(names);
});
this.materialNamesLoaded = true;
......
client/src/search-mod/NewSearchMod.js
View file @ 47094dd7
......@@ -30,7 +30,6 @@ let UserGuidance = require('../common/UserGuidance.js');
let SearchBox = require('./SearchBox.view.js');
let ElementTable = require('./ElemenTable.view.js');
let MaterialList = require('./MaterialList.view.js');
let MaterialNameBox = require('./MaterialName.view.js');
let FilterPanel = require('./FilterPanel.view.js');
let SwitchComponent = require('../common/SwitchComponent.js');
......@@ -155,8 +154,8 @@ class NewSearchMod {
this.searchBox.removeElementORFormulaInSearchQuery(e)
});
this.formulaBox = new FormulaBox();
this.formulaBox.setAddFormulaListener(formula => {
this.formulaBox = new FormulaBox("Add formula to the search query above");
this.formulaBox.setAddListener(formula => {
if (formula.trim() !== ''){
this.searchBox.addTag(formula, 'formula');
this.addElementButton.disabled = true;
......@@ -164,8 +163,8 @@ class NewSearchMod {
}
});
this.materialNameBox = new MaterialNameBox();
this.materialNameBox.setAddMaterialNameListener( name => {
this.materialNameBox = new TextBox("Add material name to the search query above");
this.materialNameBox.setAddListener(name => {
if (name.trim() !== ''){
this.searchBox.addTag(name, 'material');
this.addElementButton.disabled = true;
......@@ -207,9 +206,6 @@ class NewSearchMod {
selectingElement = this.elementTable.element;
} else if (selectingTab === 'name') {
selectingElement = this.materialNameBox.element;
// add autocomplete functionality,
// but load data not before the name tab is activated
this.materialNameBox.setAutocomplete();
} else if (selectingTab === 'formula') {
selectingElement = this.formulaBox.element;
}
......@@ -488,67 +484,84 @@ class NewSearchMod {
}
class FormulaBox {
constructor() {
class TextBox {
constructor(placeholder) {
this.element = document.createElement('div');
this.element.className = 'FormulaBox';// this.element.setAttribute("id",'formula-box');
this.element.innerHTML=
`
<div style="display: flex; flex-direction: column">
<div style="display: flex; flex-direction: row">
<input type="text" placeholder="Add formula to the search query above">
<button class="adding-formula-btn" disabled> Add to query </button>
</div>
<div class="perm-tooltip search-option" style="margin-right: 10px">
<input id="allow-other-elements" name="allow-other-elements" type="checkbox" checked>
<label for="allow-other-elements" class="perm-tooltip">Allow other elements</label>
<span class="tooltiptext">If selected, the returned materials may also contain other elements.</span>
</div>
</div>
`;
this.formulaTextField = this.element.querySelector('input');
this.formulaButton = this.element.querySelector('.adding-formula-btn');
this.formulaButton.addEventListener( "click", (e) => {
this.addFormulaListener(this.formulaTextField.value);
this.formulaTextField.value = '';
this.element.className = 'TextBox';
const column = document.createElement('div');
column.style.display = 'flex';
column.style.flexDirection = 'column';
const row = document.createElement('div');
row.style.display = 'flex';
row.style.flexDirection = 'row';
this.textField = document.createElement('input');
this.textField.type = 'text';
this.textField.placeholder = placeholder;
row.append(this.textField);
this.button = document.createElement('button');
this.button.className = 'adding-btn';
this.button.disabled = true;
this.button.textContent = "Add to query";
row.append(this.button);
column.append(row);
this.element.append(column);
this.button.addEventListener( "click", (e) => {
this.addListener(this.textField.value);
this.textField.value = '';
});
this.formulaTextField.addEventListener( 'input', e => {
//console.log('formulaTextField input: ',this.formulaTextField.value);
this.formulaButton.disabled = (this.formulaTextField.value === '');
// React to enter key
this.textField.addEventListener("keypress", e => {
if (e.keyCode == 13) { // ENTER
this.addListener(this.textField.value);
this.textField.value = '';
}
});
this.textField.addEventListener( 'input', e => {
this.button.disabled = (this.textField.value === '');
});
}
setAddFormulaListener(listener) {
this.addFormulaListener= listener;
setAddListener(listener) {
this.addListener = listener;
}
disableInput() {
this.formulaTextField.disabled = true;
this.formulaButton.disabled = true;
this.textField.disabled = true;
this.button.disabled = true;
}
enableInput() {
this.formulaTextField.disabled = false;
this.formulaButton.disabled = false;
this.textField.disabled = false;
this.button.disabled = false;
}
}
/*
getAllowOtherElements(){
return this.element.querySelector('.allow-other-elements').checked;
class FormulaBox extends TextBox {
constructor(placeholder) {
super(placeholder);
const checkbox = document.createElement("div");
checkbox.className = "perm-tooltip search-option";
checkbox.style.marginRight = "10px";
const input = document.createElement("input");
input.id = "allow-other-elements";
input.name = "allow-other-elements";
input.type = "checkbox";
input.checked = true;
checkbox.append(input)
const label = document.createElement("label");
label["for"] = "allow-other-elements";
label.className = "perm-tooltip";
label.textContent = "Allow other elements";
checkbox.append(label)
const span = document.createElement("span");
span.className = "tooltiptext";
span.textContent = "If selected, the returned materials may also contain other elements.";
checkbox.append(span);
this.element.children[0].append(checkbox);
}
getMultiplesOfFormula(){
return this.element.querySelector('.multiples-of-formula').checked;
}*/
}
// EXPORTS
......
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