draft pref

package.json

@@ -16,7 +16,6 @@
     "@vueuse/integrations": "^10.2.1",
     "axios": "^1.4.0",
     "axios-rate-limit": "^1.3.1",
-    "gemory": "file:",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4",
     "oidc-client-ts": "^3.0.1",
@@ -31,9 +30,9 @@
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
-    "vite": "^6.3.5",
+    "vite": "^5.2.11",
     "vite-plugin-runtime-env": "^0.1.1",
-    "vitest": "^3.1.3",
+    "vitest": "^1.6.0",
     "vue-tsc": "^2.0.18"
   }
 }

src/auth.ts

@@ -17,7 +17,7 @@ export const useAuthStore = defineStore('auth', () => {
     });
 
     const user = ref<User>();
-    const isLoggedIn = computed(() => user.value?.expired === false);
+    const isLoggedIn = computed(() => !!user.value);
     const accessToken = computed(() => user.value?.access_token);
     const username = computed(() => user.value?.profile.name ?? "");
     const userId = computed(() => user.value?.profile.sub ?? "");

src/components/ProgressBar.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-
-interface Props {
-    value: number;
-    total: number;
-}
-
-const props = defineProps<Props>();
-
-const percentage = computed(() => (props.value / props.total) * 100);
-</script>
-
-<template>
-    <div class="w-full bg-gray-600 rounded-full h-2.5">
-        <div class="bg-emerald-600 h-2.5 rounded-full" :style="{ width: percentage + '%'}" />
-    </div>
-</template>

src/components/index.ts

@@ -2,7 +2,6 @@ export { default as ClipboardButton } from './ClipboardButton.vue';
 export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
-export { default as ProgressBar } from './ProgressBar.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
 export { default as Tooltip } from './tooltip/Tooltip.vue';
 

src/components/table/VirtualScrollTable.vue

@@ -6,8 +6,7 @@ interface Props {
     list?: any[];
     itemHeight: number;
     headerHeight?: number;
-    footerHeight?: number;
+    bottom?: string;
-    bottom?: string; // FIXME: use css variable
 }
 
 
@@ -36,16 +35,11 @@ const computedHeaderHeight = computed(() => {
     
     return h + 'px';
 })
-const computedFooterHeight = computed(() => {
-    const h = props.footerHeight ?? 0;
-    
-    return h + 'px';
-})
 const computedWrapperProps = computed(() => ({
     ...wrapperProps.value,
     style: {
         ...wrapperProps.value.style,
-        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + ${computedFooterHeight.value} + 1px)`
+        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + 1px)`
     }
 }))
 const itemHeightStyle = computed(() => {
@@ -78,10 +72,6 @@ div.table-container {
                 @apply sticky z-10;
                 top: -1px;
             }
-            >tfoot {
-                @apply bg-slate-600 sticky z-10;
-                bottom: -1px;
-            }
             >*>tr, >*>tr>td {
                 height: v-bind(itemHeightStyle);
             }
@@ -89,7 +79,6 @@ div.table-container {
     }
     &::-webkit-scrollbar-track {
         margin-top: v-bind(computedHeaderHeight);
-        margin-bottom: v-bind(computedFooterHeight);
     }
 }
 </style>

src/marbas/marbasService.ts

@@ -10,13 +10,13 @@ export const marbasAxiosInstance = axios.create({
     },
 })
 
-const authStore = useAuthStore();
+marbasAxiosInstance.interceptors.request.use(r => {
+    const authStore = useAuthStore();
 
-marbasAxiosInstance.interceptors.request.use(async r => {
     if (!authStore.isLoggedIn) {
-        await authStore.redirect();
+        throw new Error("Not logged in");
     }
-
+    
     const accessToken = authStore.accessToken;
 
     if (accessToken) {
@@ -29,12 +29,6 @@ marbasAxiosInstance.interceptors.request.use(async r => {
 })
 logResource(marbasAxiosInstance)
 marbasAxiosInstance.interceptors.response.use(async r => {
-    if (r.status === 401) {
-        await authStore.redirect();
-
-        return marbasAxiosInstance.request(r.config);
-    }
-
     let next: string = r.data?.next;
     let results = r.data?.results;
 

src/market/acquisition/AcquisitionResultTable.vue

@@ -120,39 +120,12 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
 })
 const getLineColor = (result: Result) => {
     if (result.precentProfit >= (threshold.value / 100)) {
-        return 'line-green'; 
+        return 'line-green';
     } else if (result.precentProfit < 0) {
         return 'line-red';
     }
     return '';
 }
-const total = computed(() => {
-    if (sortedArray.value.length <= 1) {
-        return null;
-    }
-
-    const first = sortedArray.value[0];
-
-    if (!first) {
-        return null;
-    }
-
-    const sameItem = sortedArray.value.every(r => r.type.id === first.type.id);
-    const quantity = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.quantity, 0) : 0;
-    const totalRemaining = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.remaining, 0) : 0;
-    const price = sortedArray.value.reduce((acc, r) => acc + r.price * r.remaining, 0) / totalRemaining;
-    const precentProfit = marketTaxStore.calculateProfit(price, first.sell);
-    const iskProfit = sortedArray.value.reduce((acc, r) => acc + r.iskProfit, 0);
-
-    return {
-        sameItem,
-        price,
-        remaining: totalRemaining,
-        quantity,
-        precentProfit,
-        iskProfit
-    };
-});
 </script>
 
 <template>
@@ -169,7 +142,7 @@ const total = computed(() => {
             </div>
         </div>
     </div>
-    <VirtualScrollTable :list="sortedArray" :itemHeight="33" :footerHeight="!!total ? 33 : 0" bottom="1rem">
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
         <template #default="{ list }">
             <thead>
                 <tr>
@@ -205,37 +178,6 @@ const total = computed(() => {
                     </td>
                 </tr>
             </tbody>
-            <tfoot v-if="!!total">
-                <tr>
-                    <td v-if="showColumn('name')">Total</td>
-                    <td v-if="showColumn('buy')">
-                        <template v-if="!showColumn('name')">Total</template>
-                    </td>
-                    <td v-if="showColumn('sell')">
-                        <template v-if="!showColumn('name') && !showColumn('buy')">Total</template>
-                    </td>
-                    <td v-if="showColumn('date')">
-                        <template v-if="!showColumn('name') && !showColumn('buy') && !showColumn('sell')">Total</template>
-                    </td>
-                    <td v-if="showColumn('price')"  class="text-right">
-                        <template v-if="total.sameItem">
-                            {{ formatIsk(total.price) }}
-                        </template>
-                    </td>
-                    <td v-if="showColumn('remaining')"  class="text-right">
-                        <template v-if="total.sameItem">
-                            {{ total.remaining }}/{{ total.quantity }}
-                        </template>
-                    </td>
-                    <td v-if="showColumn('precentProfit')"  class="text-right">
-                        <template v-if="total.sameItem">
-                            {{ percentFormater.format(total.precentProfit) }}
-                        </template>
-                    </td>
-                    <td v-if="showColumn('iskProfit')"  class="text-right">{{ formatIsk(total.iskProfit) }}</td>
-                    <td v-if="showColumn('buttons')" />
-                </tr>
-            </tfoot>
         </template>
         <template #empty>
             <div class="text-center mt-4">

src/market/acquisition/acquisition.ts

@@ -13,13 +13,14 @@ export type MarbasAcquiredType = MarbasObject & {
     price: number;
     date: Date;
     source: AcquiredTypeSource;
+    user: number;
 }
 
 type RawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'date'> & {
     date: string;
 }
 
-type InsertableRawMarbasAcquiredType = Omit<MarbasAcquiredType, 'id' | 'date'>;
+type InsertableRawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'id' | 'user' | 'date'>;
 
 const mapRawMarbasAcquiredType = (raw: RawMarbasAcquiredType): MarbasAcquiredType => ({
     ...raw,
@@ -66,10 +67,8 @@ export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
         await marbasAxiosInstance.put(`${endpoint}${item.id}/`, item);
         log.info(`Acquired type ${item.id} remaining: ${item.remaining}`, item);
     };
+    
+    marbasAxiosInstance.get<RawMarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data.map(mapRawMarbasAcquiredType));
 
-    const refresh = () => marbasAxiosInstance.get<RawMarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data.map(mapRawMarbasAcquiredType));
+    return { acquiredTypes: types, addAcquiredType, removeAcquiredType };
-
-    refresh();
-
-    return { acquiredTypes: types, addAcquiredType, removeAcquiredType, refresh };
 });

src/market/history/EsiMarketOrderHistory.ts

@@ -23,8 +23,8 @@ const historyCache: RegionalMarketCache<EsiMarketOrderHistory[]> = new RegionalM
     return date;
 });
 
-export const getHistory = async (typeId: number, regionId?: number): Promise<EsiMarketOrderHistory[]> => {
+export const getHistory = async (tyeId: number, regionId?: number): Promise<EsiMarketOrderHistory[]> => {
     const rId = regionId ?? jitaId;
 
-    return historyCache.computeIfAbsent(rId, typeId, async () => (await esiAxiosInstance.get(`/markets/${rId}/history/`, { params: { type_id: typeId } })).data);
+    return historyCache.computeIfAbsent(rId, tyeId, async () => (await esiAxiosInstance.get(`/markets/${rId}/history/`, { params: { type_id: tyeId } })).data);
 }

src/market/market.ts

@@ -1 +1,3 @@
+
 export const jitaId = 10000002;
+

src/market/tracking/TrackingResultTable.vue

@@ -6,7 +6,6 @@ import { getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTax
 import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
-import { useAcquiredTypesStore } from '../acquisition';
 import { TrackingResult } from './tracking';
 
 type Result = {
@@ -18,7 +17,6 @@ type Result = {
     q1: number;
     median: number;
     q3: number;
-    acquisitions: number;
     profit: number;
     score: number;
 }
@@ -46,7 +44,6 @@ const props = withDefaults(defineProps<Props>(), {
 defineEmits<Emits>();
 
 const marketTaxStore = useMarketTaxStore();
-const acquiredTypesStore = useAcquiredTypesStore();
 
 const days = useStorage('market-tracking-days', 365);
 const threshold = useStorage('market-tracking-threshold', 10);
@@ -66,9 +63,6 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
         const quartils = getHistoryQuartils(r.history, days.value);
         const profit = quartils.q1 === 0 ||  quartils.q3 === 0 ? 0 : marketTaxStore.calculateProfit(quartils.q1, quartils.q3);
         const score = profit <= 0 ? 0 : Math.sqrt((Math.pow(quartils.totalVolume, 1.1) * Math.pow(quartils.q1, 1.2) *  Math.pow(profit, 0.5) * Math.pow(Math.max(1, r.orderCount), -0.7)) / days.value);
-        const acquisitions = columnsToIgnore.value.includes('acquisitions') ? 0 : acquiredTypesStore.acquiredTypes
-            .filter(t => t.type === r.type.id)
-            .reduce((a, b) => a + b.remaining, 0);
 
         return {
             type: r.type,
@@ -79,7 +73,6 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
             q1: quartils.q1,
             median: quartils.median,
             q3: quartils.q3,
-            acquisitions,
             profit,
             score
         };
@@ -135,7 +128,6 @@ const getLineColor = (result: Result) => {
                     <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
-                    <SortableHeader v-bind="headerProps" sortKey="acquisitions">Acquisitions</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
                 </tr>
             </thead>
@@ -151,7 +143,6 @@ const getLineColor = (result: Result) => {
                     <td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.data.q3) }}</td>
                     <td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.data.profit) }}</td>
                     <td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.data.score) }}</td>
-                    <td v-if="showColumn('acquisitions')" class="text-right">{{ r.data.acquisitions }}</td>
                     <td v-if="showColumn('buttons')" class="text-right">
                         <button class="btn-icon me-1" title="Add acquisitions" @click="$emit('buy', r.data.type, r.data.buy, r.data.sell)"><ShoppingCartIcon /></button>
                         <button class="btn-icon me-1" title="Untrack" @click="$emit('remove', r.data.type)"><BookmarkSlashIcon /></button>

src/pages/market/Acquisitions.vue

@@ -6,12 +6,11 @@ import { ref, watch } from 'vue';
 const buyModal = ref<typeof BuyModal>();
 const sellModal = ref<typeof SellModal>();
 
+
 const apraisalStore = useApraisalStore();
 const acquiredTypesStore = useAcquiredTypesStore();
 const items = ref<AcquiredType[]>([]);
 
-const refresh = async () => await acquiredTypesStore.refresh();
-
 watch(() => acquiredTypesStore.acquiredTypes, async itms => {
     if (itms.length === 0) {
         return;
@@ -35,9 +34,6 @@ watch(() => acquiredTypesStore.acquiredTypes, async itms => {
 
 <template>
     <div class="mt-4">
-        <div class="flex">
-            <button class="ms-auto" @click="refresh">Refresh</button>
-        </div>
         <template v-if="items.length > 0">
             <AcquisitionResultTable :items="items" @buy="(types, price, buy, sell) => buyModal?.open(types[0].type, { 'Price': price, 'Buy': buy, 'Sell': sell })" @sell="types => sellModal?.open(types)" ignoredColums="date" />
             <BuyModal ref="buyModal" />

src/pages/market/Tracking.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Modal, ProgressBar } from "@/components";
 import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, useApraisalStore } from "@/market";
 import { BuyModal } from '@/market/acquisition';
 import { TrackingResult, TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
@@ -57,6 +56,10 @@ watch(() => marketTrackingStore.types, async t => {
 
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
+    items.value = [
+        ...items.value
+    ];
+
     typesToLoad.forEach(async i => items.value.push(await createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice)));
 }, { immediate: true });
 </script>
@@ -73,10 +76,5 @@ watch(() => marketTrackingStore.types, async t => {
         <hr />
         <TrackingResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" @remove="removeItem" />
         <BuyModal ref="buyModal" />
-        <Modal :open="items.length > 0 && items.length < marketTrackingStore.types.length">
-            <div class="ms-auto me-auto mb-2 w-96">
-                <ProgressBar :value="items.length" :total="marketTrackingStore.types.length" />
-            </div>
-        </Modal>
     </template>
 </template>

src/pages/market/TypeInfo.vue

@@ -103,7 +103,7 @@ watch(useRoute(), async route => {
         </div>
         <div v-if="result" class="mb-4">
             <span>Market Info:</span>
-            <TrackingResultTable :items="[result]" infoOnly :ignoredColums="['name', 'acquisitions']" />
+            <TrackingResultTable :items="[result]" infoOnly ignoredColums="name" />
         </div>
         <div v-if="acquisitions && acquisitions.length > 0">
             <span>Acquisitions:</span>

src/preferences/Preference.ts

@@ -0,0 +1,22 @@
+export class Preference<T> {
+    private key: string;
+    private description: string;
+    private value?: T;
+    private defaultValue?: T;
+
+    constructor(key: string, description: string, defaultValue?: T) {
+        this.key = key;
+        this.description = description;
+        this.defaultValue = defaultValue;
+        this.value = this.load();
+    }
+
+    private load() {
+        const value = localStorage.getItem(this.key);
+
+        if (value) {
+            return JSON.parse(value);
+        }
+        return this.defaultValue;
+    }
+}

src/style.css

@@ -49,9 +49,6 @@
             @apply bg-emerald-500 hover:bg-emerald-600;
         }
     }
-    tfoot>tr>td {
-        @apply font-semibold;
-    }
 
 
     ::-webkit-scrollbar {