diff --git a/frontend/src/assets/buttons.css b/frontend/src/assets/buttons.css index 95d4a37..7d85266 100644 --- a/frontend/src/assets/buttons.css +++ b/frontend/src/assets/buttons.css @@ -63,4 +63,9 @@ &.small-padding { padding: 0.25em; } + + &[disabled] { + opacity: 40%; + pointer-events: none; + } } diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 392cdb6..6cd37c1 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -8,6 +8,7 @@ @import './popup.css'; @import './buttons.css'; @import './tags.css'; +@import './progress-bar.css'; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,600;1,14..32,600&display=swap'); diff --git a/frontend/src/assets/progress-bar.css b/frontend/src/assets/progress-bar.css new file mode 100644 index 0000000..656105c --- /dev/null +++ b/frontend/src/assets/progress-bar.css @@ -0,0 +1,23 @@ +.progress-bar { + height: 5px; + background-color: var(--accent-100); + overflow: hidden; + position: relative; +} + +.progress-bar span { + width: 100px; + position: absolute; + height: 5px; + background-color: var(--accent-800); + animation: progress-bar-animation 1s infinite linear; +} + +@keyframes progress-bar-animation { + 0% { + left: -100px; + } + 100% { + left: 140%; + } +} diff --git a/frontend/src/components/packages/PackagesList.vue b/frontend/src/components/packages/PackagesList.vue index 461407e..00fe045 100644 --- a/frontend/src/components/packages/PackagesList.vue +++ b/frontend/src/components/packages/PackagesList.vue @@ -47,13 +47,25 @@ Component wraps functionality for displaying and working with rdfm packages.
- -
+ +
+ +
@@ -178,6 +190,7 @@ export default { // ======================= // Add package functionality // ======================= + const uploadInProgress = ref(false); const uploadedPackageFile: Ref = ref(null); const packageUploadData: Reactive = reactive({ version: null, @@ -192,17 +205,24 @@ export default { packageUploadData.version = null; packageUploadData.deviceType = null; popupOpen.value = PackagePopupOpen.None; + uploadInProgress.value = false; }; const uploadPackage = async () => { - const { success, message } = await uploadPackageRequest( - uploadedPackageFile.value!, - packageUploadData, - ); - if (!success) { - alert(message); - } else { - closeAddPackagePopup(); + uploadInProgress.value = true; + + try { + const { success, message } = await uploadPackageRequest( + uploadedPackageFile.value!, + packageUploadData, + ); + if (!success) { + alert(message); + } else { + closeAddPackagePopup(); + } + } finally { + uploadInProgress.value = false; } }; @@ -241,6 +261,8 @@ export default { }); onUnmounted(() => { + uploadInProgress.value = false; + if (intervalID !== undefined) { clearInterval(intervalID); } @@ -258,6 +280,7 @@ export default { uploadedPackageFile, packagesCount, popupOpen, + uploadInProgress, packageToRemove, closeAddPackagePopup, closeRemovePackagePopup,