added indicator to setup buttons

jaenixlee · jaenixlee · commit 142ea6a70a23 · 2023-05-03T12:02:47.000-04:00
diff --git a/SetupApp/index.html b/SetupApp/index.html
@@ -59,19 +59,28 @@
         cursor: pointer;
         transition: all 0.3s ease-in-out;
       }
+      .buttonDiv {
+        display: flex;
+        flex-direction: row;
+        line-height: 60px;
+      }
+
+      #promCheck, #grafCheck, #portCheck {
+        visibility: hidden;
+      }
     </style>
   </head>
 
   <body>
     <div id="root2"></div>
     <div class="buttonContainer">
-      
       <div class="buttons">
         <h1>Set Up Your Kubernetes Cluster with Docketeer!</h1>
         <span>You only need to Install Prometheus Operator once!</span>
-        <button id="prom">Install Prometheus Operator</button>
-        <button id="metrics">Set Up Grafana</button>
-        <button id="port">Launch Port Forwarding</button>
+        <span>Please wait for the green check mark to appear before moving onto the next step!</span>
+        <div class="buttonDiv"><button id="prom">Install Prometheus Operator</button><span id="promCheck">&#9989;</span></div>
+        <div class="buttonDiv"><button id="metrics">Set Up Grafana</button><span id="grafCheck">&#9989;</span></div>
+        <div class="buttonDiv"><button id="port">Launch Port Forwarding</button><span id="portCheck">&#9989;</span></div>
       </div>
     </div>
   </body>
diff --git a/SetupApp/index.js b/SetupApp/index.js
@@ -2,16 +2,29 @@ document.addEventListener('DOMContentLoaded', () => {
   const promInstall = document.querySelector('#prom');
   const grafInstall = document.querySelector('#metrics');
   const portForward = document.querySelector('#port');
+  const promCheck = document.querySelector('#promCheck');
+  const grafCheck = document.querySelector('#grafCheck');
+  const portCheck = document.querySelector('#portCheck');
+
 
   promInstall.addEventListener('click', () => {
-    fetch('/api/setup/promInstall');
+    fetch('/api/setup/promInstall')
+      .then(() => {
+        promCheck.setAttribute('style', 'visibility: visible;');
+      });
   });
 
   grafInstall.addEventListener('click', () => {
-    fetch('/api/setup/applyGraf');
+    fetch('/api/setup/applyGraf')
+      .then(() => {
+        grafCheck.setAttribute('style', 'visibility: visible;');
+      });
   });
 
   portForward.addEventListener('click', () => {
-    fetch('/api/setup/portForward');
+    fetch('/api/setup/portForward')
+      .then(() => {
+        portCheck.setAttribute('style', 'visibility: visible;');
+      });
   });
 });
