120 lines
4.2 KiB
HTML
120 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block head %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2>Calibration Dashboard</h2>
|
|
<a href="{{ url_for('calibrations.new_calibration') }}" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle"></i> New Calibration Batch
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Calibrations</h5>
|
|
<p class="display-4">{{ summary.total_calibrations }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Passed</h5>
|
|
<p class="display-4 text-success">{{ summary.passed_calibrations }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Failed</h5>
|
|
<p class="display-4 text-danger">{{ summary.failed_calibrations }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Recent Calibrations</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Channel</th>
|
|
<th>Standard</th>
|
|
<th>Calibrated By</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for cal in recent_calibrations %}
|
|
<tr>
|
|
<td>{{ cal.date }}</td>
|
|
<td>{{ cal.channels.serial_number }}</td>
|
|
<td>{{ cal.standards.make }} {{ cal.standards.model }}</td>
|
|
<td>{{ cal.calibrated_by.name }}</td>
|
|
<td>
|
|
{% if cal.passed %}
|
|
<span class="badge bg-success">Passed</span>
|
|
{% else %}
|
|
<span class="badge bg-danger">Failed</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<a href="{{ url_for('calibrations.view_calibration', calibration_id=cal.id) }}"
|
|
class="btn btn-sm btn-primary">
|
|
Details
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Calibration Status</h5>
|
|
<canvas id="statusChart" height="100"></canvas>
|
|
<!-- Hidden elements for chart data -->
|
|
<div id="chartData"
|
|
data-passed="{{ summary.passed_calibrations }}"
|
|
data-failed="{{ summary.failed_calibrations }}"
|
|
style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Chart initialization using data attributes
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const dataEl = document.getElementById('chartData');
|
|
const passed = parseInt(dataEl.dataset.passed);
|
|
const failed = parseInt(dataEl.dataset.failed);
|
|
const ctx = document.getElementById('statusChart');
|
|
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Passed', 'Failed'],
|
|
datasets: [{
|
|
data: [passed, failed],
|
|
backgroundColor: ['#28a745', '#dc3545']
|
|
}]
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|