Skip to content

Commit

Permalink
commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jodekq
Jodekq committed Feb 19, 2024
1 parent 3d60fd4 commit f512b0c
Show file tree
Hide file tree
Showing 9 changed files with 408 additions and 6 deletions.
3 changes: 3 additions & 0 deletions src/client/_styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,9 @@ body {
align-items: center;
gap: var(--small-gap);
height: fit-content;
background-color: var(--surface);
font-size: 16px;
font-family: 'Poppins';
}

.close-button {
Expand Down
165 changes: 165 additions & 0 deletions src/client/editplate/_src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
// open close plate description
const addPlateDescription = document.getElementById("addplatedescription");
const closePlateDescription = document.getElementById("closeplatedescription");

const plateDescription = document.querySelector('.plate-description') as HTMLElement;
const connector = document.querySelector('.connector') as HTMLElement;
const addPlateButton = document.querySelector('.addplate-button') as HTMLElement;

addPlateDescription?.addEventListener('click', () => {
plateDescription.style.display ='block';
connector.style.display ='flex';
addPlateButton.style.display ='none';
});

closePlateDescription?.addEventListener('click', () => {
plateDescription.style.display ='none';
connector.style.display ='none';
addPlateButton.style.display ='flex';
});


// amount dropdown
const dropdownAmountButton = document.getElementById("dropdown-amount-button")!;
const amountDropdown = document.getElementById("amount-dropdown-menu")!;

dropdownAmountButton?.addEventListener('click', () => {

if (amountDropdown) {
if (amountDropdown.style.display === 'none' || amountDropdown.style.display === '') {
amountDropdown.style.display = 'block';
} else {
amountDropdown.style.display = 'none';
}
}
});

const dropdownItems = amountDropdown?.getElementsByClassName("dropdown-item");

let selectedItemText: string | null = null;

if (dropdownItems) {
for (const item of dropdownItems) {
item.addEventListener("click", () => {
selectedItemText = item.textContent || "";
const newSpan = document.createElement("span");
newSpan.textContent = selectedItemText;
newSpan.classList.add('dropdown-text');

dropdownAmountButton.innerHTML = '';
dropdownAmountButton.appendChild(newSpan);
amountDropdown.style.display = 'none';
});
}
}
dropdownAmountButton?.addEventListener('click', () => {
if (amountDropdown) {
amountDropdown.style.display = (amountDropdown.style.display === 'none'
|| amountDropdown.style.display === '') ? 'block' : 'none';
}
});

dropdownAmountButton?.addEventListener('click', () => {
if (amountDropdown) {
amountDropdown.style.display = 'block';
}
});


// create subcontent-item

function createInputField(): HTMLInputElement {
const inputField = document.createElement("input");
inputField.classList.add("subcontent-input");

inputField.addEventListener("blur", () => {
if (!inputField.value.trim()) {
destroyInputField(inputField);
}
});

inputField.addEventListener("change", () => {
if (inputField.value.trim()) {
createSpan(inputField.value.trim(), inputField.parentElement);
destroyInputField(inputField);
}
});

return inputField;
}

function createSpan(text: string, subcontent: HTMLElement | null): void {
if (!subcontent) {
return;
}

const span = document.createElement("span");
span.classList.add("subcontent-item");
span.textContent = text;

span.addEventListener("click", () => {
const editInput = createInputField();
editInput.value = text;

editInput.addEventListener("blur", () => {
replaceElement(editInput, span);
});
editInput.addEventListener("change", () => {
if (editInput.value.trim()) {
span.textContent = editInput.value.trim();
}
});

replaceElement(span, editInput);
editInput.focus();
});

subcontent.appendChild(span);
}

function destroyInputField(inputField: HTMLInputElement): void {
inputField.removeEventListener("blur", () => {});
inputField.removeEventListener("change", () => {});
inputField.remove();
}

function replaceElement(oldElement: HTMLElement, newElement: HTMLElement): void {
oldElement.parentNode?.replaceChild(newElement, oldElement);
}

function initializeAddButton(
addButton: HTMLDivElement | null,
subcontent: HTMLElement
): void {
addButton?.addEventListener("click", () => {
const inputField = createInputField();
subcontent?.appendChild(inputField);
inputField.focus();
});
}

// ingredient
const addIngredientButton = document.getElementById("add-ingredient-button") as HTMLDivElement;
const ingredientSubcontent = document.querySelector(".sub-ingredient") as HTMLElement;
initializeAddButton(addIngredientButton, ingredientSubcontent);

// drink
const addDrinkButton = document.getElementById("add-drink-button") as HTMLDivElement;
const drinkSubcontent = document.querySelector(".sub-drink") as HTMLElement;
initializeAddButton(addDrinkButton, drinkSubcontent);

// equipment
const addEquipmentButton = document.getElementById("add-equipment-button") as HTMLDivElement;
const equipmentSubcontent = document.querySelector(".sub-equipment") as HTMLElement;
initializeAddButton(addEquipmentButton, equipmentSubcontent);


// vitamins selected

const vitaminItems = document.querySelectorAll(".sub-group-item");

vitaminItems.forEach(item => {
item.addEventListener("click", () => {
item.classList.toggle("selected");
});
});
15 changes: 15 additions & 0 deletions src/client/editplate/_styles/index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@import "./../../addplate/_styles/index.scss";

.content-wrapper {
box-shadow: 0 0 10px 5px var(--dark-4);

.content-header {

a {
color: var(--text-opposite);
&:hover {
color: var(--text-opposite);
}
}
}
}
162 changes: 162 additions & 0 deletions src/client/editplate/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.9">
<link rel="shortcut icon" href="" type="image/x-icon">
<title>PlatePilot | Edit (insert plate name)</title>

<!-- script -->
<script type="module" src="./_src/bundle.min.js" defer></script>
<script type="module" src="../_src/template.js" defer></script>

<!-- style -->
<link rel="stylesheet" href="./_styles/bundle.min.css">

<!-- icons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body data-theme="dark">
<section class="addplate">
<div class="container">
<section class="content-wrapper">
<div class="content-header">
<span>Add New Plate</span>
<a href="./../saveplates/" class="save-button">Save</a>
</div>
<div class="content">
<div class="top-wrapper">
<div class="sub-group">
<span>Plate Name</span>
<input class="sub-group-input" type="text" value="">
</div>
<div class="sub-group">
<span>Date</span>
<input class="sub-group-input" type="date" value="">
</div>
</div>
<div class="time-difficulty-wrapper">
<div class="wrapper">
<div class="sub-group">
<div class="sub-group-header"><i class='bx bx-time'></i><span>Working time</span></div>
<div class="sub-group-input-wrapper">
<input class="sub-group-input" type="number" value="60">
<span>minutes</span>
</div>
</div>
<div class="sub-group">
<div class="sub-group-header"><i class='bx bx-time'></i><span>Cooking / Baking time</span></div>
<div class="sub-group-input-wrapper">
<input class="sub-group-input" type="number" value="60">
<span>minutes</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="sub-group">
<div class="sub-group-header"><i class='bx bx-time'></i><span>Rest time</span></div>
<div class="sub-group-input-wrapper">
<input class="sub-group-input" type="number" value="60">
<span>minutes</span>
</div>
</div>
<div class="sub-group">
<div class="sub-group-header"><i class='bx bx-cog'></i><span>Difficutly</span></div>
<div class="sub-group-input-wrapper">
<select class="sub-group-input" name="Difficutly" id="">
<option value="easy">easy</option>
<option value="medium">medium</option>
<option value="hard">hard</option>
</select>
</div>
</div>
</div>
</div>
<div class="bottom-wrapper">
<div class="row-wrapper">
<div class="sub-group">
<span>Portions</span>
<input class="sub-group-input" type="number" value="4">
</div>
<div class="sub-group">
<span>Kcal per portion</span>
<input class="sub-group-input" type="number" value="0">
</div>
<div class="sub-group">
<span>Proteins</span>
<input class="sub-group-input" type="number" value="0">
</div>
<div class="sub-group">
<span>Fat</span>
<input class="sub-group-input" type="number" value="0">
</div>
<div class="sub-group">
<span>Vitamins</span>
<div class="choose">
<div class="sub-group-item">D</div>
<div class="sub-group-item">B12</div>
<div class="sub-group-item">K</div>
<div class="sub-group-item">A</div>
<div class="sub-group-item">C</div>
</div>
</div>
</div>
<div class="subcontent-wrapper">
<div class="subcontent">
<span class="subcontent-head">Ingredients</span>
<div class="add-wrapper">
<div id="add-ingredient-button" class="add-button-2"><i class='bx bx-plus'></i><span>Add Ingredient</span></div>
</div>
<div class="subcontent-items sub-ingredient">
</div>
</div>
<div class="subcontent">
<span class="subcontent-head">Drinks</span>
<div class="add-wrapper">
<div id="add-drink-button" class="add-button-2"><i class='bx bx-plus'></i><span>Add Ingredient</span></div>
</div>
<div class="subcontent-items sub-drink"></div>
</div>
<div class="subcontent">
<span class="subcontent-head">Equipment</span>
<div class="add-wrapper">
<div id="add-equipment-button" class="add-button-2"><i class='bx bx-plus'></i><span>Add Ingredient</span></div>
</div>
<div class="subcontent-items sub-equipment"></div>
</div>
</div>
</div>
</div>
</section>
<section class="addplate-button-container">
<div class="connector"></div>
<div id="addplatedescription" class="addplate-button"><i class='bx bx-plus'></i><span>Add Plate Descirption</span></div>
</section>
<section class="content-wrapper plate-description">
<div class="content-header">
<span>Plate Description</span>
<div id="closeplatedescription" class="close-button">Close</div>
</div>
<div class="description-addplate">
<div class="step-addplate">
<div class="step-info side-info">
<div class="add-step-button"><i class='bx bx-plus'></i>Add Step</div>
<div class="step-head-addplate">1. Step</div>
<small class="add-info-button"><i class='bx bx-plus'></i>Add Heading</small>
<small class="add-info-button"><i class='bx bx-plus'></i>Add info</small>
</div>
<div class="step-info step-text">
<div class="step-head-addplate">
<span class="step-head-span">1. Step Description</span>
<small class="add-info-button"><i class='bx bx-plus'></i>Add Time</small>
<small class="add-info-button"><i class='bx bx-plus'></i>Add Ingredient</small>
<span class="bx-icon"><i class='bx bx-bold'></i></span>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</body>
</html>
2 changes: 1 addition & 1 deletion src/client/fridge/_src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ saveButtonModal.addEventListener('click', () => {
}

const deleteDiv = document.createElement("div");
deleteDiv.innerHTML = "<i class='bx bx-minus'></i>";
deleteDiv.innerHTML = "<i class='bx bx-x'></i>";
newItemDiv.appendChild(deleteDiv);
deleteDiv.className = "fridge-item-delete";

Expand Down
3 changes: 3 additions & 0 deletions src/client/fridge/_styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,9 +465,12 @@

.fridge-item-delete {
cursor: pointer;
display: flex;
align-items: center;

.bx {
color: var(--error);
font-size: 21px;
}
}
}
Expand Down
Loading

0 comments on commit f512b0c

Please sign in to comment.