aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/components/InstallProgressBar.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src-vue/src/components/InstallProgressBar.vue')
-rw-r--r--src-vue/src/components/InstallProgressBar.vue102
1 files changed, 0 insertions, 102 deletions
diff --git a/src-vue/src/components/InstallProgressBar.vue b/src-vue/src/components/InstallProgressBar.vue
deleted file mode 100644
index 21901ac0..00000000
--- a/src-vue/src/components/InstallProgressBar.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { appWindow } from '@tauri-apps/api/window';
-import { InstallProgress } from '../../../src-tauri/bindings/InstallProgress';
-
-export default defineComponent({
- name: 'InstallProgressBar',
- computed: {
- progressBarStyle(): string {
- return !this.install_or_update ? 'hide-progress' : '';
- }
- },
- data() {
- return {
- percentage: 0,
- color: '#409EFF',
- install_or_update: false,
- status: "unknown",
- current_downloaded: -1,
- total_size: -1,
- };
- },
- methods: {
- formatBytes(bytes: number, decimals = 2) {
- if (bytes === 0) return '0 Bytes';
- const k = 1000;
- const dm = decimals < 0 ? 0 : decimals;
- const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
- },
- formatText() {
- if (this.status == "Downloading") {
- const current_downloaded_string = this.formatBytes(this.current_downloaded);
- const total_size_string = this.formatBytes(this.total_size);
- const status = this.$t("generic.downloading");
- return `${status}: ${current_downloaded_string}/${total_size_string}`;
- }
- if (this.status == "Extracting") {
- return this.$t("generic.extracting");
- }
- return "Inactive"; // Needed to keep same size format when progress bar is hidden
- }
- },
- mounted() {
- appWindow.listen<InstallProgress>(
- 'northstar-install-download-progress',
- ({ event, payload }) => {
- this.install_or_update = true;
- let progress = payload;
- this.status = progress.state;
- if (progress.state == "Downloading") {
- this.percentage = ((Number(progress.current_downloaded) / Number(progress.total_size)) * 100);
- this.color = '#409EFF';
- this.current_downloaded = Number(progress.current_downloaded);
- this.total_size = Number(progress.total_size);
- }
- if (progress.state == "Extracting") {
- this.percentage = 100;
- this.color = '#67C23A';
- }
- if (progress.state == "Done") {
- // Clear state again
- this.install_or_update = false
- }
- }
- );
- }
-});
-</script>
-
-<template>
- <el-progress
- :class="progressBarStyle"
- :format="formatText"
- :percentage="percentage"
- :color="color"
- :indeterminate="status === 'Extracting'"
- :duration="1"
- >
- </el-progress>
-</template>
-
-<style scoped>
-.el-progress {
- margin-top: 10px;
-}
-
-/* Set progress bar width */
-.el-progress:deep(.el-progress-bar) {
- width: 200px;
- flex-grow: initial;
-}
-
-.el-progress:deep(.el-progress__text) {
- line-height: 1.2;
-}
-
-.hide-progress {
- opacity: 0;
-}
-</style>