57 lines
2.0 KiB
Vue
57 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import TextInput from '@/components/TextInput.vue';
|
|
import { ref } from 'vue';
|
|
import TelemetryList from '@/components/TelemetryList.vue';
|
|
import type { TelemetryDefinition } from '@/composables/telemetry';
|
|
import TelemetryInfo from '@/components/TelemetryInfo.vue';
|
|
import FlexDivider from '@/components/FlexDivider.vue';
|
|
import ScreenLayout from '@/components/layout/ScreenLayout.vue';
|
|
import { ScreenType } from '@/composables/ScreenType.ts';
|
|
|
|
const searchValue = ref('');
|
|
|
|
const selected = ref<TelemetryDefinition | null>(null);
|
|
const mousedover = ref<TelemetryDefinition | null>(null);
|
|
</script>
|
|
|
|
<template>
|
|
<ScreenLayout :type="ScreenType.Standard" limit>
|
|
<div class="row grow stretch no-min-height no-basis">
|
|
<div class="column grow2 stretch no-min-height no-basis">
|
|
<div class="row">
|
|
<TextInput
|
|
autofocus
|
|
class="grow"
|
|
v-model="searchValue"
|
|
placeholder="Search"
|
|
></TextInput>
|
|
</div>
|
|
|
|
<div class="row scroll no-min-height">
|
|
<div class="column grow stretch">
|
|
<TelemetryList
|
|
:search="searchValue"
|
|
v-model="selected"
|
|
@mouseover="
|
|
(mousedover_value) =>
|
|
(mousedover = mousedover_value)
|
|
"
|
|
></TelemetryList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<FlexDivider></FlexDivider>
|
|
<div class="column grow stretch no-basis">
|
|
<TelemetryInfo
|
|
:mouseover="mousedover"
|
|
:selection="selected"
|
|
></TelemetryInfo>
|
|
</div>
|
|
</div>
|
|
</ScreenLayout>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@use '@/assets/variables';
|
|
</style>
|