129 lines
3.8 KiB
HTML
129 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
|
|
<!-- signature stuff -->
|
|
<link href="css/jquery.signaturepad.css" rel="stylesheet">
|
|
<script src="js/numeric-1.2.6.min.js"></script>
|
|
<script src="js/bezier.js"></script>
|
|
<script src="js/jquery.signaturepad.js"></script>
|
|
<script type='text/javascript' src="js/html2canvas.js"></script>
|
|
<script src="js/json2.min.js"></script>
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<div style="float: left;">
|
|
<div id="signArea" style="height:auto;width:304px;margin-left: 0px;margin-top: 10px;max-width: 90%">
|
|
<h2 class="tag-ingo" style="font-size: 15px;text-align: left;font-style: oblique;">Enter your signature below: <span class="sign-pad-clear" style="font-size: 10px;color: black;cursor: pointer;">(<u>clear signature</u>)</span></h2>
|
|
<div class="sig sigWrapper" style="height:auto;max-width: 90%">
|
|
<div class="typed"></div>
|
|
<canvas class="sign-pad" id="sign-pad" name="sign-pad" style="width: 300px;height: auto;max-width: 100%"></canvas>
|
|
</div>
|
|
</div>
|
|
<button id="btnSaveSign" class="btn btn-primary" style="margin-left: 0px;margin-top: 10px;"" onclick="saveSig()">Save Signature</button>
|
|
</div>
|
|
|
|
|
|
<div style="float: left;margin-left: 0px;margin-top: 10px;max-width: 90%">
|
|
<h2 class="tag-ingo" style="font-size: 15px;text-align: left;font-style: oblique;">Currently saved signature:</h2>
|
|
<img src="" id="current_sig" style="margin-bottom: 5px;width: 300px;height: auto;max-width: 90%;">
|
|
</div>
|
|
|
|
|
|
<div style="clear: both;"></div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
$("#signArea").signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:100,clear:".sign-pad-clear"});
|
|
|
|
|
|
|
|
|
|
function loadSig(){
|
|
var http = new XMLHttpRequest();
|
|
var url = hostUrl+"get_sign.php";
|
|
var params = "apiKey="+window.localStorage.getItem("api_key")+"&service_id="+service_id;
|
|
http.open("POST", url, true);
|
|
|
|
//Send the proper header information along with the request
|
|
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
|
|
http.onreadystatechange = function() {//Call a function when the state changes.
|
|
|
|
if(http.readyState == 4 && http.status == 200) {
|
|
var obj = null;
|
|
try {
|
|
obj = JSON.parse(http.responseText);
|
|
}catch (e) {
|
|
vex.dialog.alert("Communication Error. Please try again later.");
|
|
}
|
|
if(obj!=null){
|
|
if(obj.message!=""){
|
|
if(obj.message=="Incorrect API credentials"){
|
|
performTheLogOut();
|
|
}else{
|
|
vex.dialog.alert(obj.message);
|
|
}
|
|
}else{
|
|
document.getElementById("current_sig").src = obj.data.img;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
http.send(encodeURI(params));
|
|
}
|
|
|
|
function saveSig(){
|
|
vex.dialog.confirm({
|
|
message: 'By saving this signature you are confirming that the information contained in the work order is accurate to the best of your knowledge. Do you wish to proceed?',
|
|
callback: function (value) {
|
|
if (value) {
|
|
html2canvas([document.getElementById('sign-pad')], {
|
|
onrendered: function (canvas) {
|
|
var canvas_img_data = canvas.toDataURL('image/png');
|
|
var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
|
|
//ajax call to save image inside folder
|
|
$.ajax({
|
|
url: hostUrl+'save_sign.php',
|
|
data: { img_data:img_data, service_id:service_id, apiKey: window.localStorage.getItem("api_key") },
|
|
type: 'post',
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
if(response!=null){
|
|
if(response.message!=""){
|
|
console.log("Error: "+response.message);
|
|
}else{
|
|
$(".sign-pad-clear").trigger("click");
|
|
loadSig();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
} |