auto refresh

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" />