edit page done from data in Database and has dynamic js

Controllers/RecipeController.php

@@ -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));
+
+    }
+
+}

Views/recipe/edit.php

@@ -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">';
+<main>
-    echo  '<input type="text" name="test" id="test">';
+
-    echo  '<input type="submit" value="tester">';
+    <form action="/recipe/save" method="post">
-    echo '</form>';
+
+        <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>