cache history

src/market/Market.vue

@@ -1,22 +1,45 @@
 <script setup lang="ts">
+import { computedAsync, useStorage } from '@vueuse/core';
 import { ref } from 'vue';
-import { getHistoryQuartils, jitaId, MarketResult } from ".";
+import { MarketOrderHistory, MarketResult, getHistory, getHistoryQuartils, jitaId } from ".";
 import MarketReultTable from "./MarketResultTable.vue";
-import { searchMarketType } from "./type";
+import { getMarketType, searchMarketType } from "./type";
+
+type MarketItem = {
+    typeID: number;
+    history: MarketOrderHistory[];
+}
 
 const item = ref("");
-const result = ref<MarketResult[]>([]);
-const addItem = async () => {
-    const type = await searchMarketType(item.value);
-    const quartils = await getHistoryQuartils(jitaId, type.id);
+const items = useStorage<MarketItem[]>('market-items', []);
+const result = computedAsync<MarketResult[]>(() => Promise.all(items.value.map(async (i) => {
+    const [type, quartils] = await Promise.all([
+        getMarketType(i.typeID), 
+        getHistoryQuartils(i.history)
+    ]);
 
-    result.value = [...result.value, {
+    return {
         type,
-        q1: quartils[0],
-        median: quartils[1],
-        q3: quartils[2],
-    }];
+        q1: quartils.q1,
+        median: quartils.median,
+        q3: quartils.q3
+    };
+})), []);
+const addOrRelaod = async (typeID: number) => {
+    const history = await getHistory(jitaId, typeID);
+    const item = { typeID, history };
+
+    if (items.value.some(i => i.typeID === typeID)) {
+        items.value = items.value.map(i => i.typeID === typeID ? item : i);
+    } else {
+        items.value = [ ...items.value, item];
+    }
+}
+const addItem = async () => {
+    const type = await searchMarketType(item.value.split('\t')[0]);
+    
     item.value = "";
+    addOrRelaod(type.id);
 }
 </script>
 
@@ -24,12 +47,12 @@ const addItem = async () => {
     <div class="grid mb-2 mt-4">
         <div>
             <span>Item: </span>
-            <input type="text" class="w-96" v-model="item" />
+            <input type="text" class="w-96" v-model="item" @keyup.enter="addItem" />
             <button class="justify-self-end ms-2" @click="addItem">Add</button>
         </div>
     </div>
     <template v-if="result.length > 0">
         <hr />
-        <MarketReultTable :result="result" />
+        <MarketReultTable :result="result" @relaod="id => addOrRelaod(id)" />
     </template>
 </template>