rework hierarchy

src/pages/Index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div></div>
+</template>

src/pages/Market.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router';
+
+</script>
+
+<template>
+    <div class="mt-4">
+        <div class="flex border-b-2">
+            <RouterLink to="/market/scan" class="tab">
+                <span>Scan</span>
+            </RouterLink>
+            <RouterLink to="/market/track" class="tab">
+                <span>Tracking</span>
+            </RouterLink>
+        </div>
+        <RouterView />
+    </div>
+</template>
+
+<style scoped>
+a.tab {
+    @apply flex items-center p-2 me-2 rounded-t-md bg-slate-600 hover:bg-slate-700;
+    &.router-link-active {
+        @apply bg-emerald-500 hover:bg-emerald-700;
+    }
+}
+</style>

src/pages/Reprocess.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ReprocessInput, ReprocessItemValues, ReprocessResultTable, reprocess } from '@/reprocess';
+import { useStorage } from '@vueuse/core';
+import { ref } from 'vue';
+
+const items = ref("");
+const minerals = ref("");
+const efficiency = useStorage('reprocess-efficiency', 0.55);
+
+const result = ref<ReprocessItemValues[]>([]);
+
+const send = async () => result.value = await reprocess(items.value, minerals.value, efficiency.value);
+
+</script>
+
+<template>
+    <div class="grid mb-2 mt-4">
+        <div class="justify-self-end">
+            <span>Reprocess efficiency: </span>
+            <input type="number" min="0" max="1" step="0.05" v-model="efficiency" />
+        </div>
+    </div>
+    <div class="flex items-stretch">
+        <ReprocessInput name="Item JSON" v-model="items" />
+        <ReprocessInput name="Mineral JSON" v-model="minerals" />
+    </div>
+    <div class="grid my-2">
+        <button class="justify-self-end" @click="send">Send</button>
+    </div>
+    <template v-if="result.length > 0">
+        <hr />
+        <div class="grid mt-2">
+            <ReprocessResultTable :result="result" />
+        </div>
+    </template>
+</template>

src/pages/Tools.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HaulerTank, ModuleDamage } from '@/tools';
+</script>
+
+<template>
+    <div class="mt-4">
+        <HaulerTank />
+        <hr class="mb-4">
+        <ModuleDamage />
+    </div>
+</template>

src/pages/market/Scan.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { MarketOrderHistory, MarketType, getHistory, getMarketType, getMarketTypes, jitaId } from "@/market";
+import { ScanResult, ScanResultTable } from '@/market/scan';
+import { evepraisalAxiosInstance } from '@/service';
+import { useStorage } from '@vueuse/core';
+import { onMounted, ref, watch } from 'vue';
+
+type MarketItemStorage = {
+    typeID: number;
+    history: MarketOrderHistory[];
+}
+
+const item = ref("");
+/**
+ * @deprecated use itemsStorage instead
+ * 
+ * TODO: remove this in the future
+ */
+const oldStorage = useStorage<MarketItemStorage[]>('market-items', []);
+const itemsStorage = useStorage<MarketItemStorage[]>('market-scan-items', []);
+const items = ref<ScanResult[]>([]);
+const addOrRelaod = async (type: MarketType) => {
+    const typeID = type.id;
+    const [history, price] = await Promise.all([
+        getHistory(jitaId, typeID),
+        evepraisalAxiosInstance.post(`/appraisal.json?market=jita&persist=no&raw_textarea=${type.name}`)
+    ]);
+    const item = {
+        type,
+        history,
+        buy: price.data.appraisal.items[0].prices.buy.max,
+        sell: price.data.appraisal.items[0].prices.sell.min
+    };
+
+    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 reloadAll = async () => {
+    items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.type.id) })));
+}
+const addItem = async () => {
+    const type = await getMarketType(item.value.split('\t')[0]);
+    
+    item.value = "";
+    addOrRelaod(type);
+}
+
+watch(items, itms => itemsStorage.value = itms.map(i => ({ typeID: i.type.id, history: i.history })));
+onMounted(async () => {
+
+    if (itemsStorage.value.length === 0) {
+        if (oldStorage.value.length > 0) {
+            itemsStorage.value = oldStorage.value;
+            oldStorage.value = [];
+        } else {
+            return;
+        }
+        return;
+    }
+    
+    const types = await getMarketTypes(itemsStorage.value.map(i => i.typeID));
+    const prices: any = (await evepraisalAxiosInstance.post(`/appraisal.json?market=jita&persist=no&raw_textarea=${types.map(t => t.name).join("%0A")}`)).data;
+
+    items.value = itemsStorage.value.map(i => {
+        const type = types.find(t => t.id === i.typeID) as MarketType;
+        const price = prices.appraisal.items.find((p: any) => p.typeID === i.typeID);
+        
+        return {
+            ...i,
+            type: type,
+            buy: price.prices.buy.max,
+            sell: price.prices.sell.min
+        };
+    });
+});
+</script>
+
+<template>
+    <div class="grid mb-2 mt-4">
+        <div class="w-auto">
+            <span>Item: </span>
+            <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="items.length > 0">
+        <hr />
+        <ScanResultTable :items="items" @relaod="type => addOrRelaod(type)" @relaodAll="reloadAll" />
+    </template>
+</template>