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>
<v-expansion-panel-title> <v-expansion-panel-title>
<div class="d-flex justify-content-between align-items-center"> <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) Name: {{ node.id }} (Status: online)
</div> </div>
<div class="mr-3" v-else> <div class="mr-3" v-else>
@ -22,15 +22,15 @@
</div> </div>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<span class="mr-2">Temperature:</span> <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>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<span class="mr-2">Battery Voltage:</span> <span class="mr-2">Battery Voltage:</span>
<span>{{ sensorData?.voltage || 'N/A' }}V</span> <span>{{ latestSensorData?.voltage || 'N/A' }}V</span>
</div> </div>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<span class="mr-2">Runtime:</span> <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>
</div> </div>
</v-expansion-panel-text> </v-expansion-panel-text>
@ -42,13 +42,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { Node, SensorData } from "@/types"; 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 { key } from "@/store";
import axios from "axios"; import axios from "axios";
const props = defineProps<{ node: Node }>(); const props = defineProps<{ node: Node }>();
const visible = ref(true); const visible = ref(true);
const sensorData = ref<SensorData | null>(null); const sensorDataArray = ref<SensorData[]>([]);
const { searching, visibleIds } = inject(key) as { const { searching, visibleIds } = inject(key) as {
searching: ComputedRef<boolean>; searching: ComputedRef<boolean>;
@ -61,11 +61,18 @@ watch([searching, visibleIds], ([searching, visibleIds]) => {
onMounted(async () => { onMounted(async () => {
try { try {
const { data } = await axios.get<SensorData>( const { data } = await axios.get<SensorData[]>(
`http://localhost:8080/api/v1/data?id=${props.node.id}` `http://localhost:8080/api/v1/data?id=${props.node.id}`
); );
sensorData.value = data; sensorDataArray.value = data;
} catch (error) { } catch (error) {
console.error("Error fetching sensor data:", 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"> <tr v-for="(node, index) in tableData" :key="index">
<td>{{ node.id }}</td> <td>{{ node.id }}</td>
<td> <td>
<span :class="node.sensorData.voltage !== 'N/A' ? 'status-online' : 'status-offline'"> <span :class="getLastSensorData(node)?.voltage !== 'N/A' ? 'status-online' : 'status-offline'">
{{ node.sensorData.voltage !== 'N/A' ? 'ONLINE' : 'OFFLINE' }} {{ getLastSensorData(node)?.voltage !== 'N/A' ? 'ONLINE' : 'OFFLINE' }}
</span> </span>
</td> </td>
<td <td
@ -28,9 +28,9 @@
contenteditable="true" contenteditable="true"
@blur="validateAndUpdateLatLng(node, 'coord_lo', $event)" @blur="validateAndUpdateLatLng(node, 'coord_lo', $event)"
>{{ node.coord_lo }}</td> >{{ node.coord_lo }}</td>
<td>{{ calculateBatteryPercentage(node.sensorData.voltage, node.battery_minimum, node.battery_maximum) }}%</td> <td>{{ calculateBatteryPercentage(getLastSensorData(node)?.voltage, node.battery_minimum, node.battery_maximum) }}%</td>
<td>{{ node.sensorData.temperature }}°C</td> <td>{{ getLastSensorData(node)?.temperature }}°C</td>
<td>{{ formatRuntime(node.sensorData.uptime) }}</td> <td>{{ formatRuntime(getLastSensorData(node)?.uptime) }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -75,6 +75,11 @@ export default {
} catch (error) { } catch (error) {
console.error('Error fetching node or sensor data:', 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) { calculateBatteryPercentage(voltage, batteryMinimum, batteryMaximum) {
if (voltage <= batteryMinimum) { if (voltage <= batteryMinimum) {