hugo_themes_report/templates/js/buildSelectionMenu.js

function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy) {
  let tagSelectionHeadingRow = document.createElement("div");
  tagSelectionHeadingRow.id = "tagSelectionHeadingRow";
  tagSelectionHeadingRow.style.maxWidth = "100%";
  tagSelectionHeadingRow.style.display = "flex";
  tagSelectionHeadingRow.style.justifyContent = "space-around";

  let tagSelectionHeading = document.createElement("h2");
  tagSelectionHeading.innerHTML = "Select Tags";

  let tagSortByNameInputDiv = document.createElement("div");
  tagSortByNameInputDiv.style.display = "flex";
  tagSortByNameInputDiv.style.alignItems = "center";
  let tagSortByNameInput = document.createElement("input");
  tagSortByNameInput.type = "radio";
  tagSortByNameInput.id = "tagSortByName";
  tagSortByNameInput.name = "tagSortBy";
  tagSortByNameInput.value = "tagSortByName";
  tagSortByNameInput.checked = tagSortBy === "name" ? true : false;
  tagSortByNameInput.onclick = function () {
    buildResults();
  };
  tagSortByNameInputDiv.appendChild(tagSortByNameInput);

  let tagSortByNameInputLabel = document.createElement("label");
  tagSortByNameInputLabel.for = "tagSortByName";
  tagSortByNameInputLabel.innerHTML = "Name";
  tagSortByNameInputDiv.appendChild(tagSortByNameInputLabel);

  let tagSortByNumThemesInputDiv = document.createElement("div");
  tagSortByNumThemesInputDiv.style.display = "flex";
  tagSortByNumThemesInputDiv.style.alignItems = "center";
  let tagSortByNumThemesInput = document.createElement("input");
  tagSortByNumThemesInput.type = "radio";
  tagSortByNumThemesInput.id = "tagSortByNumThemes";
  tagSortByNumThemesInput.name = "tagSortBy";
  tagSortByNumThemesInput.value = "tagSortByNumThemes";
  tagSortByNumThemesInput.checked = tagSortBy === "numThemes" ? true : false;
  tagSortByNumThemesInput.onclick = function () {
    buildResults();
  };
  tagSortByNumThemesInputDiv.appendChild(tagSortByNumThemesInput);

  let tagSortByNumThemesInputLabel = document.createElement("label");
  tagSortByNumThemesInputLabel.for = "tagSortByNumThemes";
  tagSortByNumThemesInputLabel.innerHTML = "numThemes";
  tagSortByNumThemesInputDiv.appendChild(tagSortByNumThemesInputLabel);

  tagSelectionHeadingRow.appendChild(tagSelectionHeading);
  tagSelectionHeadingRow.appendChild(tagSortByNameInputDiv);
  tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputDiv);
  selectionMenuDiv.appendChild(tagSelectionHeadingRow);
}

function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) {
  let featureSelectionHeadingRow = document.createElement("div");
  featureSelectionHeadingRow.id = "featureSelectionHeadingRow";
  featureSelectionHeadingRow.style.maxWidth = "100%";
  featureSelectionHeadingRow.style.display = "flex";
  featureSelectionHeadingRow.style.justifyContent = "space-around";

  let featureSelectionHeading = document.createElement("h2");
  featureSelectionHeading.innerHTML = "Select Features";

  let featureSortByNameInputDiv = document.createElement("div");
  featureSortByNameInputDiv.style.display = "flex";
  featureSortByNameInputDiv.style.alignItems = "center";
  let featureSortByNameInput = document.createElement("input");
  featureSortByNameInput.type = "radio";
  featureSortByNameInput.id = "featureSortByName";
  featureSortByNameInput.name = "featureSortBy";
  featureSortByNameInput.value = "featureSortByName";
  featureSortByNameInput.checked = featureSortBy === "name" ? true : false;
  featureSortByNameInput.onclick = function () {
    buildResults();
  };
  featureSortByNameInputDiv.appendChild(featureSortByNameInput);

  let featureSortByNameInputLabel = document.createElement("label");
  featureSortByNameInputLabel.for = "featureSortByName";
  featureSortByNameInputLabel.innerHTML = "Name";
  featureSortByNameInputDiv.appendChild(featureSortByNameInputLabel);

  let featureSortByNumThemesInputDiv = document.createElement("div");
  featureSortByNumThemesInputDiv.style.display = "flex";
  featureSortByNumThemesInputDiv.style.alignItems = "center";
  let featureSortByNumThemesInput = document.createElement("input");
  featureSortByNumThemesInput.type = "radio";
  featureSortByNumThemesInput.id = "featureSortByNumThemes";
  featureSortByNumThemesInput.name = "featureSortBy";
  featureSortByNumThemesInput.value = "featureSortByNumThemes";
  featureSortByNumThemesInput.checked =
    featureSortBy === "numThemes" ? true : false;
  featureSortByNumThemesInput.onclick = function () {
    buildResults();
  };
  featureSortByNumThemesInputDiv.appendChild(featureSortByNumThemesInput);

  let featureSortByNumThemesInputLabel = document.createElement("label");
  featureSortByNumThemesInputLabel.for = "featureSortByNumThemes";
  featureSortByNumThemesInputLabel.innerHTML = "numThemes";
  featureSortByNumThemesInputDiv.appendChild(featureSortByNumThemesInputLabel);

  featureSelectionHeadingRow.appendChild(featureSelectionHeading);
  featureSelectionHeadingRow.appendChild(featureSortByNameInputDiv);
  featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputDiv);
  selectionMenuDiv.appendChild(featureSelectionHeadingRow);
}

function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy) {
  let selectionMenuDiv = document.getElementById("selection-menu");
  buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy);

  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 buildFeatureSelectionDiv(
  selectedFeatures,
  availableFeatures,
  featureSortBy
) {
  let selectionMenuDiv = document.getElementById("selection-menu");
  buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy);

  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 tagSortBy = getTagSortBy();
  let featureSortBy = getFeatureSortBy();
  let availableTags = getAvailableTags(sorted_themes, tagSortBy);
  let availableFeatures = getAvailableFeatures(sorted_themes, featureSortBy);
  buildSortByDiv(sortedBy);
  buildTagSelectionDiv(selectedTags, availableTags, tagSortBy);
  buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy);
}