pinia+track

src/pages/Login.vue

@@ -19,12 +19,12 @@ const login = async () => {
     <div class="p-4 mx-auto mt-10 grid justify-center gap-2 w-64">
         <div class="grid">
             Login:
-            <input type="text" autocomplete="username" v-model="username" />
+            <input type="text" name="username" v-model="username" />
         </div>
         <div class="grid">
             Password:
-            <input type="password" autocomplete="password" v-model="password" />
+            <input type="password" name="password" v-model="password" />
         </div>
-        <button class="justify-self-end" @click="login" >Login</button>
+        <button class="justify-self-end" name="login" @click="login">Login</button>
     </div>
 </template>

src/pages/market/Scan.vue

@@ -1,21 +1,15 @@
 <script setup lang="ts">
 import { MarketType, MarketTypePrice, getHistory, getMarketType, getMarketTypes, getPrice, getPrices, jitaId } from "@/market";
-import { BuyModal, ScanResult, ScanResultTable } from '@/market/scan';
-import { usePocketBase } from "@/pocketbase";
-import { onMounted, ref, watch } from 'vue';
+import { ScanResult, ScanResultTable, useMarkeyScanStore } from '@/market/scan';
+import { BuyModal } from '@/market/track';
+import { ref, watch } from 'vue';
 
-const pb = usePocketBase();
-
-type MarketScan = {
-    id?: string;
-    owner: string;
-    types: number[];
-}
 
 const buyModal = ref<typeof BuyModal>();
 
 const item = ref("");
 
+const markeyScanStore = useMarkeyScanStore();
 const items = ref<ScanResult[]>([]);
 const addOrRelaod = async (type: MarketType) => {
     const typeID = type.id;
@@ -43,35 +37,24 @@ const addItem = async () => {
     addOrRelaod(type);
 }
 
-const getMarketScan = () => pb.collection('marketScans').getFirstListItem<MarketScan>("").catch(() => null);
 
-watch(items, async itms => {
-    const types = itms.map(i => i.type.id);
-    const marketScan = await getMarketScan();
+watch(items, async itms => markeyScanStore.setTypes(itms.map(i => i.type.id)));
+watch(() => markeyScanStore.types, async t => {
+    const typesToLoad = t.filter(t => !items.value.some(i => i.type.id === t));
 
-    if (marketScan?.id) {
-        pb.collection('marketScans').update(marketScan.id, { owner: pb.authStore.model!.id, types });
-    } else {
-        pb.collection('marketScans').create({ owner: pb.authStore.model!.id, types });
-    }
-});
-onMounted(async () => {
-    const marketScan = await getMarketScan();
-
-    if (!marketScan || marketScan.types.length === 0) {
+    if (typesToLoad.length === 0) {
         return;
     }
 
-    const prices = await getPrices(await getMarketTypes(marketScan.types));
+    const prices = await getPrices(await getMarketTypes(typesToLoad));
 
-    items.value = await Promise.all(marketScan.types.map(async i => {
+    items.value = [...items.value, ...(await Promise.all(typesToLoad.map(async i => {
         const price = prices.find(p => p.type.id === i) as MarketTypePrice;
         const history = await getHistory(jitaId, i);
         
         return { id: i, history, ...price };
-    }));
-});
-
+    })))];
+}, { immediate: true });
 </script>
 
 <template>

src/pages/market/Track.vue

@@ -1,31 +1,27 @@
 <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';
+import { BuyModal, SellModal, TrackResultTable, TrackedItem, useTrackedItemStore } from '@/market/track';
+import { ref, watch } from 'vue';
 
 const buyModal = ref<typeof BuyModal>();
 const sellModal = ref<typeof SellModal>();
 
-const itemsStorage = useTrackedItemsStorage();
+const trackedItemStore = useTrackedItemStore();
 const items = ref<TrackedItem[]>([]);
 
-const relaod = async () => {
-    if (itemsStorage.value.length === 0) {
+watch(() => trackedItemStore.items.value, async itms => {
+    if (itms.length === 0) {
         return;
     }
 
-    const prices = await getPrices(await getMarketTypes(itemsStorage.value.map(i => i.typeID)));
+    const prices = await getPrices(await getMarketTypes(itms.map(i => i.typeID)));
 
-    items.value = itemsStorage.value.map(i => {
+    items.value = itms.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>
 
@@ -34,8 +30,8 @@ onMounted(relaod);
         <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" />
+            <BuyModal ref="buyModal" />
+            <SellModal ref="sellModal" />
         </template>
     </div>
 </template>