pinia+track

src/market/track/BuyModal.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Modal from '@/Modal.vue';
+import { formatIsk } from '@/formaters';
+import { MarketType } from '@/market';
+import { ref } from 'vue';
+import { useTrackedItemStore } from './track';
+
+
+const trackedItemStore = useTrackedItemStore();
+
+const modalOpen = ref<boolean>(false);
+const type = ref<MarketType>();
+const suggestions = ref<Record<string, number>>({});
+const price = ref(1000000);
+const count = ref(1);
+
+const open = (t: MarketType, s?: Record<string, number> | number) => {
+    type.value = t;
+    count.value = 1;
+    
+    if (typeof s === 'number') {
+        suggestions.value = {};
+        price.value = s;
+    } else if (s) {
+        suggestions.value = s;
+        price.value = Object.values(s)[0];
+    } else {
+        suggestions.value = {};
+        price.value = 1000000;
+    }
+    modalOpen.value = true;
+}
+const add = () => { 
+    const id = type.value?.id;
+
+    if (!id) {
+        modalOpen.value = false;
+        return;
+    }
+
+    trackedItemStore.addTrackedItem(id, count.value, price.value);
+    modalOpen.value = false;
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+    <Modal v-model:open="modalOpen">
+        <div class="p-4 bg-slate-800 rounded flex">
+            <div class="flex me-2">
+                <span>Price: </span>
+                <div class="ms-2">
+                    <input  type="number" min="0" step="1" v-model="price" />
+                    <div class="px-2 mt-2 bg-slate-600 hover:bg-slate-700 border rounded cursor-pointer" v-for="(p, n) of suggestions" :key="n" @click="price = p">{{ n }}: {{ formatIsk(p) }}</div>
+                </div>
+            </div>
+            <div class="flex me-2 mb-auto">
+                <span>Count: </span>
+                <input class="ms-2" type="number" min="0" step="1" v-model="count" />
+            </div>
+            <button class="mb-auto" @click="add">Add</button>
+        </div>
+    </Modal>
+</template>

src/market/track/SellModal.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import Modal from '@/Modal.vue';
 import { MarketType } from '@/market';
-import { useTrackedItemsStorage } from '@/market/track';
 import { ref } from 'vue';
+import { useTrackedItemStore } from './track';
 
-interface Emit {
-    (e: 'removed'): void;
-}
 
-const emit = defineEmits<Emit>();
-
-const itemsStorage = useTrackedItemsStorage();
+const trackedItemStore = useTrackedItemStore();
 
 const modalOpen = ref<boolean>(false);
 const type = ref<MarketType>();
@@ -29,26 +24,7 @@ const remove = () => {
         return;
     }
 
-    const oldItem = itemsStorage.value.find(i => i.typeID === id);
-
-    if (!oldItem) {
-        modalOpen.value = false;
-        return;
-    }
-
-    const c = oldItem.count - count.value;
-
-    if (c > 0) {
-        const item = {
-            typeID: id,
-            count: oldItem.count - count.value,
-            averagePrice: oldItem.averagePrice
-        };
-        itemsStorage.value = itemsStorage.value.map(i => i.typeID === id ? item : i);
-    } else {
-        itemsStorage.value = itemsStorage.value.filter(i => i.typeID !== id);
-    }
-    emit('removed');
+    trackedItemStore.removeTrackedItem(id, count.value);
     modalOpen.value = false;
 }
 
@@ -57,7 +33,7 @@ defineExpose({ open });
 
 <template>
     <Modal v-model:open="modalOpen">
-        <div class="p-4 bg-slate-800 rounded mt-20 flex">
+        <div class="p-4 bg-slate-800 rounded flex">
             <div class="flex me-2 mb-auto">
                 <span>Count: </span>
                 <input class="ms-2" type="number" min="0" step="1" v-model="count" />

src/market/track/index.ts

@@ -1,6 +1,7 @@
 export * from './TrackedItem';
-export * from './storage';
+export * from './track';
 
+export { default as BuyModal } from './BuyModal.vue';
 export { default as SellModal } from './SellModal.vue';
 export { default as TrackResultTable } from './TrackResultTable.vue';
 

src/market/track/storage.ts

@@ -1,9 +0,0 @@
-import { createSharedComposable, useLocalStorage } from '@vueuse/core';
-
-export type TrackedMarketItemStorage = {
-    typeID: number;
-    count: number;
-    averagePrice: number;
-}
-
-export const useTrackedItemsStorage = createSharedComposable(() => useLocalStorage<TrackedMarketItemStorage[]>('market-track-items', []));

src/market/track/track.ts

@@ -0,0 +1,58 @@
+import { useCollection, usePocketBase } from "@/pocketbase";
+import { createSharedComposable, useLocalStorage } from '@vueuse/core';
+import { defineStore } from "pinia";
+import { RecordModel } from "pocketbase";
+import { computed } from "vue";
+
+export type TrackedMarketItemStorage = {
+    typeID: number;
+    count: number;
+    averagePrice: number;
+}
+
+interface TrackedMarketItem extends RecordModel {
+    owner: string;
+    typeID: number;
+    count: number;
+    averagePrice: number;
+}
+
+const marketTrackings = 'marketTrackings';
+
+export const useTrackedItemsStorage = createSharedComposable(() => useLocalStorage<TrackedMarketItemStorage[]>('market-track-items', []));
+
+export const useTrackedItemStore = defineStore(marketTrackings, () => {
+    const pb = usePocketBase();
+    const trackedItems = useCollection<TrackedMarketItem>(marketTrackings);
+    
+    const items = computed(() => trackedItems);
+    const addTrackedItem = async (typeID: number, count: number, averagePrice: number) => { 
+        const oldItem = trackedItems.value.find(i => i.typeID === typeID);
+
+        if (oldItem?.id) {
+            pb.collection(marketTrackings).update(oldItem.id, {
+                ...oldItem,
+                count: count + oldItem.count,
+                averagePrice: ((averagePrice * count) + (oldItem.averagePrice * oldItem.count)) / (count + oldItem.count)
+            });
+        } else {
+            pb.collection(marketTrackings).create({ owner: pb.authStore.model!.id, typeID, count, averagePrice});
+        }
+    };
+    const removeTrackedItem = async (typeID: number, count: number) => {
+        const oldItem = trackedItems.value.find(i => i.typeID === typeID);
+
+        if (!oldItem?.id) {
+            return;
+        } else if (oldItem.count > count) {
+            pb.collection(marketTrackings).update(oldItem.id, {
+                ...oldItem,
+                count: oldItem.count - count
+            });
+        } else {
+            pb.collection(marketTrackings).delete(oldItem.id);
+        }
+    };
+    
+    return { items, addTrackedItem, removeTrackedItem };
+});