114 lines
3.8 KiB
HTML
114 lines
3.8 KiB
HTML
<div class="mb-3">
|
|
<h6>{{ consent_form.template.name }}</h6>
|
|
<div class="border p-3 mb-3" style="max-height: 300px; overflow-y: auto;">
|
|
{{ consent_form.template.content|linebreaks }}
|
|
</div>
|
|
</div>
|
|
|
|
<form hx-post="{% url 'patients:sign_consent_form' consent_form.consent_id %}"
|
|
hx-trigger="submit"
|
|
hx-swap="none">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-3">
|
|
<label for="signature_type" class="form-label">Signature Type</label>
|
|
<select class="form-select" id="signature_type" name="signature_type" required>
|
|
<option value="">Select signature type...</option>
|
|
<option value="patient">Patient Signature</option>
|
|
<option value="guardian">Guardian Signature</option>
|
|
<option value="witness">Witness Signature</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="signature_data" class="form-label">Digital Signature</label>
|
|
<div class="border p-3 text-center" style="min-height: 150px; background: #f8f9fa;">
|
|
<canvas id="signature-pad" width="400" height="120" style="border: 1px dashed #ccc;"></canvas>
|
|
<div class="mt-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearSignature()">
|
|
Clear Signature
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="signature_data" name="signature_data">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="consent_agreement" required>
|
|
<label class="form-check-label" for="consent_agreement">
|
|
I have read and understood the above consent form and agree to its terms.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-signature me-1"></i>Sign Consent
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
// Simple signature pad implementation
|
|
let canvas = document.getElementById('signature-pad');
|
|
let ctx = canvas.getContext('2d');
|
|
let isDrawing = false;
|
|
|
|
canvas.addEventListener('mousedown', startDrawing);
|
|
canvas.addEventListener('mousemove', draw);
|
|
canvas.addEventListener('mouseup', stopDrawing);
|
|
canvas.addEventListener('mouseout', stopDrawing);
|
|
|
|
function startDrawing(e) {
|
|
isDrawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function draw(e) {
|
|
if (!isDrawing) return;
|
|
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000';
|
|
|
|
let rect = canvas.getBoundingClientRect();
|
|
let x = e.clientX - rect.left;
|
|
let y = e.clientY - rect.top;
|
|
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
}
|
|
|
|
function stopDrawing() {
|
|
if (isDrawing) {
|
|
ctx.beginPath();
|
|
isDrawing = false;
|
|
// Save signature data
|
|
document.getElementById('signature_data').value = canvas.toDataURL();
|
|
}
|
|
}
|
|
|
|
function clearSignature() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
document.getElementById('signature_data').value = '';
|
|
}
|
|
|
|
// Handle form submission
|
|
document.body.addEventListener('htmx:afterRequest', function(event) {
|
|
if (event.detail.target.tagName === 'FORM' && event.detail.xhr.status === 200) {
|
|
const response = JSON.parse(event.detail.xhr.responseText);
|
|
if (response.status === 'signed') {
|
|
// Close modal and refresh consent forms list
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('sign-consent-modal'));
|
|
modal.hide();
|
|
htmx.trigger('[hx-get*="consent_forms_list"]', 'refresh');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|