352 lines
15 KiB
HTML
352 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|
<title>My Pantry - Groups</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css" />
|
|
<!-- Material Icons -->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
<!-- Material Symbols - Outlined Set -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
|
<!-- Material Symbols - Rounded Set -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
|
|
<!-- Material Symbols - Sharp Set -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
|
|
</head>
|
|
<style>
|
|
header, main, footer, body {
|
|
padding-left: 300px;
|
|
}
|
|
|
|
@media only screen and (max-width : 992px) {
|
|
header, main, footer, body {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
.dropdown-disabled {
|
|
pointer-events: none;
|
|
opacity: 0.5; /* or your desired degree of transparency */
|
|
}
|
|
|
|
</style>
|
|
<ul id='dropdown1' class='dropdown-content'>
|
|
{% for site in sites %}
|
|
<li><button class="btn transparent black-text z-depth-0" onclick="changeSite('{{ site }}')">{{site}}</button></li>
|
|
{% endfor %}
|
|
</ul>
|
|
<ul id="slide-out" class="sidenav sidenav-fixed purple lighten-4" style="width: 250px;">
|
|
<li>
|
|
<div class="user-view">
|
|
<!-- <div class="background">
|
|
<img src="images/office.jpg">
|
|
</div> -->
|
|
<!-- <a href="#user"><img class="circle" src="images/yuna.jpg"></a> -->
|
|
<a href="#name"><span class="black-text name">John Doe</span></a>
|
|
<a href="#email"><span class="black-text email">jdoe@example.com</span></a>
|
|
</div>
|
|
</li>
|
|
<li><a class="dropdown-trigger dropdown-disabled" data-target="dropdown1">Current Site > {{current_site}}<i class="material-icons right">arrow_drop_down</i></a></li>
|
|
<li><div class="divider grey darken-1" style="margin-left: 5px; margin-right: 10px;"></div></li>
|
|
<li><a href="/items">Site Items</a></li>
|
|
<li><a href="/groups">Site Groups</a></li>
|
|
<li><a href="/shopping-lists">Site Shopping Lists</a></li>
|
|
</ul>
|
|
<body>
|
|
<div class="container">
|
|
<div class="section">
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="row">
|
|
<div class="col s2">
|
|
<h3><a href="#" data-target="slide-out" class="sidenav-trigger hide-on-large-only left"><i class="material-icons">menu</i></a></h3>
|
|
</div>
|
|
<div class="col s8 purple lighten-4" style="border-radius: 10px;">
|
|
<h3 id="group_name" class="center"></h3>
|
|
</div>
|
|
<div class="col s2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 p-2">
|
|
<h5 id="database_id"></h5>
|
|
</div>
|
|
<div class="col s12 m6 p-2">
|
|
<label for="group_type">Group Type</label>
|
|
<select id="group_type" class="browser-default">
|
|
<option value="plain">Plain</option>
|
|
<option value="calculated">Calculated</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-field col s12 p-2">
|
|
<textarea id="description" class="materialize-textarea" placeholder=" "></textarea>
|
|
<label for="description">Group Description</label>
|
|
</div>
|
|
<div class="divider col s12"></div>
|
|
<div class="col s3 p-2">
|
|
<button class="btn filled icon-left modal-trigger purple lighten-4 black-text z-depth-0" data-target="item_modal">Add Item</button>
|
|
</div>
|
|
<div id="table_div" class="col s12 p-2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fixed-action-btn">
|
|
<button class="btn-floating btn-large" onclick="saveGroup()">
|
|
<i class="large material-icons">save</i>
|
|
</button>
|
|
</div>
|
|
<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 purple 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="checkbox-container" class="col s12">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const group_id = {{id|tojson}}
|
|
let site = {{ current_site|tojson }}
|
|
|
|
let group;
|
|
let current_page = 1
|
|
let limit = 25
|
|
let checked_items = new Array();
|
|
let search_text = "";
|
|
|
|
document.addEventListener("DOMContentLoaded", async function(){
|
|
await fetchGroup()
|
|
|
|
var elems = document.querySelectorAll('select');
|
|
var instances = M.FormSelect.init(elems, {});
|
|
var elems = document.querySelectorAll('.modal');
|
|
var instances = M.Modal.init(elems, {});
|
|
var elems = document.querySelectorAll('.fixed-action-btn');
|
|
var instances = M.FloatingActionButton.init(elems, {});
|
|
var elems = document.querySelectorAll('.sidenav');
|
|
var instances = M.Sidenav.init(elems, {});
|
|
var elems = document.querySelectorAll('.dropdown-trigger');
|
|
var instances = M.Dropdown.init(elems, {});
|
|
var elems = document.querySelectorAll('.collapsible');
|
|
var instances = M.Collapsible.init(elems, {});
|
|
M.AutoInit();
|
|
|
|
await populateInfo()
|
|
await populateReferences(group[3])
|
|
update_list()
|
|
|
|
})
|
|
|
|
document.getElementById("search").addEventListener('keydown', function(event){
|
|
if(event.key === 'Enter'){
|
|
console.log(document.getElementById("search").value);
|
|
search_text = document.getElementById("search").value;
|
|
update_list()
|
|
}
|
|
})
|
|
|
|
async function fetchGroup(){
|
|
const url = new URL('/getGroup', window.location.origin);
|
|
url.searchParams.append('id', group_id);
|
|
const response = await fetch(url);
|
|
data = await response.json();
|
|
group = data.group;
|
|
}
|
|
|
|
async function populateInfo(){
|
|
var itemName = document.getElementById('group_name');
|
|
var databaseID = document.getElementById('database_id');
|
|
var selectElement = document.getElementById('group_type');
|
|
var description = document.getElementById('description');
|
|
|
|
itemName.innerHTML = group[1];
|
|
databaseID.innerHTML = `Database ID: ${group[0]}`;
|
|
selectElement.value = group[4];
|
|
selectElement.dispatchEvent(new Event('change'));
|
|
description.value = group[2];
|
|
M.Forms.textareaAutoResize(description);
|
|
|
|
|
|
checked_items = [];
|
|
|
|
for(let i=0; i < group[3].length; i++){
|
|
checked_items.push(group[3][i][0]);
|
|
}
|
|
}
|
|
|
|
async function populateReferences(references){
|
|
var table_div = document.getElementById('table_div')
|
|
table_div.innerHTML = ""
|
|
|
|
var references_table = document.createElement('table')
|
|
references_table.classList.add("striped")
|
|
|
|
var tbl_header = document.createElement('thead')
|
|
tbl_header.innerHTML = `<tr><th>Database ID</th><th>Barcode</th><th>Item Name</th><th>QOH</th></tr>`
|
|
|
|
var tbl_body = document.createElement('tbody')
|
|
|
|
for (let i=0; i < references.length; i++){
|
|
var row = document.createElement('tr')
|
|
row.innerHTML = `
|
|
<td>${references[i][0]}</td>
|
|
<td>${references[i][1]}</td>
|
|
<td>${references[i][2]}</td>
|
|
<td>${references[i][3]}</td>
|
|
`
|
|
tbl_body.appendChild(row)
|
|
};
|
|
|
|
references_table.appendChild(tbl_header)
|
|
references_table.appendChild(tbl_body)
|
|
|
|
table_div.appendChild(references_table)
|
|
}
|
|
|
|
function save_checked(){
|
|
let checkboxes = document.querySelectorAll('.checkbox-class');
|
|
checkboxes.forEach((checkbox) => {
|
|
if (checked_items.includes(Number(checkbox.id)) && !checkbox.checked){
|
|
checked_items.splice(checked_items.indexOf(Number(Number(checkbox.id))), 1);
|
|
}
|
|
if (!checked_items.includes(Number(checkbox.id)) && checkbox.checked){
|
|
checked_items.push(Number(checkbox.id))
|
|
}
|
|
});
|
|
}
|
|
|
|
function update_list(){
|
|
if (current_page == 1){
|
|
document.getElementById('back').classList.add("disabled")
|
|
}else{
|
|
document.getElementById('back').classList.remove("disabled")
|
|
};
|
|
|
|
const url = new URL('/getItems', window.location.origin);
|
|
url.searchParams.append('page', current_page);
|
|
url.searchParams.append('limit', limit);
|
|
url.searchParams.append('search_text', search_text);
|
|
|
|
let container = document.getElementById('checkbox-container')
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.items.length < limit){
|
|
document.getElementById('forward').classList.add("disabled")
|
|
} else {
|
|
document.getElementById('forward').classList.remove("disabled")
|
|
}
|
|
|
|
const divi = document.createElement('div')
|
|
data.items.forEach(item => {
|
|
const checkboxHTML = document.createElement('p')
|
|
if (checked_items.includes(item[0])){
|
|
checkboxHTML.innerHTML = `<label>
|
|
<input class="checkbox-class" id=${item[0]} name=${item[0]} checked="checked" type="checkbox" />
|
|
<span>${item[1]} - ${item[2]}</span>
|
|
</label>`;
|
|
} else {
|
|
checkboxHTML.innerHTML = `<div class="col s12"><label>
|
|
<input class="checkbox-class" id=${item[0]} name=${item[0]} type="checkbox" />
|
|
<span>${item[1]} - ${item[2]}</span>
|
|
</label></div>`;
|
|
}
|
|
divi.appendChild(checkboxHTML)
|
|
})
|
|
|
|
container.innerHTML = divi.innerHTML
|
|
})
|
|
}
|
|
|
|
async function saveGroup(){
|
|
save_checked()
|
|
var itemName = document.getElementById('group_name');
|
|
var selectElement = document.getElementById('group_type');
|
|
var description = document.getElementById('description');
|
|
|
|
await fetch(`/updateGroup`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
id: group[0],
|
|
name: itemName.innerHTML,
|
|
description:description.value,
|
|
items: checked_items,
|
|
group_type:selectElement.value,
|
|
}),
|
|
});
|
|
M.toast({text: "Group Saved!"})
|
|
}
|
|
|
|
document.getElementById('forward').addEventListener('click', () =>{
|
|
current_page++
|
|
save_checked()
|
|
update_list()
|
|
})
|
|
|
|
document.getElementById('back').addEventListener('click', () =>{
|
|
current_page--
|
|
save_checked()
|
|
update_list()
|
|
})
|
|
|
|
document.getElementById('update_items').addEventListener('click', async function(){
|
|
save_checked()
|
|
|
|
var itemName = document.getElementById('group_name');
|
|
var selectElement = document.getElementById('group_type');
|
|
var description = document.getElementById('description');
|
|
|
|
await fetch(`/updateGroup`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
id: group[0],
|
|
name: itemName.innerHTML,
|
|
description:description.value,
|
|
items: checked_items,
|
|
group_type:selectElement.value,
|
|
}),
|
|
})
|
|
|
|
var modalElem = document.querySelector('#item_modal');
|
|
var instance = M.Modal.getInstance(modalElem);
|
|
instance.close();
|
|
|
|
M.toast({text: "Group Saved!"})
|
|
await fetchGroup()
|
|
await populateInfo()
|
|
await populateReferences(group[3])
|
|
})
|
|
|
|
</script>
|
|
</html> |