From 8c55a7cf85ef139fd17a51716ec0f15e8f50ee77 Mon Sep 17 00:00:00 2001
From: ghuhs <ghuhs@physik.hu-berlin.de>
Date: Thu, 29 Aug 2019 09:17:27 +0200
Subject: [PATCH] changed "structure type" to multiselect field
---
client/bundle.js | 45 ++++++++++++----------
client/src/search-mod/Autocomplete.view.js | 8 ----
client/src/search-mod/FilterPanel.view.js | 37 ++++++++++++------
3 files changed, 50 insertions(+), 40 deletions(-)
diff --git a/client/bundle.js b/client/bundle.js
index fd7d661f..963e842a 100644
--- a/client/bundle.js
+++ b/client/bundle.js
@@ -3529,14 +3529,6 @@ class AutocompleteMultiselectList {
this.element.value = '';
this._closeAllLists();
});
-
- // document.addEventListener("keydown", (e) => {
- // if (e.keyCode == 27) { // ESC key
- // this.element.value = '';
- // this._closeAllLists();
- // }
- // });
-
}
getSelected() {
@@ -10261,12 +10253,17 @@ class FilterPanel {
</div>
- <div class="filter-quantity-box">
+<!-- <div class="filter-quantity-box">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option ></option>
</select>
</div>
+-->
+ <div class="filter-quantity-box">
+ <div class="field-title" id="strukturbericht-title"><span info-sys-data="structure-type">Structure type</span></div>
+ <div class="structuretype-placeholder"></div>
+ </div>
<div class="filter-quantity-box">
<div class="field-title" id="strukturbericht-title">Strukturbericht designation</div>
@@ -10327,11 +10324,20 @@ class FilterPanel {
`;
+ this.structuretypeField = new AutocompleteMultiselectList("structuretype");
+ this.structuretypeField.element.placeholder = "Search and select options";
+ this.structuretypeField.element.classList.add('textfield-filter');
+ let structuretypePlaceholder = this.element.querySelector('.structuretype-placeholder');
+ this.structuretypeField.replaceElement(structuretypePlaceholder);
+
+ let r1 = util.serverReq(util.getSuggestionURL('structure_type'), (e) => {
+ let names = JSON.parse(r1.response).structure_type;
+ this.structuretypeField.autocomplete(names);
+ });
+
this.strukturberichtField = new AutocompleteMultiselectList("strukturbericht");
this.strukturberichtField.element.placeholder = "Search and select options";
this.strukturberichtField.element.classList.add('textfield-filter');
- /* the following class is needed by addFilterFromTextField */
- this.strukturberichtField.element.classList.add('strukturbericht-designation-field');
let strukturberichtPlaceholder = this.element.querySelector('.strukturbericht-placeholder');
this.strukturberichtField.replaceElement(strukturberichtPlaceholder);
@@ -10340,12 +10346,12 @@ class FilterPanel {
this.strukturberichtField.autocomplete(names);
});
- let structureTypeSelect = this.element.querySelector('.structure-type-field');
- let r1 = util.serverReq(util.getSuggestionURL('structure_type'), () => {
- JSON.parse(r1.response).structure_type.forEach( structureType => {
- structureTypeSelect.innerHTML += '<option>'+structureType+'</option>';
- });
- });
+ // let structureTypeSelect = this.element.querySelector('.structure-type-field');
+ // let r1 = util.serverReq(util.getSuggestionURL('structure_type'), () => {
+ // JSON.parse(r1.response).structure_type.forEach( structureType => {
+ // structureTypeSelect.innerHTML += '<option>'+structureType+'</option>';
+ // });
+ // });
InfoSys.addToInfoSystem(this.element);
@@ -10364,11 +10370,10 @@ class FilterPanel {
this.addFilterFromCheckboxes(filterMap,'system-type');
this.addFilterFromCheckboxes(filterMap, 'crystal-system');
this.addSpaceGroupFilter(filterMap);//this.addFilterFromTextField(filterMap, 'space-group-number');
-// this.addFilterFromTextField(filterMap, 'strukturbericht-designation');
+ this.addFilterFromMultiSelect(filterMap, 'structure_type', this.structuretypeField);
this.addFilterFromMultiSelect(filterMap, 'strukturbericht_designation', this.strukturberichtField);
- this.addFilterFromDropdownList(filterMap, 'structure-type');
- this.addRangeFilter(filterMap, 'mass-density');
+ this.addRangeFilter(filterMap, 'mass-density');
/* this.addRangeFilter(filterMap, 'band-gap');
this.addBandgapTypeFilter(filterMap); */
diff --git a/client/src/search-mod/Autocomplete.view.js b/client/src/search-mod/Autocomplete.view.js
index 8771d653..83356ebe 100644
--- a/client/src/search-mod/Autocomplete.view.js
+++ b/client/src/search-mod/Autocomplete.view.js
@@ -289,14 +289,6 @@ class AutocompleteMultiselectList {
this.element.value = '';
this._closeAllLists();
});
-
- // document.addEventListener("keydown", (e) => {
- // if (e.keyCode == 27) { // ESC key
- // this.element.value = '';
- // this._closeAllLists();
- // }
- // });
-
}
getSelected() {
diff --git a/client/src/search-mod/FilterPanel.view.js b/client/src/search-mod/FilterPanel.view.js
index 2aa9faf7..1a5b15c7 100644
--- a/client/src/search-mod/FilterPanel.view.js
+++ b/client/src/search-mod/FilterPanel.view.js
@@ -75,12 +75,17 @@ class FilterPanel {
</div>
- <div class="filter-quantity-box">
+<!-- <div class="filter-quantity-box">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option ></option>
</select>
</div>
+-->
+ <div class="filter-quantity-box">
+ <div class="field-title" id="strukturbericht-title"><span info-sys-data="structure-type">Structure type</span></div>
+ <div class="structuretype-placeholder"></div>
+ </div>
<div class="filter-quantity-box">
<div class="field-title" id="strukturbericht-title">Strukturbericht designation</div>
@@ -141,11 +146,20 @@ class FilterPanel {
`;
+ this.structuretypeField = new AutocompleteMultiselectList("structuretype");
+ this.structuretypeField.element.placeholder = "Search and select options";
+ this.structuretypeField.element.classList.add('textfield-filter');
+ let structuretypePlaceholder = this.element.querySelector('.structuretype-placeholder');
+ this.structuretypeField.replaceElement(structuretypePlaceholder);
+
+ let r1 = util.serverReq(util.getSuggestionURL('structure_type'), (e) => {
+ let names = JSON.parse(r1.response).structure_type;
+ this.structuretypeField.autocomplete(names);
+ });
+
this.strukturberichtField = new AutocompleteMultiselectList("strukturbericht");
this.strukturberichtField.element.placeholder = "Search and select options";
this.strukturberichtField.element.classList.add('textfield-filter');
- /* the following class is needed by addFilterFromTextField */
- this.strukturberichtField.element.classList.add('strukturbericht-designation-field');
let strukturberichtPlaceholder = this.element.querySelector('.strukturbericht-placeholder');
this.strukturberichtField.replaceElement(strukturberichtPlaceholder);
@@ -154,12 +168,12 @@ class FilterPanel {
this.strukturberichtField.autocomplete(names);
});
- let structureTypeSelect = this.element.querySelector('.structure-type-field');
- let r1 = util.serverReq(util.getSuggestionURL('structure_type'), () => {
- JSON.parse(r1.response).structure_type.forEach( structureType => {
- structureTypeSelect.innerHTML += '<option>'+structureType+'</option>';
- });
- });
+ // let structureTypeSelect = this.element.querySelector('.structure-type-field');
+ // let r1 = util.serverReq(util.getSuggestionURL('structure_type'), () => {
+ // JSON.parse(r1.response).structure_type.forEach( structureType => {
+ // structureTypeSelect.innerHTML += '<option>'+structureType+'</option>';
+ // });
+ // });
InfoSys.addToInfoSystem(this.element);
@@ -178,11 +192,10 @@ class FilterPanel {
this.addFilterFromCheckboxes(filterMap,'system-type');
this.addFilterFromCheckboxes(filterMap, 'crystal-system');
this.addSpaceGroupFilter(filterMap);//this.addFilterFromTextField(filterMap, 'space-group-number');
-// this.addFilterFromTextField(filterMap, 'strukturbericht-designation');
+ this.addFilterFromMultiSelect(filterMap, 'structure_type', this.structuretypeField);
this.addFilterFromMultiSelect(filterMap, 'strukturbericht_designation', this.strukturberichtField);
- this.addFilterFromDropdownList(filterMap, 'structure-type');
- this.addRangeFilter(filterMap, 'mass-density');
+ this.addRangeFilter(filterMap, 'mass-density');
/* this.addRangeFilter(filterMap, 'band-gap');
this.addBandgapTypeFilter(filterMap); */
--
GitLab