updated files for correct data getting

This commit is contained in:
mikailkilli 2024-10-15 09:56:15 +02:00
parent fd98afafb6
commit c355bc8f7d
2 changed files with 25 additions and 13 deletions

View file

@ -5,7 +5,7 @@
<v-expansion-panel>
<v-expansion-panel-title>
<div class="d-flex justify-content-between align-items-center">
<div class="mr-3" v-if="sensorData?.voltage">
<div class="mr-3" v-if="latestSensorData?.voltage">
Name: {{ node.id }} (Status: online)
</div>
<div class="mr-3" v-else>
@ -22,15 +22,15 @@
</div>
<div class="d-flex align-items-center mb-2">
<span class="mr-2">Temperature:</span>
<span>{{ sensorData?.temperature !== undefined ? sensorData.temperature : 'NaN' }}°C</span>
<span>{{ latestSensorData?.temperature !== undefined ? latestSensorData.temperature : 'NaN' }}°C</span>
</div>
<div class="d-flex align-items-center mb-2">
<span class="mr-2">Battery Voltage:</span>
<span>{{ sensorData?.voltage || 'N/A' }}V</span>
<span>{{ latestSensorData?.voltage || 'N/A' }}V</span>
</div>
<div class="d-flex align-items-center mb-2">
<span class="mr-2">Runtime:</span>
<span>{{ sensorData?.uptime ? (sensorData.uptime / 3600).toFixed(2) + ' hours' : 'N/A' }}</span>
<span>{{ latestSensorData?.uptime ? (latestSensorData.uptime / 3600).toFixed(2) + ' hours' : 'N/A' }}</span>
</div>
</div>
</v-expansion-panel-text>
@ -42,13 +42,13 @@
<script setup lang="ts">
import { Node, SensorData } from "@/types";
import { ComputedRef, inject, ref, watch, onMounted } from "vue";
import { ComputedRef, inject, ref, watch, onMounted, computed } from "vue";
import { key } from "@/store";
import axios from "axios";
const props = defineProps<{ node: Node }>();
const visible = ref(true);
const sensorData = ref<SensorData | null>(null);
const sensorDataArray = ref<SensorData[]>([]);
const { searching, visibleIds } = inject(key) as {
searching: ComputedRef<boolean>;
@ -61,11 +61,18 @@ watch([searching, visibleIds], ([searching, visibleIds]) => {
onMounted(async () => {
try {
const { data } = await axios.get<SensorData>(
const { data } = await axios.get<SensorData[]>(
`http://localhost:8080/api/v1/data?id=${props.node.id}`
);
sensorData.value = data;
sensorDataArray.value = data;
} catch (error) {
console.error("Error fetching sensor data:", error);
}
});
const latestSensorData = computed(() => {
return sensorDataArray.value.length > 0
? sensorDataArray.value[sensorDataArray.value.length - 1]
: null;
});
</script>

View file

@ -16,8 +16,8 @@
<tr v-for="(node, index) in tableData" :key="index">
<td>{{ node.id }}</td>
<td>
<span :class="node.sensorData.voltage !== 'N/A' ? 'status-online' : 'status-offline'">
{{ node.sensorData.voltage !== 'N/A' ? 'ONLINE' : 'OFFLINE' }}
<span :class="getLastSensorData(node)?.voltage !== 'N/A' ? 'status-online' : 'status-offline'">
{{ getLastSensorData(node)?.voltage !== 'N/A' ? 'ONLINE' : 'OFFLINE' }}
</span>
</td>
<td
@ -28,9 +28,9 @@
contenteditable="true"
@blur="validateAndUpdateLatLng(node, 'coord_lo', $event)"
>{{ node.coord_lo }}</td>
<td>{{ calculateBatteryPercentage(node.sensorData.voltage, node.battery_minimum, node.battery_maximum) }}%</td>
<td>{{ node.sensorData.temperature }}°C</td>
<td>{{ formatRuntime(node.sensorData.uptime) }}</td>
<td>{{ calculateBatteryPercentage(getLastSensorData(node)?.voltage, node.battery_minimum, node.battery_maximum) }}%</td>
<td>{{ getLastSensorData(node)?.temperature }}°C</td>
<td>{{ formatRuntime(getLastSensorData(node)?.uptime) }}</td>
</tr>
</tbody>
</table>
@ -75,6 +75,11 @@ export default {
} catch (error) {
console.error('Error fetching node or sensor data:', error);
}
},
getLastSensorData(node) {
return node.sensorData && node.sensorData.length > 0
? node.sensorData[node.sensorData.length - 1]
: { temperature: 'N/A', voltage: 'N/A', uptime: 'N/A'};
},
calculateBatteryPercentage(voltage, batteryMinimum, batteryMaximum) {
if (voltage <= batteryMinimum) {