c322-lab5/search.html at master · etparr/c322-lab5 · 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
83
84
85
86
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search ducks</title>
    <style>
      table {
        border: 1px solid;
        border-collapse: collapse;
        margin: 30px;
      }

      table td,
      th {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
      }

      table td:first-child {
        border-left: none;
      }

      table td:last-child {
        border-right: none;
      }
    </style>
  </head>
  <body>
    <labe>Type:</labe>
    <input id="type" />
    <button onclick="search()">Search</button>
    <br />
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Type</th>
              </tr>
        </thead>
        <tbody id="result">

        </tbody>

    </table>

    <script>
      let ducks = [];

      async function getAll(){
        let host = "http://localhost:8080";
        let request = {
          method : "GET"
        }
        let response = await fetch(host + "/ducks", request);
        console.log(response);
        return response.json();
      }

      async function search() {
        if(ducks.length == 0) {
          ducks = await getAll();
        }

        let duckType = document.getElementById("type").value;
        let table = document.getElementById("result");
        table.innerHTML = "";

        for (let duck of ducks) {
          if (!duckType || duck.type.toLowerCase() == duckType.toLowerCase()) {
            let row = document.createElement("tr");
            let cell1 = document.createElement("td");
            let id = document.createTextNode(duck.id);
            cell1.appendChild(id);
            row.appendChild(cell1);
            let cell2 = document.createElement("td");
            let type = document.createTextNode(duck.type);
            cell2.appendChild(type);
            row.appendChild(cell2);
            table.appendChild(row);
          }
        }
      }
    </script>
  </body>
</html>