feat: adding in mob data editing and exporting

src/lib/services/http-service.ts

@@ -1,39 +1,53 @@
-import axios from 'axios';
-import {GetJwtToken} from './session-service';
+import axios, {type AxiosRequestConfig, type AxiosResponse} from 'axios';
+import { GetJwtToken } from './session-service';
+import { toast } from "@zerodevx/svelte-toast";
 
 export class HttpService {
     private static instance: HttpService;
 
-    constructor() {
+    private constructor() {
         axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
         axios.interceptors.request.use((config) => {
             if (GetJwtToken()) {
                 config.headers['Authorization'] = `Bearer ${GetJwtToken()}`;
             }
             return config;
         }, (error) => {
-            // Do something with request error
             return Promise.reject(error);
         });
+
+        axios.interceptors.response.use(function (response) {
+            return response;
+        }, function (error) {
+            toast.push('Failed to fetch');
+            return Promise.reject(error);
+        });
+    }
+
+    public static getInstance(): HttpService {
+        if (!HttpService.instance) {
+            HttpService.instance = new HttpService();
+        }
+        return HttpService.instance;
     }
 
-    public async get(url: string): Promise<any> {
+    public async get(url: string): Promise<AxiosResponse> {
         return await axios.get(url);
     }
 
-    public async post(url: string, data: any): Promise<any> {
-        return await axios.post(url, data);
+    public async post(url: string, data: any, options?: AxiosRequestConfig): Promise<AxiosResponse> {
+        return await axios.post(url, data, options);
     }
 
-    public async put(url: string, data: any): Promise<any> {
+    public async put(url: string, data: any): Promise<AxiosResponse> {
         return await axios.put(url, data);
     }
 
-    public async delete(url: string): Promise<any> {
+    public async delete(url: string): Promise<AxiosResponse> {
         return await axios.delete(url);
     }
 
-    public async patch(url: string, data: any): Promise<any> {
+    public async patch(url: string, data: any): Promise<AxiosResponse> {
         return await axios.patch(url, data);
     }
 }

src/lib/services/mod-data-service.ts

@@ -2,7 +2,7 @@ import { HttpService } from "$lib/services/http-service";
 import type {IMobData} from "$lib/models/mob-data";
 
 export class ModDataService {
-    httpService = new HttpService();
+    httpService = HttpService.getInstance();
 
     public async getMobData(): Promise<IMobData[]> {
         let response = await this.httpService.get('ModData/Mobs');
@@ -11,4 +11,20 @@ export class ModDataService {
         }
         return [];
     }
+
+    public async exportMobData(data: IMobData[]): Promise<void> {
+        const response = await this.httpService.post('ModData/ExportMobs', data, {
+            responseType: 'blob',
+        });
+        const url = window.URL.createObjectURL(response.data);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'mob_data.zip';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+
+        window.URL.revokeObjectURL(url);
+    }
 }

src/lib/services/player-service.ts

@@ -12,7 +12,7 @@ export interface IPlayerStats {
 }
 
 export class PlayerService {
-    httpService = new HttpService();
+    httpService = HttpService.getInstance();
 
     public async getTop50Players(): Promise<IPlayer[]> {
         let response = await this.httpService.get('Player/Leaderboard?count=50&skip=0');

src/lib/services/user-service.ts

@@ -3,7 +3,7 @@ import {GetJwtToken, SetJwtToken} from "$lib/services/session-service";
 import {type IUser, user} from "$lib/stores/user-store";
 
 export class UserService {
-    httpService = new HttpService();
+    httpService = HttpService.getInstance();
     user: IUser | null = null;
 
     public async getUserProfile() {

src/routes/mod-data/mobs/+page.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import { ModDataService } from '$lib/services/mod-data-service';
     import EditModal from '$lib/components/EditMobDataModal.svelte';
+    import { Button } from 'flowbite-svelte';
     let modDataService = new ModDataService();
     import type { IMobData } from '$lib/models/mob-data';
 
@@ -49,27 +50,40 @@
         filteredMobData = [...mobData];
         closeEditModal();
     }
+
+    async function exportMobData() {
+        try {
+            await modDataService.exportMobData(mobData);
+        } catch (err) {
+            error = 'Failed to export mob data';
+        }
+    }
 </script>
 
 <div class="container mx-auto p-4">
     <h1 class="text-2xl font-bold mb-4">Mob Data</h1>
 
-    <!-- Search Input -->
-    <div class="mb-4">
-        <label
-            for="search"
-            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-        >
-            Search Mobs
-        </label>
-        <input
-            id="search"
-            type="text"
-            bind:value={searchQuery}
-            on:input={handleSearch}
-            placeholder="Type to search by name..."
-            class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 dark:text-gray-400 focus:ring focus:ring-blue-300 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
-        />
+    <!-- Search Input and Save Button -->
+    <div class="mb-4 flex items-center space-x-4">
+        <div class="flex-grow">
+            <label
+                for="search"
+                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+                Search Mobs
+            </label>
+            <input
+                id="search"
+                type="text"
+                bind:value={searchQuery}
+                on:input={handleSearch}
+                placeholder="Type to search by name..."
+                class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 dark:text-gray-400 focus:ring focus:ring-blue-300 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+            />
+        </div>
+        <Button color="green" on:click={exportMobData}>
+            Export
+        </Button>
     </div>
 
     <!-- Error Message -->