feat: filter downloads by network (#158)

tari-project · May 4, 2023 · 19b94c5 · 19b94c5
1 parent f4f20c9
commit 19b94c5
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 15 deletions.
diff --git a/_includes/downloads.html b/_includes/downloads.html
@@ -40,6 +40,14 @@ <h2 class="dl-title">{{ os.title }}</h2>
                     {% endif %}
 
                     {% if os.downloadBtnID %}
+                    <div>
+                        <p class="select-network">Select Network: </p>
+                        <div class="current">
+                            <button id="mainnet" class="chip">Stagenet</button>
+                            <button id="nextnet" class="chip">Nextnet</button>
+                            <button id="testnet" class="chip">Testnet</button>
+                        </div>
+                    </div>
                     <a class="btn" id="{{ os.downloadBtnID }}">{{os.ctaText}}</a>
                     {% endif %}
 
@@ -73,9 +81,6 @@ <h2 class="dl-title">{{ os.title }}</h2>
                     <div id="{{ os.checksumDivID }}" class="checksum"></div>
                     {% endif %}
 
-
-
-
                 </div>
                 <video class="dl-machine-img" muted autoplay playsinline poster="{{ site.baseurl }}{{os.video-poster}}">
                     <source src="{{ site.baseurl }}{{os.background-image}}" type="video/mp4">
@@ -84,8 +89,18 @@ <h2 class="dl-title">{{ os.title }}</h2>
 
 
             <div class="past-versions-container">
-                <h2>Past Versions</h2>
-
+                <div class="past-versions-header">
+                    <h2>Past Versions</h2>
+                    {% if os.downloadBtnID %}
+                    <div class="past">
+                        <p class="select-network">Filter by Network: </p>
+                        <button id="mainnet" class="chip">Stagenet</button>
+                        <button id="nextnet" class="chip">Nextnet</button>
+                        <button id="testnet" class="chip">Testnet</button>
+                        <button id="all-networks" class="chip">All</button>
+                    </div>
+                    {% endif %}
+                </div>
                 <div class="binaries-container">
                     <div class="bin-headers">
                         <div class="bin-header">

diff --git a/assets/css/downloads.css b/assets/css/downloads.css
@@ -17,7 +17,7 @@
   padding: 70px;
 }
 
-.dl-card .btn{
+.dl-card .btn {
   margin-top: 20px;
   margin-bottom: 20px;
   width: 100%;
@@ -97,7 +97,8 @@
   max-height: 370px;
 }
 
-.version, .checksum {
+.version,
+.checksum {
   font-family: Avenir-Medium;
   font-size: 12px;
   color: #a0a0a0;
@@ -107,7 +108,8 @@
   word-break: break-all;
 }
 
-.source, .tutorial-video {
+.source,
+.tutorial-video {
   font-family: Avenir-Heavy;
   font-size: 16px;
   color: #9330ff;
@@ -116,7 +118,6 @@
   line-height: 15px;
 }
 
-
 .binaries-container {
   max-width: 80rem;
 }
@@ -178,6 +179,66 @@ div#support.download-content > .dl-card div.dl-info-holder {
   justify-content: center;
 }
 
+.past-versions-header {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  max-width: 80rem;
+}
+
+.current {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.past {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.hide {
+  display: none !important;
+}
+
+@media (max-width: 768px) {
+  .select-network {
+    width: 100%;
+  }
+}
+
+.select-network {
+  margin: 1rem 1rem 1rem 0 !important;
+  font-size: 1.5rem !important;
+}
+
+.chip {
+  background: #ebebeb;
+  border-radius: 30px;
+  padding: 5px 15px;
+  margin-right: 10px;
+  font-size: 1.5rem;
+  color: #000000;
+  border: none;
+  font-size: 1.5rem;
+}
+
+.chip:hover {
+  cursor: pointer;
+  background: #9330ff;
+  color: #ffffff;
+}
+
+.active-chip {
+  background: #9330ff;
+  color: #ffffff;
+}
+
 @media only screen and (max-width: 1100px) and (min-width: 900px) {
   .dl-machine-img {
     max-height: 220px;
@@ -205,6 +266,11 @@ div#support.download-content > .dl-card div.dl-info-holder {
 }
 
 @media only screen and (max-width: 768px) {
+  .past-versions-header {
+    display: flex;
+    flex-direction: column;
+  }
+
   #downloads {
     padding-top: 0;
   }

diff --git a/assets/js/downloads.js b/assets/js/downloads.js
@@ -1,6 +1,23 @@
 let OS = "";
+const networks = ["mainnet", "testnet", "nextnet"]
+let currentNetwork = "mainnet";
+let pastNetwork = "mainnet";
+let networkUrlData = {}
+let currentOS = "";
+
+function filterByNetwork(network) {
+  $(".bin-row").addClass("hide");
+  currentOS === "libWallet" ? $(".bin-row").removeClass("hide") : $(`.${network}`).removeClass("hide");
+  network === "all-networks" && $(".bin-row").removeClass("hide");
+}
+
+function setDownloadLink() {
+  networkUrlData[currentOS][currentNetwork].button.href = networkUrlData[currentOS][currentNetwork].url;
+  networkUrlData[currentOS][currentNetwork].checksumDiv.innerHTML = networkUrlData[currentOS][currentNetwork].checksum;
+}
+
 function getOS() {
-  let platform = window.navigator.platform,
+    let platform = window.navigator.platform,
     macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"],
     windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"],
     os = null;
@@ -17,6 +34,7 @@ function getOS() {
 }
 getOS();
 
+
 function selectedOs(element, cardElement) {
   let el = document.getElementById(element);
   let cardEl = document.getElementById(cardElement);
@@ -28,6 +46,29 @@ function selectedOs(element, cardElement) {
 
   el.classList.add("active");
   cardEl.classList.add("active");
+
+  $('.chip').removeClass("active-chip");
+  $(`.past #${pastNetwork}.chip`).addClass("active-chip");
+
+  switch (element) {
+    case "ubuntu-btn":
+      currentOS = "linux";
+      break;
+    case "windows-btn":
+      currentOS = "windows";
+      break;
+    case "mac-btn":
+      currentOS = "osx";
+      break;
+    case "support-btn":
+      currentOS = "libWallet";
+      break;
+    default:
+      currentOS = "linux";
+  }
+  $(`.current #${currentNetwork}.chip`).addClass("active-chip");
+  filterByNetwork(pastNetwork);
+  setDownloadLink();
 }
 
 function removeClass(elems) {
@@ -37,6 +78,9 @@ function removeClass(elems) {
 }
 
 jQuery(document).ready(function ($) {
+  $(`.current #${currentNetwork}.chip`).addClass("active-chip");
+  $(`.past #${pastNetwork}.chip`).addClass("active-chip");
+
   getS3Data();
   //get data
   function getS3Data() {
@@ -46,6 +90,8 @@ jQuery(document).ready(function ($) {
       success: function (res) {
         groupDataByOs(res);
         setLatest(res);
+        setDownloadLink();
+        console.log('Data received', res)
       },
     });
   }
@@ -71,8 +117,19 @@ jQuery(document).ready(function ($) {
         const formattedTime = lastMod.getHours() + ":" + lastMod.getMinutes();
         const altClass = index % 2 ? "" : "alt-colour";
         const path = binary.path.split("/").pop();
+
+        let networkClass = "";
+        if (binary.path.includes("stagenet")) {
+          networkClass = "stagenet";
+        } else if (binary.path.includes("mainnet")) {
+          networkClass = "mainnet";
+        } else if (binary.path.includes("testnet")) {
+          networkClass = "testnet";
+        } else if (binary.path.includes("nextnet")) {
+          networkClass = "nextnet";
+        }
 
-        return `<div class="bin-row ${altClass}">
+        return `<div class="bin-row ${altClass} ${networkClass} all-networks hide">
               <div class="bin-row-item bin-left" scope="row">
                 <a href="${binary.url}">
                   ${path}
@@ -82,50 +139,89 @@ jQuery(document).ready(function ($) {
             </div>`;
       })
       .join("");
+      filterByNetwork(pastNetwork);
   }
 
+
   function setLatest(data) {
+
     Object.keys(data).forEach((os) => {
       let rawOs = os.replace("current/", "");
       if (rawOs === os) {
         return;
       }
       if (rawOs !== "libwallet") {
+
+        networks.forEach((network) => {
+        let nets = data[os].filter((key) => key.path.includes(network));
+        if(nets.length > 0) {
         let btn = document.getElementById(`${rawOs}DL`);
         let checkSumDiv = document.getElementById(`${rawOs}CSID`);
 
+
         let sha256 = "";
         // The url comparison is to sort the zip/sha256 files.
-        let latest = data[os].reduce((a, b) => a.lastModified > b.lastModified || (a.lastModified == b.lastModified && a.url < b.url) ? a : b)
+        let latest = nets.reduce((a, b) => a.lastModified > b.lastModified || (a.lastModified == b.lastModified && a.url < b.url) ? a : b)
         let checksum = latest.sha256;
+
 
         if (checksum) {
           sha256 = checksum.split(" ")[0];
         }
+
+        latest.checksum = checksum ? `SHA256: ${sha256}` : ""
+
+        latest.button = btn;
+        latest.checksumDiv = checkSumDiv;
 
-        if (btn && checkSumDiv) {
-          btn.href = latest.url;
-          checkSumDiv.innerHTML = checksum ? `SHA256: ${sha256}` : "";
+        if(!networkUrlData[rawOs]) {
+          networkUrlData[rawOs] = {}
         }
+
+        if(!networkUrlData[rawOs][network]) {
+          networkUrlData[rawOs][network] = {}
+        }
+
+        networkUrlData[rawOs][network] = latest;
       }
     });
   }
+});
+}
 
   function setInitialActive(os) {
     switch (os) {
       case "Mac OS":
         $("#mac-btn").addClass("active");
         $("#mac").addClass("active");
+        currentOS = "osx";
         break;
       case "Windows":
         $("#windows-btn").addClass("active");
         $("#windows").addClass("active");
+        currentOS = "windows";
         break;
       default:
         $("#ubuntu-btn").addClass("active");
         $("#ubuntu").addClass("active");
+        currentOS = "linux";
         break;
     }
   }
   setInitialActive(OS);
+
+  $(".current .chip").click(function() {
+    currentNetwork = $(this).attr("id");
+    $(".current .chip").removeClass("active-chip");
+    $(this).addClass("active-chip");  
+    setDownloadLink();
+  });
+
+  $(".past .chip").click(function() {
+      pastNetwork = $(this).attr("id");
+      $(".past .chip").removeClass("active-chip");
+      $(this).addClass("active-chip");
+      filterByNetwork(pastNetwork);
+  });
+
 });