102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
var mode = false
|
|
async function toggleDarkMode() {
|
|
let darkMode = document.getElementById("dark-mode");
|
|
darkMode.disabled = !darkMode.disabled;
|
|
mode = !mode;
|
|
if(mode){
|
|
document.getElementById('modeToggle').innerHTML = "light_mode"
|
|
document.getElementById('main_html').classList.add('uk-light')
|
|
|
|
} else {
|
|
document.getElementById('modeToggle').innerHTML = "dark_mode"
|
|
document.getElementById('main_html').classList.remove('uk-light')
|
|
}
|
|
}
|
|
|
|
if(session.user.flags.darkmode){
|
|
toggleDarkMode()
|
|
}
|
|
|
|
// 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 getImage()
|
|
|
|
}
|
|
|
|
async function replenishIngrediantsTable() {
|
|
let ingrediantsTableBody = document.getElementById('ingrediantsTableBody')
|
|
ingrediantsTableBody.innerHTML = ""
|
|
|
|
for(let i=0; i<recipe.recipe_items.length; i++){
|
|
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} ${recipe.recipe_items[i].uom.fullname}`
|
|
|
|
tableRow.append(nameCell, qtyUOMCell)
|
|
ingrediantsTableBody.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 = `${recipe.instructions[i]}`
|
|
|
|
|
|
innerTile.append(instruction)
|
|
tile.append(innerTile)
|
|
tileList.append(tile)
|
|
}
|
|
}
|
|
|
|
async function getRecipe() {
|
|
const url = new URL('/recipe/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(`/recipe/getImage/${recipe.id}`)
|
|
.then(response => response.blob())
|
|
.then(imageBlob => {
|
|
const imageURL = URL.createObjectURL(imageBlob);
|
|
document.getElementById('recipeImage').src = imageURL;
|
|
});
|
|
} |