diff --git a/public/index.html b/public/index.html
index 54f4d2f..32210d9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,11 +2,21 @@
- Test Main Page
-
+ Learn Request Queue
+
- Test Main Page
+ Learn Request Queue
+
+ Count:
+
+ View requests in any state
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..308ce92
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,37 @@
+var requestsDiv = document.getElementById("requests");
+
+function getRequests(count,allRequests) {
+ var reqUrl;
+ if (allRequests) {
+ reqUrl = "/api/getAllRequests";
+ } else {
+ reqUrl = "/api/getRequests";
+ }
+ reqUrl += `?count=${count}`;
+ fetch(reqUrl)
+ .then(response => response.json())
+ .then(requests => buildTable(requests,allRequests));
+}
+
+function buildTable(requests,allRequests) {
+ var requestsDivHTML = '| URL | Requester | Score | ';
+ if (allRequests) requestsDivHTML += `State |
|---|
`;
+ requestsDivHTML += "";
+ for (request of requests) {
+ requestsDivHTML += `| ${request.url} | \
+ ${request.requester} | \
+ ${request.score} | `;
+ if (allRequests) requestsDivHTML += `${request.state} |
`;
+ requestsDivHTML += "";
+ }
+ requestsDivHTML += "
";
+ requestsDiv.innerHTML = requestsDivHTML;
+}
+
+function updateTable() {
+ var count = document.getElementById("count").value;
+ var allRequests = document.getElementById("allRequests").checked;
+ getRequests(count,allRequests);
+}
+
+updateTable();
diff --git a/public/style.css b/public/style.css
index 08dee5c..cdc3be5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,3 +3,21 @@ body {
text-align: center;
font-family: sans-serif;
}
+
+#requests {
+ display: inline-block;
+ text-align: left;
+}
+
+#requests table, th, td {
+ border: 2px solid black;
+ border-collapse: collapse;
+}
+
+#requests th, td {
+ padding: 5px;
+}
+
+#requests .request-score {
+ text-align: right;
+}