mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-03 03:01:40 +00:00
Vue 3 Upgrade (#1900)
## Description Upgrades to Vue 3 and necessary associated dependencies. Also fixes some issues with the layout and adds validation for object detection models. Closes #885, closes #1943, closes #1449. ## Meta Merge checklist: - [x] Pull Request title is [short, imperative summary](https://cbea.ms/git-commit/) of proposed changes - [x] The description documents the _what_ and _why_ - [ ] If this PR changes behavior or adds a feature, user documentation is updated - [ ] If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly - [ ] If this PR touches configuration, this is backwards compatible with settings back to v2024.3.1 - [ ] If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated - [ ] If this PR addresses a bug, a regression test for it is added --------- Co-authored-by: Matt M <matthew.morley.ca@gmail.com> Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com> Co-authored-by: samfreund <techguy763@gmail.com>
This commit is contained in:
Graham
@@ -249,7 +249,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
v-model="useStateStore().currentCameraUniqueName"
|
||||
label="Camera"
|
||||
:items="wrappedCameras"
|
||||
@input="changeCurrentCameraUniqueName"
|
||||
@update:modelValue="changeCurrentCameraUniqueName"
|
||||
/>
|
||||
<pv-input
|
||||
v-else
|
||||
@@ -270,7 +270,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
:disabled="checkCameraName(currentCameraName) !== true"
|
||||
@click="() => saveCameraNameEdit(currentCameraName)"
|
||||
/>
|
||||
<pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelCameraNameEdit" />
|
||||
<pv-icon icon-name="mdi-cancel" color="red-darken-2" @click="cancelCameraNameEdit" />
|
||||
</div>
|
||||
<pv-icon
|
||||
v-else
|
||||
@@ -285,7 +285,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
<v-col cols="10" class="pa-0">
|
||||
<pv-select
|
||||
v-if="!isPipelineNameEdit"
|
||||
:value="useCameraSettingsStore().currentCameraSettings.currentPipelineIndex"
|
||||
:model-value="useCameraSettingsStore().currentCameraSettings.currentPipelineIndex"
|
||||
label="Pipeline"
|
||||
tooltip="Each pipeline runs on a camera output and stores a unique set of processing settings"
|
||||
:disabled="
|
||||
@@ -294,7 +294,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
!useCameraSettingsStore().hasConnected
|
||||
"
|
||||
:items="pipelineNamesWrapper"
|
||||
@input="(args) => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
|
||||
@update:modelValue="(args) => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
|
||||
/>
|
||||
<pv-input
|
||||
v-else
|
||||
@@ -314,13 +314,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
:disabled="checkPipelineName(currentPipelineName) !== true"
|
||||
@click="() => savePipelineNameEdit(currentPipelineName)"
|
||||
/>
|
||||
<pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelPipelineNameEdit" />
|
||||
<pv-icon icon-name="mdi-cancel" color="red-darken-2" @click="cancelPipelineNameEdit" />
|
||||
</div>
|
||||
<v-menu v-else-if="!useCameraSettingsStore().isDriverMode" offset-y nudge-bottom="7" auto>
|
||||
<template #activator="{ on }">
|
||||
<v-icon color="#c5c5c5" v-on="on" @click="cancelPipelineNameEdit"> mdi-menu </v-icon>
|
||||
<v-menu v-else-if="!useCameraSettingsStore().isDriverMode" offset="7">
|
||||
<template #activator="{ props }">
|
||||
<v-icon color="#c5c5c5" v-bind="props" @click="cancelPipelineNameEdit"> mdi-menu </v-icon>
|
||||
</template>
|
||||
<v-list dark dense color="primary">
|
||||
<v-list density="compact" color="primary">
|
||||
<v-list-item @click="startPipelineNameEdit">
|
||||
<v-list-item-title>
|
||||
<pv-icon color="#c5c5c5" :right="true" icon-name="mdi-pencil" tooltip="Edit pipeline name" />
|
||||
@@ -333,7 +333,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
</v-list-item>
|
||||
<v-list-item @click="showPipelineDeletionConfirmationDialog = true">
|
||||
<v-list-item-title>
|
||||
<pv-icon color="red darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
|
||||
<pv-icon color="red-darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="duplicateCurrentPipeline">
|
||||
@@ -365,12 +365,12 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
!useCameraSettingsStore().hasConnected
|
||||
"
|
||||
:items="pipelineTypesWrapper"
|
||||
@input="showPipelineTypeChangeDialog = true"
|
||||
@update:modelValue="showPipelineTypeChangeDialog = true"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-dialog v-model="showPipelineCreationDialog" dark persistent width="500">
|
||||
<v-card dark color="primary">
|
||||
<v-dialog v-model="showPipelineCreationDialog" persistent width="500">
|
||||
<v-card color="primary">
|
||||
<v-card-title> Create New Pipeline </v-card-title>
|
||||
<v-card-text>
|
||||
<pv-input
|
||||
@@ -394,18 +394,18 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
color="#ffd843"
|
||||
class="black--text"
|
||||
:disabled="checkPipelineName(newPipelineName) !== true"
|
||||
variant="flat"
|
||||
@click="createNewPipeline"
|
||||
>
|
||||
Save
|
||||
</v-btn>
|
||||
<v-btn color="error" @click="cancelPipelineCreation"> Cancel </v-btn>
|
||||
<v-btn color="error" variant="elevated" @click="cancelPipelineCreation"> Cancel </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showPipelineDeletionConfirmationDialog" dark width="500">
|
||||
<v-card dark color="primary">
|
||||
<v-dialog v-model="showPipelineDeletionConfirmationDialog" width="500">
|
||||
<v-card color="primary">
|
||||
<v-card-title> Pipeline Deletion Confirmation </v-card-title>
|
||||
<v-card-text>
|
||||
Are you sure you want to delete the pipeline
|
||||
@@ -417,8 +417,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="error" @click="confirmDeleteCurrentPipeline"> Yes, I'm sure </v-btn>
|
||||
<v-btn color="#ffd843" class="black--text" @click="showPipelineDeletionConfirmationDialog = false">
|
||||
<v-btn variant="flat" color="error" @click="confirmDeleteCurrentPipeline"> Yes, I'm sure </v-btn>
|
||||
<v-btn
|
||||
variant="flat"
|
||||
color="#ffd843"
|
||||
class="text-black"
|
||||
@click="showPipelineDeletionConfirmationDialog = false"
|
||||
>
|
||||
No, take me back
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
@@ -435,8 +440,10 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="error" @click="confirmChangePipelineType"> Yes, I'm sure </v-btn>
|
||||
<v-btn color="#ffd843" class="black--text" @click="cancelChangePipelineType"> No, take me back </v-btn>
|
||||
<v-btn color="error" variant="elevated" @click="confirmChangePipelineType"> Yes, I'm sure </v-btn>
|
||||
<v-btn color="#ffd843" variant="elevated" class="text-black" @click="cancelChangePipelineType">
|
||||
No, take me back
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
Reference in New Issue
Block a user