feat: add modpack list and update UI

src/views/admin/ModpacksView.vue

@@ -67,16 +67,113 @@
                 </button>
             </form>
         </div>
+
+        <!-- СПИСОК МОДПАКОВ -->
+        <div class="modpacks-section">
+            <h2>Существующие модпаки</h2>
+            <div v-if="modpacksLoading">Загрузка...</div>
+            <table v-else-if="modpacks.length > 0" class="modpacks-table">
+                <thead>
+                    <tr>
+                        <th>Имя</th>
+                        <th>Отображаемое имя</th>
+                        <th>MC Version</th>
+                        <th>Обновлено</th>
+                        <th>Действия</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="m in modpacks" :key="m.id">
+                        <td>{{ m.name }}</td>
+                        <td>{{ m.display_name }}</td>
+                        <td>{{ m.minecraft_version }}</td>
+                        <td>{{ formatDate(m.updated_at) }}</td>
+                        <td>
+                            <button @click="openUpdateModal(m)" class="btn-small">Обновить</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <p v-else>Нет модпаков</p>
+        </div>
+
+        <!-- МОДАЛЬНОЕ ОКНО ОБНОВЛЕНИЯ -->
+        <div v-if="updateModal.show" class="modal-overlay" @click.self="closeUpdateModal">
+            <div class="modal-content">
+                <h3>Обновить модпак: {{ updateModal.modpack?.name }}</h3>
+                <form @submit.prevent="handleUpdate" class="import-form">
+                    <div class="form-group">
+                        <label>Тип сборки</label>
+                        <select v-model="updateForm.importerType">
+                            <option value="simple">Простой ZIP</option>
+                            <option value="curseforge">CurseForge</option>
+                            <option value="modrinth">Modrinth (.mrpack)</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Метод импорта</label>
+                        <div class="radio-group">
+                            <label><input type="radio" v-model="updateForm.importMethod" value="file" /> Файл</label>
+                            <label><input type="radio" v-model="updateForm.importMethod" value="url" :disabled="updateForm.importerType !== 'curseforge'" /> URL</label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Версия Minecraft (опционально)</label>
+                        <input v-model="updateForm.mcVersion" type="text" :placeholder="updateModal.modpack?.minecraft_version" />
+                    </div>
+                    <div v-if="updateForm.importMethod === 'file'" class="form-group">
+                        <label>Файл модпака</label>
+                        <input type="file" @change="onUpdateFileSelected" accept=".zip,.mrpack" />
+                    </div>
+                    <div v-if="updateForm.importMethod === 'url'" class="form-group">
+                        <label>URL страницы модпака</label>
+                        <input v-model="updateForm.sourceUrl" type="url" />
+                    </div>
+
+                    <div v-if="updateJob.jobId" class="job-status">
+                        <div class="progress-bar">
+                            <div class="progress" :style="{ width: updateJob.progress + '%' }"></div>
+                        </div>
+                        <p>{{ updateJob.message }} ({{ updateJob.progress }}%)</p>
+                        <div v-if="updateJob.status === 'failed'" class="error-message">Ошибка: {{ updateJob.message }}</div>
+                        <div v-if="updateJob.status === 'completed'" class="success-message">Обновление завершено!</div>
+                    </div>
+
+                    <div class="modal-actions">
+                        <button type="submit" :disabled="updateLoading || (updateJob.jobId !== null && updateJob.status !== 'completed' && updateJob.status !== 'failed')">
+                            {{ updateLoading ? "Запуск..." : "Обновить" }}
+                        </button>
+                        <button type="button" @click="closeUpdateModal" class="btn-secondary">Отмена</button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, onUnmounted } from "vue";
+import { ref, reactive, watch, onMounted, onUnmounted } from "vue";
 import apiClient from "@/api/axios";
 import { useAuthStore } from "@/stores/auth";
 
 const authStore = useAuthStore();
 
+// ===== Интерфейсы =====
+interface Modpack {
+    id: number;
+    name: string;
+    display_name: string;
+    minecraft_version: string;
+    is_active: boolean;
+    created_at: string;
+    updated_at: string;
+}
+
+// ===== Состояние списка модпаков =====
+const modpacks = ref<Modpack[]>([]);
+const modpacksLoading = ref(true);
+
+// ===== Форма импорта =====
 const form = reactive({
     name: "",
     displayName: "",
@@ -99,8 +196,31 @@ const importJob = reactive({
     message: "" as string,
 });
 
+// ===== Модальное окно обновления =====
+const updateModal = reactive({
+    show: false,
+    modpack: null as Modpack | null,
+});
+
+const updateForm = reactive({
+    importerType: "simple",
+    importMethod: "file",
+    mcVersion: "",
+    sourceUrl: "",
+    file: null as File | null,
+});
+
+const updateLoading = ref(false);
+const updateJob = reactive({
+    jobId: null as number | null,
+    status: "" as string,
+    progress: 0,
+    message: "" as string,
+});
+
 let ws: WebSocket | null = null;
 
+// ===== Watchers =====
 watch(
     () => form.importerType,
     (newType) => {
@@ -110,51 +230,18 @@ watch(
     },
 );
 
-const onFileSelected = (event: Event) => {
+watch(
-    const target = event.target as HTMLInputElement;
+    () => updateForm.importerType,
-    if (target.files && target.files[0]) {
+    (newType) => {
-        form.file = target.files[0];
+        if (newType !== "curseforge" && updateForm.importMethod === "url") {
-    }
+            updateForm.importMethod = "file";
-};
-
-const connectWebSocket = () => {
-    if (ws) {
-        ws.close();
-    }
-
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const host = window.location.host;
-    const url = `${protocol}//${host}/api/admin/ws/jobs?token=${authStore.token}`;
-
-    ws = new WebSocket(url);
-
-    ws.onmessage = (event) => {
-        try {
-            const data = JSON.parse(event.data);
-            if (data.job_id === importJob.jobId) {
-                importJob.status = data.status;
-                importJob.progress = data.progress;
-                importJob.message = data.error_message || getStatusMessage(data.status);
-                
-                if (data.status === 'completed') {
-                    successMessage.value = "Импорт завершен!";
-                    isLoading.value = false;
-                } else if (data.status === 'failed') {
-                    error.value = data.error_message;
-                    isLoading.value = false;
-                }
-            }
-        } catch (e) {
-            console.error("WS parse error", e);
         }
-    };
+    },
+);
 
-    ws.onclose = () => {
+// ===== Helpers =====
-        console.log("WS closed");
+const formatDate = (dateStr: string) => {
-        if (importJob.status !== 'completed' && importJob.status !== 'failed' && importJob.jobId) {
+    return new Date(dateStr).toLocaleString();
-            // Reconnect logic could be here
-        }
-    };
 };
 
 const getStatusMessage = (status: string) => {
@@ -168,6 +255,94 @@ const getStatusMessage = (status: string) => {
     }
 };
 
+// ===== Fetching =====
+const fetchModpacks = async () => {
+    modpacksLoading.value = true;
+    try {
+        const response = await apiClient.get<Modpack[]>("/admin/modpacks");
+        modpacks.value = response.data || [];
+    } catch (e) {
+        console.error("Failed to fetch modpacks", e);
+    } finally {
+        modpacksLoading.value = false;
+    }
+};
+
+// ===== File handlers =====
+const onFileSelected = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        form.file = target.files[0];
+    }
+};
+
+const onUpdateFileSelected = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        updateForm.file = target.files[0];
+    }
+};
+
+// ===== WebSocket =====
+const connectWebSocket = (targetJob: { jobId: number | null; status: string; progress: number; message: string }, onComplete?: () => void) => {
+    if (ws) {
+        ws.close();
+    }
+
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const host = window.location.host;
+    const url = `${protocol}//${host}/api/admin/ws/jobs?token=${authStore.token}`;
+
+    ws = new WebSocket(url);
+
+    ws.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            if (data.job_id === targetJob.jobId) {
+                targetJob.status = data.status;
+                targetJob.progress = data.progress;
+                targetJob.message = data.error_message || getStatusMessage(data.status);
+                
+                if (data.status === 'completed') {
+                    isLoading.value = false;
+                    updateLoading.value = false;
+                    if (onComplete) onComplete();
+                } else if (data.status === 'failed') {
+                    isLoading.value = false;
+                    updateLoading.value = false;
+                }
+            }
+        } catch (e) {
+            console.error("WS parse error", e);
+        }
+    };
+
+    ws.onclose = () => {
+        console.log("WS closed");
+    };
+};
+
+// ===== Modal handlers =====
+const openUpdateModal = (modpack: Modpack) => {
+    updateModal.show = true;
+    updateModal.modpack = modpack;
+    updateForm.importerType = "simple";
+    updateForm.importMethod = "file";
+    updateForm.mcVersion = "";
+    updateForm.sourceUrl = "";
+    updateForm.file = null;
+    updateJob.jobId = null;
+    updateJob.status = "";
+    updateJob.progress = 0;
+    updateJob.message = "";
+};
+
+const closeUpdateModal = () => {
+    updateModal.show = false;
+    updateModal.modpack = null;
+};
+
+// ===== Import handler =====
 const handleImport = async () => {
     if (form.importMethod === "file" && !form.file) {
         error.value = "Пожалуйста, выберите файл для импорта.";
@@ -182,7 +357,6 @@ const handleImport = async () => {
     error.value = null;
     successMessage.value = null;
     
-    // Сброс состояния задачи
     importJob.jobId = null;
     importJob.status = "";
     importJob.progress = 0;
@@ -208,16 +382,15 @@ const handleImport = async () => {
             },
         });
         
-        // Обработка асинхронного ответа
         if (response.status === 202 && response.data.job_id) {
             importJob.jobId = response.data.job_id;
             importJob.status = 'pending';
             importJob.message = 'Задача создана...';
-            connectWebSocket();
+            connectWebSocket(importJob, fetchModpacks);
         } else {
-             // Fallback for sync behavior (old) or other codes
             successMessage.value = response.data;
             isLoading.value = false;
+            fetchModpacks();
         }
 
     } catch (e: any) {
@@ -226,6 +399,67 @@ const handleImport = async () => {
     }
 };
 
+// ===== Update handler =====
+const handleUpdate = async () => {
+    if (!updateModal.modpack) return;
+
+    if (updateForm.importMethod === "file" && !updateForm.file) {
+        return;
+    }
+    if (updateForm.importMethod === "url" && !updateForm.sourceUrl) {
+        return;
+    }
+
+    updateLoading.value = true;
+    updateJob.jobId = null;
+    updateJob.status = "";
+    updateJob.progress = 0;
+    updateJob.message = "";
+
+    const formData = new FormData();
+    formData.append("modpackName", updateModal.modpack.name);
+    formData.append("importerType", updateForm.importerType);
+    formData.append("importMethod", updateForm.importMethod);
+    if (updateForm.mcVersion) {
+        formData.append("mcVersion", updateForm.mcVersion);
+    }
+
+    if (updateForm.importMethod === "file" && updateForm.file) {
+        formData.append("file", updateForm.file);
+    } else if (updateForm.importMethod === "url") {
+        formData.append("sourceUrl", updateForm.sourceUrl);
+    }
+
+    try {
+        const response = await apiClient.post("/admin/modpacks/update", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+        
+        if (response.status === 202 && response.data.job_id) {
+            updateJob.jobId = response.data.job_id;
+            updateJob.status = 'pending';
+            updateJob.message = 'Задача создана...';
+            connectWebSocket(updateJob, () => {
+                fetchModpacks();
+            });
+        } else {
+            updateLoading.value = false;
+            fetchModpacks();
+        }
+
+    } catch (e: any) {
+        console.error("Update error", e);
+        updateLoading.value = false;
+    }
+};
+
+// ===== Lifecycle =====
+onMounted(() => {
+    fetchModpacks();
+});
+
 onUnmounted(() => {
     if (ws) ws.close();
 });
@@ -284,4 +518,81 @@ button {
 button:disabled {
     background-color: #ccc;
 }
+
+/* Modpacks List Section */
+.modpacks-section {
+    margin-top: 2rem;
+}
+.modpacks-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+}
+.modpacks-table th,
+.modpacks-table td {
+    border: 1px solid #ddd;
+    padding: 0.75rem;
+    text-align: left;
+}
+.modpacks-table th {
+    background-color: #f5f5f5;
+}
+.btn-small {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9em;
+}
+
+/* Modal Overlay */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+.modal-content {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    max-width: 500px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+.btn-secondary {
+    background-color: #6c757d;
+}
+.btn-secondary:hover {
+    background-color: #5a6268;
+}
+
+/* Progress bar */
+.progress-bar {
+    height: 20px;
+    background: #eee;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+.progress {
+    height: 100%;
+    background: #42b983;
+    transition: width 0.3s;
+}
+.job-status {
+    margin-top: 1rem;
+    padding: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
 </style>