373 lines
18 KiB
HTML
373 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ object|yesno:"Edit,Create" }} Surgery - Inpatients{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/summernote/dist/summernote-lite.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">{{ object|yesno:"Edit,Create" }} Surgery</h1>
|
|
<!-- END page-header -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-8">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Surgery Information</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form method="post" id="surgery-form">
|
|
{% csrf_token %}
|
|
|
|
<!-- Basic Information -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.patient.id_for_label }}">Patient <span class="text-danger">*</span></label>
|
|
{{ form.patient }}
|
|
{% if form.patient.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.primary_surgeon.id_for_label }}">Primary Surgeon <span class="text-danger">*</span></label>
|
|
{{ form.primary_surgeon }}
|
|
{% if form.primary_surgeon.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.primary_surgeon.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.procedure_name.id_for_label }}">Procedure Name <span class="text-danger">*</span></label>
|
|
{{ form.procedure_name }}
|
|
{% if form.procedure_name.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.procedure_name.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.procedure_code.id_for_label }}">Procedure Code</label>
|
|
{{ form.procedure_code }}
|
|
{% if form.procedure_code.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.procedure_code.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scheduling Information -->
|
|
<h5 class="mb-3 mt-4">Scheduling Information</h5>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label" for="{{ form.scheduled_date.id_for_label }}">Scheduled Date <span class="text-danger">*</span></label>
|
|
{{ form.scheduled_date }}
|
|
{% if form.scheduled_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.scheduled_date.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label" for="{{ form.scheduled_start_time.id_for_label }}">Start Time <span class="text-danger">*</span></label>
|
|
{{ form.scheduled_start_time }}
|
|
{% if form.scheduled_start_time.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.scheduled_start_time.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label" for="{{ form.estimated_duration.id_for_label }}">Estimated Duration (minutes)</label>
|
|
{{ form.estimated_duration }}
|
|
{% if form.estimated_duration.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.estimated_duration.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.operating_room.id_for_label }}">Operating Room</label>
|
|
{{ form.operating_room }}
|
|
{% if form.operating_room.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.operating_room.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.anesthesia_type.id_for_label }}">Anesthesia Type</label>
|
|
{{ form.anesthesia_type }}
|
|
{% if form.anesthesia_type.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.anesthesia_type.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Information -->
|
|
<h5 class="mb-3 mt-4">Surgical Team</h5>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.assistant_surgeons.id_for_label }}">Assistant Surgeons</label>
|
|
{{ form.assistant_surgeons }}
|
|
{% if form.assistant_surgeons.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.assistant_surgeons.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.anesthesiologist.id_for_label }}">Anesthesiologist</label>
|
|
{{ form.anesthesiologist }}
|
|
{% if form.anesthesiologist.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.anesthesiologist.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.scrub_nurses.id_for_label }}">Scrub Nurses</label>
|
|
{{ form.scrub_nurses }}
|
|
{% if form.scrub_nurses.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.scrub_nurses.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.circulating_nurses.id_for_label }}">Circulating Nurses</label>
|
|
{{ form.circulating_nurses }}
|
|
{% if form.circulating_nurses.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.circulating_nurses.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clinical Information -->
|
|
<h5 class="mb-3 mt-4">Clinical Information</h5>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.urgency_level.id_for_label }}">Urgency Level</label>
|
|
{{ form.urgency_level }}
|
|
{% if form.urgency_level.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.urgency_level.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="{{ form.status.id_for_label }}">Status</label>
|
|
{{ form.status }}
|
|
{% if form.status.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.status.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="{{ form.pre_operative_notes.id_for_label }}">Pre-operative Notes</label>
|
|
{{ form.pre_operative_notes }}
|
|
{% if form.pre_operative_notes.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.pre_operative_notes.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="{{ form.special_instructions.id_for_label }}">Special Instructions</label>
|
|
{{ form.special_instructions }}
|
|
{% if form.special_instructions.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.special_instructions.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'inpatients:surgery_list' %}" class="btn btn-default">
|
|
<i class="fa fa-arrow-left me-2"></i>Cancel
|
|
</a>
|
|
<div>
|
|
<button type="submit" name="action" value="save_draft" class="btn btn-warning me-2">
|
|
<i class="fa fa-save me-2"></i>Save as Draft
|
|
</button>
|
|
<button type="submit" name="action" value="save" class="btn btn-success">
|
|
<i class="fa fa-check me-2"></i>{{ object|yesno:"Update,Create" }} Surgery
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
|
|
<div class="col-xl-4">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Surgery Guidelines</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div>
|
|
<div class="note alert-info p-3 note-with-end-icon">
|
|
<div class="note-icon"><i class="fa fa-info-circle"></i></div>
|
|
<h6>Scheduling Guidelines</h6>
|
|
<ul class="">
|
|
<li>Schedule surgeries at least 24 hours in advance for elective procedures</li>
|
|
<li>Emergency surgeries can be scheduled immediately</li>
|
|
<li>Verify patient consent and pre-operative requirements</li>
|
|
<li>Ensure all team members are available for scheduled time</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="note alert-warning p-3 note-with-end-icon">
|
|
<div class="note-icon"><i class="fa fa-exclamation-triangle"></i></div>
|
|
<h6>Urgency Levels</h6>
|
|
<ul class="">
|
|
<li><strong>Emergency:</strong> Life-threatening, immediate surgery required</li>
|
|
<li><strong>Urgent:</strong> Surgery needed within 24 hours</li>
|
|
<li><strong>Elective:</strong> Planned surgery, can be scheduled in advance</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="note alert-success p-3 note-with-end-icon">
|
|
<div class="note-icon"><i class="fa fa-check-circle"></i></div>
|
|
<h6>Pre-operative Checklist</h6>
|
|
<ul class="">
|
|
<li>Patient consent obtained and documented</li>
|
|
<li>Pre-operative assessment completed</li>
|
|
<li>Laboratory results reviewed</li>
|
|
<li>Anesthesia consultation completed (if required)</li>
|
|
<li>Surgical site marked and verified</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
{% if object %}
|
|
<div class="note alert-secondary p-3 note-with-end-icon">
|
|
<div class="note-icon"><i class="fa fa-clock"></i></div>
|
|
<h6>Surgery Timeline</h6>
|
|
<ul class="">
|
|
<li><strong>Created:</strong> {{ object.created_at|date:"M d, Y H:i" }}</li>
|
|
{% if object.updated_at != object.created_at %}
|
|
<li><strong>Last Updated:</strong> {{ object.updated_at|date:"M d, Y H:i" }}</li>
|
|
{% endif %}
|
|
<li>
|
|
<strong>Status:</strong>
|
|
{% if object.status == 'SCHEDULED' %}
|
|
<span class="badge bg-warning">S
|
|
{% elif object.status == 'CONFIRMED' %}
|
|
<span class="badge bg-info">
|
|
{% elif object.status == 'PREP' %}
|
|
<span class="badge bg-primary">
|
|
{% elif object.status == 'IN_PROGRESS' %}
|
|
<span class="badge bg-success">
|
|
{% elif object.status == 'COMPLETED' %}
|
|
<span class="badge bg-success">
|
|
{% elif object.status == 'CANCELLED' %}
|
|
<span class="badge bg-danger">
|
|
{% elif object.status == 'POSTPONED' %}
|
|
<span class="badge bg-secondary">
|
|
{% else %}
|
|
<span class="badge bg-secondary">
|
|
{% endif %}
|
|
{{ object.get_status_display }}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js' %}"></script>
|
|
<script src="{% static 'plugins/summernote/dist/summernote-lite.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2
|
|
$('.select2').select2({
|
|
theme: 'bootstrap-5',
|
|
width: '100%'
|
|
});
|
|
|
|
// Initialize date picker
|
|
{#$('input[type="date"]').datepicker({#}
|
|
{# format: 'yyyy-mm-dd',#}
|
|
{# autoclose: true,#}
|
|
{# todayHighlight: true,#}
|
|
{# startDate: new Date()#}
|
|
{# });#}
|
|
|
|
// Initialize time picker
|
|
{#$('input[type="time"]').timepicker({#}
|
|
{# showMeridian: false,#}
|
|
{# defaultTime: false#}
|
|
{# });#}
|
|
|
|
// Initialize Summernote
|
|
{#$('.summernote').summernote({#}
|
|
{# height: 150,#}
|
|
{# toolbar: [#}
|
|
{# ['style', ['style']],#}
|
|
{# ['font', ['bold', 'italic', 'underline', 'clear']],#}
|
|
{# ['para', ['ul', 'ol', 'paragraph']],#}
|
|
{# ['insert', ['link']],#}
|
|
{# ['view', ['fullscreen', 'codeview']]#}
|
|
{# ]#}
|
|
{# });#}
|
|
|
|
// Form validation
|
|
{#$('#surgery-form').on('submit', function(e) {#}
|
|
{# var isValid = true;#}
|
|
{# var requiredFields = ['patient', 'surgeon', 'procedure_name', 'scheduled_date', 'scheduled_start_time'];#}
|
|
{# #}
|
|
{# requiredFields.forEach(function(field) {#}
|
|
{# var input = $('[name="' + field + '"]');#}
|
|
{# if (!input.val()) {#}
|
|
{# input.addClass('is-invalid');#}
|
|
{# isValid = false;#}
|
|
{# } else {#}
|
|
{# input.removeClass('is-invalid');#}
|
|
{# }#}
|
|
{# });#}
|
|
{##}
|
|
{# if (!isValid) {#}
|
|
{# e.preventDefault();#}
|
|
{# toastr.error('Please fill in all required fields.');#}
|
|
{# }#}
|
|
{# });#}
|
|
|
|
// Real-time validation
|
|
{#$('input, select, textarea').on('change blur', function() {#}
|
|
{# if ($(this).val()) {#}
|
|
{# $(this).removeClass('is-invalid');#}
|
|
{# }#}
|
|
{# });#}
|
|
|
|
// Check for scheduling conflicts
|
|
{#$('#id_scheduled_date, #id_scheduled_start_time, #id_operating_room').on('change', function() {#}
|
|
{# var date = $('#id_scheduled_date').val();#}
|
|
{# var time = $('#id_scheduled_start_time').val();#}
|
|
{# var room = $('#id_operating_room').val();#}
|
|
{# #}
|
|
{# if (date && time && room) {#}
|
|
{# // Check for conflicts (this would be an AJAX call in a real implementation)#}
|
|
{# // For now, just show a placeholder message#}
|
|
{# console.log('Checking for scheduling conflicts...');#}
|
|
{# }#}
|
|
{# });#}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|