119 lines
4.3 KiB
Twig
119 lines
4.3 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container">
|
|
<h1>Sign Member Document</h1>
|
|
<h3>{{ doc.document.title }}</h3>
|
|
<p>{{ doc.document.updated|date('M j, Y h:i:s a', company_timezone) }}</p>
|
|
|
|
<form action="" method="post" enctype="multipart/form-data">
|
|
<div class='row'>
|
|
{{ doc.document.renderHtml()|
|
|
replace({'{{ doc.client.email }}': doc.client.email})|
|
|
replace({'{{ doc.client.phone }}': doc.client.phone})|
|
|
raw
|
|
}}
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col'>
|
|
<div class='input-group input-group-outline mb-3'>
|
|
{% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').CLIENT_NAME) %}
|
|
<input type='text' name='clientName' id='clientName' value='{{ doc.client.name }}'/>
|
|
{% endif %}
|
|
|
|
{% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').CLIENT_SIGNATURE) %}
|
|
<button id='clearClientSignature'>Clear Signature</button><br />
|
|
<canvas id='clientSignatureCanvas'></canvas>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').PROVIDER_SIGNATURE) %}
|
|
<div class='row'>
|
|
<div class='col'>
|
|
<div class='input-group input-group-outline mb-3'>
|
|
{% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').PROVIDER_NAME) %}
|
|
<input type='text' name='providerName' id='providerName' value='{{ doc.caseWorker.name }}'/>
|
|
{% endif %}
|
|
|
|
<button id='clearProviderSignature'>Clear Signature</button><br/>
|
|
<canvas id='providerSignatureCanvas'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<button type="submit" class="btn btn-primary">Complete</button>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block page_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.4/dist/signature_pad.umd.min.js"></script>
|
|
<script type='text/javascript'>
|
|
window.onload = initializeSignatureBlocks;
|
|
var clientCanvas = document.getElementById('clientSignatureCanvas');
|
|
var providerCanvas = document.getElementById('providerSignatureCanvas');
|
|
var providerSaveSignature = JSON.parse('{{ caseWorkerSignature|raw }}');
|
|
var clientPad = null;
|
|
var providerPad = null
|
|
function initializeSignatureBlocks() {
|
|
if (providerCanvas) {
|
|
createProviderSignatureBlock();
|
|
}
|
|
if (clientCanvas) {
|
|
createClientSignatureBlock();
|
|
}
|
|
}
|
|
function createProviderSignatureBlock() {
|
|
providerPad = new SignaturePad(providerCanvas);
|
|
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
providerCanvas.width = providerCanvas.offsetWidth * ratio;
|
|
providerCanvas.height = providerCanvas.offsetHeight * ratio;
|
|
providerCanvas.getContext("2d").scale(ratio, ratio);
|
|
if (providerSaveSignature) {providerPad.fromData(providerSaveSignature);}
|
|
|
|
document.getElementById('clearProviderSignature').addEventListener('click', clearProviderSignature);
|
|
}
|
|
function createClientSignatureBlock() {
|
|
clientPad = new SignaturePad(clientCanvas);
|
|
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
clientCanvas.width = clientCanvas.offsetWidth * ratio;
|
|
clientCanvas.height = clientCanvas.offsetHeight * ratio;
|
|
clientCanvas.getContext("2d").scale(ratio, ratio);
|
|
|
|
document.getElementById('clearClientSignature').addEventListener('click', clearClientSignature);
|
|
}
|
|
|
|
function clearClientSignature(e) {
|
|
e.preventDefault();
|
|
clientPad.clear();
|
|
}
|
|
|
|
function clearProviderSignature(e) {
|
|
e.preventDefault();
|
|
providerPad.clear();
|
|
}
|
|
|
|
function saveSignatureBlock() {
|
|
document.getElementById('signature').value = JSON.stringify(pad.toData());
|
|
|
|
return true;
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block page_css %}
|
|
<style rel='stylesheet'>
|
|
#clientSignatureCanvas, #providerSignatureCanvas {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-color: white;
|
|
border: solid 1px black;
|
|
}
|
|
</style>
|
|
{% endblock %} |