102 lines
4.4 KiB
JavaScript
102 lines
4.4 KiB
JavaScript
function buildTagSelectionInput(tag, selected, tagSelectionRow) {
|
|
let tagSelectionInputDiv = document.createElement('div');
|
|
tagSelectionInputDiv.style.width = '15rem';
|
|
tagSelectionInputDiv.style.maxWidth = '50%';
|
|
tagSelectionInputDiv.style.marginTop = '.5rem';
|
|
tagSelectionInputDiv.style.marginBottom = '.5rem';
|
|
|
|
let tagSelectionInput = document.createElement('input');
|
|
tagSelectionInput.type = "checkbox";
|
|
tagSelectionInput.id = tag.tag + "-selection-input";
|
|
tagSelectionInput.name = tag.tag + "-selection-input";
|
|
tagSelectionInput.value = tag.tag;
|
|
tagSelectionInput.checked = (selected) ? true : false;
|
|
tagSelectionInput.classList.add('tagSelectionInput');
|
|
tagSelectionInput.onclick = function() { buildResults(); };
|
|
tagSelectionInputDiv.appendChild(tagSelectionInput);
|
|
|
|
let tagSelectionInputLabel = document.createElement('label');
|
|
tagSelectionInputLabel.for = tag.tag + "-selection-input";
|
|
tagSelectionInputLabel.innerHTML = tag.tag + ' (' + tag.num_themes + ')';
|
|
tagSelectionInputDiv.appendChild(tagSelectionInputLabel);
|
|
|
|
tagSelectionRow.appendChild(tagSelectionInputDiv);
|
|
}
|
|
|
|
function buildTagSelectionDiv(selectedTags, availableTags) {
|
|
let selectionMenuDiv = document.getElementById('selection-menu');
|
|
let tagSelectionHeading = document.createElement('h2');
|
|
tagSelectionHeading.innerHTML = "Select Tags";
|
|
selectionMenuDiv.appendChild(tagSelectionHeading);
|
|
|
|
let tagSelectionRow = document.createElement('div');
|
|
tagSelectionRow.style.display = 'flex';
|
|
tagSelectionRow.style.flexWrap = 'wrap';
|
|
tagSelectionRow.style.justifyContent = 'space-around';
|
|
|
|
selectionMenuDiv.appendChild(tagSelectionRow);
|
|
|
|
availableTags
|
|
.filter((x) => selectedTags.includes(x.tag))
|
|
.forEach((y) => { buildTagSelectionInput(y, true, tagSelectionRow); });
|
|
|
|
availableTags
|
|
.filter((x) => !selectedTags.includes(x.tag))
|
|
.forEach((y) => { buildTagSelectionInput(y, false, tagSelectionRow); });
|
|
}
|
|
|
|
function buildFeatureSelectionInput(feature, selected, featureSelectionRow) {
|
|
let featureSelectionInputDiv = document.createElement('div');
|
|
featureSelectionInputDiv.style.width = '30rem';
|
|
featureSelectionInputDiv.style.maxWidth = '50%';
|
|
featureSelectionInputDiv.style.marginTop = '.5rem';
|
|
featureSelectionInputDiv.style.marginBottom = '.5rem';
|
|
|
|
let featureSelectionInput = document.createElement('input');
|
|
featureSelectionInput.type = "checkbox";
|
|
featureSelectionInput.id = feature.feature + "-selection-input";
|
|
featureSelectionInput.name = feature.feature + "-selection-input";
|
|
featureSelectionInput.value = feature.feature;
|
|
featureSelectionInput.checked = (selected) ? true : false;
|
|
featureSelectionInput.classList.add('featureSelectionInput');
|
|
featureSelectionInput.onclick = function() { buildResults(); };
|
|
featureSelectionInputDiv.appendChild(featureSelectionInput);
|
|
|
|
let featureSelectionInputLabel = document.createElement('label');
|
|
featureSelectionInputLabel.for = feature.feature + "-selection-input";
|
|
featureSelectionInputLabel.innerHTML = feature.feature + ' (' + feature.num_themes + ')';
|
|
featureSelectionInputDiv.appendChild(featureSelectionInputLabel);
|
|
|
|
featureSelectionRow.appendChild(featureSelectionInputDiv);
|
|
}
|
|
|
|
function buildFeatureSelectionDiv(selectedFeatures, availableFeatures) {
|
|
let selectionMenuDiv = document.getElementById('selection-menu');
|
|
let featureSelectionHeading = document.createElement('h2');
|
|
featureSelectionHeading.innerHTML = "Select Features";
|
|
selectionMenuDiv.appendChild(featureSelectionHeading);
|
|
|
|
let featureSelectionRow = document.createElement('div');
|
|
featureSelectionRow.style.display = 'flex';
|
|
featureSelectionRow.style.flexWrap = 'wrap';
|
|
featureSelectionRow.style.justifyContent = 'space-around';
|
|
|
|
selectionMenuDiv.appendChild(featureSelectionRow);
|
|
|
|
availableFeatures
|
|
.filter((x) => selectedFeatures.includes(x.feature))
|
|
.forEach((y) => { buildFeatureSelectionInput(y, true, featureSelectionRow); });
|
|
|
|
availableFeatures
|
|
.filter((x) => !selectedFeatures.includes(x.feature))
|
|
.forEach((y) => { buildFeatureSelectionInput(y, false, featureSelectionRow); });
|
|
}
|
|
|
|
function buildSelectionMenu(sorted_themes, sortedBy, selectedTags, selectedFeatures) {
|
|
let availableTags = getAvailableTags(sorted_themes);
|
|
let availableFeatures = getAvailableFeatures(sorted_themes);
|
|
buildSortByDiv(sortedBy);
|
|
buildTagSelectionDiv(selectedTags, availableTags);
|
|
buildFeatureSelectionDiv(selectedFeatures, availableFeatures);
|
|
}
|