Test rs

controllers/heightController.js → controllers/searchLogsController.js

@@ -1,3 +1,4 @@
+// @ts-check
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { processAndConvert } from '../services/fileProcessor.js';
@@ -9,16 +10,29 @@ const __dirname = path.dirname(__filename);
 
 const uploadDir = 'uploads';
 
-export const handleHeightLogs = async (req, res) => {
-  const { height, network } = req.body;
-  if (!height) {
-    return res.status(400).json({ message: 'Height is required.' });
+const validStrategies = new Set(['blockHeight', 'txHash', 'searchTerm']);
+const isValidStrategy = (strategy) => {
+  return validStrategies.has(strategy);
+};
+
+export const handleSearchLogs = async (req, res) => {
+  const { search, network, strategy } = req.body;
+  console.log(req.body);
+
+  if (!isValidStrategy(strategy)) {
+    return res.status(400).json({
+      message: 'Invalid strategy selected',
+    });
+  }
+
+  if (!search) {
+    return res.status(400).json({ message: 'Search input is required.' });
   }
   if (!network || !networks[network]) {
-    return res.status(400).json({ error: 'Bad Request: Network not found' });
+    return res.status(400).json({ message: 'Bad Request: Network not found' });
   }
 
-  console.log(`height:${height} AND AGORIC_NET:${network}`);
+  console.log(`SearchInput:${search} AND AGORIC_NET:${network}`);
 
   const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
   const inputFile = path.join(
@@ -42,7 +56,7 @@ export const handleHeightLogs = async (req, res) => {
   `;
 
   await fetchAndStoreHeightLogs({
-    blockHeight: height,
+    blockHeight: search,
     inputFile,
     network,
     queryfilter,

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;
 }

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 id="blockHeightInput">
+                    <input class="searchInput" type="number" id="blockHeight" name="blockHeight">
+                    <div class="spinner"></div>
+                </div>
+
+                <div id="txHashInput">
+                    <input class="searchInput" type="text" id="txHash" name="txHash">
+                </div>
+
+                <div id="searchTermInput">
+                    <input class="searchInput" type="text" id="searchTerm" name="searchTerm">
+                </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>
 

public/scripts/index.js

@@ -0,0 +1,4 @@
+import './lockdown.js';
+import './upload.js';
+import './submitDateRange.js';
+import './submitSearch.js';

public/scripts/submitSearch.js

@@ -0,0 +1,72 @@
+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';
+  }
+});
+
+const validStrategies = new Set(['blockHeight', 'txHash', 'searchTerm']);
+
+const isValidStrategy = (strategy) => {
+  if (!validStrategies.has(strategy)) {
+    return false;
+  }
+  return true;
+};
+
+document.getElementById('searchForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+
+  const search = document.querySelector('.searchInput').value;
+  const strategy = document.getElementById('searchType').value;
+  const spinner = document.getElementById('spinnerSearchForm');
+  const submitButton = document.getElementById('submitSearchButton');
+  const network = document.getElementById('networkSelect').value;
+
+  spinner.style.display = 'inline-block';
+  submitButton.style.visibility = 'hidden';
+  try {
+    if (!isValidStrategy(strategy)) {
+      throw new Error(`Invalid strategy selected: ${strategy}`);
+    }
+
+    const response = await fetch('/search-logs', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        search,
+        network,
+        strategy,
+      }),
+    });
+
+    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 {
+      let parsedResponse = await response.json();
+      console.error('Failed to upload file:', parsedResponse.message);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  } finally {
+    spinner.style.display = 'none';
+    submitButton.style.visibility = 'visible';
+  }
+});

router.js

@@ -2,13 +2,13 @@ import express from 'express';
 import { serveHomePage } from './controllers/homeController.js';
 import { handleFileUpload, upload } from './controllers/uploadController.js';
 import { handleDateRange } from './controllers/dateRangeController.js';
-import { handleHeightLogs } from './controllers/heightController.js';
+import { handleSearchLogs } from './controllers/searchLogsController.js';
 
 const router = express.Router();
 
 router.get('/', serveHomePage);
 router.post('/upload', upload.single('file'), handleFileUpload);
 router.post('/submit-date-range', handleDateRange);
-router.post('/submit-height', handleHeightLogs);
+router.post('/search-logs', handleSearchLogs);
 
 export default router;