aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/components/InstallProgressBar.vue
diff options
context:
space:
mode:
authorGeckoEidechse <40122905+GeckoEidechse@users.noreply.github.com>2023-04-10 21:17:00 +0200
committerGitHub <noreply@github.com>2023-04-10 21:17:00 +0200
commit2be2ef6ce5232ea859ae814c401cd99e87f57af9 (patch)
treeb364b9ddf492f02d02f1fdb02fd9191a57a39d27 /src-vue/src/components/InstallProgressBar.vue
parent6d58e6793d40df4fec518f37351868803a02a033 (diff)
downloadFlightCore-2be2ef6ce5232ea859ae814c401cd99e87f57af9.tar.gz
FlightCore-2be2ef6ce5232ea859ae814c401cd99e87f57af9.zip
feat: Show download progress for installing Northstar (#200)
* chore: Bump libthermite to 0.5.3 This adds a change needed for making progressbar work on dowload * wip: First attempt at showing download progress Simply prints it to JavaScript console for now * feat: Emit download progress at most every 250ms If we spam emit too much we use a lot of extra resources, slowing down the actual download * feat: Initial messages for extracting * feat: Add install state enum * refactor: Change payload to current + total size downloaded * fix: Remove extra emit * fix: Remove extra emit * refactor: Rename struct * refactor: Move struct to top of file * feat: Add TypeScript bindings * feat: Add console logs for printing state for now * fix: Remove duplicate identifier * feat: Initial progressbar in frontend * fix: Remove event listener added for debugging * feat: Display status and downloaded bytes * feat: Set loading bar to indeterminate on extract * fix: Phrasing in comment * feat: Add i18n for progress state * refactor: Adjust control flow do not show downloaded size anymore during extraction * fix: Manually specify progressbar size * fix: Update download progress every 100ms instead of 250ms Gives impression of faster / more fluent download. * feat: layout does not move when progress bar is hidden * feat: fix progress bar width to 200px * refactor: put services container in a flex container, for it not to overlap play button * refactor: export progress bar to dedicated component file * refactor: Update status first outside of branch * fix: Proper typing of event payload * fix: Do not assign to unused variable --------- Co-authored-by: Rémy Raes <contact@remyraes.com>
Diffstat (limited to 'src-vue/src/components/InstallProgressBar.vue')
-rw-r--r--src-vue/src/components/InstallProgressBar.vue102
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>