145 lines
6.0 KiB
HTML
145 lines
6.0 KiB
HTML
<style>
|
|
.custom_row:hover{
|
|
background-color: rgb(230, 230, 230) !important;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<div id="item_modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="row" style="gap: 5px;">
|
|
<div class="col s12">
|
|
<h4>Add Items...</h4>
|
|
</div>
|
|
<div class="col s12">
|
|
<div class="card-panel grey lighten-4 z-depth-0">
|
|
<span class="black-text"> Here is where you can search, add, and remove items from this group by checking or unchecking the items below. You can select
|
|
multiple at a time or simply one. Utilize the search bar to filter down quickly to items you need or simply scroll to your hearts content.
|
|
<br><br>
|
|
<b>WARNING:</b> clicking the checkbox will not save the changes right off the bat! You <b>MUST</b> click the Update Items button!
|
|
<br><br>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col s9 m6 offset-m3 input-field outlined align-center">
|
|
<i class="material-icons prefix">search</i>
|
|
<input style="border-radius: 20px; border: 1px solid #ccc;" id="search" name="search" type="search" placeholder="Search Items" value="">
|
|
</div>
|
|
<div class="col s12 center">
|
|
<a id="back" class="btn icon-left purple lighten-4 black-text z-depth-0"><i class="material-icons">chevron_left</i></a>
|
|
<a id="update_items" class="btn purple lighten-4 black-text z-depth-0">Update Items</a>
|
|
<a id="forward" class="btn icon-right purple lighten-4 black-text z-depth-0"><i class="material-icons">chevron_right</i></a>
|
|
</div>
|
|
<div class="divider col s12"></div>
|
|
<div id="table-container" class="col s12">
|
|
<table id="item_table">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let current_page = 1
|
|
let end_page;
|
|
let limit = 50
|
|
let search_text = ""
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var elems = document.querySelectorAll('.modal');
|
|
var instances = M.Modal.init(elems, {
|
|
// specify options here
|
|
});
|
|
});
|
|
|
|
|
|
async function fetchItems(){
|
|
if (current_page === 1){
|
|
document.getElementById('back').classList.add("disabled")
|
|
document.getElementById('back').classList.remove("waves-effect")
|
|
} else {
|
|
document.getElementById('back').classList.remove("disabled")
|
|
document.getElementById('back').classList.add("waves-effect")
|
|
};
|
|
|
|
const url = new URL('/getItems', window.location.origin);
|
|
url.searchParams.append('page', current_page);
|
|
url.searchParams.append('limit', limit);
|
|
await fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data)
|
|
end_page = parseInt(data.end)
|
|
if (current_page === end_page){
|
|
document.getElementById('forward').classList.add("disabled")
|
|
document.getElementById('forward').classList.remove("waves-effect")
|
|
} else {
|
|
document.getElementById('forward').classList.remove("disabled")
|
|
document.getElementById('forward').classList.add("waves-effect")
|
|
};
|
|
var table = document.getElementById("item_table")
|
|
while (table.rows.length > 0) {
|
|
table.deleteRow(0);
|
|
}
|
|
const header = table.createTHead();
|
|
const row = header.insertRow(0);
|
|
|
|
var header_database_id = row.insertCell();
|
|
header_database_id.classList.add('center')
|
|
var header_barcode = row.insertCell();
|
|
header_barcode.classList.add('center')
|
|
var header_name = row.insertCell();
|
|
header_name.classList.add('center')
|
|
header_name.classList.add('hide-on-med-and-down')
|
|
|
|
header_database_id.innerHTML = `<b>Database ID</b>`;
|
|
header_barcode.innerHTML = `<b>Barcode</b>`;
|
|
header_name.innerHTML = `<b>Product Name</b>`;
|
|
|
|
let colorstate = 1;
|
|
data.items.forEach(transaction => {
|
|
console.log(transaction)
|
|
var row = table.insertRow();
|
|
|
|
var row_id = row.insertCell();
|
|
row_id.classList.add('center')
|
|
var row_barcode = row.insertCell();
|
|
row_barcode.classList.add('center')
|
|
var row_name = row.insertCell();
|
|
row_name.classList.add('hide-on-med-and-down')
|
|
row_name.classList.add('center')
|
|
|
|
|
|
row_id.innerHTML = transaction[0];
|
|
row_barcode.innerHTML = transaction[1];
|
|
row_name.innerHTML = transaction[2];
|
|
|
|
|
|
if ((colorstate % 2) == 0){
|
|
row.classList.add('grey')
|
|
row.classList.add('lighten-5')
|
|
}
|
|
row.classList.add("custom_row")
|
|
row.addEventListener('click', function(){
|
|
test(transaction[0])
|
|
})
|
|
colorstate++
|
|
});
|
|
})
|
|
}
|
|
|
|
function test(database_id){
|
|
console.log(database_id)
|
|
};
|
|
|
|
document.getElementById('forward').addEventListener('click', async function(){
|
|
current_page++
|
|
await fetchItems()
|
|
})
|
|
|
|
document.getElementById('back').addEventListener('click', async function(){
|
|
current_page--
|
|
await fetchItems()
|
|
})
|
|
|
|
</script> |