draft pref

Reviewed-on: #1

Dockerfile

@@ -6,5 +6,8 @@ COPY . ./
 RUN npm run build
 
 FROM nginx:alpine
+ENV NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html
 COPY --from=build /app/dist /usr/share/nginx/html
-COPY nginx.conf.template /etc/nginx/templates/default.conf.template
+RUN mkdir etc/nginx/templates && \
+    mv /usr/share/nginx/html/index.html /etc/nginx/templates/index.html.template
+COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen 80 http2;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ $uri.html /index.html;
+    }
+}

nginx.conf.template

@@ -1,43 +0,0 @@
-server {
-    listen 80 http2;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    location / {
-        try_files $uri $uri/ $uri.html /index.html;
-    }
-    location /api/ {
-        proxy_pass https://${API_URL}/;
-        proxy_http_version 1.1;
-        rewrite /api/(.*) /$1 break;
-        proxy_ssl_server_name on;
-        proxy_set_header Host "${API_URL}";
-        proxy_set_header X-Forwarded-Proto https;
-        sub_filter 'https://${API_URL}/' '/appi/';
-    }
-    location /pocketbase/ {
-        proxy_pass https://${POCKET_BASE_URL}/;
-        proxy_http_version 1.1;
-        rewrite /pocketbase/(.*) /$1 break;
-        proxy_ssl_server_name on;
-        proxy_set_header Host "${POCKET_BASE_URL}";
-        proxy_set_header X-Forwarded-Proto https;
-    }
-    location /appraisal/ {
-        proxy_pass https://${EVEPRAISAL_URL}/;
-        proxy_http_version 1.1;
-        rewrite /appraisal/(.*) /$1 break;
-        proxy_ssl_server_name on;
-        proxy_set_header Host "${EVEPRAISAL_URL}";
-        proxy_set_header X-Forwarded-Proto https;
-    }
-    location /esi/ {
-        proxy_pass https://esi.evetech.net/;
-        proxy_http_version 1.1;
-        rewrite /esi/(.*) /latest/$1 break;
-        proxy_ssl_server_name on;
-        proxy_set_header Host "esi.evetech.net";
-        proxy_set_header X-Forwarded-Proto https;
-        proxy_set_header User-Agent "${ESI_USER_AGENT}";
-    }
-}

package.json

@@ -4,32 +4,35 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite --host --debug",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
-    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.2.1",
     "@vueuse/integrations": "^10.2.1",
     "axios": "^1.4.0",
+    "axios-rate-limit": "^1.3.1",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4",
+    "oidc-client-ts": "^3.0.1",
     "pinia": "^2.1.6",
-    "pocketbase": "^0.18.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@types/node": "^20.4.5",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "vue-tsc": "^1.8.5"
+    "vite": "^5.2.11",
+    "vite-plugin-runtime-env": "^0.1.1",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.18"
   }
 }

src/App.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
+import { useAuthStore } from '@/auth';
+import { computed } from 'vue';
 import { RouterView, useRoute } from 'vue-router';
 import { Sidebar } from './sidebar';
 
 const route = useRoute();
+const authStore = useAuthStore();
 
+const hideSidebar = computed(() => {
+    return !authStore.isLoggedIn || route.name === 'callback' || route.name === 'about';
+});
 </script>
 
 <template>
-    <template v-if="route.name === 'login'">
+    <template v-if="hideSidebar">
         <RouterView />
     </template>
     <template v-else>

src/auth.ts

@@ -0,0 +1,49 @@
+import log from "loglevel";
+import { Log, User, UserManager, WebStorageStateStore } from "oidc-client-ts";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+Log.setLogger(log);
+
+export const useAuthStore = defineStore('auth', () => {
+    const userManager = new UserManager({
+        authority: import.meta.env.VITE_AUTH_AUTHORITY,
+        client_id: import.meta.env.VITE_AUTH_CLIENT_ID,
+        client_secret: import.meta.env.VITE_AUTH_CLIENT_SECRET,
+        redirect_uri: import.meta.env.VITE_AUTH_REDIRECT_URI,
+        scope: import.meta.env.VITE_AUTH_SCOPE,
+        stateStore: new WebStorageStateStore({ store: window.localStorage }),
+        userStore: new WebStorageStateStore({ store: window.localStorage })
+    });
+
+    const user = ref<User>();
+    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 ?? "");
+
+    const redirect = async () => {
+        await userManager.signinRedirect();
+        log.info("Redirecting to login page");
+    }
+    const login = async () => {
+        await userManager.signinCallback();
+        log.debug("Logged in");
+    }
+    const logout = async () => {
+        await userManager.signoutRedirect();
+        log.debug("Logged out");
+    }
+
+    const setUser = (u?: User | null) => {
+        if (u) {
+            user.value = u;
+            log.debug("User loaded", u.profile.name);
+        } else {
+            user.value = undefined;
+        }
+    }
+    userManager.events.addUserLoaded(setUser);
+    userManager.getUser().then(setUser);
+    return { redirect, login, logout, isLoggedIn, accessToken, username, userId };
+});

src/components/ClipboardButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { copyToClipboard } from '@/utils';
+import { ClipboardIcon } from '@heroicons/vue/24/outline';
+
+
+interface Props {
+    value?: string;
+}
+const props = defineProps<Props>();
+
+const doCopy = () => {
+    if (!props.value) {
+        return;
+    }
+    copyToClipboard(props.value);
+}
+</script>
+
+<template>
+    <button class="btn-icon" title="Copy to clipboard" @click="doCopy">
+        <ClipboardIcon />
+    </button>
+</template>

src/components/Dropdown.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
+import { vOnClickOutside } from '@vueuse/components';
+import { useEventListener } from '@vueuse/core';
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+useEventListener('keyup', e => {
+    if (e.key === 'Escape') {
+        isOpen.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
+        <button @click="isOpen = !isOpen">
+            <slot name="button" />
+            <Transition name="flip">
+                <ChevronDownIcon v-if="!isOpen" class="chevron" />
+                <ChevronUpIcon v-else class="chevron" />
+            </Transition>
+        </button>
+
+        <Transition name="fade">
+            <div v-if="isOpen" class="relative">
+                <div class="z-10 divide-y rounded-b-md absolute">
+                    <slot />
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.chevron {
+    @apply w-4 h-4 ms-1;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active, .fade-leave-active {
+    @apply transition-opacity;
+}
+
+.flip-enter-from, .flip-leave-to {
+  transform: rotate(180deg);
+}
+
+.flip-enter-active {
+  @apply transition-transform;
+}
+.flip-leave-active {
+   display: none; 
+}
+</style>

src/components/Modal.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components';
-import { useEventListener, useVModel } from '@vueuse/core';
+import { useEventListener } from '@vueuse/core';
 import { watch } from 'vue';
 
-interface Props {
-    open: boolean;
-}
+const open = defineModel('open', { default: false });
 
-interface Emit {
-    (e: 'update:open', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    open: false,
-});
-const emit = defineEmits<Emit>();
-
-const isOpen = useVModel(props, 'open', emit, {passive: true});
-
-watch(isOpen, value => {
+watch(open, value => {
     if (value) {
         document.body.classList.add('overflow-hidden');
     } else {
@@ -27,18 +14,18 @@ watch(isOpen, value => {
 });
 useEventListener('keyup', e => {
     if (e.key === 'Escape') {
-        isOpen.value = false;
+        open.value = false;
     }
 });
 </script>
 
 <template>
     <Transition name="fade">
-        <template v-if="isOpen">
-            <div class="fixed inset-0">
+        <template v-if="open">
+            <div class="fixed inset-0 z-10">
                 <div class="absolute bg-black opacity-80 inset-0 z-0" />
                 <div class="absolute grid inset-0">
-                    <div class="justify-self-center m-auto" v-on-click-outside="() => isOpen = false">
+                    <div class="justify-self-center m-auto" v-on-click-outside="() => open = false">
                         <slot />
                     </div>
                 </div>
@@ -48,13 +35,11 @@ useEventListener('keyup', e => {
 </template>
 
 <style scoped lang="postcss">
-
 .fade-enter-from, .fade-leave-to {
-  opacity: 0;
+    @apply opacity-0;
 }
 
 .fade-enter-active, .fade-leave-active {
-  transition: opacity 100ms ease-out;
+    @apply transition-opacity;
 }
-
 </style>

src/components/SliderCheckbox.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core';
 
-interface Props {
-    modelValue?: boolean;
-}
-interface Emits {
-    (e: 'update:modelValue', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false
-});
-const emit = defineEmits<Emits>();
-
-const value = useVModel(props, 'modelValue', emit);
+const modelValue = defineModel({ default: false });
 </script>
 
 <template>
     <label class="flex items-center relative w-max cursor-pointer select-none">
-        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="value" />
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="modelValue" />
         <span class="w-5 h-5 right-5 absolute rounded-full transform transition-transform bg-slate-100 peer-checked:bg-emerald-200" />
     </label>
 </template>

src/components/Tooltip.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { vElementHover } from '@vueuse/components';
-import { useVModel } from '@vueuse/core';
-
-interface Props {
-    open: boolean;
-}
-
-interface Emit {
-    (e: 'update:open', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    open: false,
-});
-const emit = defineEmits<Emit>();
-
-const isOpen = useVModel(props, 'open', emit, {passive: true});
-
-</script>
-
-<template>
-    <div clas="flex flex-col items-center justify-center" :class="{'open': isOpen}">
-        <div v-element-hover="(h: boolean) => isOpen = h" class="m-auto header">
-            <slot name="header" />
-        </div>
-        <div v-if="isOpen" class="m-auto">
-            <div class="z-10 absolute">
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>

src/components/index.ts

@@ -1,5 +1,7 @@
+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 SliderCheckbox } from './SliderCheckbox.vue';
-export { default as Tooltip } from './Tooltip.vue';
+export { default as Tooltip } from './tooltip/Tooltip.vue';
 

src/components/table/SortableHeader.vue

@@ -1,35 +1,43 @@
 <script setup lang="ts">
-import { SortDirection } from './sort';
+import { HeaderComponent, SortDirection } from './sort';
 
 interface Props {
     currentSortKey: string | null;
     sortDirection?: SortDirection | null;
+    showColumn?: (k: string) => boolean;
+    unsortable?: boolean;
     sortKey: string;
+    headerComponent?: HeaderComponent;
 }
 interface Emit {
     (e: 'sort', key: string, direction: SortDirection): void;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    showColumn: () => () => true,
+    unsortable: false,
+    headerComponent: 'th',
+});
 const emit = defineEmits<Emit>();
 
 </script>
 
 <template>
-    <th>
+    <component v-if="showColumn(sortKey)" :is="headerComponent" class="sort-header">
         <slot />
-        <span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
-
-        <span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
-    </th>
+        <template v-if="!unsortable">
+            <span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
+            <span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
+        </template>
+    </component>
 </template>
 
 <style scoped lang="postcss">
-th {
+.sort-header {
     @apply relative h-8 pe-3;
 }
 span.asc, span.desc {
-    @apply absolute end-1 cursor-pointer text-xs;
+    @apply absolute end-1 cursor-pointer text-xs transition-opacity;
 }
 span.asc {
     @apply top-0.5;

src/components/table/VirtualScrollTable.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useElementBounding, useVirtualList } from '@vueuse/core';
+import { computed, ref } from 'vue';
+
+interface Props {
+    list?: any[];
+    itemHeight: number;
+    headerHeight?: number;
+    bottom?: string;
+}
+
+
+const props = withDefaults(defineProps<Props>(), {
+    list: () => [],
+});
+
+
+const { list: values, containerProps, wrapperProps } = useVirtualList(computed(() => props.list), {
+    itemHeight: () => props.itemHeight,
+    overscan: 3
+})
+
+const tableTop = ref<HTMLSpanElement | null>(null);
+const { bottom: offset } = useElementBounding(tableTop);
+const ypx = computed(() => {
+    let y = (offset.value ?? 0) + 'px';
+
+    if (props.bottom) {
+        y = `calc(${y} + ${props.bottom})`;
+    }
+    return y;
+})
+const computedHeaderHeight = computed(() => {
+    const h = props.headerHeight ?? props.itemHeight ?? 0;
+    
+    return h + 'px';
+})
+const computedWrapperProps = computed(() => ({
+    ...wrapperProps.value,
+    style: {
+        ...wrapperProps.value.style,
+        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + 1px)`
+    }
+}))
+const itemHeightStyle = computed(() => {
+    const h = props.itemHeight ?? 0;
+    
+    return h + 'px';
+})
+</script>
+
+<template>
+    <span ref="tableTop" class="h-0" />
+    <div v-if="list.length > 0" v-bind="containerProps" class="table-container">
+        <div v-bind="computedWrapperProps">
+            <table>
+                <slot :list="values" />
+            </table>
+        </div>
+    </div>
+    <slot v-else name="empty" />
+</template>
+
+<style scoped lang="postcss">
+div.table-container {
+    @apply bg-slate-600;
+    max-height: calc(100vh - v-bind(ypx));
+    :deep(>div) {
+        @apply bg-slate-800;
+        >table {
+            >thead {
+                @apply sticky z-10;
+                top: -1px;
+            }
+            >*>tr, >*>tr>td {
+                height: v-bind(itemHeightStyle);
+            }
+        }
+    }
+    &::-webkit-scrollbar-track {
+        margin-top: v-bind(computedHeaderHeight);
+    }
+}
+</style>

src/components/table/index.ts

@@ -1,3 +1,6 @@
-export { default as SortableHeader } from './SortableHeader.vue';
 export * from './sort';
 
+export { default as SortableHeader } from './SortableHeader.vue';
+export { default as VirtualScrollTable } from './VirtualScrollTable.vue';
+
+

src/components/table/sort.spec.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'vitest'
+import { ref } from 'vue'
+import { useSort } from './sort'
+
+describe('useSort', () => {
+    const array = ref([{ key1: 'b', key2: 'a' }, { key1: 'a', key2: 'b' }])
+
+    test('Returns expected properties with default options', () => {
+        const { sortedArray, headerProps, showColumn } = useSort(array)
+
+        expect(sortedArray).toBeDefined()
+        expect(headerProps).toBeDefined()
+        expect(showColumn).toBeDefined()
+    })
+
+    test('Returns expected properties with custom options', () => {
+        const { sortedArray, headerProps, showColumn } = useSort(array, { defaultSortKey: 'key1', defaultSortDirection: 'asc' })
+
+        expect(sortedArray.value[0].key1).toBe('a')
+        expect(headerProps.value.currentSortKey).toBe('key1')
+        expect(headerProps.value.sortDirection).toBe('asc')
+        expect(showColumn('key1')).toBe(true)
+    })
+
+    test('Sorts array in ascending order', () => {
+        const { sortedArray, headerProps } = useSort(array, { defaultSortKey: 'key1', defaultSortDirection: 'asc' })
+
+        headerProps.value.onSort('key1', 'asc')
+        expect(sortedArray.value[0].key1).toBe('a')
+    })
+
+    test('Sorts array in descending order', () => {
+        const { sortedArray, headerProps } = useSort(array, { defaultSortKey: 'key1', defaultSortDirection: 'desc' })
+
+        headerProps.value.onSort('key1', 'desc')
+        expect(sortedArray.value[0].key1).toBe('b')
+    })
+
+    test('Hides ignored columns', () => {
+        const { showColumn } = useSort(array, { ignoredColums: ['key1'] })
+
+        expect(showColumn('key1')).toBe(false)
+    })
+})

src/components/table/sort.ts

@@ -1,9 +1,12 @@
-import { MaybeRefOrGetter, computed, ref, toValue } from "vue";
+import { Component, DefineComponent, MaybeRefOrGetter, computed, ref, toValue } from "vue";
 
+export type HeaderComponent = Component | DefineComponent | string;
 export type SortDirection = "asc" | "desc";
 export type UseSortOptions = {
     defaultSortKey?: string;
     defaultSortDirection?: SortDirection;
+    ignoredColums?: MaybeRefOrGetter<string[]>;
+    headerComponent?: HeaderComponent;
 };
 
 export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
@@ -13,13 +16,16 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
         sortKey.value = key;
         sortDirection.value = direction;
     };
+    const showColumn = (sortKey: string) => !toValue(options?.ignoredColums)?.includes(sortKey);
     const headerProps = computed(() => ({
         onSort: sortBy,
+        showColumn,
         currentSortKey: sortKey.value,
         sortDirection: sortDirection.value,
+        headerComponent: options?.headerComponent,
     }));
 
-    const sortedArray = computed(() => toValue(array).sort((a, b) => {
+    const sortedArray = computed(() => toValue(array).toSorted((a, b) => {
         if (sortKey.value === null || sortDirection.value === null) {
             return 0;
         }
@@ -38,5 +44,5 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
         }
     }));
 
-    return { sortedArray, headerProps };
+    return { sortedArray, headerProps, showColumn };
 }

src/components/tooltip/Tooltip.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { vElementHover } from '@vueuse/components';
+import { useElementBounding } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { useSharedWindowSize } from './tooltip';
+
+const open = defineModel('open', { default: false });
+
+const { width, height } = useSharedWindowSize();
+const mainDiv = ref<HTMLDivElement | null>(null);
+const { top, left } = useElementBounding(mainDiv);
+
+const positions = computed(() => {
+    if (top.value < height.value / 2) {
+        if (left.value < width.value / 2) {
+            return ['top', 'left'];
+        }
+        return ['top', 'right'];
+    }
+    if (left.value < width.value / 2) {
+        return ['bottom', 'left'];
+    }
+    return ['bottom', 'right'];
+})
+</script>
+
+<template>
+    <div ref="mainDiv" clas="flex flex-col items-center justify-center" :class="{
+        'open': open,
+        'tooltip-top': positions.includes('top'),
+        'tooltip-bottom': positions.includes('bottom'),
+        'tooltip-left': positions.includes('left'),
+        'tooltip-right': positions.includes('right')
+    }">
+        <div v-element-hover="(h: boolean) => open = h" class="m-auto header">
+            <slot name="header" />
+        </div>
+        <div v-if="open" class="m-auto">
+            <div class="z-10 relative">
+                <div class="absolute">
+                    <slot />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/components/tooltip/tooltip.ts

@@ -0,0 +1,3 @@
+import { createSharedComposable, useWindowSize } from "@vueuse/core";
+
+export const useSharedWindowSize = createSharedComposable(useWindowSize);

src/formaters.spec.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from 'vitest'
+import { formatEveDate, formatIsk } from './formaters'
+
+describe('formatIsk', () => {
+    test('Formats ISK correctly', () => {
+        expect(formatIsk(123456789)).toBe('123.456.789,00 ISK')
+    })
+})
+
+describe('formatEveDate', () => {
+    test('Formats EVE date correctly', () => {
+        const date = new Date(Date.UTC(2022, 0, 1, 0, 0))
+        expect(formatEveDate(date)).toBe('2022.01.01 00:00')
+    })
+
+    test('Returns empty string for undefined date', () => {
+        expect(formatEveDate()).toBe('')
+    })
+
+    test('Returns empty string for null date', () => {
+        expect(formatEveDate(null)).toBe('')
+    })
+})

src/formaters.ts

@@ -10,3 +10,12 @@ export const percentFormater = new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
     maximumFractionDigits: 0
 });
+
+
+const timeFormat = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    minimumIntegerDigits: 2
+});
+
+export const formatEveDate = (date?: Date | null) => !date ? '' : `${date.getUTCFullYear()}.${timeFormat.format(date.getUTCMonth() + 1)}.${timeFormat.format(date.getUTCDate())} ${timeFormat.format(date.getUTCHours())}:${timeFormat.format(date.getUTCMinutes())}`;

src/logger.ts

@@ -2,7 +2,7 @@ import log from "loglevel";
 import { apply, reg } from "loglevel-plugin-prefix";
 
 export function initLogger() {
-    log.setLevel(process.env.NODE_ENV === 'production' ? 'info' : 'trace');
+    log.setLevel(import.meta.env.VITE_LOG_LEVEL);
     reg(log);
     apply(log, {template: '[%t] %l:'});
 }

src/main.ts

@@ -1,4 +1,4 @@
-import { providePocketBase } from '@/pocketbase';
+import { useAuthStore } from "@/auth";
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
@@ -10,22 +10,25 @@ import './style.css';
 initLogger();
 
 const app = createApp(App);
-const pb = providePocketBase(app);
 const pinia = createPinia();
 const router = createRouter({
     history: createWebHistory(),
     routes,
 });
 
+app.use(pinia);
+
+const authStore = useAuthStore();
+
 router.beforeEach(async to => {
-    if (!pb.authStore.isValid && to.name !== 'login') {
-        return { name: 'login' };
-    } else if (pb.authStore.isValid && to.name === 'login') {
+    if (to.name === 'callback') {
+        await authStore.login();
         return { name: 'home' };
+    } else if (!authStore.isLoggedIn) {
+        await authStore.redirect();
     }
 });
 
-app.use(pinia);
 app.use(router);
 
 app.mount('#app');

src/marbas/MarbasObject.ts

@@ -0,0 +1,3 @@
+export type MarbasObject = {
+    id: number;
+}

src/marbas/index.ts

@@ -0,0 +1,3 @@
+export * from './MarbasObject';
+export * from './marbasService';
+

src/marbas/marbasService.ts

@@ -0,0 +1,50 @@
+import { useAuthStore } from "@/auth";
+import { logResource } from "@/service";
+import axios from "axios";
+
+export const marbasAxiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_MARBAS_URL,
+    headers: {
+        'Accept': 'application/json',
+        "Content-Type": "application/json",
+    },
+})
+
+marbasAxiosInstance.interceptors.request.use(r => {
+    const authStore = useAuthStore();
+
+    if (!authStore.isLoggedIn) {
+        throw new Error("Not logged in");
+    }
+    
+    const accessToken = authStore.accessToken;
+
+    if (accessToken) {
+        r.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    if (!r.params?.page_size) {
+        r.params = { ...r.params, page_size: 250 };
+    }
+    return r;
+})
+logResource(marbasAxiosInstance)
+marbasAxiosInstance.interceptors.response.use(async r => {
+    let next: string = r.data?.next;
+    let results = r.data?.results;
+
+    if (next) {
+        if (!next.startsWith(import.meta.env.VITE_MARBAS_URL)) { // FIME remove once the API is fixed
+            next = import.meta.env.VITE_MARBAS_URL + next.replace(/http(s)?:\/\/[^/]+\//g, '');
+        }
+
+        results = results.concat((await marbasAxiosInstance.request({
+            ...r.config,
+            url: next,
+            baseURL: '',
+        })).data);
+    }
+    if (results) {
+        r.data = results;
+    }
+    return r;
+})

src/market/MarketOrderHistory.ts

@@ -1,13 +0,0 @@
-import { esiAxiosInstance } from "@/service";
-
-
-export type MarketOrderHistory = {
-    average: number;
-    date: string;
-    highest: number;
-    lowest: number;
-    order_count: number;
-    volume: number;
-}
-
-export const getHistory = async (regionId: number, tyeId: number): Promise<MarketOrderHistory[]> => (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;

src/market/RegionalMarketCache.spec.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'vitest'
+import { RegionalMarketCache } from './RegionalMarketCache'
+
+describe('RegionalMarketCache', () => {
+    test('should cache and retrieve values', async () => {
+        const cache = new RegionalMarketCache<string>(1000)
+
+        cache.set(1, 1, 'test')
+        expect(cache.get(1, 1)).toBe('test')
+    })
+
+    test('should remove values', async () => {
+        const cache = new RegionalMarketCache<string>(1000)
+
+        cache.set(1, 1, 'test')
+        cache.remove(1, 1)
+        expect(cache.get(1, 1)).toBeUndefined()
+    })
+
+    test('should compute values if absent', async () => {
+        const cache = new RegionalMarketCache<string>(1000)
+        const value = await cache.computeIfAbsent(1, 1, () => Promise.resolve('test'))
+
+        expect(value).toBe('test')
+        expect(cache.get(1, 1)).toBe('test')
+    })
+
+    test('should expire values', async () => {
+        const cache = new RegionalMarketCache<string>(1)
+
+        cache.set(1, 1, 'test')
+        await new Promise(resolve => setTimeout(resolve, 10))
+        expect(cache.get(1, 1)).toBeUndefined()
+    })
+})

src/market/RegionalMarketCache.ts

@@ -0,0 +1,50 @@
+class CacheEntry<T> {
+    public value: T;
+    public expiration: Date;
+
+    constructor(value: T, expiration: Date) {
+        this.value = value;
+        this.expiration = expiration;
+    }
+}
+
+export type ExpirationSupplier<T> = (v: T) => Date;
+
+export class RegionalMarketCache<T>  {
+    private cache: Record<number, Record<number, CacheEntry<T>>>;
+    private expirationSupplier: (v: T) => Date;
+
+    constructor(expiration: ExpirationSupplier<T> | number) {
+        this.cache = {};
+        this.expirationSupplier = expiration instanceof Function ? expiration : () => new Date(Date.now() + expiration);
+    }
+
+    public get(regionId: number, typeId: number): T | undefined {
+        const entry = this.cache[regionId]?.[typeId];
+
+        if (entry && entry.expiration > new Date()) {
+            return entry.value;
+        }
+        this.remove(regionId, typeId);
+        return undefined;
+    }
+
+    public set(regionId: number, typeId: number, value: T): void {
+        this.cache[regionId] = this.cache[regionId] ?? {};
+        this.cache[regionId][typeId] = new CacheEntry(value, this.expirationSupplier(value));
+    }
+
+    public remove(regionId: number, typeId: number): void {
+        delete this.cache[regionId]?.[typeId];
+    }
+
+    public async computeIfAbsent(regionId: number, typeId: number, supplier: () => (Promise<T> | T)): Promise<T> {
+        let value = this.get(regionId, typeId);
+
+        if (!value) {
+            value = await supplier();
+            this.set(regionId, typeId, value);
+        }
+        return value;
+    }
+};

src/market/acquisition/AcquiredType.ts

@@ -0,0 +1,10 @@
+import { MarketType } from "..";
+import { MarbasAcquiredType } from "./acquisition";
+
+export type AcquiredType = Omit<MarbasAcquiredType, 'type'> & {
+    type: MarketType,
+    buy: number,
+    sell: number
+}
+
+export const acquiredTypesToSorted = <T extends {date: Date} = AcquiredType>(array: T[], reverse?: boolean) => array.toSorted((a, b) => reverse ? b.date.getTime() - a.date.getTime() : a.date.getTime() - b.date.getTime())

src/market/acquisition/AcquisitionQuantilsTooltip.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { LoadingSpinner, Tooltip } from '@/components';
 import { formatIsk } from '@/formaters';
-import { getHistory, jitaId } from '@/market';
-import { getHistoryQuartils } from '@/market/scan';
+import { getHistory, getHistoryQuartils } from '@/market';
 import { ArrowTrendingDownIcon, ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
 import { computedAsync } from '@vueuse/core';
 import { ref, watchEffect } from 'vue';
@@ -23,7 +22,7 @@ const q1 = ref(0);
 const median = ref(0);
 const q3 = ref(0);
 const lineColor = ref('');
-const history = computedAsync(() => getHistory(jitaId, props.id), []);
+const history = computedAsync(() => getHistory(props.id), []);
 
 watchEffect(async () => {
     if (!open.value || !props.id) {
@@ -53,7 +52,7 @@ watchEffect(async () => {
             <ArrowTrendingDownIcon v-else />
         </template>
         <template #default>
-            <div class="bg-slate-500 -left-1/2 relative" v-if="history.length > 0">
+            <div class="bg-slate-500 -left-1/2 relative tooltip-content" v-if="history.length > 0">
                 <table>
                     <thead>
                         <tr>
@@ -64,9 +63,9 @@ watchEffect(async () => {
                     </thead>
                     <tbody>
                         <tr :class="lineColor">
-                            <td class="text-right">{{ formatIsk(q1) }}</td>
-                            <td class="text-right">{{ formatIsk(median) }}</td>
-                            <td class="text-right">{{ formatIsk(q3) }}</td>
+                            <td class="text-right text-nowrap">{{ formatIsk(q1) }}</td>
+                            <td class="text-right text-nowrap">{{ formatIsk(median) }}</td>
+                            <td class="text-right text-nowrap">{{ formatIsk(q3) }}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -81,8 +80,18 @@ watchEffect(async () => {
     >:deep(div.header) {
         @apply btn-icon px-2;
     }
-    &.open>:deep(div.header) {
-        @apply bg-slate-600 rounded-t;
+    &.open {
+        &.tooltip-top>:deep(div.header) {
+            @apply rounded-t-md bg-slate-600;
+        }
+        &.tooltip-bottom {
+            .tooltip-content {
+                bottom: 79px;
+            }
+            >:deep(div.header) {
+                @apply rounded-b-md bg-slate-600;
+            }
+        }
     }
 }
 </style>

src/market/acquisition/AcquisitionResultTable.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
+import { formatEveDate, formatIsk, percentFormater } from '@/formaters';
+import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
+import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
+import { useStorage } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { AcquiredType } from './AcquiredType';
+import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
+
+type Result = {
+    id: number;
+    type: MarketType;
+    name: string;
+    buy: number;
+    sell: number;
+    price: number;
+    remaining: number;
+    quantity: number;
+    precentProfit: number;
+    iskProfit: number;
+    date: Date;
+    acquisitions: AcquiredType[];
+}
+
+interface Props {
+    items?: AcquiredType[];
+    infoOnly?: boolean;
+    showAll?: boolean;
+    ignoredColums?: string[] | string;
+    defaultSortKey?: string;
+}
+
+interface Emits {
+    (e: 'buy', type: AcquiredType[], price: number, buy: number, sell: number): void;
+    (e: 'sell', type: AcquiredType[]): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    infoOnly: false,
+    showAll: false,
+    ignoredColums: () => [],
+    defaultSortKey: 'precentProfit',
+});
+defineEmits<Emits>();
+
+const columnsToIgnore = computed(() => {
+    const ic = typeof props.ignoredColums === 'string' ? [props.ignoredColums] : props.ignoredColums;
+
+    if (props.infoOnly && !ic.includes('buttons')) {
+        return [...ic, 'buttons'];
+    }
+    return ic;
+});
+
+const marketTaxStore = useMarketTaxStore();
+
+const threshold = useStorage('market-acquisition-threshold', 10);
+const filter = ref("");
+const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() => {
+    const filteredItems = props.items.filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()));
+
+    if (props.showAll) {
+        return filteredItems.map(r => {
+            const precentProfit = marketTaxStore.calculateProfit(r.price, r.sell);
+
+            return {
+                id: r.id,
+                type: r.type,
+                name: r.type.name,
+                buy: r.buy,
+                sell: r.sell,
+                price: r.price,
+                remaining: r.remaining,
+                quantity: r.quantity,
+                precentProfit,
+                iskProfit: r.price * precentProfit * r.remaining,
+                date: r.date,
+                acquisitions: [r]
+            };
+        });
+    }
+
+    const list: Result[] = [];
+    const groups = Map.groupBy(filteredItems, r => r.type.id);
+
+    groups.forEach((group, typeID) => {
+        const first = group[0];
+
+        if (!first) {
+            return;
+        }
+
+        const total = group.reduce((acc, r) => acc + r.quantity, 0);
+        const totalRemaining = group.reduce((acc, r) => acc + r.remaining, 0);
+        const price = group.reduce((acc, r) => acc + r.price * r.remaining, 0) / totalRemaining;
+        const precentProfit = marketTaxStore.calculateProfit(price, first.sell);
+
+        list.push({
+            id: typeID,
+            type: first.type,
+            name: first.type.name,
+            buy: first.buy,
+            sell: first.sell,
+            price: price,
+            remaining: totalRemaining,
+            quantity: total,
+            precentProfit,
+            iskProfit: price * precentProfit * totalRemaining,
+            date: first.date,
+            acquisitions: group
+        });
+    });
+    return list;
+}), {
+    defaultSortKey: props.defaultSortKey,
+    defaultSortDirection: 'desc',
+    ignoredColums: columnsToIgnore
+})
+const getLineColor = (result: Result) => {
+    if (result.precentProfit >= (threshold.value / 100)) {
+        return 'line-green';
+    } else if (result.precentProfit < 0) {
+        return 'line-red';
+    }
+    return '';
+}
+</script>
+
+<template>
+    <div class="flex" v-if="!infoOnly">
+        <div class="flex justify-self-end mb-2 mt-4 ms-auto">
+            <TaxInput />
+            <div class="end">
+                <span>Profit Threshold: </span>
+                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
+            </div>
+            <div class="end">
+                <span>Filter: </span>
+                <input type="search" class="w-96" v-model="filter" />
+            </div>
+        </div>
+    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
+        <template #default="{ list }">
+            <thead>
+                <tr>
+                    <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="date">Bought at</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="remaining">Remaining Amount</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="iskProfit">Profit (ISK)</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="r in list" :key="r.index" :class="getLineColor(r.data)">
+                    <td v-if="showColumn('name')">
+                        <div class="flex">
+                            <MarketTypeLabel :id="r.data.type.id" :name="r.data.name" />
+                            <AcquisitionQuantilsTooltip :id="r.data.type.id" :buy="r.data.buy" :sell="r.data.sell" />
+                        </div>
+                    </td>
+                    <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.data.buy) }}</td>
+                    <td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.data.sell) }}</td>
+                    <td v-if="showColumn('date')" class="text-right">{{ formatEveDate(r.data.date) }}</td>
+                    <td v-if="showColumn('price')" class="text-right">{{ formatIsk(r.data.price) }}</td>
+                    <td v-if="showColumn('remaining')" class="text-right">{{ r.data.remaining }}/{{ r.data.quantity }}</td>
+                    <td v-if="showColumn('precentProfit')" class="text-right">{{ percentFormater.format(r.data.precentProfit) }}</td>
+                    <td v-if="showColumn('iskProfit')" class="text-right">{{ formatIsk(r.data.iskProfit) }}</td>
+                    <td v-if="showColumn('buttons')" class="text-right">
+                        <button class="btn-icon me-1" @click="$emit('buy', r.data.acquisitions, r.data.price, r.data.buy, r.data.sell)"><PlusIcon /></button>
+                        <button class="btn-icon me-1" @click="$emit('sell', r.data.acquisitions)"><MinusIcon /></button>
+                    </td>
+                </tr>
+            </tbody>
+        </template>
+        <template #empty>
+            <div class="text-center mt-4">
+                <span>No items found</span>
+            </div>
+        </template>
+    </VirtualScrollTable>
+</template>
+
+<style scoped lang="postcss">
+div.end {
+    @apply justify-self-end ms-2;
+}
+</style>

src/market/acquisition/BuyModal.vue

@@ -3,10 +3,10 @@ import { Modal } from '@/components';
 import { formatIsk } from '@/formaters';
 import { MarketType, MarketTypeLabel } from '@/market';
 import { ref } from 'vue';
-import { useTrackedItemStore } from './track';
+import { useAcquiredTypesStore } from './acquisition';
 
 
-const trackedItemStore = useTrackedItemStore();
+const acquiredTypesStore = useAcquiredTypesStore();
 
 const modalOpen = ref<boolean>(false);
 const type = ref<MarketType>();
@@ -38,7 +38,7 @@ const add = () => {
         return;
     }
 
-    trackedItemStore.addTrackedItem(id, count.value, price.value);
+    acquiredTypesStore.addAcquiredType(id, count.value, price.value);
     modalOpen.value = false;
 }
 

src/market/acquisition/SellModal.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { Modal } from '@/components';
+import { MarketType, MarketTypeLabel } from '@/market';
+import { ref } from 'vue';
+import { AcquiredType, acquiredTypesToSorted } from './AcquiredType';
+import { useAcquiredTypesStore } from './acquisition';
+
+
+const acquiredTypesStore = useAcquiredTypesStore();
+
+const modalOpen = ref<boolean>(false);
+const type = ref<MarketType>();
+const count = ref(1);
+const types = ref<AcquiredType[]>([]);
+
+const open = (t: AcquiredType[]) => {
+    if (t.length === 0) {
+        return;
+    }
+
+    types.value = acquiredTypesToSorted(t);
+    type.value = t[0].type;
+    count.value = 1;
+    modalOpen.value = true;
+}
+const remove = async () => { 
+    if (!types.value) {
+        modalOpen.value = false;
+        return;
+    }
+
+    let c = count.value;
+
+    for (const type of types.value) {
+        const remaining = type.remaining;
+
+        await acquiredTypesStore.removeAcquiredType(type.id, c);
+        c -= remaining;
+        if (c <= 0) {
+            break;
+        }
+    }
+    modalOpen.value = false;
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+    <Modal v-model:open="modalOpen">
+        <div class="bg-slate-800 rounded">
+            <MarketTypeLabel v-if="type" class="m-1" :id="type.id" :name="type.name" hideCopy />
+            <hr />
+            <div class="flex p-4">
+                <div class="flex me-2 mb-auto">
+                    <span>Count: </span>
+                    <div class="ms-2">
+                        <input type="number" min="0" step="1" v-model="count" @keyup.enter="remove" />
+                        <div>
+                            <button class="px-2 mt-2 bg-slate-600 hover:bg-slate-700 border rounded cursor-pointer" @click="count = types.reduce((acc, t) => acc + t.remaining, 0)">All</button>
+                        </div>
+                    </div>
+                </div>
+                <button class="mb-auto" @click="remove">Remove</button>
+            </div>
+        </div>
+    </Modal>
+</template>

src/market/acquisition/acquisition.ts

@@ -0,0 +1,74 @@
+import { marbasAxiosInstance, MarbasObject } from "@/marbas";
+import { AxiosResponse } from "axios";
+import log from "loglevel";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+export type AcquiredTypeSource = 'bo' | 'so' | 'prod' | 'misc';
+
+export type MarbasAcquiredType = MarbasObject & {
+    type: number;
+    quantity: number;
+    remaining: number;
+    price: number;
+    date: Date;
+    source: AcquiredTypeSource;
+    user: number;
+}
+
+type RawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'date'> & {
+    date: string;
+}
+
+type InsertableRawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'id' | 'user' | 'date'>;
+
+const mapRawMarbasAcquiredType = (raw: RawMarbasAcquiredType): MarbasAcquiredType => ({
+    ...raw,
+    date: raw.date ? new Date(raw.date) : new Date()
+});
+
+const endpoint = '/api/acquisitions/';
+
+export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
+    const acquiredTypes = ref<MarbasAcquiredType[]>([]);
+
+    const types = computed(() => acquiredTypes.value.filter(item => item.remaining > 0));
+    const addAcquiredType = async (type: number, quantity: number, price: number, source?: AcquiredTypeSource) => { 
+        const newItem = mapRawMarbasAcquiredType((await marbasAxiosInstance.post<RawMarbasAcquiredType, AxiosResponse<RawMarbasAcquiredType>, InsertableRawMarbasAcquiredType>(endpoint, {
+            type: type,
+            quantity: quantity,
+            remaining: quantity,
+            price: price,
+            source: source ?? 'misc', 
+        })).data);
+
+        acquiredTypes.value = [...acquiredTypes.value, newItem];
+        log.info(`Acquired type ${newItem.id} with quantity ${newItem.quantity} and price ${newItem.price}`, newItem);
+    };
+    const removeAcquiredType = async (id: number, quantity: number) => {
+        const found = acquiredTypes.value.find(t => t.id === id);
+
+        if (!found) {
+            return 0;
+        }
+
+        const item = {
+            ...found,
+            remaining: Math.max(0, found.remaining - quantity)
+        };
+
+        acquiredTypes.value = acquiredTypes.value.map(i => {
+            if (i.id === item.id) {
+                return item;
+            } else {
+                return i;
+            }
+        });
+        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));
+
+    return { acquiredTypes: types, addAcquiredType, removeAcquiredType };
+});

src/market/acquisition/index.ts

@@ -0,0 +1,7 @@
+export * from './AcquiredType';
+export * from './acquisition';
+
+export { default as AcquisitionResultTable } from './AcquisitionResultTable.vue';
+export { default as BuyModal } from './BuyModal.vue';
+export { default as SellModal } from './SellModal.vue';
+

src/market/appraisal.ts

@@ -1,65 +0,0 @@
-import { evepraisalAxiosInstance } from '@/service';
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { MarketType } from "./type";
-
-export type MarketTypePrice = {
-    type: MarketType;
-    buy: number,
-    sell: number,
-    orderCount: number
-}
-
-type MarketTypePriceCache = {
-    price: MarketTypePrice,
-    date: Date
-}
-
-const cacheDuration = 1000 * 60 * 5; // 5 minutes
-const batchSize = 100;
-
-export const useApraisalStore = defineStore('appraisal', () => {
-    const cache = ref<Record<number, MarketTypePriceCache>>({});
-
-    const getPricesUncached = async (types: MarketType[]): Promise<MarketTypePrice[]> => {
-        const batches = [];
-
-        for (let i = 0; i < types.length; i += batchSize) {
-            batches.push(evepraisalAxiosInstance.post(`/appraisal.json?market=jita&persist=no&raw_textarea=${types.slice(i, i + batchSize).map(t => t.name).join("%0A")}`));
-        }
-        return (await Promise.all(batches))
-            .flatMap(b => b.data.appraisal.items)
-            .map((item: any) => ({
-                type: types.find(t => t.name === item.typeName) as MarketType,
-                buy: item.prices.buy.max,
-                sell: item.prices.sell.min,
-                orderCount: item.prices.all.order_count
-            }));
-    }
-
-    const getPrice = async (type: MarketType): Promise<MarketTypePrice> => (await getPrices([type]))[0];
-    const getPrices = async (types: MarketType[]): Promise<MarketTypePrice[]> => {
-        const now = new Date();
-        const cached: MarketTypePrice[] = [];
-        const uncached: MarketType[] = [];
-
-        types.forEach(t => {
-            const cachedPrice = cache.value[t.id];
-
-            if (cachedPrice && now.getTime() - cachedPrice.date.getTime() < cacheDuration) {
-                cached.push(cachedPrice.price);
-            } else {
-                uncached.push(t);
-            }
-        });
-
-        if (uncached.length > 0) {
-            const prices = await getPricesUncached(uncached);
-
-            prices.forEach(p => cache.value[p.type.id] = { price: p, date: now });
-            return [...cached, ...prices];
-        }
-        return cached;
-    };
-    return { getPrice, getPrices };
-});

src/market/appraisal/MarketTypePrice.ts

@@ -0,0 +1,11 @@
+import { MarketType } from "../type";
+
+
+export type MarketTypePrice = {
+    type: MarketType;
+    buy: number;
+    sell: number;
+    orderCount: number;
+};
+
+export type PriceGetter = (types: MarketType[]) => Promise<MarketTypePrice[]>;

src/market/appraisal/appraisal.ts

@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia';
+import { RegionalMarketCache } from '../RegionalMarketCache';
+import { jitaId } from '../market';
+import { MarketType } from "../type";
+import { MarketTypePrice } from './MarketTypePrice';
+import { getEvepraisalPrices } from './evepraisal';
+import { getfuzzworkPrices } from './fuzzwork';
+
+const cacheDuration = 1000 * 60 * 5; // 5 minutes
+const priceGetters = {
+    evepraisal: getEvepraisalPrices,
+    fuzzwork: getfuzzworkPrices
+}
+
+export const useApraisalStore = defineStore('appraisal', () => {
+    const cache: RegionalMarketCache<MarketTypePrice> = new RegionalMarketCache(cacheDuration);
+
+    const getPricesUncached = priceGetters.fuzzwork;
+
+    const getPrice = async (type: MarketType, regionId?: number): Promise<MarketTypePrice> => (await getPrices([type], regionId))[0];
+    const getPrices = async (types: MarketType[], regionId?: number): Promise<MarketTypePrice[]> => {
+        const cached: MarketTypePrice[] = [];
+        const uncached: MarketType[] = [];
+        const rId = regionId ?? jitaId;
+
+        types.forEach(t => {
+            const cachedPrice = cache.get(rId, t.id);
+
+            if (cachedPrice) {
+                cached.push(cachedPrice);
+            } else {
+                uncached.push(t);
+            }
+        });
+
+        if (uncached.length > 0) {
+            const prices = await getPricesUncached(uncached);
+
+            prices.forEach(p => cache.set(rId, p.type.id, p));
+            return [ ...cached, ...prices ];
+        }
+        return cached;
+    };
+    return { getPrice, getPrices };
+});

src/market/appraisal/evepraisal.ts

@@ -0,0 +1,31 @@
+import { logResource } from '@/service';
+import axios from 'axios';
+import { MarketType } from "../type";
+import { PriceGetter } from './MarketTypePrice';
+
+export const evepraisalAxiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_EVEPRAISAL_URL,
+    headers: {
+        'accept': 'application/json',
+        "Content-Type": "application/json"
+    },
+})
+logResource(evepraisalAxiosInstance)
+
+const batchSize = 100;
+
+export const getEvepraisalPrices: PriceGetter = async types => {
+    const batches = [];
+
+    for (let i = 0; i < types.length; i += batchSize) {
+        batches.push(evepraisalAxiosInstance.post(`/appraisal.json?market=jita&persist=no&raw_textarea=${types.slice(i, i + batchSize).map(t => t.name).join("%0A")}`));
+    }
+    return (await Promise.all(batches))
+        .flatMap(b => b.data.appraisal.items)
+        .map((item: any) => ({
+            type: types.find(t => t.name === item.typeName) as MarketType,
+            buy: item.prices.buy.max,
+            sell: item.prices.sell.min,
+            orderCount: item.prices.all.order_count
+        }));
+};

src/market/appraisal/fuzzwork.ts

@@ -0,0 +1,39 @@
+import { logResource } from '@/service';
+import axios from 'axios';
+import { MarketType } from "../type";
+import { PriceGetter } from './MarketTypePrice';
+
+export const fuzzworkAxiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_FUZZWORK_URL,
+    headers: {
+        'accept': 'application/json',
+        "Content-Type": "application/json"
+    },
+})
+logResource(fuzzworkAxiosInstance)
+
+const batchSize = 100;
+
+export const getfuzzworkPrices: PriceGetter = async types => {
+    const batches = [];
+
+    for (let i = 0; i < types.length; i += batchSize) {
+        batches.push(fuzzworkAxiosInstance.post(`/aggregates/?station=60003760&types=${types.slice(i, i + batchSize).map(t => t.id).join(",")}`));
+    }
+    return (await Promise.all(batches))
+        .flatMap(b => Object.entries(b.data))
+        .map(entry => {
+            const id = doParseInt(entry[0]);
+            const prices = entry[1] as any;
+
+            return {
+                type: types.find(t => t.id === id) as MarketType,
+                buy: doParseFloat(prices?.buy?.max),
+                sell: doParseFloat(prices?.sell?.min),
+                orderCount: doParseInt(prices?.buy?.order_count) + doParseInt(prices?.sell?.order_count)
+            }
+        });
+};
+
+const doParseInt = (s?: string) => s ? parseInt(s) : 0;
+const doParseFloat = (s?: string) => s ? parseFloat(s) : 0;

src/market/appraisal/index.ts

@@ -0,0 +1,2 @@
+export * from './MarketTypePrice';
+export * from './appraisal';

src/market/history/EsiMarketOrderHistory.ts

@@ -0,0 +1,30 @@
+import { esiAxiosInstance } from "@/service";
+import { RegionalMarketCache } from '../RegionalMarketCache';
+import { jitaId } from "../market";
+
+
+export type EsiMarketOrderHistory = {
+    average: number;
+    date: string;
+    highest: number;
+    lowest: number;
+    order_count: number;
+    volume: number;
+}
+
+// TODO use pinia store
+const historyCache: RegionalMarketCache<EsiMarketOrderHistory[]> = new RegionalMarketCache(() => {
+    const date = new Date();
+
+    if (date.getUTCHours() >= 11) {
+        date.setUTCDate(date.getUTCDate() + 1);
+    }
+    date.setUTCHours(11, 0, 0, 0);
+    return date;
+});
+
+export const getHistory = async (tyeId: number, regionId?: number): Promise<EsiMarketOrderHistory[]> => {
+    const rId = regionId ?? jitaId;
+
+    return historyCache.computeIfAbsent(rId, tyeId, async () => (await esiAxiosInstance.get(`/markets/${rId}/history/`, { params: { type_id: tyeId } })).data);
+}

src/market/history/HistoryQuartils.ts

@@ -1,4 +1,4 @@
-import { MarketOrderHistory } from "@/market";
+import { EsiMarketOrderHistory } from "@/market";
 
 export type HistoryQuartils = {
     totalVolume: number,
@@ -7,7 +7,7 @@ export type HistoryQuartils = {
     q3: number,
 }
 
-export const getHistoryQuartils = (history: MarketOrderHistory[], days?: number): HistoryQuartils => {
+export const getHistoryQuartils = (history: EsiMarketOrderHistory[], days?: number): HistoryQuartils => {
     const now = Date.now();
 
     const volumes = history
@@ -51,7 +51,7 @@ export const getHistoryQuartils = (history: MarketOrderHistory[], days?: number)
     };
 }
 
-const estimateVolume = (history: MarketOrderHistory): number => {
+const estimateVolume = (history: EsiMarketOrderHistory): number => {
     if (history.volume === 0) {
         return 0;
     }

src/market/history/index.ts

@@ -0,0 +1,2 @@
+export * from './EsiMarketOrderHistory';
+export * from './HistoryQuartils';

src/market/index.ts

@@ -1,7 +1,8 @@
+export * from './RegionalMarketCache';
+export * from './history';
 export * from './tax';
 export * from './type';
 
-export * from './MarketOrderHistory';
 export * from './appraisal';
 export * from './market';
 

src/market/scan/ScanResultTable.vue

@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import { SliderCheckbox } from '@/components';
-import { SortableHeader, useSort } from '@/components/table';
-import { formatIsk, percentFormater } from '@/formaters';
-import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { ShoppingCartIcon, TrashIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { ScanResult, getHistoryQuartils } from '.';
-
-type Result = {
-    type: MarketType;
-    typeID: number;
-    name: string;
-    buy: number;
-    sell: number;
-    q1: number;
-    median: number;
-    q3: number;
-    profit: number;
-    score: number;
-}
-
-interface Props {
-    items?: ScanResult[];
-}
-
-interface Emits {
-    (e: 'buy', type: MarketType, buy: number, sell: number): void;
-    (e: 'remove', type: MarketType): void;
-}
-
-const scoreFormater = new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: 0
-});
-
-const props = withDefaults(defineProps<Props>(), {
-    items: () => []
-});
-defineEmits<Emits>();
-
-const marketTaxStore = useMarketTaxStore();
-
-const days = useStorage('market-scan-days', 365);
-const threshold = useStorage('market-scan-threshold', 10);
-const filter = ref("");
-const onlyCheap = ref(false);
-const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
-    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
-    .map(r => {
-        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);
-
-        return {
-            type: r.type,
-            typeID: r.type.id,
-            name: r.type.name,
-            buy: r.buy,
-            sell: r.sell,
-            q1: quartils.q1,
-            median: quartils.median,
-            q3: quartils.q3,
-            profit,
-            score
-        };
-    }).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
-        defaultSortKey: 'score',
-        defaultSortDirection: 'desc'
-    })
-const getLineColor = (result: Result) => {
-    if (result.profit < (threshold.value / 100)) {
-        return 'line-red';
-    } else if (result.sell > 0 && result.sell <= result.q1) {
-        return 'line-blue';
-    } else if (result.buy <= result.q1) {
-        return 'line-green';
-    }
-    return '';
-}
-</script>
-
-<template>
-    <div class="flex mb-2 mt-4">
-        <div class="flex justify-self-end ms-auto">
-            <TaxInput />
-            <div class="end">
-                <span>Profit Threshold: </span>
-                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
-            </div>
-            <div class="end">
-                <span>Days: </span>
-                <input type="number" min="1" max="365" step="1" v-model="days" />
-            </div>
-            <div class="end flex">
-                <SliderCheckbox class="me-1" v-model="onlyCheap" /> Show only cheap items
-            </div>
-            <div class="end">
-                <span>Filter: </span>
-                <input type="search" class="w-96" v-model="filter" >
-            </div>
-        </div>
-    </div>
-    <table>
-        <thead>
-            <tr>
-                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="q1">Q1</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
-                <td>
-                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
-                </td>
-                <td class="text-right">{{ formatIsk(r.buy) }}</td>
-                <td class="text-right">{{ formatIsk(r.sell) }}</td>
-                <td class="text-right">{{ formatIsk(r.q1) }}</td>
-                <td class="text-right">{{ formatIsk(r.median) }}</td>
-                <td class="text-right">{{ formatIsk(r.q3) }}</td>
-                <td class="text-right">{{ percentFormater.format(r.profit) }}</td>
-                <td class="text-right">{{ scoreFormater.format(r.score) }}</td>
-                <td class="text-right">
-                    <button class="btn-icon me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
-                    <button class="btn-icon me-1" @click="$emit('remove', r.type)"><TrashIcon /></button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</template>
-
-<style scoped lang="postcss">
-div.end {
-    @apply justify-self-end ms-2;
-}
-</style>@/components/table

src/market/scan/index.ts

@@ -1,5 +0,0 @@
-export * from './HistoryQuartils';
-export * from './scan';
-
-export { default as ScanResultTable } from './ScanResultTable.vue';
-

src/market/scan/scan.ts

@@ -1,44 +0,0 @@
-import { MarketOrderHistory, MarketType } from "@/market";
-import { usePocketBase, watchCollection } from "@/pocketbase";
-import { defineStore } from "pinia";
-import { RecordModel } from "pocketbase";
-import { computed, onMounted, ref } from "vue";
-
-export type ScanResult = {
-    type: MarketType;
-    history: MarketOrderHistory[];
-    buy: number,
-    sell: number,
-    orderCount: number,
-}
-
-interface MarketScan extends RecordModel {
-    owner: string;
-    types: number[];
-};
-
-const marketScans = 'marketScans';
-
-export const useMarketScanStore = defineStore(marketScans, () => {
-    const pb = usePocketBase();
-    const marketScan = ref<MarketScan>();
-
-    const types = computed(() => marketScan.value?.types ?? []);
-    const setTypes = async (types: number[]) => {
-        if (marketScan.value?.id) {
-            marketScan.value = await pb.collection(marketScans).update(marketScan.value.id, { owner: pb.authStore.model!.id, types });
-        } else {
-            marketScan.value = await pb.collection(marketScans).create({ owner: pb.authStore.model!.id, types });
-        }
-    }
-    
-    watchCollection<MarketScan>(marketScans, '*', data => {
-        if (data.action === 'delete') {
-            marketScan.value = undefined;
-        } else if (!marketScan.value || data.record.id === marketScan.value.id) {
-            marketScan.value = data.record;
-        }
-    });
-    onMounted(async () => marketScan.value = await pb.collection(marketScans).getFirstListItem<MarketScan>('').catch(() => undefined));
-    return { types, setTypes };
-});

src/market/track/SellModal.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { Modal } from '@/components';
-import { MarketType, MarketTypeLabel } from '@/market';
-import { ref } from 'vue';
-import { useTrackedItemStore } from './track';
-
-
-const trackedItemStore = useTrackedItemStore();
-
-const modalOpen = ref<boolean>(false);
-const type = ref<MarketType>();
-const count = ref(1);
-
-const open = (t: MarketType) => {
-    type.value = t;
-    count.value = 1;
-    modalOpen.value = true;
-}
-const remove = () => { 
-    const id = type.value?.id;
-
-    if (!id) {
-        modalOpen.value = false;
-        return;
-    }
-
-    trackedItemStore.removeTrackedItem(id, count.value);
-    modalOpen.value = false;
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-    <Modal v-model:open="modalOpen">
-        <div class="bg-slate-800 rounded">
-            <MarketTypeLabel v-if="type" class="m-1" :id="type.id" :name="type.name" hideCopy />
-            <hr />
-            <div class="flex p-4">
-                <div class="flex me-2 mb-auto">
-                    <span>Count: </span>
-                    <input class="ms-2" type="number" min="0" step="1" v-model="count" @keyup.enter="remove" />
-                </div>
-                <button class="mb-auto" @click="remove">Remove</button>
-            </div>
-        </div>
-    </Modal>
-</template>

src/market/track/TrackResultTable.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { SortableHeader, useSort } from '@/components/table';
-import { formatIsk, percentFormater } from '@/formaters';
-import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { TrackedItem } from '.';
-import TrackQuantilsTooltip from './TrackQuantilsTooltip.vue';
-
-type Result = {
-    type: MarketType;
-    typeID: number;
-    name: string;
-    buy: number;
-    sell: number;
-    price: number;
-    count: number;
-    precentProfit: number;
-    iskProfit: number;
-}
-
-interface Props {
-    items?: TrackedItem[];
-}
-
-interface Emits {
-    (e: 'buy', type: MarketType, price: number, buy: number, sell: number): void;
-    (e: 'sell', type: MarketType): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    items: () => []
-});
-defineEmits<Emits>();
-
-const marketTaxStore = useMarketTaxStore();
-
-const threshold = useStorage('market-track-threshold', 10);
-const filter = ref("");
-const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
-    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
-    .map(r => {
-        const precentProfit = marketTaxStore.calculateProfit(r.averagePrice, r.sell);
-
-        return {
-            type: r.type,
-            typeID: r.type.id,
-            name: r.type.name,
-            buy: r.buy,
-            sell: r.sell,
-            price: r.averagePrice,
-            count: r.count,
-            precentProfit,
-            iskProfit: r.averagePrice * precentProfit * r.count
-        };
-    })), {
-        defaultSortKey: 'precentProfit',
-        defaultSortDirection: 'desc'
-    })
-const getLineColor = (result: Result) => {
-    if (result.precentProfit >= (threshold.value / 100)) {
-        return 'line-green';
-    } else if (result.precentProfit < 0) {
-        return 'line-red';
-    }
-    return '';
-}
-</script>
-
-<template>
-    <div class="flex">
-        <div class="flex justify-self-end mb-2 mt-4 ms-auto">
-            <TaxInput />
-            <div class="end">
-                <span>Profit Threshold: </span>
-                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
-            </div>
-            <div class="end">
-                <span>Filter: </span>
-                <input type="search" class="w-96" v-model="filter" >
-            </div>
-        </div>
-    </div>
-    <table>
-        <thead>
-            <tr>
-                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="count">Bought Amount</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="iskProfit">Profit (ISK)</SortableHeader>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
-                <td>
-                    <div class="flex">
-                        <MarketTypeLabel :id="r.typeID" :name="r.name" />
-                        <TrackQuantilsTooltip :id="r.typeID" :buy="r.buy" :sell="r.sell" />
-                    </div>
-                </td>
-                <td class="text-right">{{ formatIsk(r.buy) }}</td>
-                <td class="text-right">{{ formatIsk(r.sell) }}</td>
-                <td class="text-right">{{ formatIsk(r.price) }}</td>
-                <td class="text-right">{{ r.count }}</td>
-                <td class="text-right">{{  percentFormater.format(r.precentProfit) }}</td>
-                <td class="text-right">{{ formatIsk(r.iskProfit) }}</td>
-                <td class="text-right">
-                    <button class="btn-icon me-1" @click="$emit('buy', r.type, r.price, r.buy, r.sell)"><PlusIcon /></button>
-                    <button class="btn-icon me-1" @click="$emit('sell', r.type)"><MinusIcon /></button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</template>
-
-<style scoped lang="postcss">
-div.end {
-    @apply justify-self-end ms-2;
-}
-</style>@/components/table

src/market/track/TrackedItem.ts

@@ -1,9 +0,0 @@
-import { MarketType } from "@/market";
-
-export type TrackedItem = {
-    type: MarketType;
-    count: number;
-    averagePrice: number;
-    buy: number,
-    sell: number
-}

src/market/track/index.ts

@@ -1,7 +0,0 @@
-export * from './TrackedItem';
-export * from './track';
-
-export { default as BuyModal } from './BuyModal.vue';
-export { default as SellModal } from './SellModal.vue';
-export { default as TrackResultTable } from './TrackResultTable.vue';
-

src/market/track/track.ts

@@ -1,58 +0,0 @@
-import { useCollection, usePocketBase } from "@/pocketbase";
-import { createSharedComposable, useLocalStorage } from '@vueuse/core';
-import { defineStore } from "pinia";
-import { RecordModel } from "pocketbase";
-import { computed } from "vue";
-
-export type TrackedMarketItemStorage = {
-    typeID: number;
-    count: number;
-    averagePrice: number;
-}
-
-interface TrackedMarketItem extends RecordModel {
-    owner: string;
-    typeID: number;
-    count: number;
-    averagePrice: number;
-}
-
-const marketTrackings = 'marketTrackings';
-
-export const useTrackedItemsStorage = createSharedComposable(() => useLocalStorage<TrackedMarketItemStorage[]>('market-track-items', []));
-
-export const useTrackedItemStore = defineStore(marketTrackings, () => {
-    const pb = usePocketBase();
-    const trackedItems = useCollection<TrackedMarketItem>(marketTrackings);
-    
-    const items = computed(() => trackedItems);
-    const addTrackedItem = async (typeID: number, count: number, averagePrice: number) => { 
-        const oldItem = trackedItems.value.find(i => i.typeID === typeID);
-
-        if (oldItem?.id) {
-            pb.collection(marketTrackings).update(oldItem.id, {
-                ...oldItem,
-                count: count + oldItem.count,
-                averagePrice: ((averagePrice * count) + (oldItem.averagePrice * oldItem.count)) / (count + oldItem.count)
-            });
-        } else {
-            pb.collection(marketTrackings).create({ owner: pb.authStore.model!.id, typeID, count, averagePrice});
-        }
-    };
-    const removeTrackedItem = async (typeID: number, count: number) => {
-        const oldItem = trackedItems.value.find(i => i.typeID === typeID);
-
-        if (!oldItem?.id) {
-            return;
-        } else if (oldItem.count > count) {
-            pb.collection(marketTrackings).update(oldItem.id, {
-                ...oldItem,
-                count: oldItem.count - count
-            });
-        } else {
-            pb.collection(marketTrackings).delete(oldItem.id);
-        }
-    };
-    
-    return { items, addTrackedItem, removeTrackedItem };
-});

src/market/tracking/TrackingResultTable.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { SliderCheckbox } from '@/components';
+import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
+import { formatIsk, percentFormater } from '@/formaters';
+import { getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
+import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
+import { useStorage } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { TrackingResult } from './tracking';
+
+type Result = {
+    type: MarketType;
+    typeID: number;
+    name: string;
+    buy: number;
+    sell: number;
+    q1: number;
+    median: number;
+    q3: number;
+    profit: number;
+    score: number;
+}
+
+interface Props {
+    items?: TrackingResult[];
+    infoOnly?: boolean;
+    ignoredColums?: string[] | string;
+}
+
+interface Emits {
+    (e: 'buy', type: MarketType, buy: number, sell: number): void;
+    (e: 'remove', type: MarketType): void;
+}
+
+const scoreFormater = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 0
+});
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    infoOnly: false,
+    ignoredColums: () => []
+});
+defineEmits<Emits>();
+
+const marketTaxStore = useMarketTaxStore();
+
+const days = useStorage('market-tracking-days', 365);
+const threshold = useStorage('market-tracking-threshold', 10);
+const filter = ref("");
+const onlyCheap = ref(false);
+const columnsToIgnore = computed(() => {
+    const ic = typeof props.ignoredColums === 'string' ? [props.ignoredColums] : props.ignoredColums;
+
+    if (props.infoOnly && !ic.includes('buttons')) {
+        return [...ic, 'buttons'];
+    }
+    return ic;
+});
+const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() => props.items
+    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
+    .map(r => {
+        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);
+
+        return {
+            type: r.type,
+            typeID: r.type.id,
+            name: r.type.name,
+            buy: r.buy,
+            sell: r.sell,
+            q1: quartils.q1,
+            median: quartils.median,
+            q3: quartils.q3,
+            profit,
+            score
+        };
+    }).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
+        defaultSortKey: 'score',
+        defaultSortDirection: 'desc',
+        ignoredColums: columnsToIgnore
+    })
+const getLineColor = (result: Result) => {
+    if (props.infoOnly) {
+        return '';
+    } else if (result.profit < (threshold.value / 100)) {
+        return 'line-red';
+    } else if (result.sell > 0 && result.sell <= result.q1) {
+        return 'line-blue';
+    } else if (result.buy <= result.q1) {
+        return 'line-green';
+    }
+    return '';
+}
+</script>
+
+<template>
+    <div v-if="!infoOnly" class="flex mb-2 mt-4">
+        <div class="flex justify-self-end ms-auto">
+            <TaxInput />
+            <div class="end">
+                <span>Profit Threshold: </span>
+                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
+            </div>
+            <div class="end">
+                <span>Days: </span>
+                <input type="number" min="1" max="365" step="1" v-model="days" />
+            </div>
+            <div class="end flex">
+                <SliderCheckbox class="me-1" v-model="onlyCheap" /> Show only cheap items
+            </div>
+            <div class="end">
+                <span>Filter: </span>
+                <input type="search" class="w-96" v-model="filter" />
+            </div>
+        </div>
+    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+        <template #default="{ list }">
+            <thead>
+                <tr>
+                    <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="q1">Q1</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
+                    <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="buttons" unsortable />
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="r in list" :key="r.data.typeID" :class="getLineColor(r.data)">
+                    <td v-if="showColumn('name')">
+                        <MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
+                    </td>
+                    <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.data.buy) }}</td>
+                    <td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.data.sell) }}</td>
+                    <td v-if="showColumn('q1')" class="text-right">{{ formatIsk(r.data.q1) }}</td>
+                    <td v-if="showColumn('median')" class="text-right">{{ formatIsk(r.data.median) }}</td>
+                    <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('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>
+                    </td>
+                </tr>
+            </tbody>
+        </template>
+        <template #empty>
+            <div class="text-center mt-4">
+                <span>No items found</span>
+            </div>
+        </template>
+    </VirtualScrollTable>
+</template>
+
+<style scoped lang="postcss">
+div.end {
+    @apply justify-self-end ms-2;
+}
+</style>../history/HistoryQuartils

src/market/tracking/index.ts

@@ -0,0 +1,4 @@
+export * from './tracking';
+
+export { default as TrackingResultTable } from './TrackingResultTable.vue';
+

src/market/tracking/tracking.ts

@@ -0,0 +1,50 @@
+import { marbasAxiosInstance, MarbasObject } from "@/marbas";
+import { EsiMarketOrderHistory, getHistory, MarketType, MarketTypePrice } from "@/market";
+import log from "loglevel";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+export type TrackingResult = {
+    type: MarketType;
+    history: EsiMarketOrderHistory[];
+    buy: number,
+    sell: number,
+    orderCount: number,
+}
+
+export type MarbasTrackedType = MarbasObject & {
+    type: number
+};
+
+const endpoint = '/api/types_tracking/';
+
+export const useMarketTrackingStore = defineStore('marketTracking', () => {
+    const trackedTypes = ref<MarbasTrackedType[]>([]);
+
+    const types = computed(() => trackedTypes.value.map(item => item.type) ?? []);
+    const addType = async (type: number) => {
+        const found = trackedTypes.value.find(item => item.type === type);
+
+        if (!found) {
+            trackedTypes.value = [...trackedTypes.value, (await marbasAxiosInstance.post<MarbasTrackedType>(endpoint, { type })).data];
+            log.info(`Tracking type ${type}`);
+        }
+    }
+    const removeType = async (type: number) => {
+        const found = trackedTypes.value.find(item => item.type === type);
+
+        if (!found) {
+            return;
+        }
+
+        trackedTypes.value = trackedTypes.value.filter(t => t.id !== found.id);
+        await marbasAxiosInstance.delete(`${endpoint}${found.id}`);
+        log.info(`Stopped tracking type ${type}`);
+    }
+
+    marbasAxiosInstance.get<MarbasTrackedType[]>(endpoint).then(res => trackedTypes.value = res.data);
+
+    return { types, addType, removeType };
+});
+
+export const createResult = async (id: number, price: MarketTypePrice): Promise<TrackingResult> => ({ history: await getHistory(id), ...price });

src/market/type/MarketType.ts

@@ -1,4 +1,4 @@
-import { apiAxiosInstance } from "@/service";
+import { marbasAxiosInstance } from "@/marbas";
 
 export type MarketType = {
     id: number;
@@ -18,9 +18,9 @@ export const getMarketTypes = async (types: (string | number)[]): Promise<Market
     if (types.length === 0) {
         return [];
     } else if (types.length === 1 && typeof types[0] === "number") {
-        return [(await apiAxiosInstance.get<MarketType>(`/sde/types/${types[0]}/`)).data];
+        return [(await marbasAxiosInstance.get<MarketType>(`/sde/types/${types[0]}/`)).data];
     }
-    return (await apiAxiosInstance.post<MarketType[]>("/api/types/search", types.map(t => {
+    return (await marbasAxiosInstance.post<MarketType[]>("/api/types/search", types.map(t => {
         if (typeof t === "number") {
             return { id: t };
         } else {
@@ -49,7 +49,7 @@ const blueprintMarketGrous = [ // TODO add all groups
 ]
 
 export const searchMarketTypes = async (search: string): Promise<MarketType[]> => {
-    return (await apiAxiosInstance.post<MarketType[]>("/api/types/search", [{
+    return (await marbasAxiosInstance.post<MarketType[]>("/api/types/search", [{
         name__icontains: search,
         marketgroup_id___not: null,
         marketgroup_id__in___not: blueprintMarketGrous,

src/market/type/MarketTypeInput.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components';
-import { useVirtualList, useVModel } from '@vueuse/core';
+import { useVirtualList } from '@vueuse/core';
 import log from 'loglevel';
 import { nextTick, ref, watch, watchEffect } from 'vue';
 import { MarketType, searchMarketTypes } from './MarketType';
 import MarketTypeLabel from "./MarketTypeLabel.vue";
 
-
-interface Props {
-    modelValue?: MarketType;
-}
 interface Emits {
-    (e: 'update:modelValue', value?: MarketType): void;
     (e: 'submit'): void;
 }
 
-const props = defineProps<Props>();
+const modelValue = defineModel<MarketType>();
 const emit = defineEmits<Emits>();
 
-const value = useVModel(props, 'modelValue', emit);
-
 const isOpen = ref(false);
 const name = ref('');
 const suggestions = ref<MarketType[]>([]);
@@ -45,30 +38,35 @@ const moveUp = () => {
     }
     scrollTo(currentIndex.value);
 }
-const select = (type: MarketType) => {
+const select = (type?: MarketType) => {
     log.debug('Select:', type);
-    value.value = type;
+    modelValue.value = type;
     currentIndex.value = -1;
     suggestions.value = [];
+    isOpen.value = false;
+    name.value = type?.name ?? '';
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
 }
 const submit = async () => {
     if (currentIndex.value >= 0 && currentIndex.value < suggestions.value.length) {
         const v = suggestions.value[currentIndex.value];
     
-        value.value = v;
+        select(v);
         await nextTick();
-    } else if (props.modelValue === undefined && suggestions.value.length > 0) {
-        value.value = suggestions.value[0];
+    } else if (modelValue.value === undefined && suggestions.value.length > 0) {
+        select(suggestions.value[0]);
         await nextTick();
     }
 
-    if (value.value === undefined) {
+    if (modelValue.value === undefined) {
         return;
     }
     emit('submit');
 }
 
-watch(() => props.modelValue, async v => {
+watch(() => modelValue.value, async v => {
     if (v === undefined) {
         name.value = '';
     } else {
@@ -91,10 +89,10 @@ watchEffect(async () => {
 <template>
     <div @click="() => isOpen = true" v-on-click-outside="() => isOpen = false">
         <div class="fake-input">
-            <img v-if="value?.id" :src="`https://images.evetech.net/types/${value.id}/icon`" />
+            <img v-if="modelValue?.id" :src="`https://images.evetech.net/types/${modelValue.id}/icon?size=32`" alt="" />
             <input type="text" v-model="name" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp" />
         </div>
-        <div v-if="suggestions.length > 1" class="z-10 absolute w-96">
+        <div v-if="suggestions.length > 1" class="z-20 absolute w-96">
             <div v-bind="containerProps" class="rounded-b" style="height: 300px">
             <div v-bind="wrapperProps">
                 <div v-for="s in list" :key="s.index" class="hover:bg-slate-700" :class="{'bg-slate-500': s.index !== currentIndex, 'bg-emerald-500': s.index === currentIndex}" @click="select(s.data)">
@@ -108,7 +106,7 @@ watchEffect(async () => {
 
 <style scoped lang="postcss">
 .fake-input {
-    @apply w-96 flex border bg-slate-500 rounded px-1;
+    @apply w-96 flex border bg-slate-500 rounded px-1 py-0.5;
 
     &:has(> input:focus-visible) {
         outline: -webkit-focus-ring-color auto 1px;

src/market/type/MarketTypeLabel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { copyToClipboard } from '@/utils';
-import { ClipboardIcon } from '@heroicons/vue/24/outline';
+import { ClipboardButton } from '@/components';
+import { InformationCircleIcon } from '@heroicons/vue/24/outline';
 
 
 interface Props {
@@ -17,11 +17,20 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <div v-if="id || name">
-        <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon`" class="inline-block w-5 h-5 me-1" />
+    <div v-if="id || name" class="flex flex-row">
+        <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon?size=32`" class="inline-block w-5 h-5 me-1 mt-1" alt="" />
         <template v-if="name">
             {{ name }}
-            <button v-if="!hideCopy" class="btn-icon" @click="copyToClipboard(name)"><ClipboardIcon class="relative top-0.5 !w-4 !h-4" /></button>
+            <RouterLink v-if="id" :to="{ name: 'market-types', params: { type: id } }" class="button btn-icon ms-1 me-1 mt-1" title="Show item info">
+                <InformationCircleIcon  />
+            </RouterLink>
+            <ClipboardButton v-if="!hideCopy" :value="name" />
         </template>
     </div>
-</template>
+</template>
+
+<style scoped lang="postcss">
+button:deep(>svg), .button:deep(>svg) {
+    @apply !w-4 !h-4;
+}
+</style>

src/pages/Characters.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const addCharacter = () => {
+    // TODO
+}
+</script>
+
+<template>
+    <div class="grid mb-2 mt-4">
+        <button class="justify-self-end" @click="addCharacter">Add chacarcter</button>
+    </div>
+</template>

src/pages/Login.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { usePocketBase } from '@/pocketbase';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const pb = usePocketBase();
-const router = useRouter();
-
-const username = ref("");
-const password = ref("");
-
-const login = async () => {
-    await pb.collection('users').authWithPassword(username.value, password.value);
-    await router.push('/');
-}
-</script>
-
-<template>
-    <div class="p-4 mx-auto mt-10 grid justify-center gap-2 w-64">
-        <div class="grid">
-            Login:
-            <input type="text" name="username" v-model="username" @keyup.enter="login" />
-        </div>
-        <div class="grid">
-            Password:
-            <input type="password" name="password" v-model="password" @keyup.enter="login" />
-        </div>
-        <button class="justify-self-end" name="login" @click="login">Login</button>
-    </div>
-</template>

src/pages/Market.vue

@@ -6,12 +6,15 @@ import { RouterLink, RouterView } from 'vue-router';
 <template>
     <div class="mt-4">
         <div class="flex border-b-2 border-emerald-500">
-            <RouterLink to="/market/scan" class="tab">
-                <span>Scan</span>
+            <RouterLink :to="{name: 'market-types'}" class="tab">
+                <span>Item Info</span>
             </RouterLink>
-            <RouterLink to="/market/track" class="tab">
+            <RouterLink to="/market/tracking" class="tab">
                 <span>Tracking</span>
             </RouterLink>
+            <RouterLink to="/market/acquisitions" class="tab">
+                <span>Acquisitions</span>
+            </RouterLink>
         </div>
         <RouterView />
     </div>

src/pages/market/Acquisitions.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { MarketTypePrice, getMarketTypes, useApraisalStore } from "@/market";
+import { AcquiredType, AcquisitionResultTable, BuyModal, SellModal, useAcquiredTypesStore } from '@/market/acquisition';
+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[]>([]);
+
+watch(() => acquiredTypesStore.acquiredTypes, async itms => {
+    if (itms.length === 0) {
+        return;
+    }
+
+    const prices = await apraisalStore.getPrices(await getMarketTypes(itms.map(i => i.type)));
+
+    items.value = itms.map(i => {
+        const price = prices.find(p => p.type.id === i.type) as MarketTypePrice;
+        
+        return {
+            ...i,
+            type: price.type,
+            buy: price.buy,
+            sell: price.sell
+        };
+    });
+}, { immediate: true })
+
+</script>
+
+<template>
+    <div class="mt-4">
+        <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" />
+            <SellModal ref="sellModal" />
+        </template>
+    </div>
+</template>

src/pages/market/Track.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { MarketTypePrice, getMarketTypes, useApraisalStore } from "@/market";
-import { BuyModal, SellModal, TrackResultTable, TrackedItem, useTrackedItemStore } from '@/market/track';
-import { ref, watch } from 'vue';
-
-const buyModal = ref<typeof BuyModal>();
-const sellModal = ref<typeof SellModal>();
-
-
-const apraisalStore = useApraisalStore();
-const trackedItemStore = useTrackedItemStore();
-const items = ref<TrackedItem[]>([]);
-
-watch(() => trackedItemStore.items.value, async itms => {
-    if (itms.length === 0) {
-        return;
-    }
-
-    const prices = await apraisalStore.getPrices(await getMarketTypes(itms.map(i => i.typeID)));
-
-    items.value = itms.map(i => {
-        const price = prices.find(p => p.type.id === i.typeID) as MarketTypePrice;
-        
-        return { ...i, ...price };
-    });
-}, { immediate: true })
-
-</script>
-
-<template>
-    <div class="mt-4">
-        <template v-if="items.length > 0">
-            <TrackResultTable :items="items" @buy="(type, price, buy, sell) => buyModal?.open(type, {  'Price': price, 'Buy': buy, 'Sell': sell })" @sell="type => sellModal?.open(type)" />
-            <BuyModal ref="buyModal" />
-            <SellModal ref="sellModal" />
-        </template>
-    </div>
-</template>

src/pages/market/Tracking.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { MarketType, MarketTypePrice, getHistory, getMarketTypes, jitaId, useApraisalStore } from "@/market";
-import { ScanResult, ScanResultTable, useMarketScanStore } from '@/market/scan';
-import { BuyModal } from '@/market/track';
-import MarketTypeInput from "@/market/type/MarketTypeInput.vue";
+import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, useApraisalStore } from "@/market";
+import { BuyModal } from '@/market/acquisition';
+import { TrackingResult, TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
 import { ref, watch } from 'vue';
 
 
@@ -11,12 +10,12 @@ const buyModal = ref<typeof BuyModal>();
 const item = ref<MarketType>();
 
 const apraisalStore = useApraisalStore();
-const markeyScanStore = useMarketScanStore();
-const items = ref<ScanResult[]>([]);
+const marketTrackingStore = useMarketTrackingStore();
+const items = ref<TrackingResult[]>([]);
 const addOrRelaod = async (type: MarketType) => {
     const typeID = type.id;
     const [history, price] = await Promise.all([
-        getHistory(jitaId, typeID),
+        getHistory(typeID),
         apraisalStore.getPrice(type)
     ]);
     const itm = {
@@ -31,6 +30,7 @@ const addOrRelaod = async (type: MarketType) => {
         items.value = items.value.map(i => i.type.id === typeID ? itm : i);
     } else {
         items.value = [ ...items.value, itm];
+        marketTrackingStore.addType(typeID);
     }
 }
 const addItem = async () => {
@@ -44,11 +44,10 @@ const addItem = async () => {
 }
 const removeItem = (type: MarketType) => {
     items.value = items.value.filter(i => i.type.id !== type.id);
+    marketTrackingStore.removeType(type.id);
 }
 
-
-watch(items, async itms => markeyScanStore.setTypes(itms.map(i => i.type.id)));
-watch(() => markeyScanStore.types, async t => {
+watch(() => marketTrackingStore.types, async t => {
     const typesToLoad = t.filter(t => !items.value.some(i => i.type.id === t));
 
     if (typesToLoad.length === 0) {
@@ -57,12 +56,11 @@ watch(() => markeyScanStore.types, async t => {
 
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
-    items.value = [...items.value, ...(await Promise.all(typesToLoad.map(async i => {
-        const price = prices.find(p => p.type.id === i) as MarketTypePrice;
-        const history = await getHistory(jitaId, i);
-        
-        return { id: i, history, ...price };
-    })))];
+    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>
 
@@ -76,7 +74,7 @@ watch(() => markeyScanStore.types, async t => {
     </div>
     <template v-if="items.length > 0">
         <hr />
-        <ScanResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" @remove="removeItem" />
+        <TrackingResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" @remove="removeItem" />
         <BuyModal ref="buyModal" />
     </template>
 </template>

src/pages/market/TypeInfo.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ClipboardButton } from '@/components';
+import { MarketType, MarketTypeInput, getMarketType, useApraisalStore } from "@/market";
+import { AcquisitionResultTable, BuyModal, useAcquiredTypesStore } from '@/market/acquisition';
+import { TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
+import { BookmarkIcon, BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
+import { computedAsync } from '@vueuse/core/index.cjs';
+import log from "loglevel";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const buyModal = ref<typeof BuyModal>();
+
+const router = useRouter();
+
+const item = ref<MarketType>();
+const inputItem = ref<MarketType>();
+
+const apraisalStore = useApraisalStore();
+const price = computedAsync(() => item.value ? apraisalStore.getPrice(item.value) : undefined);
+const marketTrackingStore = useMarketTrackingStore();
+const result = computedAsync(async () => item.value && price.value ? await createResult(item.value?.id, price.value) : undefined);
+const acquiredTypesStore = useAcquiredTypesStore();
+
+const isTracked = computed(() => item.value ? marketTrackingStore.types.includes(item.value.id) : false);
+const acquisitions = computed(() => {
+    const p = price.value;
+    
+    return !p ?[] : acquiredTypesStore.acquiredTypes
+        .filter(t => t.type === item.value?.id)
+        .map(i => ({
+            ...i,
+            type: p.type,
+            buy: p.buy,
+            sell: p.sell
+        }));
+});
+const toogleTracking = () => {
+    if (!item.value) {
+        return;
+    }
+    if (isTracked.value) {
+        marketTrackingStore.removeType(item.value.id);
+    } else {
+        marketTrackingStore.addType(item.value.id);
+    }
+}
+
+const view = () => {
+    if (!inputItem.value) {
+        return;
+    }
+
+    router.push({
+        name: 'market-types',
+        params: {
+            type: inputItem.value.id
+        }
+    });
+}
+
+watch(useRoute(), async route => {
+    if (route.params.type) {
+        const id = parseInt(typeof route.params.type === 'string' ? route.params.type : route.params.type[0]);
+
+        item.value = await getMarketType(id);
+        inputItem.value = item.value;
+        log.info('Loaded item:', item.value);
+    } else {
+        item.value = undefined;
+        inputItem.value = undefined;
+        log.info('No item to load');
+    }
+}, { immediate: true })
+</script>
+
+<template>
+    <div class="grid mb-2 mt-4">
+        <div class="w-auto flex">
+            <span>Item: </span>
+            <MarketTypeInput class="ms-2" v-model="inputItem" @submit="view"/>
+            <button class="justify-self-end ms-2" @click="view">View</button>
+        </div>
+    </div>
+    <template v-if="item">
+        <hr>
+        <div class="p-2 mb-4 flex">
+            <img v-if="item.id" :src="`https://images.evetech.net/types/${item.id}/icon?size=64`" class="type-image inline-block me-2" alt="" />
+            <div class="inline-block align-top w-full">
+                <div class="flex">
+                    <span class="text-lg font-semibold">{{ item.name }}</span>
+                    <div class="ms-auto">
+                        <ClipboardButton class="ms-1" :value="item.name" />
+                        <button v-if="price" class="btn-icon ms-1" title="Add acquisitions" @click="buyModal?.open(item, { 'Buy': price.buy, 'Sell': price.sell })"><ShoppingCartIcon /></button>
+                        <button class="btn-icon ms-1" :title="isTracked ? 'Untrack' : 'Track'" @click="toogleTracking">
+                            <BookmarkSlashIcon v-if="isTracked" />
+                            <BookmarkIcon v-else />
+                        </button>
+                    </div>
+                </div>
+                <p v-if="item.description" class="text-sm">{{ item.description }}</p>
+            </div>
+        </div>
+        <div v-if="result" class="mb-4">
+            <span>Market Info:</span>
+            <TrackingResultTable :items="[result]" infoOnly ignoredColums="name" />
+        </div>
+        <div v-if="acquisitions && acquisitions.length > 0">
+            <span>Acquisitions:</span>
+            <AcquisitionResultTable :items="acquisitions" infoOnly showAll :ignoredColums="['name', 'buy', 'sell']" defaultSortKey="date"/>
+        </div>
+    </template>
+    <BuyModal ref="buyModal" />
+</template>
+
+<style scoped lang="postcss">
+img.type-image {
+    width: 64px;
+    height: 64px;
+}
+</style>

src/pocketbase/collection.ts

@@ -1,27 +0,0 @@
-
-import { usePocketBase } from "@/pocketbase";
-import { RecordModel, RecordSubscription } from "pocketbase";
-import { Ref, computed, onMounted, ref } from "vue";
-
-export const watchCollection = <T extends RecordModel = RecordModel>(collection: string, topic: string, callback: (data: RecordSubscription<T>) => void) => {
-    const pb = usePocketBase();
-
-    onMounted(async () => await pb.collection(collection).subscribe<T>(topic, callback));
-};
-
-export const useCollection = <T extends RecordModel = RecordModel>(collection: string) => {
-    const pb = usePocketBase();
-    const list = ref<T[]>([]) as Ref<T[]>;
-
-    watchCollection<T>(collection, '*', data => {
-        if (data.action === 'delete') {
-            list.value = list.value.filter(i => i.id !== data.record.id);
-        } else if (data.action === 'update') {
-            list.value = list.value.map(i => i.id === data.record.id ? data.record : i);
-        } else if (data.action === 'create') {
-            list.value = [...list.value, data.record];
-        }
-    });
-    onMounted(async () => list.value = await pb.collection(collection).getFullList<T>().catch(() => [] as T[]));
-    return computed(() => list.value);
-}

src/pocketbase/index.ts

@@ -1,2 +0,0 @@
-export * from './collection';
-export * from './pocketbase';

src/pocketbase/pocketbase.ts

@@ -1,13 +0,0 @@
-import PocketBase from 'pocketbase';
-import { App, inject } from 'vue';
-
-const pocketBaseSymbol = Symbol('pocketBase');
-
-export const providePocketBase = (app: App) => {
-    const pb = new PocketBase('/pocketbase/');
-    
-    app.provide(pocketBaseSymbol, pb);
-    return pb;
-}
-
-export const usePocketBase = () => inject<PocketBase>(pocketBaseSymbol)!;

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/reprocess/BuySellSlider.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core';
 
-interface Props {
-    modelValue?: boolean;
-}
-interface Emits {
-    (e: 'update:modelValue', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false
-});
-const emit = defineEmits<Emits>();
-
-const value = useVModel(props, 'modelValue', emit);
+const modelValue = defineModel({ default: false });
 </script>
 
 <template>
     <label class="flex items-center relative w-max cursor-pointer select-none">
-        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full" v-model="value" />
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full" v-model="modelValue" />
         <span class="absolute font-medium text-xs right-1"> Buy </span>
         <span class="absolute font-medium text-xs right-8"> Sell </span>
         <span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-slate-100" />

src/reprocess/ReprocessInput.vue

@@ -1,22 +1,12 @@
 <script setup lang="ts">
-import { evepraisalAxiosInstance } from '@/service';
-import { useVModel } from '@vueuse/core';
+import { evepraisalAxiosInstance } from '@/market/appraisal/evepraisal';
 
 interface Props {
     name: string;
-    modelValue?: string;
 }
 
-interface Emits {
-    (e: 'update:modelValue', value: string): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: ''
-});
-const emit = defineEmits<Emits>();
-
-const value = useVModel(props, 'modelValue', emit);
+const modelValue = defineModel({ default: '' });
+defineProps<Props>();
 
 const loadFromId = async (e: Event) => {
     const input = e.target as HTMLInputElement;
@@ -31,7 +21,7 @@ const loadFromId = async (e: Event) => {
         return;
     }
 
-    value.value = JSON.stringify(response.data);
+    modelValue.value = JSON.stringify(response.data);
     input.value = '';
 }
 </script>
@@ -39,6 +29,6 @@ const loadFromId = async (e: Event) => {
 <template>
     <div class="flex-1 mx-1">
         <span>{{ name }}</span><input type="text" class="ms-2" @change="loadFromId" placeholder="id evepraisal" />
-        <textarea class="mt-1" v-model="value" />
+        <textarea class="mt-1" v-model="modelValue" />
     </div>
 </template>

src/reprocess/ReprocessResultTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SortableHeader, useSort } from '@/components/table';
+import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
 import { formatIsk, percentFormater } from '@/formaters';
 import { MarketTypeLabel } from '@/market/type';
 import { useStorage } from '@vueuse/core';
@@ -46,24 +46,31 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
             <input type="number" min="-100" max="100" step="1" v-model="threshold" />
         </div>
     </div>
-    <table>
-        <thead>
-            <tr>
-                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="market">Market</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': r.ratio >= threshold / 100 }">
-                <td>
-                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
-                </td>
-                <td class="text-right">{{ formatIsk(r.market) }}</td>
-                <td class="text-right">{{ formatIsk(r.materials) }}</td>
-                <td class="text-right">{{ percentFormater.format(r.ratio) }}</td>
-            </tr>
-        </tbody>
-    </table>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
+        <template #default="{ list }">
+            <thead>
+                <tr>
+                    <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="market">Market</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="r in list" :key="r.data.typeID" :class="{'line-green': r.data.ratio >= threshold / 100 }">
+                    <td>
+                        <MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
+                    </td>
+                    <td class="text-right">{{ formatIsk(r.data.market) }}</td>
+                    <td class="text-right">{{ formatIsk(r.data.materials) }}</td>
+                    <td class="text-right">{{ percentFormater.format(r.data.ratio) }}</td>
+                </tr>
+            </tbody>
+        </template>
+        <template #empty>
+            <div class="text-center mt-4">
+                <span>No items found</span>
+            </div>
+        </template>
+    </VirtualScrollTable>
 </template>

src/reprocess/reprocess.ts

@@ -1,4 +1,4 @@
-import { apiAxiosInstance } from "@/service";
+import { marbasAxiosInstance } from "@/marbas";
 
 export type ReprocessItemValues = {
     typeID: number;
@@ -22,7 +22,7 @@ export const reprocess = async (items: string, minerals: string, efficiency?: nu
     };
     const source = JSON.stringify(sourceJson);
 
-    const response = await apiAxiosInstance.post('/reprocess/', source, {params: {efficiency: efficiency ?? 0.55}});
+    const response = await marbasAxiosInstance.post('/reprocess/', source, {params: {efficiency: efficiency ?? 0.55}});
 
     return response.data;
 };

src/routes.ts

@@ -2,13 +2,15 @@ import { RouteRecordRaw } from 'vue-router';
 
 export const routes: RouteRecordRaw[] = [
     { path: '/', name: 'home', component: () => import('@/pages/Index.vue') },
-    { path: '/login', name: 'login', component: () => import('@/pages/Login.vue') },
+    { path: '/callback', name: 'callback', component: () => import('@/pages/Index.vue') },
     { path: '/reprocess', component: () => import('@/pages/Reprocess.vue') },
     { path: '/market', component: () => import('@/pages/Market.vue'), children: [
-        { path: '', redirect: '/market/scan' },
-        { path: 'scan', component: () => import('@/pages/market/Scan.vue') },
-        { path: 'track', component: () => import('@/pages/market/Track.vue') },
+        { path: '', redirect: '/market/types' },
+        { path: 'types/:type?', name: 'market-types', component: () => import('@/pages/market/TypeInfo.vue') },
+        { path: 'tracking', component: () => import('@/pages/market/Tracking.vue') },
+        { path: 'acquisitions', component: () => import('@/pages/market/Acquisitions.vue') },
     ] },
     { path: '/tools', component: () => import('@/pages/Tools.vue') },
-    { path: '/about', component: () => import('@/pages/About.vue') },
+    { path: '/characters', component: () => import('@/pages/Characters.vue') },
+    { path: '/about', name: 'about', component: () => import('@/pages/About.vue') },
 ];

src/service.ts

@@ -1,54 +1,25 @@
 import axios, { AxiosInstance } from 'axios';
+import rateLimit from 'axios-rate-limit';
 import log from 'loglevel';
 
-
-const logResource = (a: AxiosInstance) => {
+export const logResource = (a: AxiosInstance) => {
     a.interceptors.response.use(r => {
         log.debug(`[${r.config.method?.toUpperCase()}] ${r.config.url}`);
         return r;
     }, e => {
-        log.error(`[${e.config.method?.toUpperCase()}] ${e.config.url} failed with ${e.response?.status} ${e.response?.statusText}`);
+        if (!e?.config) {
+            log.error(e.message, e);
+        }
+        log.error(`[${e.config?.method?.toUpperCase()}] ${e.config?.url} failed with ${e.response?.status} ${e.response?.statusText}`, e);
         return Promise.reject(e);
     });
 }
 
-export const apiAxiosInstance = axios.create({
-    baseURL: '/api/',
+export const esiAxiosInstance = rateLimit(axios.create({
+    baseURL: import.meta.env.VITE_ESI_URL,
     headers: {
-        'accept': 'application/json',
+        'Accept': 'application/json',
         "Content-Type": "application/json"
     },
-})
-logResource(apiAxiosInstance)
-apiAxiosInstance.interceptors.response.use(async r => {
-    const next = r.data?.next;
-    let results = r.data?.results;
-
-    if (next) {
-        results = results.concat((await apiAxiosInstance.request({
-            ...r.config,
-            url: next,
-            baseURL: '',
-        })).data);
-    }
-    r.data = results;
-    return r;
-})
-
-export const evepraisalAxiosInstance = axios.create({
-    baseURL: '/appraisal/',
-    headers: {
-        'accept': 'application/json',
-        "Content-Type": "application/json"
-    },
-})
-logResource(evepraisalAxiosInstance)
-
-export const esiAxiosInstance = axios.create({
-    baseURL: '/esi/',
-    headers: {
-        'accept': 'application/json',
-        "Content-Type": "application/json"
-    },
-})
+}), { maxRPS: 10 })
 logResource(esiAxiosInstance)

src/sidebar/Sidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { usePocketBase } from '@/pocketbase';
-import { RouterLink, useRouter } from 'vue-router';
+import { useAuthStore } from '@/auth';
+import { Dropdown } from '@/components';
+import { RouterLink } from 'vue-router';
 
 const links = [
     { name: "Market", path: "/market" },
@@ -8,34 +9,65 @@ const links = [
     { name: "Tools", path: "/tools" }
 ];
 
-const pb = usePocketBase();
-const router = useRouter();
+const authStore = useAuthStore();
 
 const logout = async () => {
-    pb.authStore.clear();
-    await router.push({ name: 'login' });
+    await authStore.logout();
 }
 </script>
 
 <template>
     <aside class="fixed top-0 left-0 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
         <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700 flex flex-col">
+            <div class="mb-2 border-b-2 border-emerald-500">
+                <Dropdown class="mb-2 user-dropdown">
+                    <template #button>
+                        <span>{{ authStore.username }}</span>
+                    </template>
+                    <ul>
+                        <li>
+                            <RouterLink class="sidebar-button py-0.5 px-2" to="/characters">Characters</RouterLink>
+                        </li>
+                        <li>
+                            <RouterLink class="sidebar-button py-0.5 px-2" :to="{name: 'about'}">About EVE Online</RouterLink>
+                        </li>
+                        <li>
+                            <a class="sidebar-button py-0.5 px-2 text-amber-700" @click="logout">Logout</a>
+                        </li>
+                    </ul>
+                </Dropdown>
+            </div>
             <ul class="space-y-2 font-medium">
                 <li v-for="link in links" :key="link.name">
-                    <RouterLink :to="link.path" class="flex items-center p-2 rounded-md hover:bg-slate-800">
+                    <RouterLink :to="link.path" class="sidebar-button p-2">
                         <span>{{ link.name }}</span>
                     </RouterLink>
                 </li>
             </ul>
-            <div class="mt-auto">
-                <button @click="logout">Logout</button>
-            </div>
         </div>
     </aside>
 </template>
 
 <style scoped lang="postcss">
+.sidebar-button {
+    @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
+}
 .router-link-active {
     @apply bg-emerald-500 hover:bg-emerald-700;
 }
+.user-dropdown {
+    @apply w-full;
+    :deep(>div) {
+        @apply w-full;
+        >div {
+            @apply w-full bg-slate-800;
+        }
+    }
+    :deep(>button) {
+        @apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
+    }
+    &.dropdown-open:deep(>button) {
+        @apply bg-slate-800 rounded-b-none;
+    }
+}
 </style>

src/style.css

@@ -21,30 +21,36 @@
         @apply border rounded bg-slate-500 w-full;
     }
 
-    table {
+    table, .table {
         @apply table-auto border-collapse border-slate-500 w-full;
+    }
+    .table-header {
+        @apply table-cell;
+    }
+    .table-cell {
+        @apply pt-px pb-px;
+    }
+    th, .table-header {
+        @apply border bg-slate-600 px-1;
+    }
+    td, .table-cell {
+        @apply border px-1;
+    }
+    tr, .table-row {
+        @apply hover:bg-slate-900;
 
-        th {
-            @apply border bg-slate-600 px-1;
+        &.line-red {
+            @apply bg-amber-900 hover:bg-amber-950;
         }
-        td {
-            @apply border px-1;
+        &.line-blue {
+            @apply bg-sky-600 hover:bg-sky-800;
         }
-        tr {
-            @apply hover:bg-slate-900;
-
-            &.line-red {
-                @apply bg-amber-900 hover:bg-amber-950;
-            }
-            &.line-blue {
-                @apply bg-sky-600 hover:bg-sky-800;
-            }
-            &.line-green {
-                @apply bg-emerald-500 hover:bg-emerald-600;
-            }
+        &.line-green {
+            @apply bg-emerald-500 hover:bg-emerald-600;
         }
     }
 
+
     ::-webkit-scrollbar {
         @apply w-3;
     }
@@ -58,6 +64,7 @@
     input[type=search] {
         @apply search-cancel:appearance-none search-cancel:w-4 search-cancel:h-4 search-cancel:bg-[url('/svg/search-cancel.svg')];
     }
+
     .btn-icon {
         @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent;
         > svg {

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
 
     /* Bundler mode */

vite.config.ts

@@ -1,88 +1,25 @@
 import vue from '@vitejs/plugin-vue';
 import * as path from "path";
-import { defineConfig, loadEnv } from 'vite';
-import zlib from 'zlib';
+import { defineConfig } from 'vite';
+import runtimeEnv from 'vite-plugin-runtime-env';
 
-export default defineConfig(({ mode }) => {
-    const env = loadEnv(mode, process.cwd(), '');
-
-    return {
-        plugins: [vue()],
-        resolve: {
-            alias: {
-                'src': path.resolve(__dirname, './src/'),
-                '@': path.resolve(__dirname, './src/'),
-            },
-            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+export default defineConfig({
+    plugins: [
+        runtimeEnv(),
+        vue(),
+    ],
+    resolve: {
+        alias: {
+            'src': path.resolve(__dirname, './src/'),
+            '@': path.resolve(__dirname, './src/'),
         },
-        server: {
-            port: 3000,
-            strictPort: true,
-            watch: {
-                usePolling: true
-            },
-            proxy: {
-                '/api/': {
-                    target: env.API_URL,
-                    changeOrigin: true,
-                    followRedirects: true,
-                    rewrite: path => path.replace(/^\/api/, ''),
-                    selfHandleResponse: true,
-                    configure: proxy => {
-                        proxy.on('proxyRes', (proxyRes, req, res) => {
-                            const chunks = [];
-              
-                            proxyRes.on("data", (chunk) => chunks.push(chunk));
-                            proxyRes.on("end", () => {
-                                const buffer = Buffer.concat(chunks);
-                                const encoding = proxyRes.headers["content-encoding"];
-                                const relace = (b: Buffer) => {
-                                    let remoteBody = b.toString();
-                                    const modifiedBody = remoteBody.replace(env.API_URL, '/api/');
-
-                                    res.write(modifiedBody);
-                                    res.end();
-                                }
-
-                                if (!encoding) {
-                                    relace(buffer);
-                                } else if (encoding === "gzip" || encoding === "deflate") {
-                                    zlib.unzip(buffer, (err, b) => {
-                                        if (!err) {
-                                            relace(b);
-                                        } else {
-                                            console.error(err);
-                                        }
-                                    });
-                                } else {
-                                    console.error(`Unsupported encoding: ${encoding}`);
-                                }
-                            });
-                        });
-                    }
-                },
-                '/pocketbase/': {
-                    target: env.POCKET_BASE_URL,
-                    changeOrigin: true,
-                    followRedirects: true,
-                    rewrite: path => path.replace(/^\/pocketbase/, ''),
-                },
-                '/appraisal/': {
-                    target: env.EVEPRAISAL_URL,
-                    changeOrigin: true,
-                    followRedirects: true,
-                    rewrite: path => path.replace(/^\/appraisal/, ''),
-                },
-                '/esi/': {
-                    target: env.ESI_URL,
-                    changeOrigin: true,
-                    followRedirects: true,
-                    rewrite: path => path.replace(/^\/esi/, ''),
-                    headers: {
-                        'User-Agent': env.ESI_USER_AGENT
-                    },
-                }
-            }
+        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    },
+    server: {
+        port: 3000,
+        strictPort: true,
+        watch: {
+            usePolling: true
         }
-    };
-})
+    }
+});