refactor: introduce dropdown to manage search forms

Agoric · Nov 22, 2024 · 89930b8 · 89930b8
1 parent d9f181d
commit 89930b8
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 60 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -15,8 +15,7 @@ html {
   border-bottom: 2px solid #ddd;
 }
 
-.formDateRange,
-.formBlockHeight {
+.formDateRange {
   display: flex;
   flex-direction: column;
   align-items: start;
@@ -48,7 +47,7 @@ html {
   }
 }
 
-#submitHeightButton,
+#submitSearchButton,
 #uploadFileButton,
 #submitDateButton {
   background-color: #007bff;
@@ -96,18 +95,16 @@ select {
   font-weight: 500;
 }
 
-#dateForm > #fileHelperText > p,
-#blockHeightForm > #fileHelperText > p {
+#dateForm > #fileHelperText > p {
   margin: 0;
 }
 
-@media (max-width: 649px) {
+@media (max-width: 599px) {
   .topbar {
     flex-direction: column;
     gap: 20px;
   }
-  .formDateRange,
-  .formBlockHeight {
+  .formDateRange {
     display: block;
   }
 
@@ -130,8 +127,22 @@ select {
   #networkForm > #fileHelperText > p {
     display: none;
   }
+}
 
-  #blockHeightForm > #fileHelperText > p {
-    padding-bottom: 8px;
-  }
+#txHashInput,
+#searchTermInput {
+  display: none;
+}
+
+#searchForm {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+#searchFormTop,
+#searchFormBottom {
+  display: flex;
+  gap: 8px;
 }
diff --git a/public/index.html b/public/index.html
@@ -46,28 +46,45 @@
             </div>
         </form>
 
-        <form id="blockHeightForm" class="formBlockHeight">
-            <div id="inputBlock">
-                <input type="number" id="blockHeight" name="blockHeight" required>
-                <div id="spinnerHeightForm" class="spinner"></div>
-                <button id="submitHeightButton" type="submit">Submit Height</button>
+        <form id="searchForm">
+            <div id="searchFormTop">
+                <select id="searchType" name="searchType">
+                    <option value="blockHeight">Block Height</option>
+                    <option value="txHash">Transaction Hash</option>
+                    <option value="searchTerm">Search Term</option>
+                </select>
             </div>
-            <div id="fileHelperText">
-                <p id="helperText">Enter a Block Height</p>
+
+            <div id="searchFormBottom">
+                <div class="searchInput" id="blockHeightInput">
+                    <input type="number" id="blockHeight" name="blockHeight" required>
+                    <div class="spinner"></div>
+                </div>
+
+                <div class="searchInput" id="txHashInput">
+                    <input type="text" id="txHash" name="txHash" required>
+                </div>
+
+                <div class="searchInput" id="searchTermInput">
+                    <input type="text" id="searchTerm" name="searchTerm" required>
+                </div>
+
+                <div id="spinnerSearchForm" class="spinner"></div>
+                <button id="submitSearchButton" type="submit">Search</button>
             </div>
         </form>
 
+
+
+
     </div>
 
     <div class="mainBody">
         <img id="svgDisplay" src="" alt="Causeway SVG">
     </div>
 
     <script src="/scripts/ses/ses.umd.min.js" charset="utf-8"></script>
-    <script src="./scripts/lockdown.js"></script>
-    <script src="scripts/upload.js"></script>
-    <script src="scripts/submitDateRange.js"></script>
-    <script src="scripts/submitHeight.js"></script>
+    <script type="module" src="./scripts/index.js"></script>
 
 </body>
 

diff --git a/public/scripts/index.js b/public/scripts/index.js
@@ -0,0 +1,4 @@
+import './lockdown.js';
+import './upload.js';
+import './submitDateRange.js';
+import './submitSearch.js';
diff --git a/public/scripts/submitHeight.js b/public/scripts/submitHeight.js
diff --git a/public/scripts/submitSearch.js b/public/scripts/submitSearch.js
@@ -0,0 +1,58 @@
+const searchTypeSelect = document.getElementById('searchType');
+
+searchTypeSelect.addEventListener('change', () => {
+  const selection = document.getElementById('searchType').value;
+  document.getElementById('blockHeightInput').style.display = 'none';
+  document.getElementById('txHashInput').style.display = 'none';
+  document.getElementById('searchTermInput').style.display = 'none';
+
+  if (selection === 'blockHeight') {
+    document.getElementById('blockHeightInput').style.display = 'block';
+  } else if (selection === 'txHash') {
+    document.getElementById('txHashInput').style.display = 'block';
+  } else if (selection === 'searchTerm') {
+    document.getElementById('searchTermInput').style.display = 'block';
+  }
+});
+
+document.getElementById('searchForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+
+  const searchInputValue = document.querySelector('.searchInput').value;
+  const searchStrategy = document.getElementById('searchType').value;
+  const spinner = document.getElementById('spinnerSearchForm');
+  const submitButton = document.getElementById('submitSearch');
+  const network = document.getElementById('networkSelect').value;
+
+  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({
+        searchInputValue,
+        network,
+        strategy: searchStrategy,
+      }),
+    });
+
+    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';
+  }
+});