1 files changed, 102 insertions, 0 deletions
diff --git a/src-vue/src/components/InstallProgressBar.vue b/src-vue/src/components/InstallProgressBar.vue
new file mode 100644
index 00000000..d0c2047c
--- /dev/null
+++ b/src-vue/src/components/InstallProgressBar.vue
@@ -0,0 +1,102 @@
+<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>