dxs
/
learn-request-queue
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases 11 Wiki Activity

Initial frontend

master
Dessa Simpson 2020-07-03 23:22:28 -07:00
parent 0f3d921d96
commit d55d1d1abe
3 changed files with 68 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/index.html
View File

@ -2,11 +2,21 @@
<html> <html>
<head> <head>
<link rel=stylesheet href=style.css /> <link rel=stylesheet href=style.css />
<title>Test Main Page</title> <title>Learn Request Queue</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="main.js" defer></script>
</head> </head>
<body> <body>
<h1>Test Main Page</h1> <h1>Learn Request Queue</h1>
<div id="requests"></div><br>
Count:
<select id="count" value="10" onchange="updateTable()">
<option>5</option>
<option selected="selected">10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
<input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input>
</body> </body>
</html> </html>

37
public/main.js Normal file
View File

@ -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 = '<table><tr><th class="request-url">URL</th><th class="request-requester">Requester</th><th class="request-score">Score</th>';
if (allRequests) requestsDivHTML += `<th class="request-state">State</td></tr>`;
requestsDivHTML += "</tr>";
for (request of requests) {
requestsDivHTML += `<tr><td class="request-url"><a href="${request.url}">${request.url}</a></td>\
<td class="request-requester">${request.requester}</td>\
<td class="request-score">${request.score}</td>`;
if (allRequests) requestsDivHTML += `<td class="request-state">${request.state}</td></tr>`;
requestsDivHTML += "</tr>";
}
requestsDivHTML += "</table>";
requestsDiv.innerHTML = requestsDivHTML;
}
function updateTable() {
var count = document.getElementById("count").value;
var allRequests = document.getElementById("allRequests").checked;
getRequests(count,allRequests);
}
updateTable();

18
public/style.css
View File

@ -3,3 +3,21 @@ body {
text-align: center; text-align: center;
font-family: sans-serif; 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;
}