138 lines
5.6 KiB
HTML
138 lines
5.6 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" />
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
|
|
</head>
|
|
<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="item">item</option>
|
|
<option value="linked list">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">
|
|
<p style="font-weight: bold; font-size: 16px; margin-top: 5px;">Links</p>
|
|
<div id="weblinks">
|
|
</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">
|
|
<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">Food Info</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>
|
|
</body>
|
|
<script>
|
|
const item = {{ item|tojson }}
|
|
var reference_state = 1
|
|
|
|
document.addEventListener('DOMContentLoaded', 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, {});
|
|
|
|
setEntryType()
|
|
setItemType()
|
|
populateLinks(item[5])
|
|
populateReferences(item[22], 'shopping_list')
|
|
populateReferences(item[23], 'recipe')
|
|
populateReferences(item[24], 'group')
|
|
|
|
});
|
|
|
|
function setEntryType(){
|
|
const selectElement = document.getElementById('entry_type');
|
|
selectElement.value = item[9];
|
|
}
|
|
function setItemType(){
|
|
const selectElement = document.getElementById('item_type');
|
|
selectElement.value = item[10];
|
|
}
|
|
|
|
function populateLinks(links){
|
|
var element = document.getElementById("weblinks");
|
|
for (let key in links){
|
|
var link = document.createElement("a");
|
|
link.classList.add("btn-small");
|
|
link.classList.add("outlined");
|
|
link.target = "_blank";
|
|
link.style = "border-radius: 20px; margin-right: 5px;";
|
|
link.innerHTML = String(key);;
|
|
link.href = links[key];
|
|
element.appendChild(link);
|
|
};
|
|
};
|
|
|
|
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])
|
|
|
|
if ((reference_state % 2) == 0){
|
|
row.style = "background-color: gainsboro;"
|
|
}
|
|
reference_state++
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</html> |