From 88b9188764b8e89531afc23f3a9995b7719d8b4c Mon Sep 17 00:00:00 2001 From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk> Date: Tue, 28 Nov 2023 20:42:20 +0000 Subject: [PATCH] Tooltips displaying ideal values --- src/components/ValueTabs.vue | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue index 2b4f330..7915aaa 100644 --- a/src/components/ValueTabs.vue +++ b/src/components/ValueTabs.vue @@ -1,13 +1,20 @@ <script> -import axios from "axios" + import axios from 'axios' + import * as bootstrap from 'bootstrap/dist/js/bootstrap' export default { data() { return { values: { 0: { N: 0 }, 1: { P: 0 }, 2: { K: 0 }, 3: { T: 0 }, 4: { H: 0 }, 5: { M: 0 } }, + rangeNPK: [80, 100, 150, 170], + rangeT: [12, 15, 22, 25], + rangeHM: [30, 40, 60, 70], } }, mounted() { + const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') + const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) + this.getValues(); setInterval(this.getValues, 5000); }, @@ -37,27 +44,39 @@ export default { <div> <div class="valueBox"> Nitrogen (N): - <li class="list-group-item" v-bind:class="getClass(values[0].N, 80, 100, 150, 170)">{{ values[0].N }} ppm</li> + <li class="list-group-item" + v-bind:class="getClass(values[0].N, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])" + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ values[0].N }} ppm</li> </div> <div class="valueBox"> Phosphorus (P): - <li class="list-group-item" v-bind:class="getClass(values[1].P, 80, 100, 150, 170)">{{ values[1].P }} ppm</li> + <li class="list-group-item" + v-bind:class="getClass(values[1].P, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])" + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ values[1].P }} ppm</li> </div> <div class="valueBox"> Potassium (K): - <li class="list-group-item" v-bind:class="getClass(values[2].K, 80, 100, 150, 170)">{{ values[2].K }} ppm</li> + <li class="list-group-item" + v-bind:class="getClass(values[2].K, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])" + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ values[2].K }} ppm</li> </div> <div class="valueBox"> Temperature: - <li class="list-group-item" v-bind:class="getClass(values[3].T, 12, 15, 22, 25)">{{ values[3].T }} °C</li> + <li class="list-group-item" + v-bind:class="getClass(values[3].T, this.rangeT[0], this.rangeT[1], this.rangeT[2], this.rangeT[3])" + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeT[1] + '-' + this.rangeT[2]">{{ values[3].T }} °C</li> </div> <div class="valueBox"> Humidity: - <li class="list-group-item" v-bind:class="getClass(values[4].H, 30, 40, 60, 70)">{{ values[4].H }} %</li> + <li class="list-group-item" + v-bind:class="getClass(values[4].H, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])" + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{ values[4].H }} %</li> </div> <div class="valueBox"> Moisture: - <li class="list-group-item" v-bind:class="getClass(values[5].M, 30, 40, 60, 70)">{{ values[5].M }} %</li> + <li class="list-group-item" + v-bind:class="getClass(values[5].M, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])" + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{ values[5].M }} %</li> </div> </div> </div> -- GitLab