153 lines
5.0 KiB
HTML
153 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Searching</title>
|
|
<style>
|
|
td {
|
|
outline: black 1px solid;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
}
|
|
.col {
|
|
width: 32%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="col">
|
|
<h1>Assets</h1>
|
|
<table id="asset_table">
|
|
<tr>
|
|
<td>Asset tag</td>
|
|
<td>Serial Number</td>
|
|
<td>Model</td>
|
|
<td>Category</td>
|
|
<td>Assigned to</td>
|
|
</tr>
|
|
</table>
|
|
<button type="button" onclick="get_assets()">get assets</button>
|
|
</div>
|
|
<div class="col">
|
|
<h1>User info search</h1>
|
|
<label for="user-name">Name:</label>
|
|
<input type="text" name="user-name" id="user-name">
|
|
<button type="button" onclick="user_search()">Search</button>
|
|
|
|
<h2>results</h2>
|
|
<table id="user-search-results">
|
|
<tr>
|
|
<td>Name</td>
|
|
<td>ID number</td>
|
|
<td>Assigned asset</td>
|
|
<td>Assigned card</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col">
|
|
<h1>Asset number search</h1>
|
|
<label for="asset-tag">Asset tag:</label>
|
|
<input type="text" name="asset-tag" id="asset-tag">
|
|
<button type="button" onclick="asset_search()">Search</button>
|
|
|
|
<h2>results</h2>
|
|
<div id="asset-tag-search-results">
|
|
<p>use the search box above to get results</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
async function asset_search() {
|
|
let tag = document.getElementById("asset-tag").value;
|
|
await fetch('/asset_tag_search?data='+tag)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data = data[0];
|
|
let result_element = document.getElementById('asset-tag-search-results');
|
|
result_element.innerHTML = `
|
|
<p>ID: ${data[0]}</p>
|
|
<p>Serial: ${data[1]}</p>
|
|
<p>Model: ${data[2]}</p>
|
|
<p>Category: ${data[3]}</p>
|
|
<p>Assigned to: ${data[4]}</p>
|
|
`;
|
|
|
|
});
|
|
}
|
|
|
|
async function user_search() {
|
|
let user_name = document.getElementById("user-name").value;
|
|
let user_table = document.getElementById("user-search-results");
|
|
let user_entries = document.getElementsByClassName('user_data');
|
|
while (user_entries[0]) {
|
|
user_entries[0].remove();
|
|
}
|
|
await fetch('/user_search?data='+user_name)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
for (entry of data) {
|
|
let tr = document.createElement('tr');
|
|
tr.classList.add('user_data');
|
|
for (let datum of entry) {
|
|
let td = document.createElement('td');
|
|
td.innerHTML = datum;
|
|
tr.appendChild(td);
|
|
}
|
|
user_table.appendChild(tr);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function serial_search() {
|
|
let serial = document.getElementById("asset-serial").value;
|
|
await fetch('/serial_search?data='+serial)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data = data[0];
|
|
console.log(data);
|
|
let result_element = document.getElementById('search-results');
|
|
result_element.innerHTML = `
|
|
<p>ID: ${data[0]}</p>
|
|
<p>Serial: ${data[1]}</p>
|
|
<p>Model: ${data[2]}</p>
|
|
<p>Category: ${data[3]}</p>
|
|
<p>Assigned to: ${data[4]}</p>
|
|
`;
|
|
|
|
});
|
|
}
|
|
|
|
async function get_assets() {
|
|
let elements = document.getElementsByClassName("asset_data");
|
|
while (elements[0]) {
|
|
elements[0].remove();
|
|
}
|
|
let table = document.getElementById("asset_table");
|
|
await fetch('/asset_list')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
for (let entry of data) {
|
|
let tr = document.createElement('tr');
|
|
tr.classList.add('asset_data');
|
|
for (let datum of entry) {
|
|
let td = document.createElement('td');
|
|
td.innerHTML = datum;
|
|
tr.appendChild(td);
|
|
}
|
|
table.appendChild(tr);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |