public/assets/js/task_manager_reports.js

Вот содержимое файла public/assets/js/task_manager_reports.js:

// Task Manager Report Generation

// Function to fetch and display task reports
document.addEventListener('DOMContentLoaded', function() {
    // Fetch task reports on page load
    fetchTaskReports();
});

// Fetch task reports from the server
function fetchTaskReports() {
    fetch('/index.php?route=extension/task_manager/getReports', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(reports => {
        displayReports(reports);
    })
    .catch(error => {
        console.error('Error fetching reports:', error);
    });
}

// Display the task reports in the UI
function displayReports(reports) {
    let reportContainer = document.getElementById('reportContainer');
    reportContainer.innerHTML = '';

    reports.forEach(report => {
        let reportElement = document.createElement('div');
        reportElement.classList.add('report');
        reportElement.innerHTML = `
            <h4>${report.title}</h4>
            <p>${report.description}</p>
            <p><strong>Total Tasks: </strong>${report.totalTasks}</p>
            <p><strong>Completed Tasks: </strong>${report.completedTasks}</p>
            <p><strong>Pending Tasks: </strong>${report.pendingTasks}</p>
            <button class="btn-view-report" onclick="viewReport(${report.id})">View Report</button>
        `;
        reportContainer.appendChild(reportElement);
    });
}

// View a detailed report
function viewReport(reportId) {
    fetch(`/index.php?route=extension/task_manager/viewReport&id=${reportId}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(report => {
        displayReportDetails(report);
    })
    .catch(error => {
        console.error('Error viewing report:', error);
    });
}

// Display the details of the selected report
function displayReportDetails(report) {
    let reportDetailsContainer = document.getElementById('reportDetailsContainer');
    reportDetailsContainer.innerHTML = `
        <h3>Report Details</h3>
        <h4>${report.title}</h4>
        <p><strong>Description:</strong> ${report.description}</p>
        <p><strong>Total Tasks:</strong> ${report.totalTasks}</p>
        <p><strong>Completed Tasks:</strong> ${report.completedTasks}</p>
        <p><strong>Pending Tasks:</strong> ${report.pendingTasks}</p>
        <p><strong>Completed Percentage:</strong> ${report.completedPercentage}%</p>
        <canvas id="reportChart"></canvas>
    `;
    renderReportChart(report);
}

// Render a chart for the report details
function renderReportChart(report) {
    const ctx = document.getElementById('reportChart').getContext('2d');
    const chartData = {
        labels: ['Completed Tasks', 'Pending Tasks'],
        datasets: [{
            label: 'Task Completion Report',
            data: [report.completedTasks, report.pendingTasks],
            backgroundColor: ['#4CAF50', '#FF6347'],
            borderColor: ['#388E3C', '#D32F2F'],
            borderWidth: 1
        }]
    };

    const reportChart = new Chart(ctx, {
        type: 'pie',
        data: chartData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ' + tooltipItem.raw + ' tasks';
                        }
                    }
                }
            }
        });
}

// Export the task report to CSV
document.getElementById('exportCsv').addEventListener('click', function() {
    exportReportToCsv();
});

// Export the task report data to CSV
function exportReportToCsv() {
    fetch('/index.php?route=extension/task_manager/exportReportToCsv', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.blob())
    .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'task_report.csv';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    })
    .catch(error => {
        console.error('Error exporting report to CSV:', error);
    });
}

// Export the task report to PDF
document.getElementById('exportPdf').addEventListener('click', function() {
    exportReportToPdf();
});

// Export the task report data to PDF
function exportReportToPdf() {
    fetch('/index.php?route=extension/task_manager/exportReportToPdf', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.blob())
    .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'task_report.pdf';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    })
    .catch(error => {
        console.error('Error exporting report to PDF:', error);
    });
}

Описание:

1. Получение отчетов: При загрузке страницы выполняется запрос на сервер для получения отчетов задач с помощью функции fetchTaskReports.

2. Отображение отчетов: Отчеты выводятся на страницу, включая статистику по задачам, такие как общее количество, выполненные и ожидающие задачи. Каждый отчет имеет кнопку "Просмотреть отчет", которая вызывает подробное отображение отчета.

3. Просмотр деталей отчета: При клике на кнопку "Просмотреть отчет" отображаются подробные данные, включая график с использованием библиотеки Chart.js, который показывает распределение завершенных и ожидающих задач.

4. Экспорт в CSV и PDF: Пользователи могут экспортировать отчет в формате CSV или PDF, для этого предусмотрены кнопки "Export CSV" и "Export PDF". Функции отправляют запросы на сервер, чтобы получить данные в нужном формате и загрузить файл.

5. График с использованием Chart.js: Для каждого отчета создается круговая диаграмма (Pie Chart), которая визуализирует распределение выполненных и невыполненных задач.

Этот скрипт обеспечивает удобное представление отчетов по задачам и возможность их экспорта в различные форматы.