Code owners
Assign users and groups as approvers for specific file changes. Learn more.
ValueTabs.vue 2.18 KiB
<script>
import axios from "axios"
export default {
data() {
return {
values: { 0: { N: 0 }, 1: { P: 0 }, 2: { K: 0 }, 3: { T: 0 }, 4: { H: 0 }, 5: { M: 0 } },
}
},
mounted() {
this.getValues();
setInterval(this.getValues, 5000);
},
methods: {
getValues() {
axios
.get('http://127.0.0.1:5000/values')
.then((response) => {
this.values = response.data
})
},
getClass(value, warn_min, good_min, good_max, warn_max) {
if (value > good_min && value <= good_max) {
return 'list-group-item-success'; // Success class
} else if ((value >= warn_min && value <= good_min) || (value > good_max && value <= warn_max)) {
return 'list-group-item-warning'; // Warning class
} else {
return 'list-group-item-danger'; // Danger class
}
},
},
}
</script>
<template>
<div class="allBoxes">
<div>
<div class="valueBox">
Nitrogen (N):
<li class="list-group-item" v-bind:class="getClass(values[0].N, 0, 5, 10, 15)">{{ values[0].N }} ppm</li>
</div>
<div class="valueBox">
Phosphorus (P):
<li class="list-group-item" v-bind:class="getClass(values[1].P, 0, 5, 10, 15)">{{ values[1].P }} ppm</li>
</div>
<div class="valueBox">
Potassium (K):
<li class="list-group-item" v-bind:class="getClass(values[2].K, 0, 5, 10, 15)">{{ values[2].K }} ppm</li>
</div>
<div class="valueBox">
Temperature:
<li class="list-group-item" v-bind:class="getClass(values[3].T, 0, 5, 10, 15)">{{ values[3].T }} °C</li>
</div>
<div class="valueBox">
Humidity:
<li class="list-group-item" v-bind:class="getClass(values[4].H, 0, 5, 10, 15)">{{ values[4].H }} %</li>
</div>
<div class="valueBox">
Moisture:
<li class="list-group-item" v-bind:class="getClass(values[5].M, 0, 5, 10, 15)">{{ values[5].M }} %</li>
</div>
</div>
</div>
</template>
<style scoped>
.allBoxes{
/* font-size: 40px; */
font-size: 2vw;
width: fit-content;
/* padding-top: 5%; */
}
.valueBox {
display: flex;
padding-bottom: 2%;
}
</style>