add filter by minVer

templates/base.html

@@ -17,6 +17,7 @@
     <div id="selection-options-menu" style="display: none">
       <button type="button" id="button-for-showing-sort-option">SortBy</button>
       <button type="button" id="button-for-showing-columns">Show Columns</button>
+      <button type="button" id="button-for-filter-by-minver">Filter By MinVer</button>
       <button type="button" id="button-for-filter-by-tags">Filter By Tags</button>
       <button type="button" id="button-for-filter-by-features">Filter By Features</button>
       <button type="button" id="button-for-filter-by-license">Filter By License</button>
@@ -30,13 +31,14 @@
 var themes = {{ themes }};
 {% include 'js/buildButton.js' %}
 {% include 'js/buildSelectionInputs.js' %}
-{% include 'js/getAvailableTagsAndFeatures.js' %}
+{% include 'js/getAvailableTagsAndFeaturesAndLicenses.js' %}
 {% include 'js/buildSortByDiv.js' %}
 {% include 'js/buildSelectionHeadingRows.js' %}
 {% include 'js/buildSelectionDivs.js' %}
+{% include 'js/getSortedThemes.js' %}
+{% include 'js/minVersions.js' %}
 {% include 'js/buildSelectionMenu.js' %}
 {% include 'js/buildThemeTableRow.js' %}
-{% include 'js/getSortedThemes.js' %}
 {% include 'js/buildPage.js' %}
 {% include 'js/selectionMenuCollapse.js' %}
     </script>

templates/js/buildPage.js

@@ -37,17 +37,35 @@ function getSelectedColumns() {
   }
 }
 
-function getTagAndFeatureFilteredThemes(selectedTags, selectedFeatures) {
+function getTagAndFeatureFilteredThemes(
+  minVerFilteredThemes,
+  selectedTags,
+  selectedFeatures
+) {
   if (selectedTags.length === 0 && selectedFeatures.length === 0) {
-    return themes;
+    return minVerFilteredThemes;
   } else {
-    return themes
+    return minVerFilteredThemes
       .filter((x) => selectedTags.every((y) => x.tags.includes(y)))
       .filter((z) => selectedFeatures.every((w) => z.features.includes(w)));
   }
 }
 
-function getFilteredThemes(tagAndFeatureFilteredThemes, selectedLicenses) {
+function getMinVerFilteredThemes(selectedMinVer) {
+  if (selectedMinVer.length === 0 || selectedMinVer[0] === "none") {
+    return themes;
+  } else {
+    // return licenseFilteredThemes;
+    return themes
+      .filter((x) => x.min_ver !== "")
+      .filter((x) => semVerCompare(x.min_ver, selectedMinVer[0]) > -1);
+  }
+}
+
+function getLicenseFilteredThemes(
+  tagAndFeatureFilteredThemes,
+  selectedLicenses
+) {
   if (selectedLicenses.length === 0) {
     return tagAndFeatureFilteredThemes;
   } else {
@@ -70,10 +88,14 @@ function getDiplayState() {
     "columnSelectionRow",
     "licenseSelectionHeadingRow",
     "licenseSelectionRow",
+    "minVerSelectionHeadingRow",
+    "minVerSelectionRow",
     "tagSelectionHeadingRow",
     "tagSelectionRow",
     "featureSelectionHeadingRow",
     "featureSelectionRow",
+    "minVerSelectionHeadingRow",
+    "minVerSelectionRow",
   ].forEach((x) => (dState[x] = getDState(x)));
   return dState;
 }
@@ -114,27 +136,31 @@ function buildResults() {
   let selectedTags = getSelected("tag");
   let selectedFeatures = getSelected("feature");
   let selectedLicenses = getSelected("license");
+  let selectedMinVer = getSelected("minVerRadioButton");
   let sortedBy = getSortBy();
+  let minVerFilteredThemes = getMinVerFilteredThemes(selectedMinVer);
   let tagAndFeatureFilteredThemes = getTagAndFeatureFilteredThemes(
+    minVerFilteredThemes,
     selectedTags,
     selectedFeatures
   );
-  let filtered_themes = getFilteredThemes(
+  let filteredThemes = getLicenseFilteredThemes(
     tagAndFeatureFilteredThemes,
     selectedLicenses
   );
-  sortThemes(filtered_themes, sortedBy);
+  sortThemes(filteredThemes, sortedBy);
-  filtered_themes.forEach((theme) => addThemeTableRow(theme, selectedColumns));
+  filteredThemes.forEach((theme) => addThemeTableRow(theme, selectedColumns));
 
   // from buildSelectionMenu.js
   buildSelectionMenu(
     tagAndFeatureFilteredThemes,
-    filtered_themes,
+    filteredThemes,
     sortedBy,
     selectedTags,
     selectedFeatures,
     selectedLicenses,
     selectedColumns,
+    selectedMinVer,
     getDiplayState()
   );
 }

templates/js/buildSelectionMenu.js

@@ -35,12 +35,14 @@ function buildColumnSelectionDiv(selectedColumns, dState, eParent) {
   tableColumns
     .filter((x) => selectedColumns.includes(x.headingName))
     .forEach((y) => {
+      // from buildSelectionInput.js
       buildInput(y, true, columnSelectionRow);
     });
 
   tableColumns
     .filter((x) => !selectedColumns.includes(x.headingName))
     .forEach((y) => {
+      // from buildSelectionInput.js
       buildInput(y, false, columnSelectionRow);
     });
 }
@@ -54,6 +56,7 @@ function buildSelectionMenu(
   selectedFeatures,
   selectedLicenses,
   selectedColumns,
+  selectedMinVer,
   dState
 ) {
   let tagSortBy = getMenuSortBy("tag");
@@ -61,11 +64,11 @@ function buildSelectionMenu(
   let licenseSortBy = getMenuSortBy("license");
   let selectionMenuDiv = document.getElementById("selection-menu");
 
-  // from getAvailableTagsAndFeatures.js
+  // from getAvailableTagsAndFeaturesAndLicenses.js
   let availableTags = getAvailableTags(sorted_themes, tagSortBy);
-  // from getAvailableTagsAndFeatures.js
+  // from getAvailableTagsAndFeaturesAndLicenses.js
   let availableFeatures = getAvailableFeatures(sorted_themes, featureSortBy);
-  // from getAvailableTagsAndFeatures.js
+  // from getAvailableTagsAndFeaturesAndLicenses.js
   let availableLicences = getAvailableLicenses(
     tagAndFeatureFilteredThemes,
     licenseSortBy
@@ -76,6 +79,8 @@ function buildSelectionMenu(
 
   buildColumnSelectionDiv(selectedColumns, dState, selectionMenuDiv);
 
+  buildMinVerSelectionDiv(selectedMinVer, dState, selectionMenuDiv);
+
   // from buildSelectionDivs.js
   buildSelectionDiv(
     selectedLicenses,

templates/js/minVersions.js

@@ -0,0 +1,64 @@
+function getAvailableMinVersions() {
+  let availableMinVersions = [];
+  themes.forEach((x) => {
+    if (x.min_ver !== "") {
+      if (!availableMinVersions.includes(x.min_ver)) {
+        availableMinVersions.push(x.min_ver);
+      }
+    }
+  });
+  // semVerCompare comes from getSortedThemes.js
+  return availableMinVersions
+    .sort((a, b) => semVerCompare(a, b))
+    .map((x) => x.toLowerCase().replace(/[\s*]/g, "-"));
+}
+
+function buildMinVerSelectionHeadingRow(eParent, dState) {
+  let minVerSelectionHeadingRow = document.createElement("div");
+  minVerSelectionHeadingRow.id = "minVerSelectionHeadingRow";
+  minVerSelectionHeadingRow.style.maxWidth = "100%";
+  minVerSelectionHeadingRow.style.display = dState.minVerSelectionHeadingRow;
+  // minVerSelectionHeadingRow.style.display = "flex";
+  minVerSelectionHeadingRow.style.alignItems = "center";
+
+  let minVerSelectionHeading = document.createElement("h2");
+  minVerSelectionHeading.innerHTML = "MinVersion";
+  minVerSelectionHeadingRow.appendChild(minVerSelectionHeading);
+  eParent.appendChild(minVerSelectionHeadingRow);
+}
+
+function buildMinVerSelectionDiv(selectedMinVer, dState, eParent) {
+  buildMinVerSelectionHeadingRow(eParent, dState);
+
+  let minVerSelectionRow = document.createElement("div");
+  minVerSelectionRow.id = "minVerSelectionRow";
+  minVerSelectionRow.style.display = dState.minVerSelectionRow;
+  // minVerSelectionRow.style.display = "flex";
+  minVerSelectionRow.style.flexWrap = "wrap";
+  minVerSelectionRow.style.justifyContent = "space-around";
+  eParent.appendChild(minVerSelectionRow);
+
+  let availableMinVersions = getAvailableMinVersions();
+  availableMinVersions.push("none");
+  let selMinVer = selectedMinVer.length === 0 ? "none" : selectedMinVer[0];
+
+  availableMinVersions.forEach((x) => {
+    let inputID = `${x}-select-minver-radio-button-input`;
+    let rButton = buildRadioButton(
+      inputID,
+      "minVerRadioButtonSelectionInput",
+      x,
+      selMinVer,
+      x,
+      x
+    );
+    minVerSelectionRow.appendChild(rButton);
+    let filterByMinVerInput = document.getElementById(inputID);
+    rButton.onclick = function () {
+      if (!filterByMinVerInput.checked) {
+        filterByMinVerInput.checked = true;
+        buildResults();
+      }
+    };
+  });
+}

templates/js/selectionMenuCollapse.js

@@ -4,6 +4,7 @@ function showSelectionOptionsButtons() {
     "button-for-showing-columns",
     "button-for-filter-by-tags",
     "button-for-filter-by-features",
+    "button-for-filter-by-minver",
     "button-for-filter-by-license",
     "button-for-filter-by-tags-and-features",
   ].forEach((x) => (document.getElementById(x).style.display = "inline-block"));
@@ -19,6 +20,8 @@ let closeableMenus = [
   "tagSelectionRow",
   "featureSelectionHeadingRow",
   "featureSelectionRow",
+  "minVerSelectionHeadingRow",
+  "minVerSelectionRow",
 ];
 
 let areAnyCloseAbleMenusOpen = () =>
@@ -88,6 +91,14 @@ document.getElementById("button-for-filter-by-features").onclick = function () {
   document.getElementById("featureSelectionRow").style.display = "flex";
 };
 
+document.getElementById("button-for-filter-by-minver").onclick = function () {
+  closeMenus();
+  showSelectionOptionsButtons();
+  this.style.display = "none";
+  document.getElementById("minVerSelectionHeadingRow").style.display = "flex";
+  document.getElementById("minVerSelectionRow").style.display = "flex";
+};
+
 document.getElementById("button-for-filter-by-license").onclick = function () {
   closeMenus();
   showSelectionOptionsButtons();