Improve data management

.gitattributes

@@ -0,0 +1,12 @@
+* text=auto eol=lf
+
+*.html text eol=lf
+*.ini text eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.md text eol=lf
+*.vue text eol=lf
+*.ts text eol=lf
+
+*.ico binary
+*.png binary

components/data/DownloadForm.vue

@@ -13,6 +13,8 @@
                         v-model="formState.exchangeId"
                         :items="downloadStore.exchanges"
                         :placeholder="t('data.download.form.exchange.placeholder')"
+                        :loading="downloadStore.exchangesStatus === 'loading'"
+                        :disabled="downloadStore.exchangesStatus !== 'success'"
                     />
                 </UFormField>
 
@@ -87,6 +89,10 @@ const symbolsForSelectedExchange = computed(() => {
     return downloadStore.symbolsByExchange[formState.exchangeId]?.list ?? [];
 });
 
+onMounted(() => {
+    downloadStore.fetchExchanges();
+});
+
 watch(() => formState.exchangeId, (newExchangeId) => {
     if (newExchangeId) {
         formState.symbols = []; // Reset symbols when exchange changes

components/data/ProgressList.vue

@@ -2,20 +2,36 @@
     <div v-if="downloadStore.downloadQueue.length > 0">
         <h3 class="text-lg font-semibold mt-8 mb-2">{{ t('data.download.progress.title') }}</h3>
         <UCard>
-            <div class="space-y-4">
+            <div class="space-y-6">
                 <div v-for="job in downloadStore.downloadQueue" :key="job.key">
                     <div class="flex justify-between items-center gap-4">
                         <div class="flex items-center gap-2 min-w-0">
                             <UIcon v-if="job.status === 'completed'" name="i-heroicons-check-circle-20-solid" class="text-green-500 w-5 h-5 flex-shrink-0" />
-                            <UIcon v-else-if="job.status === 'downloading'" name="i-heroicons-arrow-down-tray-20-solid" class="animate-pulse w-5 h-5 flex-shrink-0" />
+                            <UIcon v-else-if="job.status === 'downloading'" name="i-heroicons-arrow-down-tray-20-solid" class="w-5 h-5 flex-shrink-0" />
                             <UIcon v-else-if="job.status === 'failed'" name="i-heroicons-exclamation-circle-20-solid" class="text-red-500 w-5 h-5 flex-shrink-0" />
+                            <UIcon v-else-if="job.status === 'cancelled'" name="i-heroicons-x-circle-20-solid" class="text-red-500 w-5 h-5 flex-shrink-0" />
                             <UIcon v-else name="i-heroicons-pause-circle-20-solid" class="text-gray-400 w-5 h-5 flex-shrink-0" />
                             <p class="text-sm truncate">
                                 <strong>{{ job.symbol }}</strong> [{{ job.timeframe }}]
-                                <span class="text-gray-500 dark:text-gray-400">- {{ job.message }}</span>
                             </p>
                         </div>
-                        <UProgress v-if="job.status === 'downloading'" :value="job.progress" class="w-32" />
+                        <UButton
+                            v-if="job.jobId && ['pending', 'downloading'].includes(job.status)"
+                            icon="i-heroicons-x-mark-20-solid"
+                            size="2xs"
+                            color="error"
+                            variant="soft"
+                            square
+                            class="cursor-pointer"
+                            :aria-label="`Cancel download for ${job.key}`"
+                            @click="downloadStore.cancelDownload(job.jobId)"
+                        />
+                    </div>
+                    <div class="mt-1 space-y-1">
+                        <p class="text-xs text-gray-500 dark:text-gray-400" :class="{ 'text-center': job.status === 'downloading' }">
+                            {{ formatJobMessage(job.message) }}
+                        </p>
+                        <UProgress v-if="job.status === 'downloading'" v-model="job.progress" />
                     </div>
                 </div>
             </div>
@@ -26,4 +42,17 @@
 <script setup lang="ts">
 const { t } = useI18n();
 const downloadStore = useDataDownloadStore();
+
+/**
+ * Formats the job message to be more concise.
+ * If the message contains "until", it extracts and displays only that part.
+ * @param message The original message from the backend.
+ */
+const formatJobMessage = (message: string): string => {
+    const untilIndex = message.toLowerCase().indexOf('up to');
+    if (untilIndex !== -1) {
+        return `Until ${message.slice(untilIndex + 6)}`;
+    }
+    return message;
+};
 </script>

components/view/DataManagement.vue

@@ -50,7 +50,7 @@
                 </div>
             </div>
 
-            <UAlert v-else icon="i-heroicons-circle-stack" :title="t('data.management.empty')" />
+            <UAlert v-else icon="i-heroicons-circle-stack" :title="t('data.management.empty')" color="neutral" variant="soft"/>
         </div>
     </div>
 </template>

stores/dataAvailabilityStore.ts

@@ -1,59 +1,59 @@
-export const useDataAvailabilityStore = defineStore('dataAvailability', () => {
-    const manifest = ref<DataAvailabilityManifestItem[]>([]);
-    const status = ref<LoadingStatus>('idle');
-    const toast = useToast();
-
-    const isLoading = computed(() => status.value === 'loading');
-
-    async function fetchManifest() {
-        if (manifest.value.length > 0) return;
-
-        status.value = 'loading';
-        try {
-            manifest.value = await $fetch<DataAvailabilityManifestItem[]>('/api/data-availability');
-            status.value = 'success';
-        } catch (e: any) {
-            toast.add({
-                title: 'Error Loading Market Data',
-                description: e.data?.error || 'Could not connect to the API to get available market data.',
-                color: 'error',
-                icon: 'i-heroicons-exclamation-triangle',
-            });
-            console.error('Failed to fetch data availability manifest:', e);
-            status.value = 'error';
-        }
-    }
-
-    const availableSymbols = computed(() => manifest.value.map(item => item.symbol).sort());
-
-    const getTimeframesForSymbol = (symbol: string | null): TimeframeData[] => {
-        if (!symbol) return [];
-        const symbolData = manifest.value.find(item => item.symbol === symbol);
-        return symbolData?.timeframes ?? [];
-    };
-
-    const getDateRangeFor = (symbol: string | null, timeframe: string | null): { min?: string, max?: string } => {
-        if (!symbol || !timeframe) return {};
-
-        const symbolTimeframes = getTimeframesForSymbol(symbol);
-        const timeframeData = symbolTimeframes.find(tf => tf.timeframe === timeframe);
-
-        if (!timeframeData) return {};
-
-        return {
-            min: timeframeData.startDate.split('T')[0],
-            max: timeframeData.endDate.split('T')[0],
-        };
-    };
-
-
-    return {
-        manifest,
-        status,
-        isLoading,
-        fetchManifest,
-        availableSymbols,
-        getTimeframesForSymbol,
-        getDateRangeFor,
-    };
-});
+export const useDataAvailabilityStore = defineStore('dataAvailability', () => {
+    const manifest = ref<DataAvailabilityManifestItem[]>([]);
+    const status = ref<LoadingStatus>('idle');
+    const toast = useToast();
+
+    const isLoading = computed(() => status.value === 'loading');
+
+    async function fetchManifest(force = false) {
+        if (manifest.value.length > 0 && !force) return;
+
+        status.value = 'loading';
+        try {
+            manifest.value = await $fetch<DataAvailabilityManifestItem[]>('/api/data-availability');
+            status.value = 'success';
+        } catch (e: any) {
+            toast.add({
+                title: 'Error Loading Market Data',
+                description: e.data?.error || 'Could not connect to the API to get available market data.',
+                color: 'error',
+                icon: 'i-heroicons-exclamation-triangle',
+            });
+            console.error('Failed to fetch data availability manifest:', e);
+            status.value = 'error';
+        }
+    }
+
+    const availableSymbols = computed(() => manifest.value.map(item => item.symbol).sort());
+
+    const getTimeframesForSymbol = (symbol: string | null): TimeframeData[] => {
+        if (!symbol) return [];
+        const symbolData = manifest.value.find(item => item.symbol === symbol);
+        return symbolData?.timeframes ?? [];
+    };
+
+    const getDateRangeFor = (symbol: string | null, timeframe: string | null): { min?: string, max?: string } => {
+        if (!symbol || !timeframe) return {};
+
+        const symbolTimeframes = getTimeframesForSymbol(symbol);
+        const timeframeData = symbolTimeframes.find(tf => tf.timeframe === timeframe);
+
+        if (!timeframeData) return {};
+
+        return {
+            min: timeframeData.startDate.split('T')[0],
+            max: timeframeData.endDate.split('T')[0],
+        };
+    };
+
+
+    return {
+        manifest,
+        status,
+        isLoading,
+        fetchManifest,
+        availableSymbols,
+        getTimeframesForSymbol,
+        getDateRangeFor,
+    };
+});

stores/dataDownloadStore.ts

@@ -1,17 +1,42 @@
 export const useDataDownloadStore = defineStore('dataDownload', () => {
     const toast = useToast();
     const { public: { apiUrl } } = useRuntimeConfig();
+    const dataAvailabilityStore = useDataAvailabilityStore();
 
     // --- State ---
-    const exchanges = ref(['okx', 'binance', 'bybit']); // Mocked exchange list
+    const exchanges = ref<string[]>([]);
+    const exchangesStatus = ref<LoadingStatus>('idle');
     const symbolsByExchange = reactive<Record<string, { list: string[], status: LoadingStatus }>>({});
     const downloadQueue = ref<DownloadJob[]>([]);
     const isQueueRunning = ref(false);
 
     // --- Actions ---
 
     /**
-     * Fetches (currently mocked) symbols for a given exchange.
+     * Fetches the list of available exchanges from the API.
+     */
+    async function fetchExchanges() {
+        if (exchanges.value.length > 0 || exchangesStatus.value === 'loading') {
+            return;
+        }
+
+        exchangesStatus.value = 'loading';
+        try {
+            exchanges.value = await $fetch<string[]>('/api/data/exchanges');
+            exchangesStatus.value = 'success';
+        } catch (e: any) {
+            exchangesStatus.value = 'error';
+            toast.add({
+                title: 'Error Fetching Exchanges',
+                description: e.data?.error || 'Could not fetch the list of exchanges.',
+                color: 'error',
+                icon: 'i-heroicons-exclamation-triangle-20-solid',
+            });
+        }
+    }
+
+    /**
+     * Fetches symbols for a given exchange.
      */
     async function fetchSymbols(exchangeId: string) {
         if (!exchangeId || symbolsByExchange[exchangeId]?.status === 'loading') {
@@ -107,6 +132,29 @@ export const useDataDownloadStore = defineStore('dataDownload', () => {
         }
     }
 
+    /**
+     * Sends a cancellation request for a specific job.
+     * @param jobId The ID of the job to cancel.
+     */
+    async function cancelDownload(jobId: string) {
+        try {
+            await $fetch(`/api/data/download/${jobId}`, {
+                method: 'DELETE'
+            });
+            toast.add({
+                title: 'Cancellation Requested',
+                description: `A request to cancel job ${jobId} has been sent.`,
+                color: 'info'
+            });
+        } catch (e: any) {
+            toast.add({
+                title: 'Cancellation Error',
+                description: e.data?.error || `Could not request cancellation for job ${jobId}.`,
+                color: 'error'
+            });
+        }
+    }
+
     /**
      * Listens to a Mercure stream for a specific download job.
      */
@@ -122,11 +170,12 @@ export const useDataDownloadStore = defineStore('dataDownload', () => {
                 job.progress = data.progress || job.progress;
                 job.message = data.message || job.message;
 
-                if (data.status === 'completed' || data.status === 'failed') {
+                if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
                     job.status = data.status;
                     eventSource.close();
-                    downloadQueue.value.shift(); // Remove completed/failed job
-                    processQueue(); // Process next in queue
+                    downloadQueue.value.shift();
+                    dataAvailabilityStore.fetchManifest(true);
+                    processQueue();
                     resolve();
                 }
             };
@@ -136,6 +185,7 @@ export const useDataDownloadStore = defineStore('dataDownload', () => {
                 job.message = 'Connection to progress stream failed.';
                 eventSource.close();
                 downloadQueue.value.shift();
+                dataAvailabilityStore.fetchManifest(true);
                 processQueue();
                 resolve();
             };
@@ -144,10 +194,13 @@ export const useDataDownloadStore = defineStore('dataDownload', () => {
 
     return {
         exchanges,
+        exchangesStatus,
         symbolsByExchange,
         downloadQueue,
         isQueueRunning,
+        fetchExchanges,
         fetchSymbols,
         queueDownloads,
+        cancelDownload,
     };
 });

types/DownloadJob.d.ts

@@ -5,7 +5,7 @@ declare interface DownloadJob {
     timeframe: string;
     startDate: string;
     endDate: string;
-    status: 'pending' | 'downloading' | 'completed' | 'failed';
+    status: 'pending' | 'downloading' | 'completed' | 'failed' | 'cancelled';
     progress: number;
     message: string;
     jobId?: string; // Mercure Job ID