563 lines
27 KiB
HTML
563 lines
27 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% if object %}Edit{% else %}Add{% endif %} Drug Interaction{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'pharmacy:dashboard' %}">Pharmacy</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'pharmacy:drug_interaction_list' %}">Drug Interactions</a></li>
|
|
<li class="breadcrumb-item active">{% if object %}Edit{% else %}Add{% endif %}</li>
|
|
</ol>
|
|
<h1 class="page-header mb-0">{% if object %}Edit{% else %}Add{% endif %} Drug Interaction</h1>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a href="{% url 'pharmacy:drug_interaction_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to List
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-10">
|
|
<form method="post" id="drugInteractionForm">
|
|
{% csrf_token %}
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
Drug Interaction Information
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="drug1" class="form-label">
|
|
<strong>Primary Drug *</strong>
|
|
</label>
|
|
<select class="form-select" id="drug1" name="drug1" required>
|
|
<option value="">Select primary drug</option>
|
|
{% for medication in medications %}
|
|
<option value="{{ medication.pk }}"
|
|
{% if object and object.drug1.pk == medication.pk %}selected{% endif %}
|
|
data-generic="{{ medication.generic_name }}"
|
|
data-brand="{{ medication.brand_name }}"
|
|
data-class="{{ medication.drug_class }}">
|
|
{{ medication.name }} ({{ medication.generic_name }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="form-text">
|
|
Select the primary drug in this interaction.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="drug2" class="form-label">
|
|
<strong>Interacting Drug *</strong>
|
|
</label>
|
|
<select class="form-select" id="drug2" name="drug2" required>
|
|
<option value="">Select interacting drug</option>
|
|
{% for medication in medications %}
|
|
<option value="{{ medication.pk }}"
|
|
{% if object and object.drug2.pk == medication.pk %}selected{% endif %}
|
|
data-generic="{{ medication.generic_name }}"
|
|
data-brand="{{ medication.brand_name }}"
|
|
data-class="{{ medication.drug_class }}">
|
|
{{ medication.name }} ({{ medication.generic_name }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="form-text">
|
|
Select the drug that interacts with the primary drug.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="severity" class="form-label">
|
|
<strong>Severity Level *</strong>
|
|
</label>
|
|
<select class="form-select" id="severity" name="severity" required>
|
|
<option value="">Select severity</option>
|
|
<option value="minor" {% if object and object.severity == 'minor' %}selected{% endif %}>Minor</option>
|
|
<option value="moderate" {% if object and object.severity == 'moderate' %}selected{% endif %}>Moderate</option>
|
|
<option value="major" {% if object and object.severity == 'major' %}selected{% endif %}>Major</option>
|
|
<option value="contraindicated" {% if object and object.severity == 'contraindicated' %}selected{% endif %}>Contraindicated</option>
|
|
</select>
|
|
<div class="form-text">
|
|
Severity of the drug interaction.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="interaction_type" class="form-label">
|
|
<strong>Interaction Type *</strong>
|
|
</label>
|
|
<select class="form-select" id="interaction_type" name="interaction_type" required>
|
|
<option value="">Select type</option>
|
|
<option value="pharmacokinetic" {% if object and object.interaction_type == 'pharmacokinetic' %}selected{% endif %}>Pharmacokinetic</option>
|
|
<option value="pharmacodynamic" {% if object and object.interaction_type == 'pharmacodynamic' %}selected{% endif %}>Pharmacodynamic</option>
|
|
<option value="additive" {% if object and object.interaction_type == 'additive' %}selected{% endif %}>Additive</option>
|
|
<option value="synergistic" {% if object and object.interaction_type == 'synergistic' %}selected{% endif %}>Synergistic</option>
|
|
<option value="antagonistic" {% if object and object.interaction_type == 'antagonistic' %}selected{% endif %}>Antagonistic</option>
|
|
</select>
|
|
<div class="form-text">
|
|
Type of drug interaction mechanism.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="onset" class="form-label">
|
|
<strong>Onset *</strong>
|
|
</label>
|
|
<select class="form-select" id="onset" name="onset" required>
|
|
<option value="">Select onset</option>
|
|
<option value="rapid" {% if object and object.onset == 'rapid' %}selected{% endif %}>Rapid (within hours)</option>
|
|
<option value="delayed" {% if object and object.onset == 'delayed' %}selected{% endif %}>Delayed (days to weeks)</option>
|
|
<option value="unknown" {% if object and object.onset == 'unknown' %}selected{% endif %}>Unknown</option>
|
|
</select>
|
|
<div class="form-text">
|
|
How quickly the interaction occurs.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">
|
|
<strong>Interaction Description *</strong>
|
|
</label>
|
|
<textarea class="form-control"
|
|
id="description"
|
|
name="description"
|
|
rows="4"
|
|
required
|
|
placeholder="Describe the drug interaction mechanism and effects...">{{ object.description|default:"" }}</textarea>
|
|
<div class="form-text">
|
|
Detailed description of how the drugs interact and what effects may occur.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="clinical_effects" class="form-label">
|
|
<strong>Clinical Effects</strong>
|
|
</label>
|
|
<textarea class="form-control"
|
|
id="clinical_effects"
|
|
name="clinical_effects"
|
|
rows="3"
|
|
placeholder="Describe the clinical effects and symptoms...">{{ object.clinical_effects|default:"" }}</textarea>
|
|
<div class="form-text">
|
|
Observable clinical effects and symptoms that may result from this interaction.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="management" class="form-label">
|
|
<strong>Management Recommendations *</strong>
|
|
</label>
|
|
<textarea class="form-control"
|
|
id="management"
|
|
name="management"
|
|
rows="4"
|
|
required
|
|
placeholder="Provide management recommendations...">{{ object.management|default:"" }}</textarea>
|
|
<div class="form-text">
|
|
Recommendations for managing this drug interaction, including monitoring, dose adjustments, or alternatives.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-cogs me-2"></i>
|
|
Additional Information
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="evidence_level" class="form-label">
|
|
<strong>Evidence Level</strong>
|
|
</label>
|
|
<select class="form-select" id="evidence_level" name="evidence_level">
|
|
<option value="">Select evidence level</option>
|
|
<option value="established" {% if object and object.evidence_level == 'established' %}selected{% endif %}>Established</option>
|
|
<option value="probable" {% if object and object.evidence_level == 'probable' %}selected{% endif %}>Probable</option>
|
|
<option value="suspected" {% if object and object.evidence_level == 'suspected' %}selected{% endif %}>Suspected</option>
|
|
<option value="possible" {% if object and object.evidence_level == 'possible' %}selected{% endif %}>Possible</option>
|
|
<option value="unlikely" {% if object and object.evidence_level == 'unlikely' %}selected{% endif %}>Unlikely</option>
|
|
</select>
|
|
<div class="form-text">
|
|
Level of evidence supporting this interaction.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="frequency" class="form-label">
|
|
<strong>Frequency</strong>
|
|
</label>
|
|
<select class="form-select" id="frequency" name="frequency">
|
|
<option value="">Select frequency</option>
|
|
<option value="very_common" {% if object and object.frequency == 'very_common' %}selected{% endif %}>Very Common (>10%)</option>
|
|
<option value="common" {% if object and object.frequency == 'common' %}selected{% endif %}>Common (1-10%)</option>
|
|
<option value="uncommon" {% if object and object.frequency == 'uncommon' %}selected{% endif %}>Uncommon (0.1-1%)</option>
|
|
<option value="rare" {% if object and object.frequency == 'rare' %}selected{% endif %}>Rare (<0.1%)</option>
|
|
<option value="unknown" {% if object and object.frequency == 'unknown' %}selected{% endif %}>Unknown</option>
|
|
</select>
|
|
<div class="form-text">
|
|
How frequently this interaction occurs.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="references" class="form-label">
|
|
<strong>References</strong>
|
|
</label>
|
|
<textarea class="form-control"
|
|
id="references"
|
|
name="references"
|
|
rows="3"
|
|
placeholder="List relevant references, studies, or sources...">{{ object.references|default:"" }}</textarea>
|
|
<div class="form-text">
|
|
Scientific references, studies, or authoritative sources supporting this interaction.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="requires_monitoring"
|
|
name="requires_monitoring"
|
|
{% if object and object.requires_monitoring %}checked{% endif %}>
|
|
<label class="form-check-label" for="requires_monitoring">
|
|
Requires monitoring when drugs are used together
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="contraindicated"
|
|
name="contraindicated"
|
|
{% if object and object.contraindicated %}checked{% endif %}>
|
|
<label class="form-check-label" for="contraindicated">
|
|
Contraindicated - drugs should not be used together
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="dose_adjustment_required"
|
|
name="dose_adjustment_required"
|
|
{% if object and object.dose_adjustment_required %}checked{% endif %}>
|
|
<label class="form-check-label" for="dose_adjustment_required">
|
|
Dose adjustment may be required
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="is_active"
|
|
name="is_active"
|
|
{% if not object or object.is_active %}checked{% endif %}>
|
|
<label class="form-check-label" for="is_active">
|
|
Active interaction (include in screening)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drug Information Preview -->
|
|
<div class="card mb-4" id="drugPreview" style="display: none;">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-pills me-2"></i>
|
|
Selected Drugs Preview
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div id="drug1Preview">
|
|
<h6>Primary Drug</h6>
|
|
<div class="alert alert-info">
|
|
<div id="drug1Info">Select a primary drug to see details</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div id="drug2Preview">
|
|
<h6>Interacting Drug</h6>
|
|
<div class="alert alert-info">
|
|
<div id="drug2Info">Select an interacting drug to see details</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Severity Guidelines -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Severity Level Guidelines
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="alert alert-success">
|
|
<h6 class="alert-heading">Minor</h6>
|
|
<p class="mb-0">Limited clinical significance. Usually does not require intervention.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="alert alert-warning">
|
|
<h6 class="alert-heading">Moderate</h6>
|
|
<p class="mb-0">May result in exacerbation of condition or require therapy modification.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="alert alert-danger">
|
|
<h6 class="alert-heading">Major</h6>
|
|
<p class="mb-0">May result in serious adverse effects. Requires immediate intervention.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="alert alert-dark">
|
|
<h6 class="alert-heading">Contraindicated</h6>
|
|
<p class="mb-0">Drugs should not be used together under any circumstances.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'pharmacy:drug_interaction_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</a>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-primary me-2" onclick="previewInteraction()">
|
|
<i class="fas fa-eye me-2"></i>Preview
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-2"></i>{% if object %}Update{% else %}Create{% endif %} Interaction
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const drug1Select = document.getElementById('drug1');
|
|
const drug2Select = document.getElementById('drug2');
|
|
const severitySelect = document.getElementById('severity');
|
|
const drugPreview = document.getElementById('drugPreview');
|
|
|
|
// Update drug preview when selections change
|
|
drug1Select.addEventListener('change', updateDrugPreview);
|
|
drug2Select.addEventListener('change', updateDrugPreview);
|
|
|
|
// Prevent selecting the same drug for both fields
|
|
drug1Select.addEventListener('change', function() {
|
|
updateDrugOptions(drug2Select, this.value);
|
|
});
|
|
|
|
drug2Select.addEventListener('change', function() {
|
|
updateDrugOptions(drug1Select, this.value);
|
|
});
|
|
|
|
// Update severity-based styling
|
|
severitySelect.addEventListener('change', function() {
|
|
updateSeverityIndicators(this.value);
|
|
});
|
|
|
|
// Initialize if editing existing interaction
|
|
if (drug1Select.value || drug2Select.value) {
|
|
updateDrugPreview();
|
|
}
|
|
|
|
if (severitySelect.value) {
|
|
updateSeverityIndicators(severitySelect.value);
|
|
}
|
|
});
|
|
|
|
function updateDrugPreview() {
|
|
const drug1Select = document.getElementById('drug1');
|
|
const drug2Select = document.getElementById('drug2');
|
|
const drugPreview = document.getElementById('drugPreview');
|
|
const drug1Info = document.getElementById('drug1Info');
|
|
const drug2Info = document.getElementById('drug2Info');
|
|
|
|
if (drug1Select.value || drug2Select.value) {
|
|
drugPreview.style.display = 'block';
|
|
} else {
|
|
drugPreview.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
// Update drug 1 info
|
|
if (drug1Select.value) {
|
|
const option1 = drug1Select.options[drug1Select.selectedIndex];
|
|
const generic1 = option1.dataset.generic;
|
|
const brand1 = option1.dataset.brand;
|
|
const class1 = option1.dataset.class;
|
|
|
|
drug1Info.innerHTML = `
|
|
<strong>${option1.text}</strong><br>
|
|
<small>Generic: ${generic1}</small><br>
|
|
<small>Brand: ${brand1}</small><br>
|
|
<small>Class: ${class1}</small>
|
|
`;
|
|
} else {
|
|
drug1Info.innerHTML = 'Select a primary drug to see details';
|
|
}
|
|
|
|
// Update drug 2 info
|
|
if (drug2Select.value) {
|
|
const option2 = drug2Select.options[drug2Select.selectedIndex];
|
|
const generic2 = option2.dataset.generic;
|
|
const brand2 = option2.dataset.brand;
|
|
const class2 = option2.dataset.class;
|
|
|
|
drug2Info.innerHTML = `
|
|
<strong>${option2.text}</strong><br>
|
|
<small>Generic: ${generic2}</small><br>
|
|
<small>Brand: ${brand2}</small><br>
|
|
<small>Class: ${class2}</small>
|
|
`;
|
|
} else {
|
|
drug2Info.innerHTML = 'Select an interacting drug to see details';
|
|
}
|
|
}
|
|
|
|
function updateDrugOptions(selectElement, excludeValue) {
|
|
const options = selectElement.options;
|
|
for (let i = 0; i < options.length; i++) {
|
|
if (options[i].value === excludeValue && excludeValue !== '') {
|
|
options[i].disabled = true;
|
|
options[i].style.color = '#ccc';
|
|
} else {
|
|
options[i].disabled = false;
|
|
options[i].style.color = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateSeverityIndicators(severity) {
|
|
const form = document.getElementById('drugInteractionForm');
|
|
|
|
// Remove existing severity classes
|
|
form.classList.remove('severity-minor', 'severity-moderate', 'severity-major', 'severity-contraindicated');
|
|
|
|
// Add new severity class
|
|
if (severity) {
|
|
form.classList.add(`severity-${severity}`);
|
|
}
|
|
}
|
|
|
|
function previewInteraction() {
|
|
const drug1 = document.getElementById('drug1');
|
|
const drug2 = document.getElementById('drug2');
|
|
const severity = document.getElementById('severity');
|
|
const description = document.getElementById('description');
|
|
|
|
if (!drug1.value || !drug2.value) {
|
|
alert('Please select both drugs to preview the interaction.');
|
|
return;
|
|
}
|
|
|
|
const drug1Text = drug1.options[drug1.selectedIndex].text;
|
|
const drug2Text = drug2.options[drug2.selectedIndex].text;
|
|
const severityText = severity.value ? severity.options[severity.selectedIndex].text : 'Not specified';
|
|
|
|
const preview = `
|
|
Drug Interaction Preview:
|
|
|
|
Primary Drug: ${drug1Text}
|
|
Interacting Drug: ${drug2Text}
|
|
Severity: ${severityText}
|
|
|
|
Description: ${description.value || 'Not provided'}
|
|
|
|
This is a preview of how the interaction will appear in the system.
|
|
`;
|
|
|
|
alert(preview);
|
|
}
|
|
|
|
// Form validation
|
|
document.getElementById('drugInteractionForm').addEventListener('submit', function(e) {
|
|
const drug1 = document.getElementById('drug1').value;
|
|
const drug2 = document.getElementById('drug2').value;
|
|
|
|
if (drug1 === drug2 && drug1 !== '') {
|
|
e.preventDefault();
|
|
alert('Primary drug and interacting drug cannot be the same.');
|
|
return false;
|
|
}
|
|
|
|
// Additional validation can be added here
|
|
return true;
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.severity-minor {
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
.severity-moderate {
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
|
|
.severity-major {
|
|
border-left: 4px solid #dc3545;
|
|
}
|
|
|
|
.severity-contraindicated {
|
|
border-left: 4px solid #343a40;
|
|
}
|
|
|
|
.form-select option:disabled {
|
|
color: #ccc !important;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|