From 024185a564dd11a335a39271c0c8d57841dd96d2 Mon Sep 17 00:00:00 2001
From: Quentin Dufour <quentin@deuxfleurs.fr>
Date: Thu, 1 Jun 2023 16:28:46 +0200
Subject: [PATCH] final download ui

---
 templates/download.html | 148 ++++++++++++++++++++++++++++++----------
 1 file changed, 113 insertions(+), 35 deletions(-)

diff --git a/templates/download.html b/templates/download.html
index 522e65d..83f3e0c 100644
--- a/templates/download.html
+++ b/templates/download.html
@@ -13,7 +13,18 @@ Downloads | {{ config.title }}
         </div>
     </div>
     <div class="mx-auto max-w-7xl px-4">
-        <div id="releases-container" class="py-20 space-y-20">
+        <div id="loading-container" class="py-20 space-y-20 ">
+            <div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm text-center">
+	        <div role="status">
+                    <svg aria-hidden="true" class="inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                         <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+                         <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+                    </svg>
+                    <span class="sr-only">Loading...</span>
+                </div>
+             </div>
+	</div>
+        <div id="releases-container" class="py-20 space-y-20 hidden">
                 <div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm">
                     <!-- choose version -->
                     <div class="flex flex-row space-x-6 py-4 border-gray-400 border-b items-center">
@@ -22,15 +33,15 @@ Downloads | {{ config.title }}
                         </div>
                         <div>
                         <label>Channel: </label>
-                        <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
-                            <option value="production">Production</option>
+                        <select id="select-channel" onchange="updateVersionList()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
+                            <option value="production" selected>Production</option>
                             <option value="testing">Testing</option>
                             <option value="nightly">Nightly</option>
                         </select>
                         </div>
                         <div>
                         <label>Version: </label>
-                        <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
+                        <select id="select-version" onchange="updateVersionBody()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
                             <option value="0.0.1">0.0.1</option>
                         </select>
                         </div>
@@ -41,23 +52,29 @@ Downloads | {{ config.title }}
 
                     <div class="flex flex-row space-x-6">
                         <!-- choose distribution method -->
-                        <div id="install-choice" class="border-r pr-5 border-gray-400">
+                        <div id="install-choice" class="border-r pr-5 border-gray-400 shrink">
                             <button id="selected-btn" class="block bg-gradient-to-tl from-aerogramme-blue via-blue-500 to-blue-300 bg-size-200 bg-pos-0 hover:bg-pos-100 rounded p-4 mt-4 text-sm mb-1 uppercase text-white w-full text-left transition-all duration-200 hidden">Selected</button>
-                            <button id="alternative-btn" class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200 hidden">Alternative</button>
+			    <button id="alternative-btn" class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200 hidden">Alternative</button>
+
+                            <button id="docker-btn" onclick="dlTab('docker')" class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Docker</button>
+                            <button id="static-btn" onclick="dlTab('static')" class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Binary</button>
+                            <button id="distribution-btn" onclick="dlTab('distribution')" class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Distributions</button>
+                            <button id="sources-btn" onclick="dlTab('sources')" class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Sources</button>
                         </div>
 
+			<div id="install-instructions" class="grow overflow-auto">
                         <!-- docker page -->
-                        <div id="docker" class="block">
+                        <div id="docker" class="hidden">
                             <div class="block mt-4">
                                 <label>Mirror: </label>
-                                    <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
-                                        <option value="df">registry.deuxfleurs.org</option>
-                                        <option value="docker">docker.io</option>
+                                    <select id="select-registry" onchange="updateRegistry()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
+                                        <option value="registry.deuxfleurs.org" selected>registry.deuxfleurs.org</option>
+                                        <option value="docker.io">docker.io</option>
                                     </select>
                             </div>
 
                             <div class="block mt-4 p-5 bg-black text-gray-100">
-                                <pre class="block">docker pull registry.deuxfleurs.org/aerogramme:0.0.1</pre>
+				<pre class="block">docker pull <span class="cnt-registry">REG</span>/<span class="cnt-docker-name">DOCK_NAME</span>:<span class="cnt-version">VERSION</span></pre>
                             </div>
                             <p class="mt-4">Aerogramme is available as a minimalist docker image (~20MB) that contains only the static binary. It means that you can't run <code>bash</code> or any other shell in the container.</p>
                             <p class="mt-4">Network resources are finite. Please avoid wasting them by re-downloading the image each time you start a container. Keep a local cache or mirror the image on your private registry. In case of abuse, we may put some agressive rate limiting based on IP prefixes.</p>
@@ -71,10 +88,10 @@ Downloads | {{ config.title }}
                                 </div>
                                 <div class="block">
                                     <label>Architecture: </label>
-                                        <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
-                                            <option value="amd64">amd64 (x86_64)</option>
-                                            <option value="aarch64">arm64 (aarch64)</option>
-                                            <option value="armv6l">arm (armv6l)</option>
+                                        <select id="select-arch" onchange="updateArch()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
+                                            <option value="amd64" selected>amd64 (x86_64)</option>
+                                            <option value="arm64">arm64 (aarch64)</option>
+                                            <option value="arm">arm (armv6l)</option>
                                         </select>
                                 </div>
                                 <div class="block">
@@ -82,8 +99,8 @@ Downloads | {{ config.title }}
                                 </div>
                             </div>
 
-                            <div class="block mt-4 p-5 bg-black text-gray-100">
-                                <pre class="block">curl https://download.deuxfleurs.org/df-dist-v1/aerogramme/0.0.1/linux/amd64/aerogramme -o aerogramme
+                            <div class="block mt-4 p-5 bg-black text-gray-100 overflow-auto">
+				<pre class="block">curl https://download.deuxfleurs.org/df-dist-v1/aerogramme/<span class="cnt-version">VERSION</span>/linux/<span class="cnt-arch">ARCH</span>/aerogramme -o aerogramme
 chmod +x aerogramme</pre>
                             </div>
                             <p class="mt-4">Aerogramme is distributed as a statically compiled binary (~20MB).</p>
@@ -100,24 +117,25 @@ chmod +x aerogramme</pre>
                             <div class="block mt-4 p-5 bg-black text-gray-100">
                                 <pre class="block">git clone https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git
 cd aerogramme
-git checkout 0.0.1
+git checkout <span class="cnt-version">VERSION</span>
 cargo build --release
 ./target/release/aerogramme</pre>
                             </div>
                             <div class="mt-4">
                                 <a class="text-aerogramme-blue underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme">Browse the repository ↗</a>
                                 -
-                                <a class="text-aerogramme-blue underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/0.0.1-ci.1.zip">Download a .zip archive</a>
+                                <a class="text-aerogramme-blue underline href-version" href="#" data-tplhref="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/[[VERSION]].zip">Download a .zip archive</a>
                                 -
-                                <a class="text-aerogramme-blue underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/0.0.1-ci.1.tar.gz">Download a .tar.gz archive</a>
+                                <a class="text-aerogramme-blue underline href-version" href="#" data-tplhref="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/[[VERSION]].tar.gz">Download a .tar.gz archive</a>
                             </div>
                         </div>
                     </div>
+		    </div>
                 </div>
         </div>
         <noscript>
             <style type="text/css">
-                #releases-container{display:none;}
+                #loading-container{display:none;}
             </style>
             <div id="js-disabled-msg" class="p-12" style="height:70vh">
                 Access the Aerogramme releases by clicking on the following link :
@@ -166,27 +184,87 @@ const categorize = tags => tags.reduce((acc, t) => {
   return acc
 }, {'production': [], 'testing': [], 'nightly': []});
 
+
+// Global variables :@
+let repo = null;
+let activeDlTab = null;
+
 // Manage tabs
-const tabs = ["docker", "static", "distribution", "sources" ];
-const active_btn = document.getElementById("selected-btn");
-const alternative_btn = document.getElementById("alternative-btn");
-const menu = document.getElementById("install-choice");
-document.querySelectorAll("#install-choice > button").forEach(e => {
-    e.onclick = () => {
-        selected_tab = e.id
-    }
-});
-
-const setActiveTab = selected => {
-    tabs.forEach(t => {
-        document.getElementById(t).classList.add("hidden")
+const selectedStyle = document.getElementById("selected-btn").className.replace("hidden", "");
+const alternativeStyle = document.getElementById("alternative-btn").className.replace("hidden", "");
+const dlTab = tid => {
+	if (activeDlTab) {
+		document.getElementById(activeDlTab).className = "hidden";
+		document.getElementById(`${activeDlTab}-btn`).className = alternativeStyle;
+	}
+	document.getElementById(tid).className = "block";
+	document.getElementById(`${tid}-btn`).className = selectedStyle;
+	activeDlTab = tid;
+};
 
+// Inject data in UI
+const updateVersionList = () => {
+    const channel = document.getElementById("select-channel").value
+    const tags = repo[channel];
+    const options = tags.map(t => {
+        const o = document.createElement("option");
+	o.value = t;
+	o.text = t;
+	return o;
     })
+    const selector = document.getElementById("select-version");
+    selector.replaceChildren(...options);
+    if (tags.length > 0) {
+        selector.value = tags[0];
+    }
+    updateVersionBody();
 }
 
+const regToName = {
+  "registry.deuxfleurs.org": "aerogramme",
+  "docker.io": "dxflrs/aerogramme",
+}
+
+const updateVersionBody = () => {
+    const version = document.getElementById("select-version").value;
+    document.querySelectorAll(".cnt-version").forEach(span => {
+        span.textContent = version;
+    });
+    document.querySelectorAll(".href-version").forEach(a => {
+        a.href = a.dataset.tplhref.replace("[[VERSION]]", version);
+    });
+}
+
+const updateRegistry = () => {
+    const registry = document.getElementById("select-registry").value;
+    document.querySelectorAll(".cnt-registry").forEach(span => {
+        span.textContent = registry;
+    });
+    document.querySelectorAll(".cnt-docker-name").forEach(span => {
+        span.textContent = regToName[registry];
+    });
+}
+
+const updateArch = () => {
+    const arch = document.getElementById("select-arch").value;
+    document.querySelectorAll(".cnt-arch").forEach(span => {
+        span.textContent = arch;
+    });
+}
+
+
 (async () => {
     const manifest = await albatros_tags()
-    console.log(categorize(manifest.tags))
+    repo = categorize(manifest.tags)
+
+    dlTab("docker");
+    updateVersionList();
+    updateRegistry();
+    updateArch();
+
+    document.getElementById("loading-container").classList.add("hidden");
+    document.getElementById("releases-container").classList.remove("hidden");
+
 })()
 
 </script>