333 lines
10 KiB
JavaScript
333 lines
10 KiB
JavaScript
import { useState } from 'react'
|
||
import './QuestionsModal.css'
|
||
|
||
const QuestionsModal = ({ isOpen, onClose, questions, onUpdateQuestions }) => {
|
||
const [editingQuestion, setEditingQuestion] = useState(null)
|
||
const [questionText, setQuestionText] = useState('')
|
||
const [answers, setAnswers] = useState([
|
||
{ text: '', points: 100 },
|
||
{ text: '', points: 80 },
|
||
{ text: '', points: 60 },
|
||
{ text: '', points: 40 },
|
||
{ text: '', points: 20 },
|
||
{ text: '', points: 10 },
|
||
])
|
||
const [jsonError, setJsonError] = useState('')
|
||
|
||
if (!isOpen) return null
|
||
|
||
const resetForm = () => {
|
||
setEditingQuestion(null)
|
||
setQuestionText('')
|
||
setAnswers([
|
||
{ text: '', points: 100 },
|
||
{ text: '', points: 80 },
|
||
{ text: '', points: 60 },
|
||
{ text: '', points: 40 },
|
||
{ text: '', points: 20 },
|
||
{ text: '', points: 10 },
|
||
])
|
||
setJsonError('')
|
||
}
|
||
|
||
const handleBackdropClick = (e) => {
|
||
if (e.target === e.currentTarget) {
|
||
onClose()
|
||
resetForm()
|
||
}
|
||
}
|
||
|
||
const handleClose = () => {
|
||
onClose()
|
||
resetForm()
|
||
}
|
||
|
||
const handleEdit = (question) => {
|
||
setEditingQuestion(question)
|
||
setQuestionText(question.text)
|
||
setAnswers([...question.answers])
|
||
setJsonError('')
|
||
}
|
||
|
||
const handleCancelEdit = () => {
|
||
resetForm()
|
||
}
|
||
|
||
const handleAnswerChange = (index, field, value) => {
|
||
const updatedAnswers = [...answers]
|
||
if (field === 'text') {
|
||
updatedAnswers[index].text = value
|
||
} else if (field === 'points') {
|
||
updatedAnswers[index].points = parseInt(value) || 0
|
||
}
|
||
setAnswers(updatedAnswers)
|
||
}
|
||
|
||
const handleAddAnswer = () => {
|
||
const minPoints = Math.min(...answers.map(a => a.points))
|
||
setAnswers([...answers, { text: '', points: Math.max(0, minPoints - 10) }])
|
||
}
|
||
|
||
const handleRemoveAnswer = (index) => {
|
||
if (answers.length > 1) {
|
||
setAnswers(answers.filter((_, i) => i !== index))
|
||
}
|
||
}
|
||
|
||
const validateForm = () => {
|
||
if (!questionText.trim()) {
|
||
setJsonError('Введите текст вопроса')
|
||
return false
|
||
}
|
||
if (answers.length === 0) {
|
||
setJsonError('Добавьте хотя бы один ответ')
|
||
return false
|
||
}
|
||
const hasEmptyAnswers = answers.some(a => !a.text.trim())
|
||
if (hasEmptyAnswers) {
|
||
setJsonError('Заполните все ответы')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
|
||
const handleSave = () => {
|
||
if (!validateForm()) return
|
||
|
||
const questionData = {
|
||
id: editingQuestion ? editingQuestion.id : Date.now(),
|
||
text: questionText.trim(),
|
||
answers: answers
|
||
.filter(a => a.text.trim())
|
||
.map(a => ({
|
||
text: a.text.trim(),
|
||
points: a.points,
|
||
})),
|
||
}
|
||
|
||
let updatedQuestions
|
||
if (editingQuestion) {
|
||
updatedQuestions = questions.map(q =>
|
||
q.id === editingQuestion.id ? questionData : q
|
||
)
|
||
} else {
|
||
updatedQuestions = [...questions, questionData]
|
||
}
|
||
|
||
onUpdateQuestions(updatedQuestions)
|
||
resetForm()
|
||
}
|
||
|
||
const handleDelete = (questionId) => {
|
||
if (window.confirm('Вы уверены, что хотите удалить этот вопрос?')) {
|
||
const updatedQuestions = questions.filter(q => q.id !== questionId)
|
||
onUpdateQuestions(updatedQuestions)
|
||
if (editingQuestion && editingQuestion.id === questionId) {
|
||
resetForm()
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleExportJson = () => {
|
||
try {
|
||
const jsonString = JSON.stringify(questions, null, 2)
|
||
const blob = new Blob([jsonString], { type: 'application/json' })
|
||
const url = URL.createObjectURL(blob)
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
link.download = 'questions.json'
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
URL.revokeObjectURL(url)
|
||
setJsonError('')
|
||
} catch (error) {
|
||
setJsonError('Ошибка при экспорте: ' + error.message)
|
||
}
|
||
}
|
||
|
||
const handleImportJson = () => {
|
||
const input = document.createElement('input')
|
||
input.type = 'file'
|
||
input.accept = '.json'
|
||
input.onchange = (e) => {
|
||
const file = e.target.files[0]
|
||
if (!file) return
|
||
|
||
const reader = new FileReader()
|
||
reader.onload = (event) => {
|
||
try {
|
||
const jsonContent = JSON.parse(event.target.result)
|
||
|
||
if (!Array.isArray(jsonContent)) {
|
||
setJsonError('JSON должен содержать массив вопросов')
|
||
return
|
||
}
|
||
|
||
// Валидация структуры
|
||
const isValid = jsonContent.every(q =>
|
||
q.id &&
|
||
typeof q.text === 'string' &&
|
||
Array.isArray(q.answers) &&
|
||
q.answers.every(a => a.text && typeof a.points === 'number')
|
||
)
|
||
|
||
if (!isValid) {
|
||
setJsonError('Неверный формат JSON. Ожидается массив объектов с полями: id, text, answers')
|
||
return
|
||
}
|
||
|
||
onUpdateQuestions(jsonContent)
|
||
setJsonError('')
|
||
alert(`Успешно импортировано ${jsonContent.length} вопросов`)
|
||
} catch (error) {
|
||
setJsonError('Ошибка при импорте: ' + error.message)
|
||
}
|
||
}
|
||
reader.readAsText(file)
|
||
}
|
||
input.click()
|
||
}
|
||
|
||
return (
|
||
<div className="questions-modal-backdrop" onClick={handleBackdropClick}>
|
||
<div className="questions-modal-content">
|
||
<div className="questions-modal-header">
|
||
<h2 className="questions-modal-title">Управление вопросами</h2>
|
||
<button className="questions-modal-close" onClick={handleClose}>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="questions-modal-actions">
|
||
<button
|
||
className="questions-modal-export-button"
|
||
onClick={handleExportJson}
|
||
>
|
||
📥 Экспорт JSON
|
||
</button>
|
||
<button
|
||
className="questions-modal-import-button"
|
||
onClick={handleImportJson}
|
||
>
|
||
📤 Импорт JSON
|
||
</button>
|
||
</div>
|
||
|
||
{jsonError && (
|
||
<div className="questions-modal-error">{jsonError}</div>
|
||
)}
|
||
|
||
<div className="questions-modal-form">
|
||
<input
|
||
type="text"
|
||
value={questionText}
|
||
onChange={(e) => setQuestionText(e.target.value)}
|
||
placeholder="Введите текст вопроса"
|
||
className="questions-modal-input"
|
||
/>
|
||
|
||
<div className="questions-modal-answers">
|
||
<div className="questions-modal-answers-header">
|
||
<span>Ответы:</span>
|
||
<button
|
||
className="questions-modal-add-answer-button"
|
||
onClick={handleAddAnswer}
|
||
type="button"
|
||
>
|
||
+ Добавить ответ
|
||
</button>
|
||
</div>
|
||
|
||
{answers.map((answer, index) => (
|
||
<div key={index} className="questions-modal-answer-row">
|
||
<input
|
||
type="text"
|
||
value={answer.text}
|
||
onChange={(e) => handleAnswerChange(index, 'text', e.target.value)}
|
||
placeholder={`Ответ ${index + 1}`}
|
||
className="questions-modal-answer-input"
|
||
/>
|
||
<input
|
||
type="number"
|
||
value={answer.points}
|
||
onChange={(e) => handleAnswerChange(index, 'points', e.target.value)}
|
||
className="questions-modal-points-input"
|
||
min="0"
|
||
/>
|
||
{answers.length > 1 && (
|
||
<button
|
||
className="questions-modal-remove-answer-button"
|
||
onClick={() => handleRemoveAnswer(index)}
|
||
type="button"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="questions-modal-form-buttons">
|
||
<button
|
||
className="questions-modal-save-button"
|
||
onClick={handleSave}
|
||
>
|
||
{editingQuestion ? 'Сохранить изменения' : 'Добавить вопрос'}
|
||
</button>
|
||
{editingQuestion && (
|
||
<button
|
||
className="questions-modal-cancel-button"
|
||
onClick={handleCancelEdit}
|
||
>
|
||
Отмена
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="questions-modal-list">
|
||
<h3 className="questions-modal-list-title">
|
||
Вопросы ({questions.length})
|
||
</h3>
|
||
{questions.length === 0 ? (
|
||
<p className="questions-modal-empty">Нет вопросов. Добавьте вопросы для игры.</p>
|
||
) : (
|
||
<div className="questions-modal-items">
|
||
{questions.map((question) => (
|
||
<div key={question.id} className="questions-modal-item">
|
||
<div className="questions-modal-item-content">
|
||
<div className="questions-modal-item-text">{question.text}</div>
|
||
<div className="questions-modal-item-info">
|
||
{question.answers.length} ответов
|
||
</div>
|
||
</div>
|
||
<div className="questions-modal-item-actions">
|
||
<button
|
||
className="questions-modal-edit-button"
|
||
onClick={() => handleEdit(question)}
|
||
title="Редактировать"
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
className="questions-modal-delete-button"
|
||
onClick={() => handleDelete(question.id)}
|
||
title="Удалить"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default QuestionsModal
|
||
|
||
|