712 lines
42 KiB
HTML
712 lines
42 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Equipment Check - Operating Theatre{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Operating Room Equipment Check</h4>
|
|
<h6>Perform pre-operative equipment safety and functionality checks</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'operating_theatre:operating_room_list' %}" class="btn btn-secondary">
|
|
<i class="fa fa-arrow-left"></i> Back to OR List
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Check Form -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Equipment Safety Checklist - {{ operating_room.room_number }}</h5>
|
|
<div class="card-tools">
|
|
<span class="badge bg-info">{{ check_date|date:"M d, Y" }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" id="equipmentCheckForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="operating_room_id" value="{{ operating_room.id }}">
|
|
<input type="hidden" name="check_date" value="{{ check_date|date:'Y-m-d' }}">
|
|
|
|
<!-- Basic Information -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Check Information</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Operating Room</label>
|
|
<input type="text" class="form-control" value="{{ operating_room.room_number }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Check Date/Time *</label>
|
|
<input type="datetime-local" name="check_datetime" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Checked By *</label>
|
|
<input type="text" class="form-control" value="{{ request.user.get_full_name }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Check Type *</label>
|
|
<select name="check_type" class="form-select" required>
|
|
<option value="">Select Check Type</option>
|
|
<option value="daily">Daily Check</option>
|
|
<option value="pre_case">Pre-Case Check</option>
|
|
<option value="post_case">Post-Case Check</option>
|
|
<option value="maintenance">Maintenance Check</option>
|
|
<option value="emergency">Emergency Check</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anesthesia Equipment -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Anesthesia Equipment</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="anesthesia_machine" id="anesthesiaMachine">
|
|
<label class="form-check-label" for="anesthesiaMachine">
|
|
<strong>Anesthesia Machine</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Power on, gas supplies connected, alarms functional</small>
|
|
<div class="mt-1">
|
|
<select name="anesthesia_machine_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="ventilator" id="ventilator">
|
|
<label class="form-check-label" for="ventilator">
|
|
<strong>Ventilator</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Breathing circuits, pressure checks, leak test</small>
|
|
<div class="mt-1">
|
|
<select name="ventilator_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="monitors" id="monitors">
|
|
<label class="form-check-label" for="monitors">
|
|
<strong>Patient Monitors</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">ECG, SpO2, NIBP, temperature, capnography</small>
|
|
<div class="mt-1">
|
|
<select name="monitors_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="suction" id="suction">
|
|
<label class="form-check-label" for="suction">
|
|
<strong>Suction System</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Vacuum pressure, canisters, tubing</small>
|
|
<div class="mt-1">
|
|
<select name="suction_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="defibrillator" id="defibrillator">
|
|
<label class="form-check-label" for="defibrillator">
|
|
<strong>Defibrillator</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Battery charge, pads, self-test passed</small>
|
|
<div class="mt-1">
|
|
<select name="defibrillator_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="emergency_cart" id="emergencyCart">
|
|
<label class="form-check-label" for="emergencyCart">
|
|
<strong>Emergency Cart</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Medications, supplies, expiration dates</small>
|
|
<div class="mt-1">
|
|
<select name="emergency_cart_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Surgical Equipment -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Surgical Equipment</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="operating_table" id="operatingTable">
|
|
<label class="form-check-label" for="operatingTable">
|
|
<strong>Operating Table</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Movement controls, positioning, safety locks</small>
|
|
<div class="mt-1">
|
|
<select name="operating_table_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="surgical_lights" id="surgicalLights">
|
|
<label class="form-check-label" for="surgicalLights">
|
|
<strong>Surgical Lights</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Brightness, focus, positioning, backup lights</small>
|
|
<div class="mt-1">
|
|
<select name="surgical_lights_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="electrosurgery" id="electrosurgery">
|
|
<label class="form-check-label" for="electrosurgery">
|
|
<strong>Electrosurgical Unit</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Power settings, grounding pad, alarms</small>
|
|
<div class="mt-1">
|
|
<select name="electrosurgery_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="imaging_equipment" id="imagingEquipment">
|
|
<label class="form-check-label" for="imagingEquipment">
|
|
<strong>Imaging Equipment</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">C-arm, ultrasound, image quality</small>
|
|
<div class="mt-1">
|
|
<select name="imaging_equipment_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="pneumatic_devices" id="pneumaticDevices">
|
|
<label class="form-check-label" for="pneumaticDevices">
|
|
<strong>Pneumatic Devices</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Tourniquets, compression devices, air pressure</small>
|
|
<div class="mt-1">
|
|
<select name="pneumatic_devices_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="warming_devices" id="warmingDevices">
|
|
<label class="form-check-label" for="warmingDevices">
|
|
<strong>Patient Warming</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Warming blankets, fluid warmers, temperature control</small>
|
|
<div class="mt-1">
|
|
<select name="warming_devices_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environmental Systems -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Environmental Systems</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="hvac_system" id="hvacSystem">
|
|
<label class="form-check-label" for="hvacSystem">
|
|
<strong>HVAC System</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Air pressure, temperature, humidity</small>
|
|
<div class="mt-1">
|
|
<select name="hvac_system_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="gas_outlets" id="gasOutlets">
|
|
<label class="form-check-label" for="gasOutlets">
|
|
<strong>Medical Gas Outlets</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">O2, N2O, air, vacuum connections</small>
|
|
<div class="mt-1">
|
|
<select name="gas_outlets_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="electrical_systems" id="electricalSystems">
|
|
<label class="form-check-label" for="electricalSystems">
|
|
<strong>Electrical Systems</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Power outlets, isolation, emergency power</small>
|
|
<div class="mt-1">
|
|
<select name="electrical_systems_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="equipment-check-item mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="communication" id="communication">
|
|
<label class="form-check-label" for="communication">
|
|
<strong>Communication Systems</strong>
|
|
</label>
|
|
</div>
|
|
<div class="check-details ms-4">
|
|
<small class="text-muted">Intercom, phones, emergency alarms</small>
|
|
<div class="mt-1">
|
|
<select name="communication_status" class="form-select form-select-sm">
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="na">N/A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Issues and Comments -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Issues and Comments</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Equipment Issues Found</label>
|
|
<textarea name="issues_found" class="form-control" rows="3"
|
|
placeholder="Describe any equipment issues, malfunctions, or concerns..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Corrective Actions Taken</label>
|
|
<textarea name="corrective_actions" class="form-control" rows="3"
|
|
placeholder="Describe any repairs, adjustments, or corrective actions performed..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Additional Comments</label>
|
|
<textarea name="additional_comments" class="form-control" rows="2"
|
|
placeholder="Any additional observations or recommendations..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Final Certification -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Certification</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" name="certification" id="certification" required>
|
|
<label class="form-check-label" for="certification">
|
|
I certify that I have performed the equipment checks listed above and that all
|
|
equipment is functioning properly and safe for patient use, or that any issues
|
|
have been documented and appropriate actions taken.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Overall Status *</label>
|
|
<select name="overall_status" class="form-select" required>
|
|
<option value="">Select Status</option>
|
|
<option value="pass">All Equipment Operational</option>
|
|
<option value="pass_with_issues">Operational with Minor Issues</option>
|
|
<option value="fail">Equipment Failure - Room Not Ready</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Next Check Due</label>
|
|
<input type="date" name="next_check_due" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between">
|
|
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
|
<i class="fa fa-times"></i> Cancel
|
|
</button>
|
|
<div>
|
|
<button type="button" class="btn btn-warning me-2" id="saveDraftBtn">
|
|
<i class="fa fa-save"></i> Save Draft
|
|
</button>
|
|
<button type="submit" class="btn btn-success btn-lg">
|
|
<i class="fa fa-check"></i> Complete Equipment Check
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Room Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<strong>Operating Room:</strong><br>
|
|
{{ operating_room.room_number }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Room Type:</strong><br>
|
|
{{ operating_room.room_type|title }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Current Status:</strong><br>
|
|
<span class="badge bg-{{ operating_room.status_color }}">{{ operating_room.status|title }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Last Equipment Check:</strong><br>
|
|
{{ last_check.check_datetime|date:"M d, Y H:i"|default:"Never" }}
|
|
</div>
|
|
{% if last_check %}
|
|
<div class="mb-3">
|
|
<strong>Last Check Status:</strong><br>
|
|
<span class="badge bg-{{ last_check.status_color }}">{{ last_check.overall_status|title }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Summary -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Equipment Summary</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="equipment-summary">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Total Items:</span>
|
|
<span class="badge bg-primary">{{ total_equipment_items|default:16 }}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Checked:</span>
|
|
<span class="badge bg-success" id="checkedCount">0</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Remaining:</span>
|
|
<span class="badge bg-warning" id="remainingCount">{{ total_equipment_items|default:16 }}</span>
|
|
</div>
|
|
<div class="progress mt-3">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%" id="progressBar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Checks -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Recent Checks</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for check in recent_checks %}
|
|
<div class="check-history-item mb-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span>{{ check.check_datetime|date:"M d, H:i" }}</span>
|
|
<span class="badge bg-{{ check.status_color }}">{{ check.overall_status|title }}</span>
|
|
</div>
|
|
<small class="text-muted">{{ check.checked_by.get_full_name }}</small>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-muted">No recent checks</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<a href="#" class="btn btn-outline-primary btn-sm">
|
|
<i class="fa fa-history"></i> View Check History
|
|
</a>
|
|
<a href="#" class="btn btn-outline-info btn-sm">
|
|
<i class="fa fa-print"></i> Print Checklist
|
|
</a>
|
|
<a href="#" class="btn btn-outline-warning btn-sm">
|
|
<i class="fa fa-wrench"></i> Request Maintenance
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set current time as default check time
|
|
const now = new Date();
|
|
const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
|
|
document.querySelector('input[name="check_datetime"]').value = localDateTime;
|
|
|
|
// Progress tracking
|
|
const checkboxes = document.querySelectorAll('.equipment-check-item input[type="checkbox"]');
|
|
const totalItems = checkboxes.length;
|
|
const checkedCountElement = document.getElementById('checkedCount');
|
|
const remainingCountElement = document.getElementById('remainingCount');
|
|
const progressBar = document.getElementById('progressBar');
|
|
|
|
function updateProgress() {
|
|
const checkedCount = document.querySelectorAll('.equipment-check-item input[type="checkbox"]:checked').length;
|
|
const remainingCount = totalItems - checkedCount;
|
|
const progressPercent = (checkedCount / totalItems) * 100;
|
|
|
|
checkedCountElement.textContent = checkedCount;
|
|
remainingCountElement.textContent = remainingCount;
|
|
progressBar.style.width = progressPercent + '%';
|
|
progressBar.textContent = Math.round(progressPercent) + '%';
|
|
}
|
|
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', updateProgress);
|
|
});
|
|
|
|
// Form validation
|
|
const form = document.getElementById('equipmentCheckForm');
|
|
form.addEventListener('submit', function(e) {
|
|
const certification = document.getElementById('certification');
|
|
|
|
if (!certification.checked) {
|
|
e.preventDefault();
|
|
alert('Please certify that you have completed the equipment check.');
|
|
certification.focus();
|
|
return false;
|
|
}
|
|
|
|
// Check if any equipment failed
|
|
const failedEquipment = document.querySelectorAll('select[name$="_status"] option[value="fail"]:checked');
|
|
if (failedEquipment.length > 0) {
|
|
const issuesFound = document.querySelector('textarea[name="issues_found"]').value.trim();
|
|
if (!issuesFound) {
|
|
e.preventDefault();
|
|
alert('Please document the equipment issues found in the Issues section.');
|
|
document.querySelector('textarea[name="issues_found"]').focus();
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Confirm submission
|
|
if (!confirm('Are you sure you want to submit this equipment check? This action cannot be undone.')) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Save draft functionality
|
|
document.getElementById('saveDraftBtn').addEventListener('click', function() {
|
|
const formData = new FormData(form);
|
|
formData.append('save_draft', 'true');
|
|
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Draft saved successfully!');
|
|
} else {
|
|
alert('Error saving draft: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Error saving draft');
|
|
});
|
|
});
|
|
|
|
// Auto-highlight failed equipment
|
|
const statusSelects = document.querySelectorAll('select[name$="_status"]');
|
|
statusSelects.forEach(select => {
|
|
select.addEventListener('change', function() {
|
|
const checkItem = this.closest('.equipment-check-item');
|
|
if (this.value === 'fail') {
|
|
checkItem.classList.add('border', 'border-danger', 'bg-light');
|
|
} else {
|
|
checkItem.classList.remove('border', 'border-danger', 'bg-light');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize progress
|
|
updateProgress();
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|