feat: send block height from frontend

controllers/heightController.js

@@ -23,7 +23,7 @@ export const handleHeightLogs = async (req, res) => {
   console.log('Fetching data from GCP...');
 
   const queryfilter = `
-  blockHeight = ${height}
+  jsonPayload.blockHeight = "${height}"
 `;
 
   await fetchAndStoreLogsFromGCP({ inputFile, queryfilter });

public/index.html

@@ -30,6 +30,17 @@
                 <p id="helperText">Specify a date range to view logs over a 20-second interval.</p>
             </div>
         </form>
+
+        <form id="blockHeightForm" class="formBlockHeight">
+            <div>
+                <input type="number" id="blockHeight" name="blockHeight" required>
+                <div id="spinnerHeightForm" class="spinner"></div>
+                <button id="submitHeightButton" type="submit">Submit Height</button>
+            </div>
+            <div id="fileHelperText">
+                <p id="helperText">Enter a Block Height</p>
+            </div>
+        </form>
     </div>
 
     <div class="mainBody">
@@ -40,6 +51,7 @@
     <script src="./scripts/lockdown.js"></script>
     <script src="scripts/upload.js"></script>
     <script src="scripts/submitDateRange.js"></script>
+    <script src="scripts/submitHeight.js"></script>
 
 </body>
 

public/scripts/submitHeight.js

@@ -0,0 +1,37 @@
+document
+  .getElementById('blockHeightForm')
+  .addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const blockHeight = document.getElementById('blockHeight').value;
+    const submitButton = document.getElementById('spinnerHeightForm');
+    const spinner = document.getElementById('submitHeightButton');
+
+    spinner.style.display = 'inline-block';
+    submitButton.style.visibility = 'hidden';
+    try {
+      const response = await fetch('/submit-height', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ height: blockHeight }),
+      });
+
+      if (response.ok) {
+        const svgContent = await response.blob();
+        const url = URL.createObjectURL(svgContent);
+
+        const svgElement = document.getElementById('svgDisplay');
+        svgElement.src = url;
+        svgElement.style.display = 'inline-block';
+      } else {
+        console.error('Failed to upload file');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    } finally {
+      spinner.style.display = 'none';
+      submitButton.style.visibility = 'visible';
+    }
+  });