516 lines
24 KiB
HTML
516 lines
24 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{% if object %}Edit Quality Indicator{% else %}Create Quality Indicator{% endif %} - {{ block.super }}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1">
|
|
<i class="fas fa-chart-line me-2"></i>
|
|
{% if object %}Edit Quality Indicator{% else %}Create Quality Indicator{% endif %}
|
|
</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'quality:dashboard' %}">Quality</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'quality:quality_indicator_list' %}">Indicators</a></li>
|
|
<li class="breadcrumb-item active">
|
|
{% if object %}Edit{% else %}Create{% endif %}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a href="{% url 'quality:quality_indicator_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to List
|
|
</a>
|
|
{% if object %}
|
|
<a href="{% url 'quality:quality_indicator_detail' object.pk %}" class="btn btn-outline-info">
|
|
<i class="fas fa-eye me-2"></i>View Details
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Main Form -->
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-edit me-2"></i>Indicator Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
|
|
<!-- Basic Information -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-info-circle me-2"></i>Basic Information
|
|
</h6>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.name }}
|
|
<label for="{{ form.name.id_for_label }}">Indicator Name *</label>
|
|
{% if form.name.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.measurement_unit }}
|
|
<label for="{{ form.measurement_unit.id_for_label }}">Measurement Unit *</label>
|
|
{% if form.measurement_unit.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.measurement_unit.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.description }}
|
|
<label for="{{ form.description.id_for_label }}">Description *</label>
|
|
{% if form.description.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.description.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Classification -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-tags me-2"></i>Classification
|
|
</h6>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.category }}
|
|
<label for="{{ form.category.id_for_label }}">Category *</label>
|
|
{% if form.category.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.category.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.type }}
|
|
<label for="{{ form.type.id_for_label }}">Type *</label>
|
|
{% if form.type.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.type.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.frequency }}
|
|
<label for="{{ form.frequency.id_for_label }}">Frequency *</label>
|
|
{% if form.frequency.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.frequency.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Targets and Thresholds -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-bullseye me-2"></i>Targets and Thresholds
|
|
</h6>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.target_value }}
|
|
<label for="{{ form.target_value.id_for_label }}">Target Value *</label>
|
|
{% if form.target_value.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.target_value.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.threshold_warning }}
|
|
<label for="{{ form.threshold_warning.id_for_label }}">Warning Threshold *</label>
|
|
{% if form.threshold_warning.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.threshold_warning.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.threshold_critical }}
|
|
<label for="{{ form.threshold_critical.id_for_label }}">Critical Threshold *</label>
|
|
{% if form.threshold_critical.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.threshold_critical.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calculation and Data Source -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-calculator me-2"></i>Calculation and Data Source
|
|
</h6>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.calculation_method }}
|
|
<label for="{{ form.calculation_method.id_for_label }}">Calculation Method *</label>
|
|
{% if form.calculation_method.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.calculation_method.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.data_source }}
|
|
<label for="{{ form.data_source.id_for_label }}">Data Source *</label>
|
|
{% if form.data_source.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.data_source.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Responsibility -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-user-check me-2"></i>Responsibility
|
|
</h6>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.responsible_department }}
|
|
<label for="{{ form.responsible_department.id_for_label }}">Responsible Department</label>
|
|
{% if form.responsible_department.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.responsible_department.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.responsible_user }}
|
|
<label for="{{ form.responsible_user.id_for_label }}">Responsible Person</label>
|
|
{% if form.responsible_user.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.responsible_user.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-cog me-2"></i>Settings
|
|
</h6>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-check form-switch">
|
|
{{ form.is_active }}
|
|
<label class="form-check-label" for="{{ form.is_active.id_for_label }}">
|
|
Active Indicator
|
|
</label>
|
|
{% if form.is_active.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.is_active.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-check form-switch">
|
|
{{ form.regulatory_requirement }}
|
|
<label class="form-check-label" for="{{ form.regulatory_requirement.id_for_label }}">
|
|
Regulatory Requirement
|
|
</label>
|
|
{% if form.regulatory_requirement.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.regulatory_requirement.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'quality:quality_indicator_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-2"></i>
|
|
{% if object %}Update Indicator{% else %}Create Indicator{% endif %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Help Panel -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-question-circle me-2"></i>Help & Guidelines
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion" id="helpAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#indicatorTypes">
|
|
Indicator Types
|
|
</button>
|
|
</h2>
|
|
<div id="indicatorTypes" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
|
|
<div class="accordion-body">
|
|
<ul class="list-unstyled">
|
|
<li><strong>Structure:</strong> Resources, facilities, equipment</li>
|
|
<li><strong>Process:</strong> Activities and procedures</li>
|
|
<li><strong>Outcome:</strong> Results and effects</li>
|
|
<li><strong>Balancing:</strong> Unintended consequences</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#thresholds">
|
|
Setting Thresholds
|
|
</button>
|
|
</h2>
|
|
<div id="thresholds" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
|
|
<div class="accordion-body">
|
|
<p><strong>Target Value:</strong> Desired performance level</p>
|
|
<p><strong>Warning:</strong> Performance requiring attention</p>
|
|
<p><strong>Critical:</strong> Performance requiring immediate action</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#calculation">
|
|
Calculation Methods
|
|
</button>
|
|
</h2>
|
|
<div id="calculation" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
|
|
<div class="accordion-body">
|
|
<p>Describe how the indicator value is calculated:</p>
|
|
<ul>
|
|
<li>Numerator and denominator</li>
|
|
<li>Data collection period</li>
|
|
<li>Inclusion/exclusion criteria</li>
|
|
<li>Calculation formula</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if object %}
|
|
<!-- Current Status -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-chart-bar me-2"></i>Current Status
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<h4 class="text-primary mb-1">{{ object.measurements.count }}</h4>
|
|
<small class="text-muted">Measurements</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
{% if object.latest_measurement %}
|
|
<h4 class="mb-1
|
|
{% if object.current_status == 'within_target' %}text-success
|
|
{% elif object.current_status == 'warning' %}text-warning
|
|
{% elif object.current_status == 'critical' %}text-danger
|
|
{% else %}text-muted{% endif %}">
|
|
{{ object.latest_measurement.value }}
|
|
</h4>
|
|
<small class="text-muted">Latest Value</small>
|
|
{% else %}
|
|
<h4 class="text-muted mb-1">-</h4>
|
|
<small class="text-muted">No Data</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if object.latest_measurement %}
|
|
<div class="mt-3">
|
|
<small class="text-muted">
|
|
Last updated: {{ object.latest_measurement.measurement_date|date:"M d, Y" }}
|
|
</small>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Form validation
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.querySelector('form');
|
|
const inputs = form.querySelectorAll('input, select, textarea');
|
|
|
|
// Add Bootstrap validation classes
|
|
inputs.forEach(input => {
|
|
input.addEventListener('blur', function() {
|
|
if (this.checkValidity()) {
|
|
this.classList.remove('is-invalid');
|
|
this.classList.add('is-valid');
|
|
} else {
|
|
this.classList.remove('is-valid');
|
|
this.classList.add('is-invalid');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Threshold validation
|
|
const targetValue = document.getElementById('{{ form.target_value.id_for_label }}');
|
|
const warningThreshold = document.getElementById('{{ form.threshold_warning.id_for_label }}');
|
|
const criticalThreshold = document.getElementById('{{ form.threshold_critical.id_for_label }}');
|
|
|
|
function validateThresholds() {
|
|
const target = parseFloat(targetValue.value) || 0;
|
|
const warning = parseFloat(warningThreshold.value) || 0;
|
|
const critical = parseFloat(criticalThreshold.value) || 0;
|
|
|
|
// Basic validation - warning should be between target and critical
|
|
if (target && warning && critical) {
|
|
if (warning < target || warning > critical) {
|
|
warningThreshold.setCustomValidity('Warning threshold should be between target and critical values');
|
|
} else {
|
|
warningThreshold.setCustomValidity('');
|
|
}
|
|
}
|
|
}
|
|
|
|
[targetValue, warningThreshold, criticalThreshold].forEach(input => {
|
|
if (input) {
|
|
input.addEventListener('input', validateThresholds);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.form-floating > .form-control:focus,
|
|
.form-floating > .form-control:not(:placeholder-shown) {
|
|
padding-top: 1.625rem;
|
|
padding-bottom: 0.625rem;
|
|
}
|
|
|
|
.form-floating > label {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.form-floating > .form-control:focus ~ label,
|
|
.form-floating > .form-control:not(:placeholder-shown) ~ label {
|
|
opacity: 0.65;
|
|
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 0.375rem;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: #0d6efd;
|
|
border-color: #0d6efd;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|