From e22858894e11c435dd236eb200178e6227ffbfd3 Mon Sep 17 00:00:00 2001
From: Trent Palmer <trenttdually@gmail.com>
Date: Wed, 11 Aug 2021 19:36:41 -0700
Subject: [PATCH] add radio input for sorting tags,features by name or
 numThemes

---
 rank_hugo_themes.py                           |   4 +-
 templates/base.html                           |   1 +
 templates/js/buildPage.js                     |  18 ++
 templates/js/buildSelectionMenu.js            | 168 +++++++++++-------
 .../js/buildTagAndFeatureSelectionInputs.js   |  49 +++++
 templates/js/getAvailableTagsAndFeatures.js   |  21 ++-
 6 files changed, 194 insertions(+), 67 deletions(-)
 create mode 100644 templates/js/buildTagAndFeatureSelectionInputs.js

diff --git a/rank_hugo_themes.py b/rank_hugo_themes.py
index a4a6ae3..4c66659 100755
--- a/rank_hugo_themes.py
+++ b/rank_hugo_themes.py
@@ -401,7 +401,7 @@ def update_features_list_for_each_hugo_themes():
             theme_toml = toml.loads(match.sub(r'"\1"\n', content))
             if 'features' in theme_toml:
                 if len(theme_toml['features']) > 0:
-                    theme_features = [feature.lower() for feature in theme_toml['features'] if len(feature) > 0]
+                    theme_features = [feature.lower() for feature in theme_toml['features'] if len(feature) > 1]
                     if theme.num_features != len(theme_features): theme.num_features = len(theme_features)
                     if theme.num_features > 0:
                         if theme.features_list != str(theme_features): theme.features_list = str(theme_features)
@@ -447,7 +447,7 @@ def update_tags_list_for_each_hugo_themes():
             if 'tags' in theme_toml:
                 if len(theme_toml['tags']) > 0:
                     corrected_tags = get_corrected_tags(theme_toml['tags'])
-                    theme_tags = [tag.lower() for tag in corrected_tags if len(tag) > 0]
+                    theme_tags = [tag.lower() for tag in corrected_tags if len(tag) > 1]
                     if theme.num_tags != len(theme_tags): theme.num_tags = len(theme_tags)
                     if theme.num_tags > 0:
                         if theme.tags_list != str(theme_tags): theme.tags_list = str(theme_tags)
diff --git a/templates/base.html b/templates/base.html
index 1d646e3..3b1b2b2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,6 +18,7 @@
   <script>
     var themes = {{ themes }};
     {% include 'js/selectionMenuCollapse.js' %}
+    {% include 'js/buildTagAndFeatureSelectionInputs.js' %}
     {% include 'js/getAvailableTagsAndFeatures.js' %}
     {% include 'js/buildSortByDiv.js' %}
     {% include 'js/buildSelectionMenu.js' %}
diff --git a/templates/js/buildPage.js b/templates/js/buildPage.js
index a094677..84ce9c6 100644
--- a/templates/js/buildPage.js
+++ b/templates/js/buildPage.js
@@ -7,6 +7,24 @@ function getSortBy() {
   }
 }
 
+function getTagSortBy() {
+  let tagSortByNumThemes = document.getElementById('tagSortByNumThemes');
+  if (tagSortByNumThemes === null) {
+    return 'numThemes';
+  } else {
+    return tagSortByNumThemes.checked ? 'numThemes' : 'name';
+  }
+}
+
+function getFeatureSortBy() {
+  let featureSortByNumThemes = document.getElementById('featureSortByNumThemes');
+  if (featureSortByNumThemes === null) {
+    return 'numThemes';
+  } else {
+    return featureSortByNumThemes.checked ? 'numThemes' : 'name';
+  }
+}
+
 function getSortedThemes(themeList, sortedBy) {
   if (sortedBy === 'date') {
     return themeList.sort((a, b) => b.date_in_seconds - a.date_in_seconds);
diff --git a/templates/js/buildSelectionMenu.js b/templates/js/buildSelectionMenu.js
index 9e6b368..35cd49b 100644
--- a/templates/js/buildSelectionMenu.js
+++ b/templates/js/buildSelectionMenu.js
@@ -1,33 +1,106 @@
-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';
+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 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 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';
@@ -45,36 +118,9 @@ function buildTagSelectionDiv(selectedTags, availableTags) {
     .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) {
+function buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy) {
   let selectionMenuDiv = document.getElementById('selection-menu');
-  let featureSelectionHeading = document.createElement('h2');
-  featureSelectionHeading.innerHTML = "Select Features";
-  selectionMenuDiv.appendChild(featureSelectionHeading);
+  buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy);
 
   let featureSelectionRow = document.createElement('div');
   featureSelectionRow.style.display = 'flex';
@@ -93,9 +139,11 @@ function buildFeatureSelectionDiv(selectedFeatures, availableFeatures) {
 }
 
 function buildSelectionMenu(sorted_themes, sortedBy, selectedTags, selectedFeatures) {
-  let availableTags = getAvailableTags(sorted_themes);
-  let availableFeatures = getAvailableFeatures(sorted_themes);
+  let tagSortBy = getTagSortBy();
+  let featureSortBy = getFeatureSortBy();
+  let availableTags = getAvailableTags(sorted_themes, tagSortBy);
+  let availableFeatures = getAvailableFeatures(sorted_themes, featureSortBy);
   buildSortByDiv(sortedBy);
-  buildTagSelectionDiv(selectedTags, availableTags);
-  buildFeatureSelectionDiv(selectedFeatures, availableFeatures);
+  buildTagSelectionDiv(selectedTags, availableTags, tagSortBy);
+  buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy);
 }
diff --git a/templates/js/buildTagAndFeatureSelectionInputs.js b/templates/js/buildTagAndFeatureSelectionInputs.js
new file mode 100644
index 0000000..56b0e43
--- /dev/null
+++ b/templates/js/buildTagAndFeatureSelectionInputs.js
@@ -0,0 +1,49 @@
+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 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);
+}
diff --git a/templates/js/getAvailableTagsAndFeatures.js b/templates/js/getAvailableTagsAndFeatures.js
index abe34d0..06f5674 100644
--- a/templates/js/getAvailableTagsAndFeatures.js
+++ b/templates/js/getAvailableTagsAndFeatures.js
@@ -1,4 +1,4 @@
-function getAvailableFeatures(sorted_themes) {
+function getAvailableFeatures(sorted_themes, featureSortBy) {
   let result = [];
   sorted_themes.forEach(x => {
     x.features.forEach(feature => {
@@ -18,11 +18,16 @@ function getAvailableFeatures(sorted_themes) {
       }
     });
   });
-  // return result.sort((a, b) => a.feature.localeCompare(b.feature));
-  return result.sort((a, b) => b.num_themes - a.num_themes);
+  if (featureSortBy === 'numThemes') {
+    return result
+      .sort((a, b) => a.feature.localeCompare(b.feature))
+      .sort((a, b) => b.num_themes - a.num_themes);
+  } else {
+    return result.sort((a, b) => a.feature.localeCompare(b.feature));
+  }
 }
 
-function getAvailableTags(sorted_themes) {
+function getAvailableTags(sorted_themes, tagSortBy) {
   let result = [];
   sorted_themes.forEach(x => {
     x.tags.forEach(tag => {
@@ -42,7 +47,13 @@ function getAvailableTags(sorted_themes) {
       }
     });
   });
-  return result.sort((a, b) => b.num_themes - a.num_themes);
+  if (tagSortBy === 'numThemes') {
+    return result
+      .sort((a, b) => a.tag.localeCompare(b.tag))
+      .sort((a, b) => b.num_themes - a.num_themes);
+  } else {
+    return result.sort((a, b) => a.tag.localeCompare(b.tag));
+  }
 }