another major rewrite

templates/js/buildPage.js

@@ -0,0 +1,84 @@
+function getSortBy() {
+  let sortByLastCommitInput = document.getElementById('sortByDate');
+  if (sortByLastCommitInput === null) {
+    return 'date';
+  } else {
+    return sortByLastCommitInput.checked ? 'date' : 'stars';
+  }
+}
+
+function getSortedThemes(themeList, sortedBy) {
+  if (sortedBy === 'date') {
+    return themeList.sort((a, b) => b.date_in_seconds - a.date_in_seconds);
+  } else {
+    return themeList.sort((a, b) => b.num_stars - a.num_stars);
+  }
+}
+
+function getSelectedTags() {
+  let tagSelectionInputs = document.getElementsByClassName('tagSelectionInput');
+  if (tagSelectionInputs.length > 0) {
+    return [...tagSelectionInputs].filter((x) => x.checked).map((y) => y.value);
+  } else {
+    return [];
+  }
+}
+
+function getSelectedFeatures() {
+  let featureSelectionInputs = document.getElementsByClassName('featureSelectionInput');
+  if (featureSelectionInputs.length > 0) {
+    return [...featureSelectionInputs].filter((x) => x.checked).map((y) => y.value);
+  } else {
+    return [];
+  }
+}
+
+function getFilteredThemes(selectedTags, selectedFeatures) {
+  if ((selectedTags.length === 0) && selectedFeatures.length === 0) {
+    return themes;
+  } else {
+    return themes
+      .filter((x) => selectedTags.every((y) => x.tags.includes(y)) )
+      .filter((z) => selectedFeatures.every((w) => z.features.includes(w)) );
+  }
+}
+
+function buildResults() {
+  let resultsDiv = document.getElementById('results');
+  resultsDiv.innerHTML = '';
+  let resultsTable = document.createElement("table");
+  resultsTable.id = 'resultsTable';
+  resultsTable.style.border = '1px solid black';
+  resultsTable.style.fontSize = '.9rem';
+
+  let resultsTableHeadRow = document.createElement("tr");
+  resultsDiv.appendChild(resultsTable);
+  resultsTable.appendChild(resultsTableHeadRow);
+
+  let themeTH = document.createElement("th");
+  themeTH.innerHTML = "theme";
+  resultsTableHeadRow.appendChild(themeTH);
+
+  let dateTH = document.createElement("th");
+  dateTH.innerHTML = "date";
+  resultsTableHeadRow.appendChild(dateTH);
+
+  let starsTH = document.createElement("th");
+  starsTH.innerHTML = "stars";
+  resultsTableHeadRow.appendChild(starsTH);
+
+  let commitTH = document.createElement("th");
+  commitTH.innerHTML = "commit";
+  resultsTableHeadRow.appendChild(commitTH);
+
+  let selectedTags = getSelectedTags();
+  let selectedFeatures = getSelectedFeatures();
+  let sortedBy = getSortBy();
+  let filtered_themes = getFilteredThemes(selectedTags, selectedFeatures);
+  let sorted_themes = getSortedThemes(filtered_themes, sortedBy);
+  sorted_themes.forEach(theme => addThemeTableRow(theme));
+
+  buildSelectionMenu(sorted_themes, sortedBy, selectedTags, selectedFeatures);
+};
+
+buildResults();

templates/js/buildSelectionMenu.js

@@ -0,0 +1,101 @@
+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);
+}

templates/js/buildSortByDiv.js

@@ -0,0 +1,53 @@
+function buildSortByDiv(sortedBy) {
+  let menuDiv = document.getElementById('selection-menu');
+  menuDiv.innerHTML = '';
+  menuDiv.style.maxWidth = '100%';
+
+  let sortByRow = document.createElement('div');
+  sortByRow.id = 'sortByRow';
+  sortByRow.style.width = '500px';
+  sortByRow.style.maxWidth = '100%';
+  sortByRow.style.display = 'flex';
+  sortByRow.style.justifyContent = 'space-around';
+  sortByRow.style.margin = '1rem auto 1rem auto';
+
+  let sortByPrompt = document.createElement('div');
+  sortByPrompt.innerHTML = "Sort By:";
+  sortByRow.appendChild(sortByPrompt);
+
+  let sortByStarsDiv = document.createElement('div');
+  let sortByStarsInput = document.createElement('input');
+  sortByStarsInput.type = 'radio';
+  sortByStarsInput.id = 'sortByStars';
+  sortByStarsInput.name = 'sortBy';
+  sortByStarsInput.value = 'stars';
+  sortByStarsInput.checked = sortedBy === 'stars' ? true : false;
+  sortByStarsInput.onclick = function() { buildResults(); };
+  sortByStarsDiv.appendChild(sortByStarsInput);
+
+  let sortByStarsLabel = document.createElement('label');
+  sortByStarsLabel.for = 'stars';
+  sortByStarsLabel.innerHTML = 'Stars';
+  sortByStarsDiv.appendChild(sortByStarsLabel);
+
+  let sortByLastCommitDiv = document.createElement('div');
+  let sortByLastCommitInput = document.createElement('input');
+  sortByLastCommitInput.type = 'radio';
+  sortByLastCommitInput.id = 'sortByDate';
+  sortByLastCommitInput.name = 'sortBy';
+  sortByLastCommitInput.value = 'date';
+  sortByLastCommitInput.checked = sortedBy === 'date' ? true : false;
+  sortByLastCommitInput.onclick = function() { buildResults(); };
+  sortByLastCommitDiv.appendChild(sortByLastCommitInput);
+
+  let sortByLastCommitLabel = document.createElement('label');
+  sortByLastCommitLabel.for = 'date';
+  sortByLastCommitLabel.innerHTML = 'Latest Commit Date';
+  sortByLastCommitDiv.appendChild(sortByLastCommitLabel);
+
+
+  sortByRow.appendChild(sortByStarsDiv);
+  sortByRow.appendChild(sortByLastCommitDiv);
+
+  menuDiv.appendChild(sortByRow);
+}

templates/js/buildThemeTableRow.js

@@ -0,0 +1,28 @@
+function addThemeTableRow(theme) {
+  let resultsTable = document.getElementById('resultsTable');
+  let resultsTableRow = document.createElement("tr");
+
+  let themeTD = document.createElement("td");
+  themeTD.innerHTML = '<a href="' + theme.url + '" target="_blank">' + theme.short_name + '</a>';
+  themeTD.style.whiteSpace = 'nowrap';
+  themeTD.style.overFlow = 'hidden';
+  themeTD.style.width = '20%';
+  resultsTableRow.appendChild(themeTD);
+
+  let dateTD = document.createElement("td");
+  dateTD.innerHTML = theme.date;
+  dateTD.style.textAlign = 'center';
+  dateTD.style.minWidth = '8rem';
+  resultsTableRow.appendChild(dateTD);
+
+  let starsTD = document.createElement("td");
+  starsTD.innerHTML = theme.num_stars;
+  resultsTableRow.appendChild(starsTD);
+
+  let commitTD = document.createElement("td");
+  commitTD.innerHTML = theme.commit;
+  commitTD.style.minWidth = '7rem';
+  resultsTableRow.appendChild(commitTD);
+
+  resultsTable.appendChild(resultsTableRow);
+};

templates/js/getAvailableTagsAndFeatures.js

@@ -0,0 +1,48 @@
+function getAvailableFeatures(sorted_themes) {
+  let result = [];
+  sorted_themes.forEach(x => {
+    x.features.forEach(feature => {
+      if (result.length === 0) {
+        result.push({'feature': feature, 'num_themes': 1});
+      } else {
+        let features_in_result = result.map(y => y.feature);
+        if (features_in_result.includes(feature)) {
+          result.forEach(w => {
+            if (w.feature === feature) {
+              w.num_themes += 1;
+            }
+          });
+        } else {
+          result.push({'feature': feature, 'num_themes': 1});
+        }
+      }
+    });
+  });
+  // return result.sort((a, b) => a.feature.localeCompare(b.feature));
+  return result.sort((a, b) => b.num_themes - a.num_themes);
+}
+
+function getAvailableTags(sorted_themes) {
+  let result = [];
+  sorted_themes.forEach(x => {
+    x.tags.forEach(tag => {
+      if (result.length === 0) {
+        result.push({'tag': tag, 'num_themes': 1});
+      } else {
+        let tags_in_result = result.map(y => y.tag);
+        if (tags_in_result.includes(tag)) {
+          result.forEach(w => {
+            if (w.tag === tag) {
+              w.num_themes += 1;
+            }
+          });
+        } else {
+          result.push({'tag': tag, 'num_themes': 1});
+        }
+      }
+    });
+  });
+  return result.sort((a, b) => b.num_themes - a.num_themes);
+}
+
+

templates/js/selectionMenuCollapse.js

@@ -0,0 +1,11 @@
+var menuButton = document.getElementById("selection-button");
+
+menuButton.addEventListener("click", function() {
+  menuButton.classList.toggle("active");
+  var selectionMenu = document.getElementById("selection-menu");
+  if (selectionMenu.style.display === "block") {
+    selectionMenu.style.display = "none";
+  } else {
+    selectionMenu.style.display = "block";
+  }
+});