322 lines
16 KiB
HTML
322 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% if bed %}Edit Bed{% else %}Add New Bed{% endif %} | {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
{{ block.super }}
|
|
<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" />
|
|
<style>
|
|
.help-sidebar {
|
|
background-color: rgba(45, 53, 60, 0.05);
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.help-sidebar h5 {
|
|
border-bottom: 1px solid #ddd;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.help-sidebar ul {
|
|
padding-left: 20px;
|
|
}
|
|
.form-label .badge {
|
|
font-size: 0.65rem;
|
|
vertical-align: middle;
|
|
}
|
|
.bed-type-info {
|
|
display: none;
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
background-color: rgba(45, 53, 60, 0.05);
|
|
}
|
|
.bed-type-info.active {
|
|
display: block;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block breadcrumb %}
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'inpatients:dashboard' %}">Inpatients</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'inpatients:bed_management' %}">Bed Management</a></li>
|
|
<li class="breadcrumb-item active">{% if bed %}Edit Bed{% else %}Add New Bed{% endif %}</li>
|
|
</ol>
|
|
{% endblock %}
|
|
|
|
{% block page_header %}
|
|
<h1 class="page-header">{% if bed %}Edit Bed{% else %}Add New Bed{% endif %} <small>Manage bed information</small></h1>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-xl-8">
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">{% if bed %}Edit Bed: {{ bed.bed_number }} ({{ bed.ward.name }}){% else %}Add New Bed{% endif %}</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-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form method="post" id="bedForm">
|
|
{% csrf_token %}
|
|
|
|
{% if form.errors %}
|
|
<div class="alert alert-danger">
|
|
<h5><i class="fa fa-exclamation-circle"></i> Please correct the following errors:</h5>
|
|
<ul>
|
|
{% for field in form %}
|
|
{% for error in field.errors %}
|
|
<li><strong>{{ field.label }}:</strong> {{ error }}</li>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% for error in form.non_field_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.ward.id_for_label }}" class="form-label">Ward <span class="text-danger">*</span></label>
|
|
{{ form.ward }}
|
|
{% if form.ward.help_text %}
|
|
<div class="form-text">{{ form.ward.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<label for="{{ form.room_number.id_for_label }}" class="form-label">Room Number <span class="text-danger">*</span></label>
|
|
{{ form.room_number }}
|
|
{% if form.room_number.help_text %}
|
|
<div class="form-text">{{ form.room_number.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<label for="{{ form.bed_number.id_for_label }}" class="form-label">Bed Number <span class="text-danger">*</span></label>
|
|
{{ form.bed_number }}
|
|
{% if form.bed_number.help_text %}
|
|
<div class="form-text">{{ form.bed_number.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.bed_type.id_for_label }}" class="form-label">Bed Type <span class="text-danger">*</span></label>
|
|
{{ form.bed_type }}
|
|
{% if form.bed_type.help_text %}
|
|
<div class="form-text">{{ form.bed_type.help_text }}</div>
|
|
{% endif %}
|
|
|
|
<!-- Bed Type Info Boxes -->
|
|
<div id="standard-info" class="bed-type-info">
|
|
<p><strong>Standard Bed:</strong> Regular hospital bed suitable for most patients.</p>
|
|
</div>
|
|
<div id="bariatric-info" class="bed-type-info">
|
|
<p><strong>Bariatric Bed:</strong> Reinforced bed designed for patients with higher weight requirements.</p>
|
|
</div>
|
|
<div id="pediatric-info" class="bed-type-info">
|
|
<p><strong>Pediatric Bed:</strong> Specialized bed with safety features for children.</p>
|
|
</div>
|
|
<div id="icu-info" class="bed-type-info">
|
|
<p><strong>ICU Bed:</strong> Advanced bed with monitoring capabilities for critical care.</p>
|
|
</div>
|
|
<div id="labor-info" class="bed-type-info">
|
|
<p><strong>Labor & Delivery Bed:</strong> Specialized bed for obstetric patients.</p>
|
|
</div>
|
|
<div id="stretcher-info" class="bed-type-info">
|
|
<p><strong>Stretcher:</strong> Mobile bed for temporary patient placement or transport.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.room_type.id_for_label }}" class="form-label">Room Type <span class="text-danger">*</span></label>
|
|
{{ form.room_type }}
|
|
{% if form.room_type.help_text %}
|
|
<div class="form-text">{{ form.room_type.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.status.id_for_label }}" class="form-label">Status <span class="text-danger">*</span></label>
|
|
{{ form.status }}
|
|
{% if form.status.help_text %}
|
|
<div class="form-text">{{ form.status.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label d-block">Features</label>
|
|
<div class="form-check form-check-inline">
|
|
{{ form.is_isolation_capable }}
|
|
<label class="form-check-label" for="{{ form.is_isolation_capable.id_for_label }}">
|
|
Isolation Capable
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.equipment.id_for_label }}" class="form-label">Equipment</label>
|
|
{{ form.equipment }}
|
|
<div class="form-text">List any permanent equipment attached to this bed (e.g., ventilator, monitors).</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.features.id_for_label }}" class="form-label">Additional Features</label>
|
|
{{ form.features }}
|
|
<div class="form-text">Describe any additional features of this bed (e.g., pressure relief mattress, built-in scale).</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
|
|
{{ form.notes }}
|
|
<div class="form-text">Any additional information about this bed.</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<a href="{% url 'inpatients:bed_management' %}" class="btn btn-secondary btn-lg d-block w-100">
|
|
<i class="fa fa-arrow-left"></i> Cancel
|
|
</a>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<button type="submit" class="btn btn-primary btn-lg d-block w-100">
|
|
<i class="fa fa-save"></i> {% if bed %}Update{% else %}Save{% endif %} Bed
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-4">
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Help & 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-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="help-sidebar">
|
|
<h5><i class="fa fa-info-circle"></i> Bed Information</h5>
|
|
<p>Each bed must have a unique combination of ward, room number, and bed number.</p>
|
|
<ul>
|
|
<li><strong>Ward:</strong> The ward where this bed is located.</li>
|
|
<li><strong>Room Number:</strong> The room identifier within the ward.</li>
|
|
<li><strong>Bed Number:</strong> The unique identifier for this bed within the room.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="help-sidebar">
|
|
<h5><i class="fa fa-bed"></i> Bed Types</h5>
|
|
<p>Select the appropriate bed type based on patient needs:</p>
|
|
<ul>
|
|
<li><strong>Standard:</strong> Regular hospital bed for most patients</li>
|
|
<li><strong>Bariatric:</strong> Reinforced bed for patients with higher weight requirements</li>
|
|
<li><strong>Pediatric:</strong> Specialized bed with safety features for children</li>
|
|
<li><strong>ICU:</strong> Advanced bed with monitoring capabilities</li>
|
|
<li><strong>Labor & Delivery:</strong> Specialized bed for obstetric patients</li>
|
|
<li><strong>Stretcher:</strong> Mobile bed for temporary placement</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="help-sidebar">
|
|
<h5><i class="fa fa-door-open"></i> Room Types</h5>
|
|
<p>Room types determine billing and patient placement:</p>
|
|
<ul>
|
|
<li><strong>Private:</strong> Single-occupancy room</li>
|
|
<li><strong>Semi-Private:</strong> Two-bed room</li>
|
|
<li><strong>Ward:</strong> Multi-bed room (3+ beds)</li>
|
|
<li><strong>Isolation:</strong> Room for patients requiring isolation</li>
|
|
<li><strong>Negative Pressure:</strong> Specialized room for infection control</li>
|
|
<li><strong>VIP:</strong> Enhanced amenities room</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="help-sidebar">
|
|
<h5><i class="fa fa-exclamation-triangle"></i> Status Information</h5>
|
|
<p>Bed status affects availability for patient assignment:</p>
|
|
<ul>
|
|
<li><strong>Available:</strong> Ready for patient assignment</li>
|
|
<li><strong>Occupied:</strong> Currently assigned to a patient</li>
|
|
<li><strong>Reserved:</strong> Reserved for upcoming admission</li>
|
|
<li><strong>Cleaning:</strong> Being cleaned after discharge</li>
|
|
<li><strong>Maintenance:</strong> Undergoing repairs or maintenance</li>
|
|
<li><strong>Blocked:</strong> Temporarily unavailable for assignment</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
{{ block.super }}
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2
|
|
$('.form-select').select2({
|
|
placeholder: "Select an option",
|
|
allowClear: true
|
|
});
|
|
|
|
// Show bed type info when selected
|
|
$('#{{ form.bed_type.id_for_label }}').change(function() {
|
|
// Hide all info boxes
|
|
$('.bed-type-info').removeClass('active');
|
|
|
|
// Show the selected one
|
|
var selectedType = $(this).val().toLowerCase();
|
|
$('#' + selectedType + '-info').addClass('active');
|
|
});
|
|
|
|
// Trigger change to show initial selection
|
|
$('#{{ form.bed_type.id_for_label }}').trigger('change');
|
|
|
|
// Form validation
|
|
$('#bedForm').submit(function(e) {
|
|
var isValid = true;
|
|
|
|
// Required fields
|
|
var requiredFields = ['#{{ form.ward.id_for_label }}', '#{{ form.room_number.id_for_label }}',
|
|
'#{{ form.bed_number.id_for_label }}', '#{{ form.bed_type.id_for_label }}',
|
|
'#{{ form.room_type.id_for_label }}', '#{{ form.status.id_for_label }}'];
|
|
|
|
$.each(requiredFields, function(index, field) {
|
|
if ($(field).val() === '' || $(field).val() === null) {
|
|
$(field).addClass('is-invalid');
|
|
isValid = false;
|
|
} else {
|
|
$(field).removeClass('is-invalid');
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
$('html, body').animate({
|
|
scrollTop: $('.is-invalid:first').offset().top - 100
|
|
}, 200);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|