Rework to use marbas and authentik instead of poketbase (#1)

Reviewed-on: #1
2024-05-17 23:00:52 +02:00
parent 9fb78329cc
commit 717eaa6ed8
47 changed files with 2306 additions and 1049 deletions
@@ -0,0 +1,8 @@
+import { MarketType } from "..";
+import { AcquiredMarketType } from "./acquisition";
+
+export type AcquiredType = Omit<AcquiredMarketType, 'type'> & {
+    type: MarketType,
+    buy: number,
+    sell: number
+}
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { LoadingSpinner, Tooltip } from '@/components';
+import { formatIsk } from '@/formaters';
+import { getHistory, jitaId } from '@/market';
+import { getHistoryQuartils } from '@/market/tracking';
+import { ArrowTrendingDownIcon, ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
+import { computedAsync } from '@vueuse/core';
+import { ref, watchEffect } from 'vue';
+
+const trendingScale = 3;
+
+interface Props {
+    id: number;
+    buy: number;
+    sell: number;
+}
+
+const props = defineProps<Props>();
+
+const open = ref(false);
+
+const q1 = ref(0);
+const median = ref(0);
+const q3 = ref(0);
+const lineColor = ref('');
+const history = computedAsync(() => getHistory(jitaId, props.id), []);
+
+watchEffect(async () => {
+    if (!open.value || !props.id) {
+        return;
+    }
+    const quartils = getHistoryQuartils(history.value);
+
+    q1.value = quartils.q1;
+    median.value = quartils.median;
+    q3.value = quartils.q3;
+
+    if (props.buy >= quartils.q3) {
+        lineColor.value = 'line-blue';
+    } else if (props.sell >= quartils.q3) {
+        lineColor.value = 'line-green';
+    } else {
+        lineColor.value = '';
+    }
+})
+</script>
+
+<template>
+    <Tooltip v-model:open="open" class="tooltip">
+        <template #header>
+            <LoadingSpinner v-if="history.length < trendingScale" />
+            <ArrowTrendingUpIcon v-else-if="history[0].average > history[trendingScale - 1].average" />
+            <ArrowTrendingDownIcon v-else />
+        </template>
+        <template #default>
+            <div class="bg-slate-500 -left-1/2 relative" v-if="history.length > 0">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Q1</th>
+                            <th>Median</th>
+                            <th>Q3</th>
+                        </tr>
+                    </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>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </template>
+    </Tooltip>
+</template>
+
+<style scoped lang="postcss">
+.tooltip {
+    @apply ms-auto;
+    >:deep(div.header) {
+        @apply btn-icon px-2;
+    }
+    &.open>:deep(div.header) {
+        @apply rounded-t-md bg-slate-600;
+    }
+}
+</style>
@@ -0,0 +1,125 @@
+<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 { AcquiredType } from './AcquiredType';
+import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
+
+type Result = {
+    type: MarketType;
+    typeID: number;
+    name: string;
+    buy: number;
+    sell: number;
+    price: number;
+    count: number;
+    precentProfit: number;
+    iskProfit: number;
+}
+
+interface Props {
+    items?: AcquiredType[];
+}
+
+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-acquisition-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.price, r.sell);
+
+        return {
+            type: r.type,
+            typeID: r.type.id,
+            name: r.type.name,
+            buy: r.buy,
+            sell: r.sell,
+            price: r.price,
+            count: r.remaining,
+            precentProfit,
+            iskProfit: r.price * precentProfit * r.remaining
+        };
+    })), {
+        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" />
+                        <AcquisitionQuantilsTooltip :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>
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { Modal } from '@/components';
+import { formatIsk } from '@/formaters';
+import { MarketType, MarketTypeLabel } from '@/market';
+import { ref } from 'vue';
+import { useAcquiredTypesStore } from './acquisition';
+
+
+const acquiredTypesStore = useAcquiredTypesStore();
+
+const modalOpen = ref<boolean>(false);
+const type = ref<MarketType>();
+const suggestions = ref<Record<string, number>>({});
+const price = ref(1000000);
+const count = ref(1);
+
+const open = (t: MarketType, s?: Record<string, number> | number) => {
+    type.value = t;
+    count.value = 1;
+    
+    if (typeof s === 'number') {
+        suggestions.value = {};
+        price.value = s;
+    } else if (s) {
+        suggestions.value = s;
+        price.value = Object.values(s)[0];
+    } else {
+        suggestions.value = {};
+        price.value = 1000000;
+    }
+    modalOpen.value = true;
+}
+const add = () => {
+    const id = type.value?.id;
+
+    if (!id) {
+        modalOpen.value = false;
+        return;
+    }
+
+    acquiredTypesStore.addType(id, count.value, price.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">
+                    <span>Price: </span>
+                    <div class="ms-2">
+                        <input  type="number" min="0" step="1" v-model="price" @keyup.enter="add" />
+                        <div class="px-2 mt-2 bg-slate-600 hover:bg-slate-700 border rounded cursor-pointer" v-for="(p, n) of suggestions" :key="n" @click="price = p">{{ n }}: {{ formatIsk(p) }}</div>
+                    </div>
+                </div>
+                <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="add" />
+                </div>
+                <button class="mb-auto" @click="add">Add</button>
+            </div>
+        </div>
+    </Modal>
+</template>
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Modal } from '@/components';
+import { MarketType, MarketTypeLabel } from '@/market';
+import { ref } from 'vue';
+import { useAcquiredTypesStore } from './acquisition';
+
+
+const acquiredTypesStore = useAcquiredTypesStore();
+
+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;
+    }
+
+    acquiredTypesStore.removeType(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>
@@ -0,0 +1,63 @@
+import { marbasAxiosInstance } from "@/service";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+export type AcquiredMarketType = {
+    id: number;
+    type: number;
+    quantity: number;
+    remaining: number;
+    price: number;
+    date: Date;
+    source: 'bo' | 'so' | 'prod';
+    user: number;
+}
+
+const endpoint = '/api/acquisitions/';
+
+export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
+    const acquiredTypes = ref<AcquiredMarketType[]>([]);
+
+    const types = computed(() => acquiredTypes.value);
+    const addType = async (type: number, quantity: number, price: number) => { 
+        acquiredTypes.value = [...acquiredTypes.value, (await marbasAxiosInstance.post<AcquiredMarketType>(endpoint, {
+            type: type,
+            quantity: quantity,
+            remaining: quantity,
+            price: price,
+            date: new Date(),
+            source: 'bo'
+        })).data];
+    };
+    const removeType = async (type: number, quantity: number) => {
+        const found = acquiredTypes.value.find(item => item.type === type);
+
+        if (!found) {
+            return;
+        }
+
+        if (found.remaining <= 0) {
+            acquiredTypes.value = acquiredTypes.value.filter(i => i.type !== type);
+
+        } else {
+            acquiredTypes.value = acquiredTypes.value.map(i => {
+                if (i.type === item.type) {
+                    return item;
+                } else {
+                    return i;
+                }
+            });
+        }
+
+        const item = {
+            ...found,
+            remaining: found.remaining - quantity
+        };
+
+        await marbasAxiosInstance.put(`${endpoint}${item.id}`, item);
+    };
+    
+    marbasAxiosInstance.get<AcquiredMarketType[]>(endpoint).then(res => acquiredTypes.value = res.data.filter(item => item.remaining > 0));
+
+    return { types, addType, removeType };
+});
@@ -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';
+