tracking

src/market/scan/BuyModal.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import Modal from '@/Modal.vue';
+import { formatIsk } from '@/formaters';
+import { MarketType } from '@/market';
+import { useTrackedItemsStorage } from '@/market/track';
+import { ref } from 'vue';
+
+interface Emit {
+    (e: 'added'): void;
+}
+
+const emit = defineEmits<Emit>();
+
+const itemsStorage = useTrackedItemsStorage();
+
+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;
+    }
+
+    const oldItem = itemsStorage.value.find(i => i.typeID === id);
+
+    if (oldItem) {
+        const item = {
+            typeID: id,
+            count: count.value + oldItem.count,
+            averagePrice: ((price.value * count.value) + (oldItem.averagePrice * oldItem.count)) / (count.value + oldItem.count)
+        };
+        itemsStorage.value = itemsStorage.value.map(i => i.typeID === id ? item : i);
+    } else {
+        const item = {
+            typeID: id,
+            count: count.value,
+            averagePrice: price.value
+        };
+        itemsStorage.value = [ ...itemsStorage.value, item ];
+    }
+    emit('added');
+    modalOpen.value = false;
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+    <Modal v-model:open="modalOpen">
+        <div class="p-4 bg-slate-800 rounded mt-20 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/scan/ScanResultTable.vue

@@ -2,7 +2,7 @@
 import { formatIsk, percentFormater } from '@/formaters';
 import { MarketType, MarketTypeLabel } from "@/market";
 import { SortableHeader, useSort } from '@/table';
-import { ArrowPathIcon } from '@heroicons/vue/24/outline';
+import { ArrowPathIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
 import { ScanResult, getHistoryQuartils } from '.';
@@ -26,6 +26,7 @@ interface Props {
 interface Emits {
     (e: 'relaod', type: MarketType): void;
     (e: 'relaodAll'): void;
+    (e: 'buy', type: MarketType, buy: number, sell: number): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -113,7 +114,8 @@ const getLineColor = (result: Result) => {
                 <td class="text-right">{{ formatIsk(r.q3) }}</td>
                 <td class="text-right">{{  percentFormater.format(r.profit) }}</td>
                 <td class="text-right">
-                    <button class="btn-icon-stroke" @click="$emit('relaod', r.type)"><ArrowPathIcon /></button>
+                    <button class="btn-icon-stroke me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
+                    <button class="btn-icon-stroke me-1" @click="$emit('relaod', r.type)"><ArrowPathIcon /></button>
                 </td>
             </tr>
         </tbody>

src/market/scan/index.ts

@@ -1,4 +1,6 @@
 export * from './HistoryQuartils';
 export * from './scan';
 
+export { default as BuyModal } from './BuyModal.vue';
 export { default as ScanResultTable } from './ScanResultTable.vue';
+