days and filter

src/market/Market.vue

@@ -1,57 +1,45 @@
 <script setup lang="ts">
 import { ArrowPathIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
-import { onMounted, ref } from 'vue';
-import { MarketOrderHistory, MarketResult, getHistory, getHistoryQuartils, jitaId } from ".";
+import { onMounted, ref, watch } from 'vue';
+import { MarketOrderHistory, MarketResult, getHistory, jitaId } from ".";
 import MarketReultTable from "./MarketResultTable.vue";
-import { getMarketType, searchMarketType } from "./type";
+import { MarketType, getMarketType, getMarketTypes } from "./type";
 
-type MarketItem = {
+type MarketItemStorage = {
     typeID: number;
     history: MarketOrderHistory[];
 }
 
 const item = ref("");
-const items = useStorage<MarketItem[]>('market-items', []);
-const result = ref<MarketResult[]>([]);
-const processResult = async (i: MarketItem) => {
-    const type = getMarketType(i.typeID);
-    const quartils = getHistoryQuartils(i.history)
-
-    return {
-        type: await type,
-        q1: quartils.q1,
-        median: quartils.median,
-        q3: quartils.q3
-    };
-}
-const addOrRelaod = async (typeID: number) => {
+const itemsStorage = useStorage<MarketItemStorage[]>('market-items', []);
+const items = ref<MarketResult[]>([]);
+const addOrRelaod = async (type: MarketType) => {
+    const typeID = type.id;
     const history = await getHistory(jitaId, typeID);
-    const item = { typeID, history };
+    const item = { type, history };
 
-    if (items.value.some(i => i.typeID === typeID)) {
-        items.value = items.value.map(i => i.typeID === typeID ? item : i);
+    if (items.value.some(i => i.type.id === typeID)) {
+        items.value = items.value.map(i => i.type.id === typeID ? item : i);
     } else {
         items.value = [ ...items.value, item];
     }
-    
-    const filteredResult = result.value.filter(r => r.type.id !== typeID);
-    
-    result.value = [ ...filteredResult, await processResult(item) ];
 }
 const reloadAll = async () => {
-    items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.typeID) })));
-    
-    result.value = await Promise.all(items.value.map(processResult));
+    items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.type.id) })));
 }
 const addItem = async () => {
-    const type = await searchMarketType(item.value.split('\t')[0]);
+    const type = await getMarketType(item.value.split('\t')[0]);
     
     item.value = "";
-    addOrRelaod(type.id);
+    addOrRelaod(type);
 }
+
+watch(items, itms => itemsStorage.value = itms.map(i => ({ typeID: i.type.id, history: i.history })));
 onMounted(async () => {
-    result.value = await Promise.all(items.value.map(processResult));
+    const types = await getMarketTypes(itemsStorage.value.map(i => i.typeID));
+
+    items.value = itemsStorage.value.map(i => ({ ...i, type: types.find(t => t.id === i.typeID) as MarketType }));
 })
 </script>
 
@@ -64,8 +52,8 @@ onMounted(async () => {
         </div>
         <button class="justify-self-end flex" @click="reloadAll"><ArrowPathIcon class="h-6 w-6 me-2" />Reload all</button>
     </div>
-    <template v-if="result.length > 0">
+    <template v-if="items.length > 0">
         <hr />
-        <MarketReultTable :result="result" @relaod="id => addOrRelaod(id)" />
+        <MarketReultTable :items="items" @relaod="type => addOrRelaod(type)" />
     </template>
 </template>