New functionnalities: User Dashboard & Booking for user

Dashboard + Book a day of canteen (User side)

assets/js/dashboard.js

@@ -1,14 +1,8 @@
 import '../scss/dashboard.scss';
 import Vue from "vue";
-import Toasted from "vue-toasted";
-import Notification from "../vue/Notification";
-
-Vue.use(Toasted, {
-    iconPack: 'fontawesome'
-});
+import Dashboard from "../vue/Dashboard";
 
 new Vue({
-    components: { Notification },
-    template: "<Notification/>",
-    // router
-}).$mount("#notification");
+    components: { Dashboard },
+    template: "<Dashboard/>"
+}).$mount("#app-dashboard");

assets/js/notification.js

@@ -0,0 +1,13 @@
+import Vue from "vue";
+import Toasted from "vue-toasted";
+import Notification from "../vue/Notification";
+
+Vue.use(Toasted, {
+    iconPack: 'fontawesome'
+});
+
+new Vue({
+    components: { Notification },
+    template: "<Notification/>",
+    // router
+}).$mount("#notification");

assets/js/parentNewBooking.js

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

assets/scss/_variables.scss

@@ -6,6 +6,7 @@ $card-secondary-grey: #C4C4C4;
 $grey-light: #ededed;
 $label-color: #707070;
 $navbar-grey: #F2F2F2;
+$grey-bg-dashboard: #f8f8f8;
 
 $pure-white: #FFFFFF;
 

assets/scss/dashboard.scss

@@ -4,4 +4,65 @@
 // Usefull class to center your content in the <main> tag
 .main-full-height {
   height: calc(100vh - 83px);
+}
+
+.grey-bg {
+  background: darken($grey-bg-dashboard, 5%);
+}
+
+.food-card {
+  .img-thumb {
+    position: relative;
+
+    img {
+      border-radius: 15px;
+      min-width: 100%;
+      height: 190px;
+      cursor: pointer;
+      display: inline-block;
+    }
+  }
+}
+
+.col-md-4 {
+  padding-right:50px;
+  padding-left:50px;
+}
+
+.meal-day {
+  position: relative;
+
+  .kcal-indicator {
+    position: absolute;
+    display: block;
+    text-align: center;
+    line-height: 67px;
+    top: -35px;
+    right: -35px;
+    background: $label-error-color;
+    height: 70px;
+    width: 70px;
+    border-radius: 50%;
+    color: $pure-white;
+    cursor: pointer;
+  }
+
+  .little-text {
+    font-size: 14px;
+  }
+
+  .like-button {
+    position: absolute;
+    display: block;
+    text-align: center;
+    line-height: 39px;
+    bottom: -15px;
+    right: -20px;
+    background: $main-green;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    color: $pure-white;
+    cursor: pointer;
+  }
 }

assets/scss/newBooking.scss

@@ -16,4 +16,32 @@
 
 .vdp-datepicker__calendar .cell.selected {
   background: $main-green !important;
+}
+
+.clickable-date {
+  height: auto;
+  line-height: 48px;
+  border-radius: 3px;
+  border: 2px solid $main-grey;
+  cursor: pointer;
+
+  &:hover {
+    border: 2px solid $main-green;
+  }
+}
+
+.child-card {
+  border: 2px solid $main-grey;
+  border-radius: 2px;
+
+  &:hover {
+    border: 2px solid $main-green;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+}
+
+.selected {
+  border: 2px solid $main-green;
+  border-radius: 2px;
 }

assets/vue/Dashboard.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="dashboard">
+        <h5>Aujourd'hui :</h5>
+        <div class="grey-bg rounded mb-3">
+            <div class="row meal-day mx-1 py-4" v-for="daily in dailyMeal" v-if="dailyMeal">
+                <span class="kcal-indicator">{{randomKcal}} <span class="little-text">Kcal</span></span>
+                <div class="col-md-4 food-card">
+                    <div class="img-thumb pb-1">
+                        <img class="img-fluid" :src="path + daily.meal.entree.picture" alt="">
+                        <span class="like-button">+1</span>
+                    </div>
+                    <h5>{{daily.meal.entree.title}}</h5>
+                </div>
+                <div class="col-md-4 food-card">
+                    <div class="img-thumb pb-1">
+                        <img :src="path + daily.meal.maindish.picture" alt="">
+                        <span class="like-button">+1</span>
+                    </div>
+                    <h5>{{daily.meal.maindish.title}}</h5>
+                </div>
+                <div class="col-md-4 food-card">
+                    <div class="img-thumb pb-1">
+                        <img :src="path + daily.meal.dessert.picture" alt="">
+                        <span class="like-button">+1</span>
+                    </div>
+                    <h5>{{daily.meal.dessert.title}}</h5>
+                </div>
+            </div>
+            <div class="row" v-else>
+                <div class="col-md-12">
+                    Pas d'information concernant le repas à venir
+                </div>
+            </div>
+        </div>
+
+        <h5>Demain :</h5>
+        <div class="grey-bg rounded">
+            <div class="row meal-day mx-1 py-4" v-for="aftermeal in afterTomorrowMeal" v-if="afterTomorrowMeal">
+                <span class="kcal-indicator">{{randomKcal2}} <span class="little-text">Kcal</span></span>
+                <div class="col-md-4 food-card">
+                    <div class="img-thumb pb-1">
+                        <img class="img-fluid" :src="path + aftermeal.meal.entree.picture" alt="">
+                        <span class="like-button">+1</span>
+                    </div>
+                    <h5>{{aftermeal.meal.entree.title}}</h5>
+                </div>
+                <div class="col-md-4 food-card">
+                    <div class="img-thumb pb-1">
+                        <img :src="path + aftermeal.meal.maindish.picture" alt="">
+                        <span class="like-button">+1</span>
+                    </div>
+                    <h5>{{aftermeal.meal.maindish.title}}</h5>
+                </div>
+                <div class="col-md-4 food-card">
+                    <div class="img-thumb pb-1">
+                        <img :src="path + aftermeal.meal.dessert.picture" alt="">
+                        <span class="like-button">+1</span>
+                    </div>
+                    <h5>{{aftermeal.meal.dessert.title}}</h5>
+                </div>
+            </div>
+            <div class="row" v-else>
+                <div class="col-md-12">
+                    Pas d'information concernant le repas à venir
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from "axios";
+
+    export default {
+        name: "Dashboard",
+        data: function(){
+            return {
+                dailyMeal: {},
+                afterTomorrowMeal: {},
+                path: '/uploads/food_picture/', // Aide vue pour trouver les images
+            }
+        },
+        mounted() {
+            this.getDailyMeal();
+            this.getTomorrowMeal();
+        },
+        computed: {
+            today: function() {
+                return new Date().toLocaleDateString('us-US').split('/').join('-');
+            },
+            tomorrow: function() {
+                let today = new Date();
+                today.setDate(today.getDate() + 1);
+                return today.toLocaleDateString('us-US').split('/').join('-');
+            },
+            afterTomorrow: function() {
+                let today = new Date();
+                today.setDate(today.getDate() + 2);
+                return today.toLocaleDateString('us-US').split('/').join('-');
+            },
+            randomKcal: function () {
+                let min = 820;
+                let max = 950;
+                return Math.round(Math.random() * (max - min) + min);
+            },
+            randomKcal2: function () {
+                let min = 820;
+                let max = 950;
+                return Math.round(Math.random() * (max - min) + min);
+            },
+        },
+        methods: {
+            // Récupère le repas d'aujourd'hui
+            getDailyMeal: function () {
+                axios.get(`/api/bookings/?date[strictly_before]=${this.tomorrow}&date[strictly_after]=${this.today}`)
+                    .then((response) => {
+                        this.dailyMeal = response.data['hydra:member'];
+                    })
+                    .catch(function() {
+                        console.log('Erreur dans le chargement des repas liés aux réservations!');
+                    });
+            },
+            // Récupère le repas de demain
+            getTomorrowMeal: function () {
+                axios.get(`/api/bookings/?date[strictly_before]=${this.afterTomorrow}&date[strictly_after]=${this.tomorrow}`)
+                    .then((response) => {
+                        this.afterTomorrowMeal = response.data['hydra:member'];
+                    })
+                    .catch(function() {
+                        console.log('Erreur dans le chargement des repas d\'après demain!');
+                    });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

assets/vue/NewMeal.vue

@@ -167,7 +167,7 @@
                 if(this.titleMeal !== undefined) {
                     axios.post('/api/meals', {
                         'entree': `/api/food/${this.selectedFood.entree}`,
-                        'mainDish': `/api/food/${this.selectedFood.platprincipal}`,
+                        'maindish': `/api/food/${this.selectedFood.platprincipal}`,
                         'dessert': `/api/food/${this.selectedFood.dessert}`,
                         'title': this.titleMeal
                     }).then(() => {