Nouvelle fonctionnalitée : Création d'un repas! 🍽️🍔

Enfin! Il est désormais possible de créer un repas composée des différents aliments ajoutés au préalable

.gitignore

@@ -14,8 +14,10 @@
 .idea/**/shelf
 .idea/
 .env
+.env.local
 .env.test
 src/Migrations/
+public/uploads/
 
 # Ignore the CSS/JS files of APIPlatform, FosJS etc..
 public/bundles/

assets/js/newMeal.js

@@ -0,0 +1,15 @@
+import '../scss/newMeal.scss'
+import Vue from "vue";
+import NewMeal from "../vue/NewMeal";
+import Toasted from "vue-toasted";
+
+// Utilisation des toasts (notifications)
+Vue.use(Toasted, {
+    iconPack: 'fontawesome'
+});
+
+new Vue({
+    components: { NewMeal },
+    template: "<newMeal/>",
+    // router
+}).$mount("#app-new-meal");

assets/scss/_variables.scss

@@ -1,8 +1,11 @@
 $main-green: #46B04B;
+
 $main-grey: #DDDDDD;
 $card-main-grey: #E2E2E2;
 $card-secondary-grey: #C4C4C4;
+$grey-light: #ededed;
+$label-color: #707070;
+
 $pure-white: #FFFFFF;
 
-$label-color: #707070;
 $label-error-color: #E74C3C;

assets/scss/newMeal.scss

@@ -0,0 +1,150 @@
+@import "variables";
+
+.food-card {
+  .img-thumb {
+    position: relative;
+
+    img {
+      border-radius: 15px;
+      min-width: 100%;
+      height: 190px;
+      cursor: pointer;
+      display: inline-block;
+    }
+
+    .selected {
+      border: 3px solid $main-green;
+      border-radius: 15px;
+    }
+  }
+
+  span {
+    position: absolute;
+    display: block;
+    text-align: center;
+    line-height: 39px;
+    bottom: -20px;
+    right: -20px;
+    background: $main-green;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    color: $pure-white;
+    cursor: pointer;
+
+    i {
+      z-index: -1;
+    }
+  }
+}
+
+// CSS by http://www.athimannil.com/, support him!
+%remain-steps{
+  &:before {
+    content: counter(stepNum);
+    font-family: inherit;
+    font-weight: 700;
+  }
+  &:after{
+    background-color: $grey-light;
+  }
+}
+
+.multi-steps{
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+
+  > li{
+    counter-increment: stepNum;
+    text-align: center;
+    display: table-cell;
+    position: relative;
+    color: $main-green;
+    z-index: 1;
+
+    &:before{
+      content: '\f00c';
+      content: '\2713;';
+      content: '\10003';
+      content: '\10004';
+      content: '\2713';
+      display: block;
+      margin: 0 auto 4px;
+      background-color: $pure-white;
+      width: 36px;
+      height: 36px;
+      line-height: 32px;
+      text-align: center;
+      font-weight: bold;
+      border:{
+        width: 2px;
+        style: solid;
+        color: $main-green;
+        radius: 50%;
+      }
+    }
+
+    &:after{
+      content: '';
+      height: 2px;
+      width: 100%;
+      background-color: $main-green;
+      position: absolute;
+      top: 16px;
+      left: 50%;
+      z-index: -1;
+    }
+
+    &:last-child{
+      &:after{
+        display: none;
+      }
+    }
+
+    &.is-active{
+      @extend %remain-steps;
+      &:before{
+        background-color: $pure-white;
+        border-color: $main-green;
+      }
+
+      ~ li{
+        color: $label-color;
+        @extend %remain-steps;
+        &:before{
+          background-color: $grey-light;
+          border-color: $grey-light;
+        }
+      }
+    }
+  }
+}
+
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 300px;
+  margin: 0 auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}

assets/vue/NewMeal.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="container-fluid">
+
+        <ProgressionBar class="mt-4 mb-4"/>
+
+        <div v-if="!final">
+            <button @click="next" class="btn btn-success">Suivant</button>
+
+            <div id="select-entree" class="row" v-if="!isLoading">
+                <Food class="mb-4" v-for="aliment in aliments" :key="aliment.id" :data="aliment" :path="path"/>
+            </div>
+
+            <div v-else>
+                <div class="row">
+                    <div class="col-md-3 food-card" v-for="n in 12" :key="n">
+                        <content-loader width='426' height='230'>
+                            <rect x="4" y="1" rx="15" ry="15" width="354" height="190" />
+                            <rect x="8" y="196" rx="15" ry="15" width="351" height="18" />
+                        </content-loader>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-else>
+            <button @click="sendNewMeal" class="btn btn-success">Validation!</button>
+            <div class="row">
+                <h1>Votre repas :</h1>
+                <Food v-for="aliment in tempDataActiveChoice" :data="aliment" :path="path" :key="selectedFood.aliment"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from "axios";
+    import ProgressionBar from "./views/newMeal/Progression-Bar";
+    import Food from "./views/newMeal/Food";
+    import { ContentLoader } from "vue-content-loader"
+    const routes = require('../../public/js/fos_js_routes.json');
+    import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
+    Routing.setRoutingData(routes);
+
+    export default {
+        name: "NewMeal",
+        components: {
+            Food,
+            ProgressionBar,
+            ContentLoader
+        },
+        data: function() {
+            return {
+                aliments: [],
+                path: '/uploads/food_picture/', // Aide vue pour trouver les images
+                step: 0,
+                activeChoice: undefined,
+                isLoading: true,
+                selectedFood: {},
+                tempDataActiveChoice: {},
+                final: false
+            }
+        },
+        mounted() {
+            // Lorsque le composant est monté, lance un appel vers l'API pour récuperer les entrées
+            this.loadEntree();
+        },
+        methods: {
+            // Permet de passer à une nouvelle étape
+            next: function () {
+                if(this.activeChoice !== undefined) {
+                    if(this.step === 0) {
+                        this.loadPlatsPrincipaux();
+                        this.selectedFood.entree = this.activeChoice;
+                        document.getElementById('step1').classList.remove("is-active");
+                        document.getElementById('step2').classList.add('is-active');
+                    } else if(this.step === 1) {
+                        this.loadDessert();
+                        this.selectedFood.platprincipal = this.activeChoice;
+                        document.getElementById('step2').classList.remove("is-active");
+                        document.getElementById('step3').classList.add('is-active');
+                    } else if(this.step === 2) {
+                        this.selectedFood.dessert = this.activeChoice;
+                        this.final = true;
+                        document.getElementById('step3').classList.remove("is-active");
+                        document.getElementById('step4').classList.add('is-active');
+                    }
+
+                    this.activeChoice = undefined;
+                } else {
+                    let toast = this.$toasted.error("Merci de faire un choix!", {
+                        theme: "toasted-primary",
+                        icon: "exclamation-triangle",
+                        position: "top-right",
+                        duration : 3000
+                    });
+                }
+            },
+            // Charge les entrées en AJAX
+            loadEntree: function () {
+                this.isLoading = true;
+                axios.get('/api/food?category=E&page=1')
+                    .then(response => this.aliments = response.data['hydra:member'])
+                    .catch(function() {
+                        console.log('Erreur dans le chargement!');
+                    })
+                    .finally(() => {
+                        this.isLoading = false;
+                    });
+            },
+
+            // Charge les plats principaux en AJAX
+            loadPlatsPrincipaux: function () {
+                this.isLoading = true;
+                axios.get('/api/food?category=P&page=1')
+                    .then(response => this.aliments = response.data['hydra:member'])
+                    .catch(function() {
+                        console.log('Erreur dans le chargement!');
+                    })
+                    .finally(() => {
+                        this.isLoading = false;
+                        this.step++;
+                    });
+            },
+
+            // Charge les desserts en AJAX
+            loadDessert: function () {
+                this.isLoading = true;
+                axios.get('/api/food?category=D&page=1')
+                    .then(response => {
+                        this.aliments = response.data['hydra:member'];
+                    })
+                    .catch(function() {
+                        console.log('Erreur dans le chargement!');
+                    })
+                    .finally(() => {
+                        this.isLoading = false;
+                        this.step++;
+                    });
+            },
+
+            // Permet de selectionner un aliment dans l'étape actuelle
+            setActive(index) {
+                this.activeChoice = index;
+            },
+
+            // Sauvegarde temporairement les plats choisis pour les afficher sur l'étape de validation
+            setTemporaryData(title, picture) {
+                if(this.step === 0) {
+                    this.tempDataActiveChoice.entree = {"title": title, "picture": picture};
+                }
+                else if(this.step === 1) {
+                    this.tempDataActiveChoice.platprincipal = {"title": title, "picture": picture};
+                }
+                else if(this.step === 2) {
+                    this.tempDataActiveChoice.dessert = {"title": title, "picture": picture};
+                }
+            },
+
+            // Envoi le nouveau repas vers l'API
+            sendNewMeal() {
+                axios.post('/api/meals', {
+                    'entree': `/api/food/${this.selectedFood.entree}`,
+                    'mainDish': `/api/food/${this.selectedFood.platprincipal}`,
+                    'dessert': `/api/food/${this.selectedFood.dessert}`
+                }).then(() => {
+                    document.getElementById('step4').classList.remove("is-active");
+                    let toast = this.$toasted.success("Repas enregistré!", {
+                        theme: "toasted-primary",
+                        icon: "check",
+                        position: "top-right",
+                        duration : 3000
+                    });
+
+                    window.location.href = Routing.generate('admin.newMeal');
+                })
+                .catch(function(response) {
+                    console.log(`Erreur pour aider le développeur dans sa quète du débugage : ${response}`);
+                })
+                .finally(() => {
+                    this.isLoading = false;
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

assets/vue/Register.vue

@@ -141,7 +141,7 @@
                 }
             }
         },
-        name: "Form",
+        name: "Register",
         components: {Card}
     }
 </script>