type info

src/pages/Market.vue

@@ -6,6 +6,9 @@ import { RouterLink, RouterView } from 'vue-router';
 <template>
     <div class="mt-4">
         <div class="flex border-b-2 border-emerald-500">
+            <RouterLink :to="{name: 'market-type'}" class="tab">
+                <span>Item Info</span>
+            </RouterLink>
             <RouterLink to="/market/scan" class="tab">
                 <span>Scan</span>
             </RouterLink>

src/pages/market/Scan.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { MarketType, MarketTypePrice, getHistory, getMarketTypes, jitaId, useApraisalStore } from "@/market";
-import { ScanResult, ScanResultTable, useMarketScanStore } from '@/market/scan';
+import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, jitaId, useApraisalStore } from "@/market";
+import { ScanResult, ScanResultTable, createResult, useMarketScanStore } from '@/market/scan';
 import { BuyModal } from '@/market/track';
-import MarketTypeInput from "@/market/type/MarketTypeInput.vue";
 import { ref, watch } from 'vue';
 
 
@@ -57,12 +56,7 @@ watch(() => markeyScanStore.types, async t => {
 
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
-    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 };
-    })))];
+    items.value = [...items.value, ...(await Promise.all(typesToLoad.map(i => createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice))))];
 }, { immediate: true });
 </script>
 

src/pages/market/TypeInfo.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ClipboardButton } from '@/components';
+import { MarketType, MarketTypeInput, getMarketType, useApraisalStore } from "@/market";
+import { ScanResultTable, createResult, useMarketScanStore } from '@/market/scan';
+import { BuyModal } from '@/market/track';
+import { BookmarkIcon, BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
+import { computedAsync } from '@vueuse/core/index.cjs';
+import log from "loglevel";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const buyModal = ref<typeof BuyModal>();
+
+const router = useRouter();
+
+const item = ref<MarketType>();
+const inputItem = ref<MarketType>();
+
+const apraisalStore = useApraisalStore();
+const price = computedAsync(() => item.value ? apraisalStore.getPrice(item.value) : undefined);
+const markeyScanStore = useMarketScanStore();
+const result = computedAsync(async () => item.value && price.value ? await createResult(item.value?.id, price.value) : undefined);
+
+const isTracked = computed(() => item.value ? markeyScanStore.types.includes(item.value.id) : false);
+const toogleTracking = () => {
+    if (!item.value) {
+        return;
+    }
+    if (isTracked.value) {
+        markeyScanStore.removeType(item.value.id);
+    } else {
+        markeyScanStore.addType(item.value.id);
+    }
+}
+
+const view = () => {
+    if (!inputItem.value) {
+        return;
+    }
+
+    router.push({
+        name: 'market-type',
+        params: {
+            type: inputItem.value.id
+        }
+    });
+}
+
+watch(useRoute(), async route => {
+    if (route.params.type) {
+        const id = parseInt(typeof route.params.type === 'string' ? route.params.type : route.params.type[0]);
+
+        item.value = await getMarketType(id);
+        inputItem.value = item.value;
+        log.info('Loaded item:', item.value);
+    } else {
+        item.value = undefined;
+        inputItem.value = undefined;
+        log.info('No item to load');
+    }
+}, { immediate: true })
+</script>
+
+<template>
+    <div class="grid mb-2 mt-4">
+        <div class="w-auto flex">
+            <span>Item: </span>
+            <MarketTypeInput class="ms-2" v-model="inputItem" @submit="view"/>
+            <button class="justify-self-end ms-2" @click="view">View</button>
+        </div>
+    </div>
+    <template v-if="item">
+        <hr>
+        <div class="p-2 mb-4 flex">
+            <img v-if="item.id" :src="`https://images.evetech.net/types/${item.id}/icon?size=64`" class="type-image inline-block me-2" />
+            <div class="inline-block align-top">
+                <div class="flex">
+                    <span class="text-lg font-semibold">{{ item.name }}</span>
+                    <div class="ms-auto">
+                        <ClipboardButton class="ms-1" :value="item.name" />
+                        <button v-if="price" class="btn-icon ms-1" @click="buyModal?.open(item, { 'Buy': price.buy, 'Sell': price.sell })"><ShoppingCartIcon /></button>
+                        <button class="btn-icon ms-1" :title="isTracked ? 'Untrack' : 'Track'" @click="toogleTracking">
+                            <BookmarkSlashIcon v-if="isTracked" />
+                            <BookmarkIcon v-else />
+                        </button>
+                    </div>
+                </div>
+                <p v-if="item.description" class="text-sm">{{ item.description }}</p>
+            </div>
+        </div>
+        <ScanResultTable v-if="result" :items="[result]" infoOnly />
+    </template>
+    <BuyModal ref="buyModal" />
+</template>
+
+<style scoped lang="postcss">
+img.type-image {
+    width: 64px;
+    height: 64px;
+}
+</style>