339 lines
15 KiB
HTML
339 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 id="title"></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>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/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 green 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 section">
|
|
<div class="row g-4">
|
|
<div class="col s12">
|
|
<h3>{{item[2]}}</h3>
|
|
<h5>Database ID: {{item[0]}}</h5>
|
|
<h5>Barcode: {{item[1]}}</h5>
|
|
</div>
|
|
<div class="s12 m6" style="margin-right: 5px;">
|
|
<label for="entry_type">Entry Type</label>
|
|
<select id="entry_type" class="browser-default" >
|
|
<option value="" disabled selected>Choose your option</option>
|
|
<option value="single">item</option>
|
|
<option value="linked">linked list</option>
|
|
</select>
|
|
</div>
|
|
<div class="s12 m6">
|
|
<label for="item_type">Item Type</label>
|
|
<select id="item_type" class="browser-default">
|
|
<option value="" disabled selected>Choose your option</option>
|
|
<option value="FOOD">Food</option>
|
|
<option value="FOOD (PLU)">Food(PLU)</option>
|
|
<option value="OTHER">Other</option>
|
|
</select>
|
|
</div>
|
|
<!-- Weblinks Input perhaps a modal to add a link or a text input..?-->
|
|
<div class="divider col s12" style="margin-top: 5px;"></div>
|
|
<div class="col s12">
|
|
<div class="row">
|
|
<div class="col s6" style="padding-top: 10px;">
|
|
<span style="font-size: 16px;">Links</span>
|
|
</div>
|
|
<div class="col s6">
|
|
<button class="btn btn-small btn-flat right modal-trigger green lighten-4 black-text" data-target="web-modal" style="margin-top: 5px; padding-bottom: 10px;">Add Link</button>
|
|
</div>
|
|
<div class="col s12 p-3">
|
|
<div id="weblinks">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divider col s12" style="margin-top: 5px;"></div>
|
|
|
|
<div class="col s12">
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<ul class="tabs tabs-fixed-width" id="info_tabs" style="background-color: white;">
|
|
<li class="tab col s3"><a class="active" href="#item_info">Item Info</a></li>
|
|
<li class="tab col s3"><a href="#food_info">Food Info</a></li>
|
|
<li class="tab col s3"><a href="#logistics_info">Logistics Info</a></li>
|
|
<li class="tab col s3 disabled"><a href="#linked_items">Linked Items</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="item_info" class="col s12">
|
|
<div class="row" style="gap: 10px; padding-top: 10px;">
|
|
<div class="col s6 m4 input-field outlined item_info_target">
|
|
<input onchange="updatePackaging()" id="packaging" type="text" placeholder=" " maxlength="32">
|
|
<label for="packaging">Packaging</label>
|
|
</div>
|
|
<div class="col s6 m4 input-field outlined item_info_target">
|
|
<input onchange="updateUOM()" id="uom" type="text" placeholder=" " maxlength="32">
|
|
<label for="uom">Unit of Measure</label>
|
|
</div>
|
|
<div class="col s6 m4 input-field outlined item_info_target">
|
|
<input onchange="updateCost()" id="cost" type="number" placeholder=" " maxlength="32">
|
|
<label for="cost">Cost</label>
|
|
</div>
|
|
<div class="col s6 m4 input-field outlined item_info_target">
|
|
<input onchange="updateSafetyStock()" id="safety_stock" type="number" placeholder=" " maxlength="32">
|
|
<label for="safety_stock">Safety Stock</label>
|
|
</div>
|
|
<div class="col s6 m4 input-field outlined item_info_target">
|
|
<input onchange="updateLeadTimeDays()" id="lead_time_days" type="number" placeholder=" " maxlength="32">
|
|
<label for="lead_time_days">Leadtime (Days)</label>
|
|
</div>
|
|
<div class="col s6 m4 center">
|
|
<p>
|
|
<label>
|
|
<input onclick="updateAiPickable()" id="ai_pickable" type="checkbox" />
|
|
<span>AI Pickable</span>
|
|
</label>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<table class="" id="reference_table">
|
|
<thead>
|
|
<tr>
|
|
<th>Reference Type</th>
|
|
<th>Reference Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="food_info" class="col s12">
|
|
<div class="row" style="gap: 10px; padding-top: 10px;">
|
|
<div id="food_groups_container" class="col s12 chips">
|
|
<!-- This holds open for food groups pills -->
|
|
</div>
|
|
<div id="ingrediants_container" class="col s12 chips">
|
|
<!-- This holds all the ingrediants pills -->
|
|
</div>
|
|
<div id="nutrients_container" class="col s12">
|
|
<!-- This holds all the nutrients tables -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="logistics_info" class="col s12">Logistics Info</div>
|
|
<div id="linked_items" class="col s12 disabled">Linked Items</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="web-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<h4>Add Weblink to Item...</h4>
|
|
</div>
|
|
<div class="col s12">
|
|
<div class="card-panel green lighten-4">
|
|
<span>Add a link to your favorite sites! Provide a name for the link and the link itself
|
|
and it will show up in this list. You should always try to provide a link with the name "<b>main</b>", as this
|
|
will be used in recipes and shopping lists for where the item will lead to.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="s12 m6 input-field">
|
|
<input id="link_name" type="text" placeholder="main" maxlength="20">
|
|
<label for="link_name">Link Name</label>
|
|
<!--<span class="supporting-text">Supporting Text</span>-->
|
|
</div>
|
|
<div class="input-field col s12">
|
|
<textarea id="link" class="materialize-textarea" placeholder="a weblink to a website..."></textarea>
|
|
<label for="link">Textarea with placeholder</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button onclick="addLink()" class="waves-effect green lighten-4 btn-flat">Add</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="{{ url_for('static', filename='itemHandler.js') }}"></script>
|
|
<script>
|
|
|
|
var item = {{ item|tojson }};
|
|
var reference_state = 1
|
|
let links = {};
|
|
let updated = {};
|
|
let item_info = {};
|
|
let food_info = {};
|
|
let logistics_info = {};
|
|
let food_groups = [];
|
|
let ingrediants = [];
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
document.getElementById("title").innerHTML = String(item[2])
|
|
|
|
var elemsSelects = document.querySelectorAll('select');
|
|
var instancesSelects = M.FormSelect.init(elemsSelects, {});
|
|
|
|
var el = document.querySelector('.tabs');
|
|
var instance = M.Tabs.init(el, {});
|
|
|
|
var elems = document.querySelectorAll('.modal');
|
|
var instances = M.Modal.init(elems, {});
|
|
|
|
|
|
var elem = document.getElementById('food_groups_container');
|
|
M.Chips.init(elem, {
|
|
placeholder: 'Add Group...',
|
|
secondaryPlaceholder: 'Add Group...',
|
|
onChipDelete: deleteFoodGroup,
|
|
onChipAdd: addFoodGroup,
|
|
});
|
|
|
|
var elem = document.getElementById('ingrediants_container');
|
|
M.Chips.init(elem, {
|
|
placeholder: 'Add Ingrediant...',
|
|
secondaryPlaceholder: 'Add Ingrediant...',
|
|
onChipDelete: deleteIngrediant,
|
|
});
|
|
|
|
await propagateInfo()
|
|
refreshFoodGroups()
|
|
refreshIngrediants()
|
|
populateReferences(item[23], 'shopping_list')
|
|
populateReferences(item[24], 'recipe')
|
|
populateReferences(item[25], 'group')
|
|
|
|
});
|
|
|
|
|
|
async function propagateInfo(){
|
|
const entryType = document.getElementById('entry_type');
|
|
entryType.value = item[10];
|
|
const itemType = document.getElementById('item_type');
|
|
itemType.value = item[11];
|
|
await propagateLinks()
|
|
|
|
food_groups = item[33];
|
|
ingrediants = item[34];
|
|
}
|
|
|
|
function refreshFoodGroups(){
|
|
let instance = M.Chips.getInstance(document.getElementById('food_groups_container'));
|
|
for (let i=0; i < food_groups.length; i++){
|
|
instance.addChip({tag: String(food_groups[i])});
|
|
;}
|
|
};
|
|
|
|
function addFoodGroup(e, chip){
|
|
chipText = chip.textContent.replace('close', '').trim()
|
|
console.log(chipText)
|
|
food_groups.push(chipText)
|
|
console.log(food_groups)
|
|
}
|
|
|
|
function deleteFoodGroup(e, chip){
|
|
chipText = chip.textContent.replace('close', '').trim()
|
|
food_groups = food_groups.filter(chip => chip !== chipText);
|
|
};
|
|
|
|
function deleteIngrediant(e, chip){
|
|
chipText = chip.textContent.replace('close', '').trim()
|
|
ingrediants = ingrediants.filter(chip => chip !== chipText);
|
|
}
|
|
|
|
function refreshIngrediants(){
|
|
let instance = M.Chips.getInstance(document.getElementById('ingrediants_container'));
|
|
for (let i=0; i < ingrediants.length; i++){
|
|
instance.addChip({tag: String(ingrediants[i])});
|
|
;}
|
|
};
|
|
|
|
async function propagateLinks(){
|
|
var element = document.getElementById("weblinks");
|
|
element.innerHTML = ""
|
|
for (let key in links){
|
|
var link = document.createElement("a");
|
|
link.classList.add("btn-small");
|
|
link.classList.add("btn-flat");
|
|
link.classList.add("green");
|
|
link.classList.add("lighten-4");
|
|
link.target = "_blank";
|
|
link.style = "border-radius: 20px; margin-right: 5px; vertical-align: middle;";
|
|
link.innerHTML = `<i class="material-icons">open_in_new</i>${String(key)}`;
|
|
link.href = links[key];
|
|
element.appendChild(link);
|
|
}
|
|
}
|
|
|
|
async function addLink(){
|
|
event.preventDefault()
|
|
let key = document.getElementById('link_name').value;
|
|
let link = document.getElementById('link').value;
|
|
links[key] = link;
|
|
console.log(links)
|
|
await propagateLinks()
|
|
}
|
|
|
|
function populateReferences(references, reference_type){
|
|
var table = document.getElementById("reference_table")
|
|
for (let i = 0; i < references.length; i++){
|
|
var row = table.insertRow();
|
|
|
|
var row_type = row.insertCell();
|
|
var row_name = row.insertCell();
|
|
|
|
row_type.innerHTML = reference_type
|
|
row_name.innerHTML = String(references[i][1])
|
|
|
|
if ((reference_state % 2) == 0){
|
|
row.style = "background-color: gainsboro;"
|
|
}
|
|
reference_state++
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</html> |