Fix create form and add edit Recettes / delete Recettes

public/assets/css/style.css

@@ -432,31 +432,88 @@ ul {
 }
 
 .recette-form {
-    height: 100%;
-    width: 100%;
+    height: 80%;
+    width: 80%;
     margin: 10px;
     padding: 10px;
+    border: 1px solid black;
+    background: white;
+    border-radius: 20px;
 }
 
 .recette-form-group {
     display: flex;
     flex-direction: column;
+    padding: 5px;
 }
 
 #recette-form-div-desc {
-    height: 400px;
+    height: 300px;
 }
 
 #recette-form-description {
     height: 95%;
 }
 
+.recette-add-form-all {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+}
+
+.recette-form-add {
+    flex: 3;
+}
+
+.recette-form-add-ingr {
+    height: 30%;
+}
+
+.recette-form-add-tag {
+    height: 30%;
+}
+
+.recette-form-add-additional{
+    flex: 1;
+    padding-right: 10px;
+}
+
+.err {
+    color: red;
+    display: none;
+    text-align: center;
+    padding-top: 20px;
+}
+
+.liste-ingr-elem {
+    display: flex;
+    height: 100px;
+    padding:5px;
+    background-color: #c6fdefe0;
+    color: #000000;
+    border: 1px solid black;
+    border-radius: 10px;
+    box-shadow: 1px 1px 1px black;
+}
+
+.liste-ingr-elem-text {
+    width: 100%;
+    height: 100%;
+    flex:12;
+    padding-left: 20px;
+    line-height: 100px;
+}
+
+.ingr-image {
+    flex: 1;
+    border: 1px solid black;
+    border-radius: 10px;
+}
+
 /*Footer et son contenue*/
 footer{
     padding: 25px;
     background: rgb(11, 189, 144);
     color: white;
-}
-
-
-
+    border-top: 1px solid black;
+}

public/assets/js/form.js

@@ -0,0 +1,169 @@
+document.addEventListener("DOMContentLoaded", function(){
+
+
+    let compl_form = document.getElementById("recette-form-complete");
+    console.log(compl_form);
+
+    function formulaire_ingredient_update(event) {
+
+        event.preventDefault();
+
+        console.log(event);
+
+        let form = document.getElementById("recette-form-ingr-add");
+
+        let cible = document.getElementById("recette-form-ingr");
+        let nomIngredient = document.getElementById("recette-form-ingr-nom");
+        let image = document.getElementById("recette-form-ingr-photo");
+        if( nomIngredient.value === "" || image.value === "" ){
+           alert( "Un champ requis est manquant." );
+           return;
+        }
+
+        let ingr = form.nom;
+
+        let form_data = new FormData(form);
+
+        fetch("/api/ingredients/create", {
+            method : "POST",
+            body: form_data
+        }).then( reponse => {
+            if (!reponse.ok) {
+                let div_err = document.getElementById("recette-form-div-err-ingr");
+
+                div_err.style.display = "inherit";
+                div_err.innerText = "Erreur de connection au serveur";
+
+            }
+            else {
+                reponse.json().then( data => {
+                    if (data.success) {
+                        let new_elem = document.createElement("option");
+
+                        new_elem.setAttribute("value",document.getElementById('recette-form-ingr-nom').value);
+                        new_elem.innerText = document.getElementById('recette-form-ingr-nom').value;
+
+                        cible.appendChild(new_elem);
+
+                        document.getElementById('recette-form-ingr-nom').value = "";
+                    }
+                })
+            }
+        })
+
+    }
+
+    function formulaire_tag_update(event){
+
+        event.preventDefault();
+
+        let form = document.getElementById("recette-form-tag-add");
+
+        let cible = document.getElementById("recette-form-tag");
+        let nomTag = document.getElementById("recette-form-tag-nom");
+        if( nomTag.value === "" ){
+            alert( "Un champ requis est manquant." );
+            return;
+        }
+
+        let tag = form.tag;
+
+        let form_data = new FormData(form);
+
+        fetch("/api/tags/create", {
+            method : "POST",
+            body: form_data
+        }).then( reponse => {
+            if (!reponse.ok) {
+                let div_err = document.getElementById("recette-form-div-err-tag");
+
+                div_err.style.display = "inherit";
+                div_err.innerText = "Erreur de connection au serveur";
+
+            }
+            else {
+                reponse.json().then( data => {
+                    if (data.success) {
+                        let new_elem = document.createElement("option");
+
+                        new_elem.setAttribute("value",nomTag.value);
+                        new_elem.innerText = nomTag.value;
+
+                        cible.appendChild(new_elem);
+
+                        nomTag.value = "";
+                    }
+                })
+            }
+        })
+
+    }
+
+    function formulaire_traitement(event){
+
+        event.preventDefault();
+
+        console.log( event );
+
+        let nom = document.getElementById('recette-form-nom');
+        let temps = document.getElementsByName('recette-form-nom');
+        let photo = document.getElementById('recette-form-photo');
+        let ingredients = document.getElementById('recette-form-ingr');
+        let tags = document.getElementById('recette-form-tag');
+        let description = document.getElementById('recette-form-description');
+
+        if( nom.value === "" || temps.value == "" || ingredients.value === "" || tags.value === ""){
+            console.log( "Another field" );
+            alert( "Un champ requis est manquant." );
+            return;
+        }
+        if( !IS_EDIT && photo.value === ""){
+            console.log( "Photo field" );
+            alert( "Un champ requis est manquant." );
+            return;
+        }
+
+        if( temps <= 0 ){
+            alert( "Le temps doit être positif ou supérieur à 0." );
+            return;
+        }
+
+        let form_data = new FormData(compl_form);
+        form_data.append( "ingredients", form_data.getAll("ingr").join(",") );
+        form_data.append( "tags", form_data.getAll( "tag").join(",") );
+        if( RECETTE_ID !== 0 )
+            form_data.append( 'id', RECETTE_ID );
+
+        let endpoint = IS_EDIT ? "/api/recettes/edit" : "/api/recettes/create";
+
+        fetch( endpoint, {
+            method : "POST",
+            body: form_data
+        }).then( reponse => {
+            if (!reponse.ok) {
+                alert( "Erreur survenie" );
+            }
+            else {
+                reponse.json().then( data => {
+                    if (data.success) {
+                        alert( "Envoyé" );
+                    } else {
+                        alert( data.error || "" );
+                    }
+                })
+            }
+        })
+
+    }
+
+    let ingr_form = document.getElementById("recette-form-ingr-add");
+
+    ingr_form.addEventListener('submit', formulaire_ingredient_update);
+
+    let tag_form = document.getElementById("recette-form-tag-add");
+
+    tag_form.addEventListener('submit', formulaire_tag_update);
+    compl_form.addEventListener('submit', formulaire_traitement);
+
+
+})