From fb9567eee55192b1a99eb8c95ed854cb828a5fa7 Mon Sep 17 00:00:00 2001
From: Sirttas <sophiegaelle.calloch@gmail.com>
Date: Thu, 6 Aug 2026 08:02:23 +0200
Subject: [PATCH] feat(#48): Add location picker for acquisition, type info and
 appraisal pages

---
 src/components/SelectInput.vue               |  8 +++++++-
 src/market/acquisition/AcquisitionsPanel.vue | 19 ++++++++++++-------
 src/market/location/index.ts                 |  1 +
 src/market/location/location.ts              | 18 ++++++++++++++++++
 src/pages/ledger/ViewLedger.vue              |  4 +++-
 src/pages/market/Appraise.vue                | 10 +++++++++-
 src/pages/market/TypeInfo.vue                |  7 +++++--
 7 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 src/market/location/location.ts

diff --git a/src/components/SelectInput.vue b/src/components/SelectInput.vue
index a2975e2..0785941 100644
--- a/src/components/SelectInput.vue
+++ b/src/components/SelectInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T">
 import {vOnClickOutside} from '@vueuse/components';
 import {useVirtualList} from '@vueuse/core';
-import {computed, ref} from 'vue';
+import {computed, ref, watch} from 'vue';
 
 interface Props {
   items: T[];
@@ -15,6 +15,12 @@ const props = withDefaults(defineProps<Props>(), {
 const modelValue = defineModel<T>();
 
 const isOpen = ref(false);
+
+watch(() => props.items, items => {
+    if (items.length > 0) {
+        isOpen.value = true;
+    }
+});
 const currentIndex = ref(-1);
 const {list, scrollTo, containerProps, wrapperProps} = useVirtualList(computed(() => props.items), {
     itemHeight: () => props.itemHeight,
diff --git a/src/market/acquisition/AcquisitionsPanel.vue b/src/market/acquisition/AcquisitionsPanel.vue
index f28e55c..ae0344f 100644
--- a/src/market/acquisition/AcquisitionsPanel.vue
+++ b/src/market/acquisition/AcquisitionsPanel.vue
@@ -3,6 +3,7 @@ import {getMarketTypes, getPrices, MarketTypePrice} from "@/market";
 import {ref, watch} from 'vue';
 import {ArrowPathIcon} from '@heroicons/vue/24/outline';
 import {useAutoRefresh} from '@/composables';
+import {MarketLocationInput, useMarketLocationStore} from '@/market/location';
 import {AcquiredType} from './AcquiredType';
 import {RawAcquiredType} from './acquisition';
 import AcquisitionResultTable from './AcquisitionResultTable.vue';
@@ -20,6 +21,7 @@ const props = defineProps<Props>();
 const buyModal = ref<typeof BuyModal>();
 const sellModal = ref<typeof SellModal>();
 
+const marketLocationStore = useMarketLocationStore();
 const enriched = ref<AcquiredType[]>([]);
 
 const refresh = async (itms: RawAcquiredType[] = props.items) => {
@@ -29,7 +31,7 @@ const refresh = async (itms: RawAcquiredType[] = props.items) => {
     }
 
     const types = await getMarketTypes([...new Set(itms.map(i => i.type))]);
-    const prices = await getPrices(types);
+    const prices = await getPrices(types, marketLocationStore.location.id);
 
     enriched.value = itms.map(i => {
         const price = prices.find(p => p.type.id === i.type) as MarketTypePrice;
@@ -43,18 +45,21 @@ const refresh = async (itms: RawAcquiredType[] = props.items) => {
     });
 };
 
-watch(() => props.items, refresh, {immediate: true});
+watch([() => props.items, () => marketLocationStore.location], ([itms]) => refresh(itms), {immediate: true});
 
 const {active: autoRefresh, toggle: toggleAutoRefresh} = useAutoRefresh(() => refresh(), 5 * 60 * 1000);
 </script>
 
 <template>
     <div class="flex">
-        <div class="ms-auto flex">
-            <button class="rounded-e-none" @click="refresh()">Refresh</button>
-            <button class="rounded-s-none border-s-0 flex items-center" :class="{ 'bg-slate-700': autoRefresh }" title="Auto refresh" @click="toggleAutoRefresh">
-                <ArrowPathIcon class="w-5 h-5" :class="{ 'animate-spin': autoRefresh }" />
-            </button>
+        <div class="ms-auto flex items-center gap-2">
+            <MarketLocationInput v-model="marketLocationStore.location" />
+            <div class="flex">
+                <button class="rounded-e-none" @click="refresh()">Refresh</button>
+                <button class="rounded-s-none border-s-0 flex items-center" :class="{ 'bg-slate-700': autoRefresh }" title="Auto refresh" @click="toggleAutoRefresh">
+                    <ArrowPathIcon class="w-5 h-5" :class="{ 'animate-spin': autoRefresh }" />
+                </button>
+            </div>
         </div>
     </div>
     <template v-if="enriched.length > 0">
diff --git a/src/market/location/index.ts b/src/market/location/index.ts
index bdbb095..75eef88 100644
--- a/src/market/location/index.ts
+++ b/src/market/location/index.ts
@@ -1,2 +1,3 @@
+export * from './location';
 export * from './MarketLocation';
 export { default as MarketLocationInput } from './MarketLocationInput.vue';
diff --git a/src/market/location/location.ts b/src/market/location/location.ts
new file mode 100644
index 0000000..fd89b40
--- /dev/null
+++ b/src/market/location/location.ts
@@ -0,0 +1,18 @@
+import {useLocalStorage} from "@vueuse/core";
+import {defineStore} from "pinia";
+import type {MarketLocation} from "./MarketLocation";
+
+const defaultLocation: MarketLocation = {
+    id: 60003760,
+    name: 'Jita IV - Moon 4 - Caldari Navy Assembly Plant',
+    systemId: 30000142,
+    systemName: 'Jita',
+    regionId: 10000002,
+    regionName: 'The Forge',
+};
+
+export const useMarketLocationStore = defineStore("marketLocation", () => {
+    const location = useLocalStorage<MarketLocation>("market-location", defaultLocation);
+
+    return {location};
+});
diff --git a/src/pages/ledger/ViewLedger.vue b/src/pages/ledger/ViewLedger.vue
index b472fde..87276c8 100644
--- a/src/pages/ledger/ViewLedger.vue
+++ b/src/pages/ledger/ViewLedger.vue
@@ -3,9 +3,11 @@ import {RouterLink, RouterView} from 'vue-router';
 import {appraiseItemBalances, getLedgerBalance, isMain, LedgerLabel, useLedgerParam} from "@/ledger";
 import {routeNames} from "@/routes.ts";
 import {getMarketTypes, getPrices, IskLabel} from "@/market";
+import {useMarketLocationStore} from '@/market/location';
 import {computedAsync} from "@vueuse/core";
 
 const {ledgerId, ledger} = useLedgerParam();
+const marketLocationStore = useMarketLocationStore();
 
 const itemAppraisal = computedAsync(async () => {
   if (!ledgerId.value) {
@@ -19,7 +21,7 @@ const itemAppraisal = computedAsync(async () => {
   }
 
   const types = await getMarketTypes([...new Set(itemBalances.map(i => i.typeId))]);
-  const prices = await getPrices(types);
+  const prices = await getPrices(types, marketLocationStore.location.id);
   const appraisal = appraiseItemBalances(itemBalances, prices);
 
   return appraisal.buy === 0 && appraisal.sell === 0 ? undefined : appraisal;
diff --git a/src/pages/market/Appraise.vue b/src/pages/market/Appraise.vue
index e3c9301..ceaa3c1 100644
--- a/src/pages/market/Appraise.vue
+++ b/src/pages/market/Appraise.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import {Dropdown} from '@/components';
 import {AppraisalItemValue, AppraisalResultTable, appraise} from '@/market/appraisal';
+import {MarketLocationInput, useMarketLocationStore} from '@/market/location';
 import {ref} from 'vue';
 
 const items = ref('');
 const showInputs = ref(true);
 
+const marketLocationStore = useMarketLocationStore();
 const result = ref<AppraisalItemValue[]>([]);
 
-const send = async () => result.value = await appraise(items.value);
+const send = async () => result.value = await appraise(items.value, marketLocationStore.location.id);
 </script>
 
 <template>
@@ -20,6 +22,12 @@ const send = async () => result.value = await appraise(items.value);
                 <textarea class="mt-1" v-model="items" placeholder="Paste an EVE inventory listing" />
             </div>
         </div>
+        <div class="mx-1 mt-2">
+            <span>Location</span>
+            <div class="mt-1">
+                <MarketLocationInput v-model="marketLocationStore.location" />
+            </div>
+        </div>
         <div class="grid my-2">
             <button class="justify-self-end" @click="send" :disabled="!items.trim()">Send</button>
         </div>
diff --git a/src/pages/market/TypeInfo.vue b/src/pages/market/TypeInfo.vue
index 468ba82..a641970 100644
--- a/src/pages/market/TypeInfo.vue
+++ b/src/pages/market/TypeInfo.vue
@@ -2,6 +2,7 @@
 import {ClipboardButton} from '@/components';
 import {getMarketType, getPrice, MarketType, MarketTypeInput, useMarketTaxStore} from "@/market";
 import {AcquisitionResultTable, BuyModal} from '@/market/acquisition';
+import {MarketLocationInput, useMarketLocationStore} from '@/market/location';
 import {ScanResultTable, toScanResult} from '@/market/scan';
 import {acquisitionApi, marketApi} from "@/mammon";
 import {ShoppingCartIcon} from '@heroicons/vue/24/outline';
@@ -19,8 +20,9 @@ const item = ref<MarketType>();
 const inputItem = ref<MarketType>();
 
 const marketTaxStore = useMarketTaxStore();
+const marketLocationStore = useMarketLocationStore();
 const days = useStorage('market-scan-days', 365);
-const price = computedAsync(() => item.value ? getPrice(item.value) : undefined);
+const price = computedAsync(() => item.value ? getPrice(item.value, marketLocationStore.location.id) : undefined);
 const result = computedAsync(async () => {
     if (!item.value) {
         return undefined;
@@ -83,10 +85,11 @@ watch(useRoute(), async route => {
 
 <template>
     <div class="grid mb-2 mt-4">
-        <div class="w-auto flex">
+        <div class="w-auto flex items-center">
             <span>Item: </span>
             <MarketTypeInput class="ms-2" v-model="inputItem" @submit="view"/>
             <button class="justify-self-end ms-2" @click="view">View</button>
+            <MarketLocationInput class="ms-auto" v-model="marketLocationStore.location" />
         </div>
     </div>
     <template v-if="item">