From 8367f5ac5ed6cd287ef8ed5af7d25ad423206c20 Mon Sep 17 00:00:00 2001
From: Laurent <laurent@ollagnier.org>
Date: Sat, 17 Feb 2024 18:33:11 +0000
Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20de=20la=20vue=20du=20debugger?=
 =?UTF-8?q?=20MQTT?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Lien sur la page d'accueil
- Configration du routeur
- Création des composants
  - affichage du formulaire de publication
  - affichage de la console de souscription
- Création de la vue de la page
---
 src/App.vue                         |  1 +
 src/components/MQTTDebugConsole.vue | 29 +++++++++++++++++++++++++
 src/components/MQTTDebugPublish.vue | 33 +++++++++++++++++++++++++++++
 src/router/index.js                 |  5 +++++
 src/views/MQTTDebugView.vue         | 21 ++++++++++++++++++
 5 files changed, 89 insertions(+)
 create mode 100644 src/components/MQTTDebugConsole.vue
 create mode 100644 src/components/MQTTDebugPublish.vue
 create mode 100644 src/views/MQTTDebugView.vue

diff --git a/src/App.vue b/src/App.vue
index e864195..eb6da1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/mqtt-debugger">MQTT Debugger</RouterLink>
       </nav>
     </div>
   </header>
diff --git a/src/components/MQTTDebugConsole.vue b/src/components/MQTTDebugConsole.vue
new file mode 100644
index 0000000..26ee17d
--- /dev/null
+++ b/src/components/MQTTDebugConsole.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>Console MQTT</h1>
+    <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
+  </div>
+</template>
+
+<script>
+import mqtt from 'mqtt';
+
+export default {
+  data() {
+    return {
+      messages: [] // Initialiser un tableau pour stocker les messages MQTT
+    };
+  },
+  created() {
+    const client = mqtt.connect('ws://localhost:9001');
+    client.on('connect', () => {
+    console.log("on connect");
+      client.subscribe('#'); // S'abonner à tous les topics MQTT
+    });
+    client.on('message', (topic, message) => {
+    console.log("on message");
+      this.messages.push(`Topic: ${topic}, Message: ${message}`); // Ajouter le message à la liste des messages
+    });
+  }
+}
+</script>
diff --git a/src/components/MQTTDebugPublish.vue b/src/components/MQTTDebugPublish.vue
new file mode 100644
index 0000000..36c5070
--- /dev/null
+++ b/src/components/MQTTDebugPublish.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1>Publier sur MQTT</h1>
+    <select v-model="selectedTopic">
+      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
+    </select>
+    <input type="text" v-model="message" placeholder="Saisissez votre message">
+    <button @click="publishMessage">Publier sur MQTT</button>
+  </div>
+</template>
+
+<script>
+import mqtt from 'mqtt';
+
+export default {
+  data() {
+    return {
+      message: '', // Initialiser la variable message
+      selectedTopic: 'topic1',
+      topics: ['topic1', 'topic2', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10'], // Liste des topics
+    };
+  },
+  methods: {
+    publishMessage() {
+      const client = mqtt.connect('ws://localhost:9001');
+      client.on('connect', () => {
+        client.publish(this.selectedTopic, this.message);
+        client.end();
+      });
+    }
+  }
+}
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index a49ae50..1098797 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,6 +16,11 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
+    },
+    {
+      path: '/mqtt-debugger',
+      name: 'Debugger MQTT',
+      component: () => import('../views/MQTTDebugView.vue')
     }
   ]
 })
diff --git a/src/views/MQTTDebugView.vue b/src/views/MQTTDebugView.vue
new file mode 100644
index 0000000..0401412
--- /dev/null
+++ b/src/views/MQTTDebugView.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <!-- Zone pour publier sur MQTT -->
+    <PublishMQTTComponent />
+
+    <!-- Zone pour afficher la console MQTT -->
+    <MQTTConsoleComponent />
+  </div>
+</template>
+
+<script>
+import PublishMQTTComponent from '../components/MQTTDebugPublish.vue'; // Importer le composant pour publier sur MQTT
+import MQTTConsoleComponent from '../components/MQTTDebugConsole.vue'; // Importer le composant pour la console MQTT
+
+export default {
+  components: {
+    PublishMQTTComponent, // Composant pour publier sur MQTT
+    MQTTConsoleComponent // Composant pour la console MQTT
+  }
+}
+</script>