src/main/resources/static/script.js - master - Jroslav1985/web-calc-spring

src/main/resources/static/script.js
273 строки8 KB
Jroslav
commit
17 янв 2026, 17:06
17 янв 2026, 17:0671c778e
// Получаем элементы DOM
const numberA = document.getElementById("numberA");
const numberB = document.getElementById("numberB");
const resultElement = document.getElementById("result");
const historyList = document.getElementById("history-list");

const buttonAdd = document.getElementById("add");
const buttonSubtract = document.getElementById("subtract");
const buttonMultiply = document.getElementById("multiply");
const buttonDivide = document.getElementById("divide");

const API_URL = "http://localhost:8080/api/calculations";

// Функции операций
function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }
function divide(a, b) {
	return b === 0 ? "Бесконечность! ♾️" : a / b;
}

// Получение и валидация чисел
function getValidatedNumbers() {
	const valueA = numberA.value;
	const valueB = numberB.value;

	if (valueA === '' || valueB === '') {
		resultElement.textContent = "Введите оба числа!";
		return null;
	}

	const numA = parseFloat(valueA);
	const numB = parseFloat(valueB);

	if (isNaN(numA) || isNaN(numB)) {
		resultElement.textContent = "Введите корректные числа!";
		return null;
	}

	return { numA, numB };
}

// Сохранение в базу
async function saveCalculation(numberA, numberB, operation, result) {
	try {
		console.log("💾 Сохраняем вычисление:", { numberA, numberB, operation, result });

		const response = await fetch(API_URL, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
			body: JSON.stringify({
				numberA: numberA,
				numberB: numberB,
				operation: operation,
				result: result
			})
		});

		const responseData = await response.json();
		console.log("✅ Ответ сервера:", responseData);

		if (response.ok) {
			loadHistory(); // Обновляем историю
		}
	} catch (error) {
		console.error('❌ Ошибка при сохранении:', error);
	}
}

// Загрузка истории с обработкой ошибок
async function loadHistory() {
	try {
		console.log("📖 Загружаем историю...");
		const response = await fetch(API_URL);

		if (!response.ok) {
			throw new Error(`HTTP error! status: ${response.status}`);
		}

		const calculations = await response.json();
		console.log("📊 Получена история:", calculations);

		displayHistory(calculations);
	} catch (error) {
		console.error('❌ Ошибка при загрузке истории:', error);
		displayError('Не удалось загрузить историю: ' + error.message);
	}
}

// Отображение истории с проверкой типа
function displayHistory(calculations) {
	if (!historyList) {
		console.error('❌ Элемент history-list не найден');
		return;
	}

	// Проверяем, что calculations - это массив
	if (!Array.isArray(calculations)) {
		console.error('❌ История не является массивом:', calculations);
		historyList.innerHTML = '<div class="history-item error">Ошибка: неверный формат истории</div>';
		return;
	}

	if (calculations.length === 0) {
		historyList.innerHTML = '<div class="history-item empty">История вычислений пуста</div>';
		return;
	}

	const historyHTML = calculations.map((calc, index) =>
		`<div class="history-item">
                    <strong>${index + 1}.</strong> 
                    ${calc.numberA} ${getOperationSymbol(calc.operation)} ${calc.numberB} = 
                    <strong>${calc.result}</strong>
                </div>`
	).join('');

	historyList.innerHTML = historyHTML;
}

// Отображение ошибки
function displayError(message) {
	if (historyList) {
		historyList.innerHTML = `<div class="history-item error">${message}</div>`;
	}
}

// Вспомогательная функция
function getOperationSymbol(operation) {
	const symbols = {
		'add': '+',
		'subtract': '-',
		'multiply': '×',
		'divide': '÷'
	};
	return symbols[operation] || operation;
}

// Обработчики кнопок
buttonAdd.addEventListener("click", function() {
	const numbers = getValidatedNumbers();
	if (numbers !== null) {
		const result = add(numbers.numA, numbers.numB);
		resultElement.textContent = result;
		saveCalculation(numbers.numA, numbers.numB, 'add', result);
	}
});

buttonSubtract.addEventListener("click", function() {
	const numbers = getValidatedNumbers();
	if (numbers !== null) {
		const result = subtract(numbers.numA, numbers.numB);
		resultElement.textContent = result;
		saveCalculation(numbers.numA, numbers.numB, 'subtract', result);
	}
});

buttonMultiply.addEventListener("click", function() {
	const numbers = getValidatedNumbers();
	if (numbers !== null) {
		const result = multiply(numbers.numA, numbers.numB);
		resultElement.textContent = result;
		saveCalculation(numbers.numA, numbers.numB, 'multiply', result);
	}
});

buttonDivide.addEventListener("click", function() {
	const numbers = getValidatedNumbers();
	if (numbers !== null) {
		const result = divide(numbers.numA, numbers.numB);
		resultElement.textContent = result;
		if (result !== "Бесконечность! ♾️") {
			saveCalculation(numbers.numA, numbers.numB, 'divide', result);
		}
	}
});

// Загружаем историю при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
	console.log("🚀 Калькулятор загружен");
	loadHistory();
});

// Обработка нажатия Enter
document.addEventListener('keypress', function(event) {
	if (event.key === 'Enter') {
		buttonAdd.click();
	}
});

// Загрузка истории с обработкой ошибок
async function loadHistory() {
	try {
		console.log("📖 Загружаем историю...");
		const response = await fetch(API_URL);

		if (!response.ok) {
			throw new Error(`HTTP error! status: ${response.status}`);
		}

		const data = await response.json();
		console.log("📊 Получены данные:", data);

		if (data.status === 'success') {
			displayHistory(data.data);
			updateStats(data.totalCalculations);
		} else {
			throw new Error(data.message);
		}

	} catch (error) {
		console.error('❌ Ошибка при загрузке истории:', error);
		displayError('Не удалось загрузить историю: ' + error.message);
	}
}

// Отображение статистики
function updateStats(totalCalculations) {
	const statsElement = document.getElementById('stats');
	if (statsElement) {
		statsElement.textContent = `Всего вычислений: ${totalCalculations}`;
	}
}

// Добавляем кнопку очистки истории в HTML
function addClearButton() {
	const historySection = document.querySelector('.history');
	const clearButton = document.createElement('button');
	clearButton.textContent = '🗑️ Очистить историю';
	clearButton.style.background = '#ff4444';
	clearButton.style.marginTop = '10px';
	clearButton.onclick = clearHistory;

	const statsDiv = document.createElement('div');
	statsDiv.id = 'stats';
	statsDiv.style.marginTop = '10px';
	statsDiv.style.fontWeight = 'bold';
	statsDiv.style.color = '#005950';

	historySection.appendChild(statsDiv);
	historySection.appendChild(clearButton);
}

// Функция очистки истории
async function clearHistory() {
	if (!confirm('Вы уверены, что хотите очистить всю историю вычислений?')) {
		return;
	}

	try {
		const response = await fetch(API_URL, {
			method: 'DELETE'
		});

		const data = await response.json();

		if (data.status === 'success') {
			alert('История очищена!');
			loadHistory();
		}
	} catch (error) {
		console.error('Ошибка при очистке истории:', error);
		alert('Ошибка при очистке истории: ' + error.message);
	}
}

// В init функции добавляем кнопку очистки
document.addEventListener('DOMContentLoaded', function() {
	console.log("🚀 Калькулятор загружен");
	loadHistory();
	addClearButton();
});