145 lines
4.8 KiB
JavaScript
145 lines
4.8 KiB
JavaScript
// Beginning of site specific code!
|
|
var recipe = [];
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
recipe = await getRecipe()
|
|
console.log(recipe)
|
|
await replenishRecipe()
|
|
});
|
|
|
|
async function replenishRecipe() {
|
|
document.getElementById('title').innerHTML = `${recipe.name}`
|
|
// document.getElementById('breadcrumb').innerHTML = `${recipe.name}`
|
|
document.getElementById('recipeTitle').innerHTML = `${recipe.name}`
|
|
document.getElementById('recipeAuthor').innerHTML = `${recipe.author}`
|
|
document.getElementById('recipeDescription').innerHTML = `${recipe.description}`
|
|
document.getElementById('recipeImage').src = `${recipe.picture_path}`
|
|
|
|
if(recipe.picture_path){
|
|
document.getElementById('imgDiv').classList.remove('uk-hidden')
|
|
document.getElementById('titleDiv').classList.add('uk-width-3-4@m')
|
|
}
|
|
|
|
await replenishIngrediantsTable()
|
|
await replenishInstructions()
|
|
await replenishTransactionsTable()
|
|
|
|
await getImage()
|
|
|
|
}
|
|
|
|
async function replenishIngrediantsTable() {
|
|
let ingrediantsTableBody = document.getElementById('ingrediantsTableBody')
|
|
ingrediantsTableBody.innerHTML = ""
|
|
|
|
|
|
for(let i=0; i<recipe.recipe_items.length; i++){
|
|
let qty_needed = recipe.recipe_items[i].qty
|
|
let quantity_on_hand = recipe.recipe_items[i].quantity_on_hand
|
|
let item_type = recipe.recipe_items[i].item_type
|
|
|
|
let tableRow = document.createElement('tr')
|
|
|
|
let markerCell = document.createElement('td')
|
|
if (qty_needed <= quantity_on_hand && item_type === "sku"){
|
|
markerCell.innerHTML = `<span class="uk-label uk-label-success">On Hand</span>`
|
|
} else if (qty_needed > quantity_on_hand && item_type === "sku") {
|
|
markerCell.innerHTML = `<span class="uk-label uk-label-danger">Missing</span>`
|
|
} else {
|
|
markerCell.innerHTML = `<span class="uk-label uk-label-default">Untracked</span>`
|
|
}
|
|
|
|
let nameCell = document.createElement('td')
|
|
nameCell.innerHTML = `${recipe.recipe_items[i].item_name}`
|
|
|
|
let qtyUOMCell = document.createElement('td')
|
|
qtyUOMCell.innerHTML = `${recipe.recipe_items[i].qty} ${recipe.recipe_items[i].uom.fullname}`
|
|
|
|
tableRow.append(markerCell, nameCell, qtyUOMCell)
|
|
ingrediantsTableBody.append(tableRow)
|
|
}
|
|
|
|
}
|
|
|
|
async function replenishTransactionsTable() {
|
|
let receiptRecipeTableBody = document.getElementById('receiptRecipeTableBody')
|
|
receiptRecipeTableBody.innerHTML = ""
|
|
|
|
for(let i=0; i < recipe.recipe_items.length; i++){
|
|
if (recipe.recipe_items[i].item_type === "sku"){
|
|
let tableRow = document.createElement('tr')
|
|
|
|
let nameCell = document.createElement('td')
|
|
nameCell.innerHTML = `${recipe.recipe_items[i].item_name}`
|
|
|
|
let qtyUOMCell = document.createElement('td')
|
|
qtyUOMCell.innerHTML = `${recipe.recipe_items[i].qty}`
|
|
|
|
tableRow.append(nameCell, qtyUOMCell)
|
|
receiptRecipeTableBody.append(tableRow)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
async function replenishInstructions() {
|
|
let tileList = document.getElementById('tileList')
|
|
tileList.innerHTML = ""
|
|
|
|
for(let i=0; i<recipe.instructions.length; i++){
|
|
let tile = document.createElement('div')
|
|
let innerTile = document.createElement('div')
|
|
innerTile.setAttribute('class', 'uk-tile uk-tile-default uk-padding-small')
|
|
|
|
let instruction = document.createElement('p')
|
|
instruction.innerHTML = `<strong>Step ${i+1}:</strong> ${recipe.instructions[i]}`
|
|
|
|
|
|
innerTile.append(instruction)
|
|
tile.append(innerTile)
|
|
tileList.append(tile)
|
|
}
|
|
}
|
|
|
|
async function getRecipe() {
|
|
const url = new URL('/recipes/getRecipe', window.location.origin)
|
|
url.searchParams.append('id', recipe_id);
|
|
const response = await fetch(url)
|
|
data = await response.json()
|
|
return data.recipe
|
|
}
|
|
|
|
async function getImage(){
|
|
console.log('fetching image!')
|
|
await fetch(`/recipes/getImage/${recipe.id}`)
|
|
.then(response => response.blob())
|
|
.then(imageBlob => {
|
|
const imageURL = URL.createObjectURL(imageBlob);
|
|
document.getElementById('recipeImage').src = imageURL;
|
|
});
|
|
}
|
|
|
|
async function receiptRecipe(){
|
|
let recipe_id = recipe.id
|
|
const response = await fetch(`/recipes/api/receiptRecipe`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
recipe_id: recipe_id
|
|
}),
|
|
});
|
|
data = await response.json()
|
|
message_type = "primary"
|
|
if(data.error){
|
|
message_type = "danger"
|
|
}
|
|
UIkit.notification({
|
|
message: data.message,
|
|
status: message_type,
|
|
pos: 'top-right',
|
|
timeout: 5000
|
|
});
|
|
UIkit.modal(document.getElementById('receiptRecipeModal')).hide();
|
|
|
|
} |