DjalimSimaila/MVC_Recettes
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edit page done from data in Database and has dynamic js

Browse Source
This commit is contained in:
Capelier-Marla 2023-01-18 10:50:12 +01:00
parent 7775074e22
commit 12a6d649a4
2 changed files with 263 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
Controllers/RecipeController.php
View File

@ -8,7 +8,7 @@ final class RecipeController
if(count($A_urlParams)!=1){
return View::show("errors/404");
}
$O_recipeModel = new RecipeModel();
$A_returnArray = $O_recipeModel->getFullRecipeWithComments($A_urlParams[0]);
if ($A_returnArray === null) {
@ -24,4 +24,35 @@ final class RecipeController
}
}
public function editAction(Array $A_urlParams = null, Array $A_postParams = null)
{
// demo array, remove this when we use the real edit function
$A_returnArray = array(
"recipeName" => "Pâte à crêpe",
"recipeDescription" => "Légère et délicate, la pâte à crêpe est idéale pour des crêpes fines et croustillantes. Avec sa texture est onctueuse et son goût subtil, c'est un plat traditionnel français populaire chez tout le monde.",
"recipeDifficutly" => "Facile",
"recipeType" => array(),
"recipeTime" => "45",
"recipeIngredients" => array(
"Farine" => "300g",
"Sucre" => "3 cuillère à soupe",
"Beurre fondu" => "50g",
"Rhum" => "5cl",
"Œuf" => "3",
"Huile" => "2 cuillères à soupe",
"Lait" => "60cl"
),
"recipeInstructions" => "Mettre la farine dans une terrine et former un puits.\nY déposer les oeufs entiers, le sucre, l'huile et le beurre.\nMélanger délicatement avec un fouet en ajoutant au fur et à mesure le lait. La pâte ainsi obtenue doit avoir une consistance d'un liquide légèrement épais.\nParfumer de rhum.\nFaire chauffer une poêle antiadhésive et la huiler très légèrement à l'aide d'un papier Essuie-tout. Y verser une louche de pâte, la répartir dans la poêle puis attendre qu'elle soit cuite d'un côté avant de la retourner. Cuire ainsi toutes les crêpes à feu doux."
);
// need to send an array with names even if content is empty
View::show("recipe/edit", $A_returnArray);
// print_r($A_urlParams);
// $O_recetteModel = new RecipeIngredientsModel();
// $O_recetteModel->getByID("");
// View::show('helloworld/testform', array('formData' => $A_postParams));
}
}

235
Views/recipe/edit.php
View File

@ -1,7 +1,232 @@
<?php
echo var_dump($A_vue['formData']);
function getOrEmpty($A_Dict, $S_keyName) {
if (isset($A_Dict[$S_keyName])) {
return $A_Dict[$S_keyName];
} else {
if($S_keyName == "recipeType" || $S_keyName == "recipeIngredients")
return array();
return "";
}
}
?>
echo '<form action="" method="post">';
echo '<input type="text" name="test" id="test">';
echo '<input type="submit" value="tester">';
echo '</form>';
<main>
<form action="/recipe/save" method="post">
<label for="recipeImage">Entrez l'image de haut de page&nbsp;:</label>
<input type="file" name="recipeImage" id="recipeImage" required>
<label for="recipeName">Nom de la recette&nbsp;:</label>
<input type="text" name="recipeName" id="recipeName" placeholder="Nom du plat" value="<?= getOrEmpty($A_view, "recipeName") ?>" required>
</br>
<label for="recipeDescription">Description de la recette</label>
</br>
<textarea name="recipeDescription" id="recipeDescription"><?= getOrEmpty($A_view, "recipeDescription") ?></textarea>
<section>
<h1>Informations alimentaires</h1>
<label for="recipeFifficulte">Niveau de difficulé&nbsp;:</label>
<select name="recipeDifficulte" id="recipeDifficulte" required>
<option value="tresFacile" <?= getOrEmpty($A_view, "recipeDifficutly")=="Très facile"? 'selected="selected"' : "" ?> >Très facile</option>
<option value="facile" <?= getOrEmpty($A_view, "recipeDifficutly")=="Facile"? 'selected="selected"' : "" ?>>Facile</option>
<option value="moyen" <?= getOrEmpty($A_view, "recipeDifficutly")=="Moyen"? 'selected="selected"' : "" ?>>Moyen</option>
<option value="difficile" <?= getOrEmpty($A_view, "recipeDifficutly")=="Difficle"? 'selected="selected"' : "" ?>>Difficile</option>
</select>
<legend>Type de plat&nbsp;:</legend>
<input type="checkbox" name="recipeVegan" id="recipeVegan" <?= in_array("Végan", getOrEmpty($A_view, "recipeType"))? "checked":"" ?> >
<label for="recipeVegan">Végan</label>
<input type="checkbox" name="recipeLactoseFree" id="recipeLactoseFree" <?= in_array("Sans lactose", getOrEmpty($A_view, "recipeType"))? "checked":"" ?> >
<label for="recipeLactoseFree">Sans lactose</label>
<input type="checkbox" name="recipeGlutenFree" id="recipeGlutenFree" <?= in_array("Sans gluten", getOrEmpty($A_view, "recipeType"))? "checked":"" ?> >
<label for="recipeGlutenFree">Sans gluten</label>
</br>
<label for="recipeTime">Temps de préparation&nbsp;:</label>
<input type="number" name="recipeTime" id="recipeTime" min="5" max="1500" step="5" placeholder="Temps de préparation" value="<?= getOrEmpty($A_view, "recipeTime") ?>" required>
<label for="recipeTime">minutes</label>
</section>
<section>
<h1>Ingrédients</h1>
<ul class="recipeIngredients">
<?php
$ingredients = getOrEmpty($A_view, "recipeIngredients");
if(sizeof($ingredients) > 0) {
$i = 1;
foreach($ingredients as $ingredientName => $ingredientValue) {
echo '<li>
<label for="recipeIngredient'.$i.'">Ingrédient&nbsp;:</label>
<input type="text" name="recipeIngredient'.$i.'" id="recipeIngredient'.$i.'" placeholder="Farine" value="'.$ingredientName.'">
<label for="recipeQuantity'.$i.'">Quantité&nbsp;:</label>
<input type="text" name="recipeQuantity'.$i.'" id="recipeIngredient'.$i.'" placeholder="500g" value="'.$ingredientValue.'">
</li>';
$i++;
}
echo '</ul>
<button type="button" id="recipeButtonIngrdientLess">-</button>';
$numberOfIngredients = $i-1;
} else {
echo '<li>
<label for="recipeIngredient1">Ingrédient&nbsp;:</label>
<input type="text" name="recipeIngredient1" id="recipeIngredient1" placeholder="Farine">
<label for="recipeQuantity1">Quantité&nbsp;:</label>
<input type="text" name="recipeQuantity1" id="recipeIngredient1" placeholder="500g">
</li>
</ul>
<button type="button" disabled="disabled" id="recipeButtonIngrdientLess">-</button>';
$numberOfIngredients = 1;
}
?>
<button type="button" id="recipeButtonIngredientPlus">+</button>
</section>
<section>
<h1>Préparation</h1>
<ol class="recipeInstructions">
<?php
$preparation = getOrEmpty($A_view, "recipeInstructions");
if(!empty($preparation)) {
$steps = explode("\n", $preparation);
$i = 1;
foreach($steps as $step) {
echo '<li>
<label for="recipeInstruction'.$i.'">Étape '.$i.'&nbsp;:</label>
<input type="text" name="recipeInstruction'.$i.'" id="recipeInstruction'.$i.'" placeholder="Battre les oeufs et la farine dans un grand saladier." value="'.$step.'">
</li>';
$i++;
}
$numberOfInstructions = $i-1;
echo '</ol>
<button type="button" id="recipeButtonInstructionLess">-</button>';
} else {
echo '<li>
<label for="recipeInstruction1">Étape 1&nbsp;:</label>
<input type="text" name="recipeInstruction1" id="recipeInstruction1" placeholder="Battre les oeufs et la farine dans un grand saladier.">
</li>
</ol>
<button type="button" disabled="disabled" id="recipeButtonInstructionLess">-</button>';
$numberOfIngredients = 1;
}
?>
<button type="button" id="recipeButtonInstructionPlus">+</button>
</section>
<input type="submit" value="Enregistrer">
</form>
</main>
<style>
#recipePreparation {
display: flex;
}
textarea#recipeInstructions {
resize: none;
overflow: hidden;
line-height: 20px;
min-height: 20px;
width: 100%;
}
.lineNumber span {
counter-increment: linenumber;
}
.lineNumber span::before {
content: counter(linenumber)".";
display: block;
line-height: 20px;
}
</style>
<script>
numberOfIngredients = <?= $numberOfIngredients ?>;
const buttonIngredientPlus = document.querySelector("#recipeButtonIngredientPlus");
const buttonIngredientLess = document.querySelector("#recipeButtonIngrdientLess");
const liIngredients = document.querySelector(".recipeIngredients");
buttonIngredientPlus.addEventListener('click', () => {
numberOfIngredients++;
let nextArray = Array.from(liIngredients.lastElementChild.cloneNode(true).children);
let next = document.createElement('li');
for(let e in nextArray) {
console.log(nextArray[e]);
if(nextArray[e].tagName == "LABEL") {
nextArray[e].setAttribute("for", "recipeIngredient"+numberOfIngredients);
} else {
nextArray[e].setAttribute("name", "recipeIngredient"+numberOfIngredients);
nextArray[e].setAttribute("id", "recipeIngredient"+numberOfIngredients);
nextArray[e].value = "";
}
next.appendChild(nextArray[e]);
}
console.log(next);
liIngredients.appendChild(next);
buttonIngredientLess.disabled = "";
});
buttonIngredientLess.addEventListener('click', () => {
numberOfIngredients--;
liIngredients.lastElementChild.remove();
if(liIngredients.children.length == 1)
buttonIngredientLess.disabled = "disabled";
});
numberOfInstructions = <?= $numberOfInstructions ?>;
const buttonInstructionPlus = document.querySelector("#recipeButtonInstructionPlus");
const buttonInstructionLess = document.querySelector("#recipeButtonInstructionLess");
const liInstruction = document.querySelector(".recipeInstructions");
buttonInstructionPlus.addEventListener('click', () => {
numberOfInstructions++;
let nextArray = Array.from(liInstruction.lastElementChild.cloneNode(true).children);
let next = document.createElement('li');
for(let e in nextArray) {
console.log(nextArray[e]);
if(nextArray[e].tagName == "LABEL") {
nextArray[e].setAttribute("for", "recipeIngredient"+numberOfInstructions);
nextArray[e].textContent = "Étape "+numberOfInstructions+"\u00A0:";
} else {
nextArray[e].setAttribute("name", "recipeIngredient"+numberOfInstructions);
nextArray[e].setAttribute("id", "recipeIngredient"+numberOfInstructions);
nextArray[e].value = "";
}
next.appendChild(nextArray[e]);
}
console.log(next);
liInstruction.appendChild(next);
buttonInstructionLess.disabled = "";
});
buttonInstructionLess.addEventListener('click', () => {
numberOfInstructions--;
liInstruction.lastElementChild.remove();
if(liInstruction.children.length == 1)
buttonInstructionLess.disabled = "disabled";
});
// TODO: refactor this
</script>