Frontend/js/script.js - master - Alekron/Unbeatable_Benchmarking

Frontend/js/script.js
213 строк7 KB
Alekron
Initial Frontend
23 ноя 2025, 09:12
23 ноя 2025, 09:12c461277
const reportBtn = document.getElementById("reportBtn");
const loader = document.getElementById("loader");
const btnText = document.getElementById("btnText");
const tableContainer = document.getElementById("tableContainer");
const startDateInput = document.getElementById("startDate");
const endDateInput = document.getElementById("endDate");

let loading = false;

function navigateToComparison() {
    window.location.href = 'comparison.html';
}

function navigateToCharts() {
    window.location.href = 'teble.html';
}

function handleDateSelection() {
    const startDate = startDateInput.value;
    const endDate = endDateInput.value;
    
    if (startDate && endDate) {
        if (new Date(startDate) > new Date(endDate)) {
            alert('Дата начала должна быть раньше даты конца');
            endDateInput.value = '';
        }
    }
}



if (reportBtn) {
    reportBtn.addEventListener("click", () => {
        if (loading) return;
        
        const startDate = startDateInput.value;
        const endDate = endDateInput.value;
        const customText = document.getElementById("customDescription").value.trim();
        
        if (!startDate || !endDate) {
            alert('Пожалуйста, выберите обе даты');
            return;
        }
        
        if (new Date(startDate) > new Date(endDate)) {
            alert('Дата начала должна быть раньше даты конца');
            return;
        }
        
        if (!customText) {
            alert('Пожалуйста, введите текст для сравнения');
            return;
        }
        
        loading = true;
        btnText.style.display = "none";
        loader.classList.remove("hidden");

        setTimeout(() => {
            loading = false;
            btnText.style.display = "inline";
            loader.classList.add("hidden");
            
            if (customText.toLowerCase().includes('втб')) {
                navigateToComparison();
            } else {
                navigateToCharts();
            }
        }, 5000);
    });
}

if (startDateInput) {
    startDateInput.addEventListener("change", handleDateSelection);
}

if (endDateInput) {
    endDateInput.addEventListener("change", handleDateSelection);
}

async function loadTable() {
    try {
        const response = await fetch("uralcode_data.json");
        const data = await response.json();
        renderTable(data);
    } catch (e) {
        tableContainer.innerHTML = "<p>Ошибка загрузки данных</p>";
    }
}

async function loadComparisonTable() {
    try {
        const response = await fetch("uralcode_data.json");
        const data = await response.json();
        renderComparisonTable(data);
    } catch (e) {
        document.getElementById('comparisonTable').innerHTML = "<p>Ошибка загрузки данных</p>";
    }
}

function renderTable(data) {
    tableContainer.classList.remove("hidden");
    const banks = Object.keys(data);
    const metrics = Object.keys(data[banks[0]]);

    let html = `
        <div class="table-header">
            <h2>Сводная таблица</h2>
            <button onclick="navigateToComparison()" class="compare-btn">
                Перейти к сравнению
            </button>
        </div>
        <table>
            <thead>
                <tr><th>Показатель</th>`;

    banks.forEach((b) => {
        html += `<th>${b}</th>`;
    });

    html += `</tr></thead><tbody>`;

    metrics.forEach((metric) => {
        html += `<tr><td>${formatMetricName(metric)}</td>`;
        const values = banks.map((b) => parseValue(data[b][metric]));
        const best = Math.max(...values.filter(v => !isNaN(v)));

        banks.forEach((b) => {
            const val = data[b][metric];
            const numVal = parseValue(val);
            const isBest = !isNaN(numVal) && numVal === best;
            const cls = isBest ? 'best' : '';
            html += `<td class="${cls}">${formatValue(val, metric)}</td>`;
        });
        html += `</tr>`;
    });

    html += `</tbody></table>`;
    tableContainer.innerHTML = html;
}

function renderComparisonTable(data) {
    const tableContainer = document.getElementById('comparisonTable');
    if (!tableContainer) return;

    const banks = Object.keys(data).slice(0, 4);
    const metrics = Object.keys(data[banks[0]]).slice(0, 4);

    let html = `
        <div class="table-header">
            <h2>Сравнительная таблица</h2>
            <span class="tag">4×4</span>
        </div>
        <table>
            <thead>
                <tr><th>Показатель</th>`;

    banks.forEach(bank => {
        html += `<th>${bank}</th>`;
    });
    html += `</tr></thead><tbody>`;

    metrics.forEach(metric => {
        html += `<tr><td>${formatMetricName(metric)}</td>`;
        const values = banks.map(bank => parseValue(data[bank][metric]));
        const best = Math.max(...values.filter(v => !isNaN(v)));

        banks.forEach(bank => {
            const val = data[bank][metric];
            const numVal = parseValue(val);
            const isBest = !isNaN(numVal) && numVal === best;
            const cls = isBest ? 'best' : '';
            html += `<td class="${cls}">${formatValue(val, metric)}</td>`;
        });
        html += `</tr>`;
    });

    html += `</tbody></table>
    <div class="prompt-box">
        <input type="text" placeholder="Введите промпт" id="promptInput" />
        <button class="prompt-btn" onclick="handlePrompt()">
            Уточни детали ✨
        </button>
    </div>`;

    tableContainer.innerHTML = html;
}

function formatMetricName(metric) {
    return metric
        .split('_')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
}

function parseValue(val) {
    if (typeof val === 'number') return val;
    const num = parseFloat(val.replace(/[^0-9.,]/g, '').replace(',', '.'));
    return isNaN(num) ? 0 : num;
}

function formatValue(val, metric) {
    if (typeof val === 'number') return val.toFixed(1);
    return val;
}

function handlePrompt() {
    const input = document.getElementById('promptInput');
    if (input && input.value.trim() !== '') {
        alert('Ваш запрос обрабатывается: ' + input.value);
        input.value = '';
    }
}