From d7cf3307615333a70b6e58e415f3254036f6520c Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 6 Jun 2022 21:58:21 +0000
Subject: [PATCH] Added tooltip

---
 web/src/components/signalStrength.vue | 49 ++++++++++++++++++---------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/web/src/components/signalStrength.vue b/web/src/components/signalStrength.vue
index 9318189..48b9b02 100644
--- a/web/src/components/signalStrength.vue
+++ b/web/src/components/signalStrength.vue
@@ -1,21 +1,29 @@
 <template>
-  <span class="signal-strength">
-    <template v-if="value < 0">
-      <v-chip :color="signalStrengthColor(value) + ' lighten-5'" small>
-        <v-icon small left :color="signalStrengthColor(value) + ' darken-2'">
-          {{ signalStrengthIcon(value) }}
-        </v-icon>
-        <span class="font-weight-medium">{{ value }}</span>
-        <small class="ml-1"> dBm </small>
-      </v-chip>
+  <v-tooltip left :color="signalStrengthColor(value)" open-delay="400">
+    <template #activator="{ on, attrs }">
+      <template v-if="value < 0">
+        <v-chip
+          :color="signalStrengthColor(value) + ' lighten-5'"
+          small
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon small left :color="signalStrengthColor(value) + ' darken-2'">
+            {{ signalStrengthIcon(value) }}
+          </v-icon>
+          <span class="font-weight-medium">{{ value }}</span>
+          <small class="ml-1"> dBm </small>
+        </v-chip>
+      </template>
+      <template v-else>
+        <v-chip small color="grey lighten-4">
+          <v-icon small left color="grey">mdi-signal-off</v-icon>
+          <small>Aguarde...</small>
+        </v-chip>
+      </template>
     </template>
-    <template v-else>
-      <v-chip small color="grey lighten-4">
-        <v-icon small left color="grey">mdi-signal-off</v-icon>
-        <small>Aguarde...</small>
-      </v-chip>
-    </template>
-  </span>
+    <span>{{ signalStrengthText(value) }}</span>
+  </v-tooltip>
 </template>
 
 <script>
@@ -41,6 +49,15 @@ export default {
       else if (signalStrength > -80) return 'orange'
       else if (signalStrength > -90) return 'deep-orange'
       else return 'red'
+    },
+    signalStrengthText(signalStrength) {
+      if (signalStrength > -50) return 'Excelente'
+      else if (signalStrength > -60) return 'Bom'
+      else if (signalStrength > -67) return 'Regular'
+      else if (signalStrength > -70) return 'Fraco'
+      else if (signalStrength > -80) return 'Conexão instável'
+      else if (signalStrength > -90) return 'Extremamente fraco'
+      else return 'Provavelmente sem conexão'
     }
   }
 }