tracking

src/pages/market/Track.vue

@@ -1,6 +1,41 @@
 <script setup lang="ts">
+import { MarketTypePrice, getMarketTypes, getPrices } from "@/market";
+import { BuyModal } from '@/market/scan';
+import { SellModal, TrackResultTable, TrackedItem, useTrackedItemsStorage } from '@/market/track';
+import { onMounted, ref, watch } from 'vue';
+
+const buyModal = ref<typeof BuyModal>();
+const sellModal = ref<typeof SellModal>();
+
+const itemsStorage = useTrackedItemsStorage();
+const items = ref<TrackedItem[]>([]);
+
+const relaod = async () => {
+    if (itemsStorage.value.length === 0) {
+        return;
+    }
+
+    const prices = await getPrices(await getMarketTypes(itemsStorage.value.map(i => i.typeID)));
+
+    items.value = itemsStorage.value.map(i => {
+        const price = prices.find(p => p.type.id === i.typeID) as MarketTypePrice;
+        
+        return { ...i, ...price };
+    });
+};
+
+watch(items, itms => itemsStorage.value = itms.map(i => ({ typeID: i.type.id, count: i.count, averagePrice: i.averagePrice })));
+onMounted(relaod);
+
 </script>
 
 <template>
-    <div></div>
+    <div class="mt-4">
+        <template v-if="items.length > 0">
+            <hr />
+            <TrackResultTable :items="items" @buy="(type, price, buy, sell) => buyModal?.open(type, {  'Price': price, 'Buy': buy, 'Sell': sell })" @sell="type => sellModal?.open(type)" />
+            <BuyModal ref="buyModal" @added="relaod" />
+            <SellModal ref="sellModal" @removed="relaod" />
+        </template>
+    </div>
 </template>