71 lines
2.2 KiB
Vue
71 lines
2.2 KiB
Vue
<template>
|
|
<template v-if="visible">
|
|
<v-sheet elevation="4" width="96vw" rounded="lg" class="mt-3">
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="mr-3" v-if="node.status === 200">
|
|
Name: {{ node.name }} (Status: online)
|
|
</div>
|
|
<div class="mr-3" v-else>
|
|
Name: {{ node.name }} (Status: offline)
|
|
</div>
|
|
</div>
|
|
</v-expansion-panel-title>
|
|
|
|
<v-expansion-panel-text>
|
|
<div class="d-flex flex-column">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="mr-2">Coordinates:</span>
|
|
<span>La: {{ node.coordla }}, Long: {{ node.coordlong }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="mr-2">Temperature:</span>
|
|
<span>{{ node.temperature }}°C</span>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="mr-2">Battery:</span>
|
|
<span>{{ node.batteryCurrent }}%</span>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="mr-2">Runtime:</span>
|
|
<span>{{ node.uptime }} hours</span>
|
|
</div>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-sheet>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Node } from "@/types";
|
|
import { ComputedRef, inject, ref, watch } from "vue";
|
|
import { key } from "@/store";
|
|
|
|
const props = defineProps<{ node: Node }>();
|
|
const visible = ref(true);
|
|
const { searching, visibleIds } = inject(key) as {
|
|
searching: ComputedRef<boolean>;
|
|
visibleIds: ComputedRef<string[]>;
|
|
};
|
|
|
|
watch([searching, visibleIds], ([searching, visibleIds]) => {
|
|
visible.value = searching ? visibleIds.includes(props.node.uuid) : true;
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.values {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.v-text-field {
|
|
max-width: 200px;
|
|
width: 100%;
|
|
}
|
|
</style>
|