transend/test.html at main · route-2/transend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Search</title>
</head>
<body>
  <h1>Product Search</h1>

  <label for="searchTerm">Enter Search Term:</label>
  <input type="text" id="searchTerm" placeholder="Search for a product" />
  <button onclick="handleSearchClick()">Search</button>

  <h2>Results:</h2>
  <ul id="productList"></ul>

  <div id="errorMessage" style="color: red;"></div>

  <script>
    // Function to handle search button click
    async function handleSearchClick() {
      const searchTerm = document.getElementById('searchTerm').value.trim();

      if (!searchTerm) {
        document.getElementById('errorMessage').innerText = "Please enter a search term.";
        return;
      }

      // Get the token from localStorage
      const token = `eyJhbGciOiJSUzI1NiIsImprdSI6Imh0dHBzOi8vYXBpLmtyb2dlci5jb20vdjEvLndlbGwta25vd24vandrcy5qc29uIiwia2lkIjoiWjRGZDNtc2tJSDg4aXJ0N0xCNWM2Zz09IiwidHlwIjoiSldUIn0.eyJhdWQiOiJ0cmFuc2VuZC1iYWNrZW5kLTI0MzI2MTI0MzAzNDI0MmY0OTRkNzY0Mzc4Mzg2NjZlNDU2ODUwMzY0YzRjNmI3NTQyNzE2NTMyNzUzODc2Njc0YjMyNDc3NTM1MzQ2NDc2NDMzMDUzNjU3NDQ2NzA1MDVhNmI2NTc3NGY0NzUwNTY0MzM2NTQ0MzYwNTk0NzI1MzkwOTE5NzkwNzEiLCJleHAiOjE3MzM0MTA2OTQsImlhdCI6MTczMzQwODg4OSwiaXNzIjoiYXBpLmtyb2dlci5jb20iLCJzdWIiOiJjYTU0NGI0Mi1kNDBmLTVlZTAtOTAzNC1lM2Y0MWRkNWNmNDUiLCJzY29wZSI6InByb2R1Y3QuY29tcGFjdCIsImF1dGhBdCI6MTczMzQwODg5Mzk5NDAxODY4OCwiYXpwIjoidHJhbnNlbmQtYmFja2VuZC0yNDMyNjEyNDMwMzQyNDJmNDk0ZDc2NDM3ODM4NjY2ZTQ1Njg1MDM2NGM0YzZiNzU0MjcxNjUzMjc1Mzg3NjY3NGIzMjQ3NzUzNTM0NjQ3NjQzMzA1MzY1NzQ0NjcwNTA1YTZiNjU3NzRmNDc1MDU2NDMzNjU0NDM2MDU5NDcyNTM5MDkxOTc5MDcxIn0.stJJz9JOXHCPGkFtxZyb9efl4UvX0RdsH6uBep_BgMIEwxdkcpzun37pJGndm3ui4srkNScgGTyHKqMwWjDRToOcZfcjippZvbrLuWTAJUksepfxW9O96Fmj9FH7lnZSAIGFuqLaxSRET_wiJaHdW8kFfr33g5b9kWuoAy07tHn9ywWnjosBjb4ZbkrZIIHxu24c9F61YUqKFUbDPMOlEibsZ_oHNJABpAx346JXkvCr2mr-S8g_jiTn5p9tBQauD15gH8oerIMuIDigboaRXkZD1bsP33LCcl9kPj9drJ8-cLwHPcF0Wkicq4uDDEt4lLnSoh-SsKz3s0L-UMuifQ`;
      if (!token) {
        document.getElementById('errorMessage').innerText = "Authentication token is missing.";
        return;
      }

      // API request URL
      const apiUrl = `http://localhost:3001/products/searchprod?term=${encodeURIComponent(searchTerm)}`;

      try {
        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          }
        });

        if (!response.ok) {
          throw new Error('Failed to fetch products.');
        }

        const data = await response.json();

        // Check if products were found
        if (data && data.data && data.data.length > 0) {
          // Clear any previous error messages
          document.getElementById('errorMessage').innerText = '';

          // Populate the product list
          const productList = document.getElementById('productList');
          productList.innerHTML = ''; // Clear previous results
          data.data.forEach(product => {
            const productItem = document.createElement('li');
            productItem.innerHTML = `
              <a href="http://localhost:3000${product.productPageURI}" target="_blank">
                ${product.description}
              </a>
            `;
            productList.appendChild(productItem);
          });
        } else {
          document.getElementById('errorMessage').innerText = 'No products found.';
        }
      } catch (error) {
        console.error('Error fetching product data:', error);
        document.getElementById('errorMessage').innerText = 'Failed to fetch products.';
      }
    }
  </script>
</body>
</html>