Live Notification on all the page of the dashboard!

Live notification with Mercure!
GroupeNRM · May 15, 2020 · 8f518b6 · 8f518b6
2 parents 72ff9ca + c4b9754
commit 8f518b6
Show file tree

Hide file tree

Showing 15 changed files with 158 additions and 33 deletions.
diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
@@ -1 +1,14 @@
-import '../scss/dashboard.scss';
+import '../scss/dashboard.scss';
+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");
diff --git a/assets/js/newchild.js b/assets/js/newchild.js
diff --git a/assets/scss/_menu.scss b/assets/scss/_menu.scss
@@ -0,0 +1,25 @@
+@import "variables";
+
+.center-icon {
+  line-height: 50px;
+}
+
+.grey-navbar {
+  background-color: $navbar-grey;
+}
+
+.passive-bell {
+  position: relative;
+  cursor: pointer;
+}
+
+.new-notification {
+  position: absolute;
+  content: "";
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  top: 18px;
+  right: 4px;
+  background-color: red;
+}
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
@@ -5,6 +5,7 @@ $card-main-grey: #E2E2E2;
 $card-secondary-grey: #C4C4C4;
 $grey-light: #ededed;
 $label-color: #707070;
+$navbar-grey: #F2F2F2;
 
 $pure-white: #FFFFFF;
 

diff --git a/assets/scss/dashboard.scss b/assets/scss/dashboard.scss
@@ -1,6 +1,7 @@
 @import "variables";
+@import "menu";
 
 // Usefull class to center your content in the <main> tag
 .main-full-height {
-  height: calc(100vh - 82px);
+  height: calc(100vh - 83px);
 }
diff --git a/assets/vue/Notification.vue b/assets/vue/Notification.vue
@@ -0,0 +1,37 @@
+<template>
+    <li class="nav-item text-light center-icon passive-bell">
+        <img :src="bell" width="30" alt="Icone cloche">
+        <span id="new-icon"></span>
+    </li>
+</template>
+
+<script>
+    export default {
+        name: "Notification",
+        data: function() {
+            return {
+                'bell': '/build/bell-icon.svg'
+            }
+        },
+        mounted() {
+            // Port hardcodé, réfléchir à mieux
+            const url = new URL(document.location.origin + ":1337/.well-known/mercure");
+            url.searchParams.append('topic', `${document.location.origin}/api/notifications/{id}`);
+            const eventSource = new EventSource(url);
+            eventSource.onmessage = () => {
+                document.getElementById('new-icon').classList.add('new-notification')
+
+                let toast = this.$toasted.show("Vous avez reçu une nouvelle notification!", {
+                    theme: "toasted-primary",
+                    icon: "bell",
+                    position: "top-right",
+                    duration : 3000
+                });
+            };
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Entity/Notification.php b/src/Entity/Notification.php
@@ -6,7 +6,7 @@
 use Doctrine\ORM\Mapping as ORM;
 
 /**
- * @ApiResource()
+ * @ApiResource(mercure="true")
  * @ORM\Entity(repositoryClass="App\Repository\NotificationRepository")
  */
 class Notification

diff --git a/src/Repository/NotificationRepository.php b/src/Repository/NotificationRepository.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Repository;
+
+use App\Entity\Notification;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/**
+ * @method Notification|null find($id, $lockMode = null, $lockVersion = null)
+ * @method Notification|null findOneBy(array $criteria, array $orderBy = null)
+ * @method Notification[]    findAll()
+ * @method Notification[]    findBy(array $criteria, array $orderBy = null, $limit = null, $offset = null)
+ */
+class NotificationRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Notification::class);
+    }
+
+    // /**
+    //  * @return Notification[] Returns an array of Notification objects
+    //  */
+    /*
+    public function findByExampleField($value)
+    {
+        return $this->createQueryBuilder('c')
+            ->andWhere('c.exampleField = :val')
+            ->setParameter('val', $value)
+            ->orderBy('c.id', 'ASC')
+            ->setMaxResults(10)
+            ->getQuery()
+            ->getResult()
+        ;
+    }
+    */
+
+    /*
+    public function findOneBySomeField($value): ?Notification
+    {
+        return $this->createQueryBuilder('c')
+            ->andWhere('c.exampleField = :val')
+            ->setParameter('val', $value)
+            ->getQuery()
+            ->getOneOrNullResult()
+        ;
+    }
+    */
+}
diff --git a/templates/admin/home/index.html.twig b/templates/admin/home/index.html.twig
@@ -195,3 +195,7 @@
     </div>
 
 {% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('dashboard') }}
+{% endblock %}
diff --git a/templates/admin/newFood.html.twig b/templates/admin/newFood.html.twig
@@ -33,4 +33,6 @@
 
 {% endblock %}
 
-
+{% block javascripts %}
+    {{ encore_entry_script_tags('dashboard') }}
+{% endblock %}
diff --git a/templates/admin/newMeal.html.twig b/templates/admin/newMeal.html.twig
@@ -20,6 +20,7 @@
 {% endblock %}
 
 {% block javascripts %}
+    {{ encore_entry_script_tags('dashboard') }}
     {{ encore_entry_script_tags('newMeal') }}
 {% endblock %}
 
diff --git a/templates/admin/notification/index.html.twig b/templates/admin/notification/index.html.twig
@@ -43,4 +43,8 @@
 
     </div>
 
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('dashboard') }}
 {% endblock %}
diff --git a/templates/dashboard/newchild.html.twig b/templates/dashboard/newchild.html.twig
@@ -4,7 +4,6 @@
 
 {% block stylesheets %}
 
-    {{ encore_entry_link_tags('newchild') }}
     {{ encore_entry_link_tags('dashboard') }}
 
 {% endblock %}
@@ -47,4 +46,8 @@
 
         </div>
 
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('dashboard') }}
 {% endblock %}
diff --git a/templates/partials/menu.html.twig b/templates/partials/menu.html.twig
@@ -1,27 +1,23 @@
 {% block body %}
-    <nav class="navbar navbar-dark sticky-top flex-md-nowrap p-3" style="background-color: #F2F2F2">
+    <nav class="navbar grey-navbar sticky-top flex-md-nowrap p-3 border-bottom">
 
         <span class="navbar-brand col-sm-3 col-md-2 mr-0 text-center text-dark">Tableau de bord - <span class="inner-green">ADMIN</span></span>
 
-
         <ul class="nav justify-content-end">
-            <li class="nav-item text-light">
-                <img src="{{ asset('build/bell-icon.svg') }}"class="rounded-circle" width="30">
-            </li>
+            <li id="notification"></li>
 
             <li class="nav-item mr-5 ml-5">
-                <img src="{{ asset('build/avatar-homme.svg') }}"class="rounded-circle" width="50">
+                <img src="{{ asset('build/avatar-homme.svg') }}" class="rounded-circle" width="50" alt="Image d'avatar">
             </li>
-
         </ul>
 
     </nav>
 
     <div class="container-fluid">
 
-        <div class="row" style="height: 1080px; background-color: #F2F2F2">
+        <div class="row main-full-height grey-navbar">
 
-            <nav class="col-md-2 d-none d-md-block sidebar" style="background-color: #F2F2F2">
+            <nav class="col-md-2 d-none d-md-block sidebar grey-navbar border-right">
 
                 <div class="sidebar-sticky">
 
@@ -38,7 +34,6 @@
                             <a class="nav-link text-dark" href="#" >
                                 <i class="far fa-chart-bar"></i>
                                 Statistiques
-
                             </a>
 
                         </li>
@@ -48,7 +43,6 @@
                             <a class="nav-link text-dark" href="#" >
                                 <i class="fas fa-utensils"></i>
                                 Menus
-
                             </a>
 
                         </li>
@@ -57,7 +51,6 @@
                             <a class="nav-link text-dark" href="#" >
                                 <i class="far fa-calendar-check"></i>
                                 Réservations
-
                             </a>
 
                         </li>
@@ -67,9 +60,7 @@
 
                             <a class="nav-link text-dark" href="#">
                                 <i class="far fa-money-bill-alt"></i>
-
                                 Paiements
-
                             </a>
 
                         </li>
@@ -80,29 +71,23 @@
                             <a class="nav-link text-dark" href="#" >
                                 <i class="far fa-heart"></i>
                                 Plats likés
-
                             </a>
 
                         </li>
 
                         <li class="nav-item">
 
                             <a class="nav-link text-dark" href="#">
-
                                 <i class="fas fa-users"></i>
-
                                 Utilisateurs
-
                             </a>
 
                         </li>
 
                     </ul>
 
                     <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-5 mb-2 text-muted">
-
                         <span>Infos personnelles</span>
-
                     </h6>
 
                     <ul class="nav flex-column mb-2">
@@ -113,7 +98,6 @@
 
                                 <i class="far fa-address-card"></i>
                                 Voir mon profil
-
                             </a>
 
                         </li>
@@ -124,7 +108,6 @@
 
                                 <i class="fas fa-unlock-alt"></i>
                                 Modifier le mot de passe
-
                             </a>
 
                         </li>
@@ -158,7 +141,6 @@
                             <a class="nav-link text-danger" href="#">
                                 <i class="fas fa-sign-out-alt"></i>
                                 Déconnexion
-
                             </a>
 
                         </li>
@@ -209,4 +191,10 @@
         </div>
 
     </div>
-{% endblock %}
+{% endblock %}
+<script>
+    import Notification from "../../assets/vue/Notification";
+    export default {
+        components: {Notification}
+    }
+</script>
diff --git a/webpack.config.js b/webpack.config.js
@@ -51,9 +51,6 @@ Encore
     // New Meal 
     .addEntry('newMeal', './assets/js/newMeal.js')
 
-    // New Child Form
-    .addEntry('newchild', './assets/js/newchild.js')
-
     .enableVueLoader()
 
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.