auto refresh

src/composables/index.ts

@@ -0,0 +1 @@
+export { useAutoRefresh } from './useAutoRefresh';

src/composables/useAutoRefresh.ts

@@ -0,0 +1,30 @@
+import {onUnmounted, ref} from "vue";
+
+const DEFAULT_INTERVAL = 1_000;
+
+export const useAutoRefresh = (callback: () => void | Promise<void>, interval: number = DEFAULT_INTERVAL) => {
+    const active = ref(false);
+    let timer: ReturnType<typeof setInterval> | undefined;
+
+    const stop = () => {
+        if (timer) {
+            clearInterval(timer);
+            timer = undefined;
+        }
+        active.value = false;
+    };
+
+    const start = () => {
+        if (active.value) {
+            return;
+        }
+        active.value = true;
+        timer = setInterval(callback, interval);
+    };
+
+    const toggle = () => active.value ? stop() : start();
+
+    onUnmounted(stop);
+
+    return {active, start, stop, toggle};
+};

src/market/acquisition/AcquisitionQuantilsTooltip.vue

@@ -47,9 +47,9 @@ watchEffect(async () => {
 <template>
     <Tooltip v-model:open="open" class="tooltip">
         <template #header>
-            <LoadingSpinner v-if="history.length < trendingScale" class="w-6 h-6" />
+            <LoadingSpinner v-if="history.length < trendingScale" />
-            <ArrowTrendingUpIcon v-else-if="history[0].average > history[trendingScale - 1].average" class="w-6 h-6" />
+            <ArrowTrendingUpIcon v-else-if="history[0].average > history[trendingScale - 1].average" />
-            <ArrowTrendingDownIcon v-else class="w-6 h-6" />
+            <ArrowTrendingDownIcon v-else />
         </template>
         <template #default>
             <div class="bg-slate-500 -left-1/2 relative tooltip-content" v-if="history.length > 0">
@@ -79,9 +79,6 @@ watchEffect(async () => {
 
 .tooltip {
     @apply ms-auto;
-    >:deep(div.header) {
-        @apply btn-icon px-2;
-    }
     &.open {
         &.tooltip-top>:deep(div.header) {
             @apply rounded-t-md bg-slate-600;
@@ -94,4 +91,8 @@ watchEffect(async () => {
         }
     }
 }
+.tooltip>:deep(div.header) {
+  @apply btn-icon px-2;
+}
+
 </style>

src/pages/market/Acquisitions.vue

@@ -2,7 +2,8 @@
 import {getMarketTypes, MarketTypePrice, useApraisalStore} from "@/market";
 import {AcquiredType, AcquisitionResultTable, BuyModal, SellModal, useAcquiredTypesStore} from '@/market/acquisition';
 import {ref, watch} from 'vue';
-import {activityApi} from "@/mammon";
+import {ArrowPathIcon} from '@heroicons/vue/24/outline';
+import {useAutoRefresh} from '@/composables';
 
 const buyModal = ref<typeof BuyModal>();
 const sellModal = ref<typeof SellModal>();
@@ -12,11 +13,11 @@ const acquiredTypesStore = useAcquiredTypesStore();
 const items = ref<AcquiredType[]>([]);
 
 const refresh = async () => {
-  await activityApi.fetchAllNewActivities();
-  await activityApi.processNewActivities();
   await acquiredTypesStore.refresh();
 }
 
+const {active: autoRefresh, toggle: toggleAutoRefresh} = useAutoRefresh(refresh, 5 * 60 * 1000);
+
 watch(() => acquiredTypesStore.acquiredTypes, async itms => {
     if (itms.length === 0) {
         return;
@@ -41,7 +42,12 @@ watch(() => acquiredTypesStore.acquiredTypes, async itms => {
 <template>
     <div class="mt-4">
         <div class="flex">
-            <button class="ms-auto" @click="refresh">Refresh</button>
+            <div class="ms-auto flex">
+                <button class="rounded-e-none" @click="refresh">Refresh</button>
+                <button class="rounded-s-none border-s-0 flex items-center" :class="{ 'bg-slate-700': autoRefresh }" title="Auto refresh" @click="toggleAutoRefresh">
+                    <ArrowPathIcon class="w-5 h-5" :class="{ 'animate-spin': autoRefresh }" />
+                </button>
+            </div>
         </div>
         <template v-if="items.length > 0">
             <AcquisitionResultTable :items="items" @buy="(types, price, buy, sell) => buyModal?.open(types[0].type, { 'Price': price, 'Buy': buy, 'Sell': sell })" @sell="types => sellModal?.open(types)" ignoredColums="date" />