599 lines
19 KiB
Vue
599 lines
19 KiB
Vue
<template>
|
||
<div>
|
||
<h1>Управление модпаками</h1>
|
||
|
||
<div class="import-section">
|
||
<h2>Импорт нового модпака</h2>
|
||
<form @submit.prevent="handleImport" class="import-form">
|
||
<div class="form-group">
|
||
<label>Тип сборки</label>
|
||
<select v-model="form.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="form.importMethod" value="file" /> Файл</label>
|
||
<label
|
||
><input type="radio" v-model="form.importMethod" value="url" :disabled="form.importerType !== 'curseforge'" />
|
||
URL</label
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Поля для метаданных -->
|
||
<div class="form-group">
|
||
<label for="name">Системное имя (латиница, без пробелов)</label>
|
||
<input id="name" v-model="form.name" type="text" required pattern="^[a-zA-Z0-9_]+$" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="displayName">Отображаемое имя</label>
|
||
<input id="displayName" v-model="form.displayName" type="text" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="mcVersion">Версия Minecraft</label>
|
||
<input id="mcVersion" v-model="form.mcVersion" type="text" required />
|
||
</div>
|
||
|
||
<!-- Поля для источника -->
|
||
<div v-if="form.importMethod === 'file'" class="form-group">
|
||
<label for="modpack-file">Файл модпака (.zip, .mrpack)</label>
|
||
<input id="modpack-file" type="file" @change="onFileSelected" :required="form.importMethod === 'file'" accept=".zip,.mrpack" />
|
||
</div>
|
||
<div v-if="form.importMethod === 'url'" class="form-group">
|
||
<label for="sourceUrl">URL страницы модпака на CurseForge</label>
|
||
<input id="sourceUrl" v-model="form.sourceUrl" type="url" :required="form.importMethod === 'url'" />
|
||
</div>
|
||
|
||
<div v-if="importJob.jobId" class="job-status">
|
||
<h3>Статус импорта</h3>
|
||
<div class="progress-bar">
|
||
<div class="progress" :style="{ width: importJob.progress + '%' }"></div>
|
||
</div>
|
||
<p>{{ importJob.message }} ({{ importJob.progress }}%)</p>
|
||
<div v-if="importJob.status === 'failed'" class="error-message">Ошибка: {{ importJob.message }}</div>
|
||
<div v-if="importJob.status === 'completed'" class="success-message">Импорт успешно завершен!</div>
|
||
</div>
|
||
|
||
<div v-if="error && !importJob.jobId" class="error-message">{{ error }}</div>
|
||
<!-- <div v-if="successMessage" class="success-message">{{ successMessage }}</div> -->
|
||
|
||
<button type="submit" :disabled="isLoading || (importJob.jobId !== null && importJob.status !== 'completed' && importJob.status !== 'failed')">
|
||
{{ isLoading ? "Запуск..." : "Импортировать" }}
|
||
</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, 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: "",
|
||
mcVersion: "",
|
||
file: null as File | null,
|
||
importerType: "simple",
|
||
importMethod: "file",
|
||
sourceUrl: "",
|
||
});
|
||
|
||
const isLoading = ref(false);
|
||
const error = ref<string | null>(null);
|
||
const successMessage = ref<string | null>(null);
|
||
|
||
// Состояние задачи импорта
|
||
const importJob = reactive({
|
||
jobId: null as number | null,
|
||
status: "" as string,
|
||
progress: 0,
|
||
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) => {
|
||
if (newType !== "curseforge" && form.importMethod === "url") {
|
||
form.importMethod = "file";
|
||
}
|
||
},
|
||
);
|
||
|
||
watch(
|
||
() => updateForm.importerType,
|
||
(newType) => {
|
||
if (newType !== "curseforge" && updateForm.importMethod === "url") {
|
||
updateForm.importMethod = "file";
|
||
}
|
||
},
|
||
);
|
||
|
||
// ===== Helpers =====
|
||
const formatDate = (dateStr: string) => {
|
||
return new Date(dateStr).toLocaleString();
|
||
};
|
||
|
||
const getStatusMessage = (status: string) => {
|
||
switch (status) {
|
||
case 'pending': return 'Ожидание очереди...';
|
||
case 'downloading': return 'Скачивание файлов...';
|
||
case 'processing': return 'Обработка...';
|
||
case 'completed': return 'Готово';
|
||
case 'failed': return 'Ошибка';
|
||
default: return status;
|
||
}
|
||
};
|
||
|
||
// ===== 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 = "Пожалуйста, выберите файл для импорта.";
|
||
return;
|
||
}
|
||
if (form.importMethod === "url" && !form.sourceUrl) {
|
||
error.value = "Пожалуйста, введите URL.";
|
||
return;
|
||
}
|
||
|
||
isLoading.value = true;
|
||
error.value = null;
|
||
successMessage.value = null;
|
||
|
||
importJob.jobId = null;
|
||
importJob.status = "";
|
||
importJob.progress = 0;
|
||
importJob.message = "";
|
||
|
||
const formData = new FormData();
|
||
formData.append("name", form.name);
|
||
formData.append("displayName", form.displayName);
|
||
formData.append("mcVersion", form.mcVersion);
|
||
formData.append("importerType", form.importerType);
|
||
formData.append("importMethod", form.importMethod);
|
||
|
||
if (form.importMethod === "file" && form.file) {
|
||
formData.append("file", form.file);
|
||
} else if (form.importMethod === "url") {
|
||
formData.append("sourceUrl", form.sourceUrl);
|
||
}
|
||
|
||
try {
|
||
const response = await apiClient.post("/admin/modpacks/import", formData, {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
});
|
||
|
||
if (response.status === 202 && response.data.job_id) {
|
||
importJob.jobId = response.data.job_id;
|
||
importJob.status = 'pending';
|
||
importJob.message = 'Задача создана...';
|
||
connectWebSocket(importJob, fetchModpacks);
|
||
} else {
|
||
successMessage.value = response.data;
|
||
isLoading.value = false;
|
||
fetchModpacks();
|
||
}
|
||
|
||
} catch (e: any) {
|
||
error.value = e.response?.data || "Произошла ошибка при импорте.";
|
||
isLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// ===== 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();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.import-section {
|
||
max-width: 600px;
|
||
margin-top: 2rem;
|
||
padding: 2rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
}
|
||
.import-form .form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
.import-form label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.import-form input,
|
||
.import-form select {
|
||
width: 100%;
|
||
padding: 0.5rem;
|
||
box-sizing: border-box;
|
||
}
|
||
.radio-group label {
|
||
display: inline-block;
|
||
margin-right: 1rem;
|
||
}
|
||
.error-message,
|
||
.success-message {
|
||
margin-top: 1rem;
|
||
padding: 0.75rem;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
}
|
||
.error-message {
|
||
background-color: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
.success-message {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
button {
|
||
padding: 0.75rem 1.5rem;
|
||
background-color: #42b983;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
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>
|