asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Ajustement de l'interface de console MQTT, couleur appliqués au Topic et Msg pour bien trancher toute la ligne (plus facile à lire)

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-11-10 11:47:32 +01:00
parent 08c8f85921
commit 6c4c7f1bc4
1 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/src/components/MQTTDebugConsole.vue
View File

@ -7,8 +7,9 @@
</v-card-title> </v-card-title>
<v-container class="text-center"> <v-container class="text-center">
<div v-for="(log, index) in messageLogs" :key="index"> <div v-for="(log, index) in messageLogs" :key="index">
<v-label class="v-label-timestamp">{{ log.timestamp }} </v-label> - <v-label class="v-label-timestamp">{{ log.timestamp }} -&nbsp;</v-label>
<v-label>{{ log.message }}</v-label> <v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label><v-label class="v-label-topic-message">{{ log.topic }}&nbsp;</v-label>
<v-label class="v-label-topic-message-title">Msg :&nbsp;</v-label><v-label class="v-label-topic-message">{{ log.message }}</v-label>
</div> </div>
</v-container> </v-container>
</v-card> </v-card>
@ -32,7 +33,8 @@
}); });
// Ajouter le message avec l'horodatage à la liste des messages // Ajouter le message avec l'horodatage à la liste des messages
this.messageLogs.push({ timestamp, message: `Topic : ${topic} - Message : ${message}` }); this.messageLogs.push({ timestamp, topic: `${topic}`, message: `${message}` });
//this.messageLogs.push({ timestamp, message: `${message}` });
// Limiter la liste à 10 messages // Limiter la liste à 10 messages
if (this.messageLogs.length > 26) { if (this.messageLogs.length > 26) {
@ -44,17 +46,27 @@
<style> <style>
.v-container-style-console { .v-container-style-console {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: sticky; position: sticky;
top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */ top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
} }
.centered-title { .centered-title {
text-align: center; text-align: center;
} }
.v-label-timestamp{ .v-label-timestamp{
opacity: 100%; opacity: 100%;
font-weight: 700; font-style: oblique;
color: #d42828; font-weight: 400;
color: #838383;
} }
.v-label-topic-message-title{
opacity: 100%;
font-weight: 700;
color: #d42828;
}
.v-label-topic-message{
font-weight: 300;
}
</style> </style>