ozon-seller-api-extended
Version:
API клиент для работы с API продавца Ozon / API client for working with Ozon Seller API
287 lines (268 loc) • 10.2 kB
HTML
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мониторинг таймслотов</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.controls {
margin-bottom: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.control-group {
border: 1px solid #ccc;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
}
.control-group h3 {
margin-top: 0;
}
button {
padding: 10px 20px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
button.stop {
background-color: #f44336;
}
button.stop:hover {
background-color: #da190b;
}
input, select {
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.history {
border: 1px solid #ccc;
padding: 20px;
max-height: 600px;
overflow-y: auto;
}
.history-item {
margin-bottom: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 4px;
}
.chart-container {
margin-top: 20px;
height: 300px;
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.status.active {
background-color: #dff0d8;
color: #3c763d;
}
.status.inactive {
background-color: #f2dede;
color: #a94442;
}
</style>
</head>
<body>
<h1>Мониторинг таймслотов</h1>
<div class="control-group">
<h3>Управление мониторингом</h3>
<div class="controls">
<button onclick="startMonitoring()">Запустить мониторинг</button>
<button class="stop" onclick="stopMonitoring()">Остановить мониторинг</button>
<button onclick="exportHistory()">Экспорт истории</button>
</div>
<div id="status" class="status inactive">Статус: Неактивен</div>
</div>
<div class="control-group">
<h3>Настройки</h3>
<div class="controls">
<div>
<label for="rps">RPS:</label>
<input type="number" id="rps" min="1" max="10" value="5">
</div>
<div>
<label for="orderCount">Количество заказов:</label>
<input type="number" id="orderCount" min="1" max="10" value="3">
</div>
<div>
<label for="schedule">Интервал (минуты):</label>
<input type="number" id="schedule" min="0" value="0">
</div>
<button onclick="saveConfig()">Сохранить настройки</button>
</div>
</div>
<div class="control-group">
<h3>График изменений</h3>
<div class="chart-container">
<canvas id="changesChart"></canvas>
</div>
</div>
<h2>История изменений</h2>
<div id="history" class="history"></div>
<script>
const socket = io();
const historyDiv = document.getElementById('history');
const statusDiv = document.getElementById('status');
let changesChart;
// Инициализация графика
function initChart() {
const ctx = document.getElementById('changesChart').getContext('2d');
changesChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Количество изменений',
data: [],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
// Обновление графика
function updateChart(data) {
const labels = data.map(item => new Date(item.timestamp).toLocaleTimeString());
const values = data.map(item => Object.keys(item.data).length);
changesChart.data.labels = labels;
changesChart.data.datasets[0].data = values;
changesChart.update();
}
// Обработка обновлений от сервера
socket.on('memoryUpdate', function(data) {
updateHistory(data);
updateChart(data);
});
// Функция обновления истории
function updateHistory(data) {
historyDiv.innerHTML = data.map(function(item) {
return '<div class="history-item">' +
'<div>Время: ' + new Date(item.timestamp).toLocaleString() + '</div>' +
'<div>ID заказов: ' + item.orderIds.join(', ') + '</div>' +
'<pre>' + JSON.stringify(item.data, null, 2) + '</pre>' +
'</div>';
}).join('');
}
// Функция запуска мониторинга
async function startMonitoring() {
try {
const response = await fetch('/api/start-monitoring', {
method: 'POST'
});
const data = await response.json();
if (data.success) {
statusDiv.className = 'status active';
statusDiv.textContent = 'Статус: Активен';
alert('Мониторинг запущен');
} else {
alert('Ошибка: ' + data.message);
}
} catch (error) {
alert('Ошибка при запуске мониторинга: ' + error.message);
}
}
// Функция остановки мониторинга
async function stopMonitoring() {
try {
const response = await fetch('/api/stop-monitoring', {
method: 'POST'
});
const data = await response.json();
if (data.success) {
statusDiv.className = 'status inactive';
statusDiv.textContent = 'Статус: Неактивен';
alert('Мониторинг остановлен');
} else {
alert('Ошибка: ' + data.message);
}
} catch (error) {
alert('Ошибка при остановке мониторинга: ' + error.message);
}
}
// Функция сохранения конфигурации
async function saveConfig() {
const config = {
rps: parseInt(document.getElementById('rps').value),
orderCount: parseInt(document.getElementById('orderCount').value)
};
try {
const response = await fetch('/api/config', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(config)
});
const data = await response.json();
if (data.success) {
alert('Настройки сохранены');
}
} catch (error) {
alert('Ошибка при сохранении настроек: ' + error.message);
}
}
// Функция экспорта истории
async function exportHistory() {
try {
const response = await fetch('/api/export', {
method: 'POST'
});
const data = await response.json();
if (data.success) {
alert('История экспортирована в файл: ' + data.path);
} else {
alert('Ошибка: ' + data.message);
}
} catch (error) {
alert('Ошибка при экспорте истории: ' + error.message);
}
}
// Загрузка начальной конфигурации
fetch('/api/config')
.then(response => response.json())
.then(data => {
document.getElementById('rps').value = data.rps;
document.getElementById('orderCount').value = data.orderCount;
})
.catch(error => console.error('Ошибка при загрузке конфигурации:', error));
// Загрузка начальной истории
fetch('/api/memory-history')
.then(response => response.json())
.then(data => {
updateHistory(data);
initChart();
updateChart(data);
})
.catch(error => console.error('Ошибка при загрузке истории:', error));
</script>
</body>
</html>