Skip to content

core:frontend:CloudTrayMenu: Add file tracking #3699

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
patrickelectric merged 1 commit into from
Dec 19, 2025
Merged

core:frontend:CloudTrayMenu: Add file tracking #3699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions core/frontend/src/components/cloud/CloudSettingsTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template>
<v-container class="text-center fill-height d-flex flex-column justify-center align-center mt-5">
<v-icon
:color="isTokenSet ? 'green' : 'yellow'"
size="70"
>
{{ isTokenSet ? 'mdi-weather-cloudy' : 'mdi-wrench' }}
</v-icon>
<v-card-title>
{{ isTokenSet ? 'Setup is complete!' : 'Lets connect your vehicle!' }}
</v-card-title>
<v-btn
color="primary"
elevation="3"
class="mt-4"
:href="isTokenSet ? blueosCloudUrl : blueosCloudVehiclesUrl"
target="_blank"
rel="noopener noreferrer"
@click="() => {}"
>
Go to BlueOS Cloud
</v-btn>
<v-container
class="d-flex align-center py-0 my-0"
style="height: 90px; width: auto;"
>
<v-card-subtitle
v-if="!settingToken"
class="token-link-text mt-2 pt-1 pb-1"
@click="$emit('toggle-token-input', true)"
>
Click here if you {{ isTokenSet ? 'want to change your token' : 'already have a token' }}
</v-card-subtitle>
<v-slide-x-reverse-transition>
<v-text-field
v-if="settingToken"
:value="token"
label="Token"
type="text"
variant="outlined"
@input="$emit('update:token', $event)"
>
<template #append>
<v-btn
icon
@click="$emit('submit-token')"
>
<v-icon
color="primary"
size="30"
>
mdi-check-circle-outline
</v-icon>
</v-btn>
</template>
</v-text-field>
</v-slide-x-reverse-transition>
</v-container>
</v-container>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
name: 'CloudSettingsTab',
props: {
isTokenSet: {
type: Boolean,
required: true,
},
settingToken: {
type: Boolean,
required: true,
},
token: {
type: String,
required: true,
},
blueosCloudUrl: {
type: String,
required: true,
},
blueosCloudVehiclesUrl: {
type: String,
required: true,
},
},
})
</script>

<style scoped>
.token-link-text {
cursor: pointer;
text-decoration: underline;
}
</style>
148 changes: 148 additions & 0 deletions core/frontend/src/components/cloud/CloudSyncStatusTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<template>
<v-container class="cloud-status-tab pa-4">
<div class="mb-4">
<div class="text-subtitle-1 font-weight-medium">
{{ summaryMessage }}
</div>
<div class="text-caption text--secondary">
{{ activeCount }} uploading • {{ pendingCount }} waiting
</div>
<v-btn
class="mt-3"
color="primary"
elevation="2"
:href="missionsUrl"
target="_blank"
rel="noopener noreferrer"
>
Go to My Missions
</v-btn>
</div>
<section class="cloud-status-section">
<div class="d-flex align-center justify-space-between mb-2">
<span class="text-body-2 font-weight-medium">Cloud file sync</span>
<v-chip
small
outlined
>
{{ items.length }}
</v-chip>
</div>
<template v-if="items.length > 0">
<v-list
dense
class="py-0"
>
<v-list-item
v-for="item in items"
:key="item.id"
class="px-0"
>
<v-list-item-content class="pr-4">
<v-list-item-title class="text-body-2">
{{ getFileName(item.display_path || item.path) }}
</v-list-item-title>
<v-list-item-subtitle class="text-caption mb-1">
<template v-if="item.status === 'uploading'">
{{ formatFileSize(item.sent || 0) }} / {{ formatFileSize(item.total || 0) }}
</template>
<template v-else-if="item.status === 'pending'">
Waiting to upload • {{ formatFileSize(item.size) }}
</template>
<template v-else>
Completed • {{ formatFileSize(item.size) }}
</template>
</v-list-item-subtitle>
<v-progress-linear
v-if="item.status === 'uploading'"
height="6"
color="primary"
:value="(item.progress || 0) * 100"
/>
</v-list-item-content>
<v-list-item-action class="d-flex align-center">
<div v-if="item.status === 'uploading'">
{{ formatUploadProgress(item.progress || 0) }}
</div>
<v-progress-circular
v-else-if="item.status === 'pending'"
indeterminate
size="20"
width="2"
color="grey lighten-1"
/>
<v-icon
v-else
color="green"
>
mdi-check-circle
</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
</template>
<div
v-else
class="cloud-status-empty"
>
No files in the queue.
</div>
</section>
</v-container>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'

import { CloudSyncDisplayItem } from './types'

export default Vue.extend({
name: 'CloudSyncStatusTab',
props: {
summaryMessage: {
type: String,
required: true,
},
items: {
type: Array as PropType<CloudSyncDisplayItem[]>,
default: () => [],
},
activeCount: {
type: Number,
required: true,
},
pendingCount: {
type: Number,
required: true,
},
getFileName: {
type: Function as PropType<(path: string) => string>,
required: true,
},
formatFileSize: {
type: Function as PropType<(value: number) => string>,
required: true,
},
formatUploadProgress: {
type: Function as PropType<(progress: number) => string>,
required: true,
},
missionsUrl: {
type: String,
required: true,
},
},
})
</script>

<style scoped>
.cloud-status-section + .cloud-status-section {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 16px;
}
.cloud-status-empty {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
padding: 12px 0;
}
</style>
Loading