sergeysav/telemetry_visualization
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

initial frontend command stuff

Browse Source
This commit is contained in:
Sergey Savelyev
2025-12-28 00:01:55 -05:00
parent ac710d4e4f
commit 59a0c81eb4
15 changed files with 480 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/views/CommandListView.vue Normal file
View File

@@ -0,0 +1,61 @@
<script setup lang="ts">
import TextInput from '@/components/TextInput.vue';
import { ref } from 'vue';
import FlexDivider from '@/components/FlexDivider.vue';
import ScreenLayout from '@/components/layout/ScreenLayout.vue';
import { Direction } from '@/composables/Direction.ts';
import { ScreenType } from '@/composables/ScreenType.ts';
import LinearLayout from '@/components/layout/LinearLayout.vue';
import CommandList from '@/components/CommandList.vue';
import type { CommandDefinition } from '@/composables/command.ts';
import CommandSender from '@/components/CommandSender.vue';
const searchValue = ref('');
const selected = ref<CommandDefinition | null>(null);
</script>
<template>
<ScreenLayout :type="ScreenType.Standard" limit>
<LinearLayout
:direction="Direction.Row"
stretch
class="grow 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">
<CommandList
:search="searchValue"
v-model="selected"
></CommandList>
</div>
</div>
</div>
<FlexDivider></FlexDivider>
<div class="column grow stretch no-basis command-sender">
<CommandSender
:command="selected"
:key="selected?.name || ''"
></CommandSender>
</div>
</LinearLayout>
</ScreenLayout>
</template>
<style lang="scss">
@use '@/assets/variables';
.command-sender {
row-gap: 4px;
}
</style>

57
frontend/src/views/TelemetryListView.vue
View File

@@ -6,7 +6,6 @@ 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 { Direction } from '@/composables/Direction.ts';
import { ScreenType } from '@/composables/ScreenType.ts';
const searchValue = ref('');
@@ -16,36 +15,38 @@ const mousedover = ref<TelemetryDefinition | null>(null);
</script>
<template>
<ScreenLayout :direction="Direction.Row" :type="ScreenType.Standard" limit>
<div class="column grow2 stretch no-min-height no-basis">
<div class="row">
<TextInput
autofocus
class="grow"
v-model="searchValue"
placeholder="Search"
></TextInput>
</div>
<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 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>
</div>
<FlexDivider></FlexDivider>
<div class="column grow stretch no-basis">
<TelemetryInfo
:mouseover="mousedover"
:selection="selected"
></TelemetryInfo>
<FlexDivider></FlexDivider>
<div class="column grow stretch no-basis">
<TelemetryInfo
:mouseover="mousedover"
:selection="selected"
></TelemetryInfo>
</div>
</div>
</ScreenLayout>
</template>