From afbe353ca9fa55e888e5f0f269429ee2a1a1733b Mon Sep 17 00:00:00 2001
From: Trent Palmer <trenttdually@gmail.com>
Date: Thu, 19 Aug 2021 10:48:40 -0700
Subject: [PATCH] add description text

---
 templates/base.html              |  3 ++
 templates/js/buildDescription.js | 48 ++++++++++++++++++++++++++++++++
 templates/js/buildPage.js        |  9 ++++++
 3 files changed, 60 insertions(+)
 create mode 100644 templates/js/buildDescription.js

diff --git a/templates/base.html b/templates/base.html
index c6e255c..736e190 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -25,10 +25,13 @@
     </div>
     <div id="selection-menu" style="margin-bottom: 1rem;">
     </div>
+    <div id="description">
+    </div>
     <div id="results">
     </div>
     <script>
 var themes = {{ themes }};
+{% include 'js/buildDescription.js' %}
 {% include 'js/buildButton.js' %}
 {% include 'js/buildSelectionInputs.js' %}
 {% include 'js/getAvailableTagsAndFeaturesAndLicenses.js' %}
diff --git a/templates/js/buildDescription.js b/templates/js/buildDescription.js
new file mode 100644
index 0000000..bbc1ba7
--- /dev/null
+++ b/templates/js/buildDescription.js
@@ -0,0 +1,48 @@
+function buildDescription(
+  selectedColumns,
+  sortBy,
+  selectedMinVer,
+  selectedLicenses,
+  selectedTags,
+  selectedFeatures
+) {
+  let d = document.getElementById("description");
+  d.style.fontSize = ".9rem";
+  d.style.color = "gray";
+  d.style.fontStyle = "italic";
+  d.style.textAlign = "left";
+  let sCols = selectedColumns.map((x) => {
+    if (x === "cname") {
+      return "theme";
+    } else if (x === "num_stars") {
+      return "stars";
+    } else if (x === "min_ver") {
+      return "minVer";
+    } else {
+      return x;
+    }
+  });
+  let showingColumns = `<span style="color: blue;font-weight: bold">ShowingColumns:</span> ${sCols}; `;
+  let sortedBy = `<span style="color: blue;font-weight: bold">SortedBy:</span> ${sortBy}; `;
+  let sMinVer = `<span style="color: green;font-weight: bold">MinHugoVersion</span>=${
+    selectedMinVer.length === 0 ? "none" : selectedMinVer
+  }; `;
+  let sLicences = `<span style="color: green;font-weight: bold">Licenses</span>=${
+    selectedLicenses.length === 0 ? "none" : selectedLicenses
+  }; `;
+  let sTags = `<span style="color: green;font-weight: bold">Tags</span>=${
+    selectedTags.length === 0 ? "none" : selectedTags
+  }; `;
+  let sFeatures = `<span style="color: green;font-weight: bold">Features</span>=${
+    selectedFeatures.length === 0 ? "none" : selectedFeatures
+  }`;
+  let innerHTML =
+    showingColumns +
+    sortedBy +
+    " <span style='color: blue;font-weight: bold'>FilteredBy:</span> " +
+    sMinVer +
+    sLicences +
+    sTags +
+    sFeatures;
+  d.innerHTML = innerHTML.replace(/[,]/g, ", ");
+}
diff --git a/templates/js/buildPage.js b/templates/js/buildPage.js
index f0d73cb..fe446ad 100644
--- a/templates/js/buildPage.js
+++ b/templates/js/buildPage.js
@@ -163,6 +163,15 @@ function buildResults() {
     selectedMinVer,
     getDiplayState()
   );
+
+  buildDescription(
+    selectedColumns,
+    sortedBy,
+    selectedMinVer,
+    selectedLicenses,
+    selectedTags,
+    selectedFeatures
+  );
 }
 
 buildResults();