tracking progress bar

src/components/ProgressBar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+
+interface Props {
+    value: number;
+    total: number;
+}
+
+const props = defineProps<Props>();
+
+const percentage = computed(() => (props.value / props.total) * 100);
+</script>
+
+<template>
+    <div class="w-full bg-gray-600 rounded-full h-2.5">
+        <div class="bg-emerald-600 h-2.5 rounded-full" :style="{ width: percentage + '%'}" />
+    </div>
+</template>

src/components/index.ts

@@ -2,6 +2,7 @@ export { default as ClipboardButton } from './ClipboardButton.vue';
 export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
+export { default as ProgressBar } from './ProgressBar.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
 export { default as Tooltip } from './tooltip/Tooltip.vue';
 

src/pages/market/Tracking.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Modal, ProgressBar } from "@/components";
 import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, useApraisalStore } from "@/market";
 import { BuyModal } from '@/market/acquisition';
 import { TrackingResult, TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
@@ -56,10 +57,6 @@ watch(() => marketTrackingStore.types, async t => {
 
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
-    items.value = [
-        ...items.value
-    ];
-
     typesToLoad.forEach(async i => items.value.push(await createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice)));
 }, { immediate: true });
 </script>
@@ -76,5 +73,10 @@ watch(() => marketTrackingStore.types, async t => {
         <hr />
         <TrackingResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" @remove="removeItem" />
         <BuyModal ref="buyModal" />
+        <Modal :open="items.length > 0 && items.length < marketTrackingStore.types.length">
+            <div class="ms-auto me-auto mb-2 w-96">
+                <ProgressBar :value="items.length" :total="marketTrackingStore.types.length" />
+            </div>
+        </Modal>
     </template>
 </template>