Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
nomad-lab
encyclopedia-gui
Commits
4ee3d097
Commit
4ee3d097
authored
Feb 19, 2021
by
Lauri Himanen
Browse files
Merged.
parents
79664683
1fc09971
Changes
5
Hide whitespace changes
Inline
Side-by-side
client/css/styles.css
View file @
4ee3d097
...
...
@@ -577,20 +577,14 @@ div.title span.unfolded::before{
}
/* Structure type autocomplete */
.structure_type-autocomplete-multiselect-textfield
input
[
type
=
"text"
]
{
padding
:
6px
;
border
:
1px
solid
#DDD
;
width
:
200px
;
}
.structure_type-autocomplete-multiselect-dropdown
{
/* Autocomplete multiselect */
.AutocompleteMultiselectTextfield-dropdown
{
width
:
210px
;
background-color
:
white
;
box-shadow
:
0
1px
2px
#E56400
;
}
/* To remove
.autocomplete-em {
...
...
@@ -618,6 +612,11 @@ div.title span.unfolded::before{
margin-bottom
:
30px
;
/*background-color: white;*/
}
.filter-section-box
input
[
type
=
"text"
]
{
width
:
200px
;
padding
:
6px
;
border
:
1px
solid
#DDD
;
}
.filter-section-title
{
color
:
white
;
padding
:
10px
0
;
...
...
@@ -842,7 +841,7 @@ div#specialRows{margin: 30px 40px;}
.MaterialList
{
width
:
690px
;
margin
:
0
auto
80px
;}
.MaterialList
{
/*
width: 690px; margin: 0 auto 80px;
*/
}
/* #paginationWg erased*/
.MaterialList
.formula
{
...
...
@@ -865,7 +864,7 @@ span.nextButton{ display: inline-block; cursor: pointer;}
.mat-list-container
table
{
margin
:
auto
;
width
:
96%
;
width
:
100%
;
/*width:
96%;
*/
}
...
...
@@ -881,7 +880,6 @@ span.nextButton{ display: inline-block; cursor: pointer;}
}
navTreeWrapper
.node-selected
{
font-weight
:
bold
;
...
...
client/src/search-mod/AutocompleteMultiselectTextfield.js
View file @
4ee3d097
...
...
@@ -167,6 +167,9 @@ class AutocompleteMultiselectTextfield {
// check if the dropdown is unfolded and uncheck the checkbox if so
const
itemCheckbox
=
this
.
listContainer
.
querySelector
(
'
input[data-value="
'
+
value
+
'
"]
'
);
if
(
itemCheckbox
)
itemCheckbox
.
checked
=
false
;
// Emit a value change event
this
.
element
.
dispatchEvent
(
new
Event
(
"
change
"
,
{
bubbles
:
true
}));
}
...
...
@@ -183,10 +186,13 @@ class AutocompleteMultiselectTextfield {
this
.
selectedValues
.
add
(
value
);
this
.
selectedItemsBox
.
append
(
createSelectedItemLabel
(
value
));
}
//console.log('_addValue: this.selectedValues', this.selectedValues)
if
(
this
.
selectListener
)
this
.
selectListener
(
value
);
// Emit a value change event
this
.
element
.
dispatchEvent
(
new
Event
(
"
change
"
,
{
bubbles
:
true
}));
function
createSelectedItemLabel
(
value
){
const
label
=
document
.
createElement
(
'
span
'
);
label
.
className
=
'
selectedItemLabel
'
;
...
...
client/src/search-mod/FilterPanel.view.js
View file @
4ee3d097
...
...
@@ -64,9 +64,16 @@ class FilterPanel {
structureGroupBox
.
append
(
crystalSystemField
.
element
);
/* Old version
const spaceGroupField = new SpaceGroupField();
this.fields.push(spaceGroupField)
structureGroupBox.append(spaceGroupField.element);
*/
const
spaceGroupField
=
new
TextField
(
'
Space group number
'
,
'
space_group_number
'
);
this
.
fields
.
push
(
spaceGroupField
)
structureGroupBox
.
append
(
spaceGroupField
.
element
);
const
structureTypeField
=
new
AutocompleteField
(
'
Structure type
'
,
'
structure_type
'
);
this
.
fields
.
push
(
structureTypeField
)
...
...
@@ -92,18 +99,25 @@ class FilterPanel {
this
.
fields
.
push
(
boolValueFields
)
propertiesGroupBox
.
append
(
boolValueFields
.
element
);
// Method
let
methodGroupBox
=
this
.
createPropsGroupBox
(
'
Method
'
)
this
.
element
.
append
(
methodGroupBox
);
const
basisSetField
=
new
AutocompleteField
(
'
Basis set
'
,
'
basis_set
'
);
this
.
fields
.
push
(
basisSetField
)
methodGroupBox
.
append
(
basisSetField
.
element
);
const
functionalTypeField
=
new
AutocompleteField
(
'
Functional type
'
,
'
functional_type
'
);
this
.
fields
.
push
(
functionalTypeField
)
methodGroupBox
.
append
(
functionalTypeField
.
element
);
const
codeField
=
new
AutocompleteField
(
'
Code
'
,
'
code_name
'
);
this
.
fields
.
push
(
codeField
)
methodGroupBox
.
append
(
codeField
.
element
);
InfoSys
.
addToInfoSystem
(
this
.
element
);
// The value change event in fields is handled at container level (event delegation pattern)
this
.
element
.
addEventListener
(
'
change
'
,
e
=>
{
if
(
e
.
target
.
id
!==
'
space-group-dropdown-list
'
)
{
// console.log('change event', e);
if
(
this
.
addPropsChangeListener
)
this
.
addPropsChangeListener
(
this
.
getValues
())
}
})
if
(
this
.
addPropsChangeListener
)
this
.
addPropsChangeListener
(
this
.
getValues
())
});
/* code for the MaxMinSlider component testing
this.testSlider = this.element.querySelector('.test-slider');
...
...
@@ -230,8 +244,35 @@ class CheckboxesField{
}
/* Temporarily the select field is disabled
so that the only option to look for is "by number" */
class
TextField
{
constructor
(
name
,
id
){
this
.
fieldId
=
id
;
this
.
element
=
document
.
createElement
(
'
div
'
);
this
.
element
.
className
=
'
filter-quantity-box
'
;
this
.
element
.
innerHTML
=
`
<div class="field-title"> <span info-sys-data="
${
id
}
">
${
name
}
</span></div>
<input type="text" class="
${
id
}
-textfield" style="">
`
;
this
.
input
=
this
.
element
.
querySelector
(
'
input
'
);
}
getValues
(){
let
value
=
this
.
input
.
value
;
return
(
value
.
trim
()
===
''
?
null
:
{
fieldId
:
this
.
fieldId
,
value
:
[
value
]
}
);
}
highlightSelected
(
bool
){
if
(
this
.
getValues
()
===
null
)
this
.
input
.
style
.
opacity
=
(
bool
?
NOT_SELECTED_OPACITY
:
''
);
}
}
/* Not being used temporarily -> simple textfield instead
class SpaceGroupField{
constructor(){
...
...
@@ -267,7 +308,7 @@ class SpaceGroupField{
}
}
}
}
*/
class
AutocompleteField
{
...
...
@@ -303,6 +344,7 @@ class AutocompleteField{
}
/* Not being used
class MassDensityField{
constructor(){
...
...
@@ -337,7 +379,7 @@ class MassDensityField{
if (this.getValues() === null)
this.inputs[0].parentElement.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
}
}
}
*/
// EXPORTS
module
.
exports
=
FilterPanel
;
...
...
client/src/search-mod/NewSearchMod.js
View file @
4ee3d097
...
...
@@ -199,8 +199,9 @@ class NewSearchMod {
this
.
addMatNameButton
.
disabled
=
true
;
// Not always necessary but it simplifies the code
this
.
addFormulaButton
.
disabled
=
true
;
});
this
.
elementTable
.
setDeselectListener
(
e
=>
this
.
searchBox
.
removeElementORFormulaInSearchQuery
(
e
));
this
.
elementTable
.
setDeselectListener
(
e
=>
{
this
.
searchBox
.
removeElementORFormulaInSearchQuery
(
e
)
});
this
.
formulaBox
=
new
FormulaBox
();
this
.
formulaBox
.
setAddFormulaListener
(
formula
=>
{
...
...
@@ -213,7 +214,6 @@ class NewSearchMod {
}
});
this
.
materialNameBox
=
new
MaterialNameBox
();
this
.
materialNameBox
.
setAddMaterialNameListener
(
name
=>
{
if
(
name
.
trim
()
!==
''
){
...
...
@@ -224,14 +224,11 @@ class NewSearchMod {
this
.
materialNameBox
.
disableInput
();
}
});
// add autocomplete functionality to the textfield
// this.materialNameBox.setAutocomplete();
this
.
filterPanel
=
new
FilterPanel
();
this
.
filterSidePanel
.
appendChild
(
this
.
filterPanel
.
element
);
this
.
filterPanel
.
setPropsChangeListener
(
propsMap
=>
{
//console.log('filterPanel.change Event propsMap: ', propsMap);
REACTIVE_SEARCH
?
this
.
sendQuery
()
:
this
.
materialList
.
invalidateSearch
();
})
...
...
@@ -331,6 +328,10 @@ class NewSearchMod {
this
.
currentTab
=
selectingTab
;
// Disable/enable bool operation buttons
this
.
element
.
querySelectorAll
(
'
.bool-buttons button
'
).
forEach
(
button
=>
{
button
.
disabled
=
(
selectingTab
===
'
name
'
);
});
/*
if (this.userGuidance){
if (selectingTab === 'element'){
...
...
client/src/search-mod/SearchBox.view.js
View file @
4ee3d097
...
...
@@ -307,8 +307,10 @@ class SearchBox{
addParentheses
(
isOpen
){
if
(
this
.
searchQuery
.
length
>
0
&&
isOpen
)
this
.
addItemInSearchQuery
(
this
.
currentOperator
,
'
S
'
);
if
(
isOpen
&&
this
.
searchQuery
.
length
>
0
&&
this
.
searchQuery
[
this
.
searchQuery
.
length
-
1
]
!==
'
NOT
'
){
this
.
addItemInSearchQuery
(
this
.
currentOperator
,
'
S
'
);
}
this
.
addItemInSearchQuery
(
(
isOpen
?
'
(
'
:
'
)
'
),
'
P
'
);
this
.
updateSearchQuery
();
}
...
...
@@ -316,8 +318,10 @@ class SearchBox{
addNOT
(){
if
(
this
.
searchQuery
.
length
>
0
)
if
(
this
.
searchQuery
.
length
>
0
&&
this
.
searchQuery
[
this
.
searchQuery
.
length
-
1
]
!==
'
(
'
){
this
.
addItemInSearchQuery
(
this
.
currentOperator
,
'
S
'
);
}
this
.
addItemInSearchQuery
(
'
NOT
'
,
'
S
'
);
this
.
updateSearchQuery
();
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment