314 lines
15 KiB
HTML
314 lines
15 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Survey Analytics Reports" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-0">{% trans "Survey Analytics Reports" %}</h1>
|
|
<p class="text-muted mb-0">{% trans "Comprehensive survey performance analysis with statistical insights" %}</p>
|
|
</div>
|
|
<div>
|
|
<a href="{% url 'surveys:enhanced_reports_list' %}" class="btn btn-success me-2">
|
|
<i class="bi bi-graph-up me-2"></i>{% trans "Enhanced Reports" %}
|
|
</a>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#generateReportModal">
|
|
<i class="bi bi-file-earmark-plus me-2"></i>{% trans "Generate Report" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h6 class="text-muted mb-1">{% trans "Total Reports" %}</h6>
|
|
<h3 class="mb-0">{{ stats.total }}</h3>
|
|
</div>
|
|
<div class="bg-primary bg-opacity-10 rounded-circle p-3">
|
|
<i class="bi bi-files text-primary fs-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h6 class="text-muted mb-1">{% trans "JSON Reports" %}</h6>
|
|
<h3 class="mb-0">{{ stats.json }}</h3>
|
|
</div>
|
|
<div class="bg-info bg-opacity-10 rounded-circle p-3">
|
|
<i class="bi bi-file-code text-info fs-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h6 class="text-muted mb-1">{% trans "HTML Reports" %}</h6>
|
|
<h3 class="mb-0">{{ stats.html }}</h3>
|
|
</div>
|
|
<div class="bg-success bg-opacity-10 rounded-circle p-3">
|
|
<i class="bi bi-file-earmark-text text-success fs-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-grow-1">
|
|
<h6 class="text-muted mb-1">{% trans "Markdown Reports" %}</h6>
|
|
<h3 class="mb-0">{{ stats.markdown }}</h3>
|
|
</div>
|
|
<div class="bg-warning bg-opacity-10 rounded-circle p-3">
|
|
<i class="bi bi-file-richtext text-warning fs-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reports Table -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-0">
|
|
<h5 class="mb-0">{% trans "Available Reports" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if reports %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Filename" %}</th>
|
|
<th>{% trans "Type" %}</th>
|
|
<th>{% trans "Size" %}</th>
|
|
<th>{% trans "Created" %}</th>
|
|
<th class="text-end">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for report in reports %}
|
|
<tr>
|
|
<td>
|
|
<i class="bi bi-file-earmark me-2"></i>
|
|
<strong>{{ report.filename }}</strong>
|
|
</td>
|
|
<td>
|
|
{% if report.type == 'json' %}
|
|
<span class="badge bg-info">JSON</span>
|
|
{% elif report.type == 'html' %}
|
|
<span class="badge bg-success">HTML</span>
|
|
{% elif report.type == 'markdown' %}
|
|
<span class="badge bg-warning text-dark">Markdown</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ report.type|title }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ report.size_human }}</td>
|
|
<td>
|
|
<small class="text-muted">{{ report.created_date|date:"Y-m-d H:i:s" }}</small>
|
|
</td>
|
|
<td class="text-end">
|
|
<div class="btn-group">
|
|
<a href="{% url 'surveys:analytics_report_view_inline' report.filename %}"
|
|
class="btn btn-sm btn-outline-primary"
|
|
title="{% trans 'View' %}"
|
|
target="_blank">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
<a href="{% url 'surveys:analytics_report_download' report.filename %}"
|
|
class="btn btn-sm btn-outline-success"
|
|
title="{% trans 'Download' %}">
|
|
<i class="bi bi-download"></i>
|
|
</a>
|
|
<form method="post"
|
|
action="{% url 'surveys:analytics_report_delete' report.filename %}"
|
|
class="d-inline"
|
|
onsubmit="return confirm('{% trans "Are you sure you want to delete this report?" %}')">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-sm btn-outline-danger"
|
|
title="{% trans 'Delete' %}">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-file-earmark-x text-muted fs-1 mb-3"></i>
|
|
<h5 class="text-muted">{% trans "No reports found" %}</h5>
|
|
<p class="text-muted mb-4">
|
|
{% trans "Generate your first comprehensive survey analytics report." %}
|
|
</p>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#generateReportModal">
|
|
<i class="bi bi-file-earmark-plus me-2"></i>{% trans "Generate Report" %}
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generate Report Modal -->
|
|
<div class="modal fade" id="generateReportModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans "Generate Analytics Report" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="generateReportForm">
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label for="template" class="form-label">{% trans "Survey Template (optional)" %}</label>
|
|
<select name="template" id="template" class="form-select">
|
|
<option value="">{% trans "All Templates" %}</option>
|
|
<!-- Templates will be loaded via AJAX -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="format" class="form-label">{% trans "Output Format" %}</label>
|
|
<select name="format" id="format" class="form-select">
|
|
<option value="json">JSON</option>
|
|
<option value="html">HTML</option>
|
|
<option value="markdown">Markdown</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="start_date" class="form-label">{% trans "Start Date (optional)" %}</label>
|
|
<input type="date" name="start_date" id="start_date" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="end_date" class="form-label">{% trans "End Date (optional)" %}</label>
|
|
<input type="date" name="end_date" id="end_date" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="save" id="save" checked>
|
|
<label class="form-check-label" for="save">
|
|
{% trans "Save report to server for later access" %}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<button type="submit" class="btn btn-primary" id="generateBtn">
|
|
<i class="bi bi-gear me-2"></i>{% trans "Generate" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load survey templates
|
|
fetch('/surveys/api/templates/')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const templateSelect = document.getElementById('template');
|
|
data.results.forEach(template => {
|
|
const option = document.createElement('option');
|
|
option.value = template.name;
|
|
option.textContent = template.name;
|
|
templateSelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => console.error('Error loading templates:', error));
|
|
|
|
// Handle form submission
|
|
document.getElementById('generateReportForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const btn = document.getElementById('generateBtn');
|
|
const originalText = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>{% trans "Generating..." %}';
|
|
|
|
const formData = new FormData(this);
|
|
const data = {};
|
|
formData.forEach((value, key) => {
|
|
if (value) {
|
|
if (key === 'save') {
|
|
data[key] = true;
|
|
} else {
|
|
data[key] = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
fetch('/surveys/api/analytics/generate_report/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalText;
|
|
|
|
if (result.success) {
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('generateReportModal'));
|
|
modal.hide();
|
|
|
|
if (result.content) {
|
|
// Show content in new tab for HTML/Markdown
|
|
const blob = new Blob([result.content], { type: 'text/html' });
|
|
const url = URL.createObjectURL(blob);
|
|
window.open(url, '_blank');
|
|
} else if (result.data) {
|
|
// Show JSON data
|
|
const blob = new Blob([JSON.stringify(result.data, null, 2)], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
window.open(url, '_blank');
|
|
}
|
|
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + (result.error || 'Failed to generate report'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalText;
|
|
alert('Error: ' + error.message);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |