add customize options in print html and pdf

This commit is contained in:
Cayo Puigdefabregas 2022-04-27 18:56:15 +02:00
parent bf42a79ef7
commit e378fef1a6
2 changed files with 165 additions and 31 deletions

View File

@ -1,8 +1,10 @@
$(document).ready(function() { $(document).ready(function() {
STORAGE_KEY = 'tag-spec-key'; STORAGE_KEY = 'tag-spec-key';
$("#printerType").on("change", change_size); $("#printerType").on("change", change_size);
$(".form-check-input").on("change", change_check);
change_size(); change_size();
load_size(); load_settings();
change_check();
}) })
function qr_draw(url, id) { function qr_draw(url, id) {
@ -16,27 +18,43 @@ function qr_draw(url, id) {
}); });
} }
function save_size() { function save_settings() {
var height = $("#height-tag").val(); var height = $("#height-tag").val();
var width = $("#width-tag").val(); var width = $("#width-tag").val();
var sizePreset = $("#printerType").val(); var sizePreset = $("#printerType").val();
var data = {"height": height, "width": width, "sizePreset": sizePreset}; var data = {"height": height, "width": width, "sizePreset": sizePreset};
data['dhid'] = $("#dhidCheck").prop('checked');
data['qr'] = $("#qrCheck").prop('checked');
data['serial_number'] = $("#serialNumberCheck").prop('checked');
data['manufacturer'] = $("#manufacturerCheck").prop('checked');
data['model'] = $("#modelCheck").prop('checked');
localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
} }
function load_size() { function load_settings() {
var data = JSON.parse(localStorage.getItem(STORAGE_KEY)); var data = JSON.parse(localStorage.getItem(STORAGE_KEY));
if (data){ if (data){
$("#height-tag").val(data.height); $("#height-tag").val(data.height);
$("#width-tag").val(data.width); $("#width-tag").val(data.width);
$("#printerType").val(data.sizePreset); $("#printerType").val(data.sizePreset);
$("#qrCheck").prop('checked', data.qr);
$("#dhidCheck").prop('checked', data.dhid);
$("#serialNumberCheck").prop('checked', data.serial_number);
$("#manufacturerCheck").prop('checked', data.manufacturer);
$("#modelCheck").prop('checked', data.model);
}; };
} }
function reset_size() { function reset_settings() {
localStorage.removeItem(STORAGE_KEY); localStorage.removeItem(STORAGE_KEY);
$("#printerType").val('brotherSmall'); $("#printerType").val('brotherSmall');
$("#qrCheck").prop('checked', true);
$("#dhidCheck").prop('checked', true);
$("#serialNumberCheck").prop('checked', false);
$("#manufacturerCheck").prop('checked', false);
$("#modelCheck").prop('checked', false);
change_size(); change_size();
change_check();
} }
function change_size() { function change_size() {
@ -50,11 +68,40 @@ function change_size() {
} }
} }
function change_check() {
if ($("#dhidCheck").prop('checked')) {
$(".dhid").show();
} else {
$(".dhid").hide();
}
if ($("#serialNumberCheck").prop('checked')) {
$(".serial_number").show();
} else {
$(".serial_number").hide();
}
if ($("#manufacturerCheck").prop('checked')) {
$(".manufacturer").show();
} else {
$(".manufacturer").hide();
}
if ($("#modelCheck").prop('checked')) {
$(".model").show();
} else {
$(".model").hide();
}
if ($("#qrCheck").prop('checked')) {
$(".qr").show();
} else {
$(".qr").hide();
}
}
function printpdf() { function printpdf() {
var border = 2; var border = 2;
var line = 5;
var height = parseInt($("#height-tag").val()); var height = parseInt($("#height-tag").val());
var width = parseInt($("#width-tag").val()); var width = parseInt($("#width-tag").val());
img_side = Math.min(height, width) - 2*border; var img_side = Math.min(height, width) - 2*border;
max_tag_side = (Math.max(height, width)/2) + border; max_tag_side = (Math.max(height, width)/2) + border;
if (max_tag_side < img_side) { if (max_tag_side < img_side) {
max_tag_side = img_side + 2*border; max_tag_side = img_side + 2*border;
@ -62,17 +109,60 @@ function printpdf() {
min_tag_side = (Math.min(height, width)/2) + border; min_tag_side = (Math.min(height, width)/2) + border;
var last_tag_code = ''; var last_tag_code = '';
if ($("#serialNumberCheck").prop('checked')) {
height += line;
};
if ($("#manufacturerCheck").prop('checked')) {
height += line;
};
if ($("#modelCheck").prop('checked')) {
height += line;
};
var pdf = new jsPDF('l', 'mm', [width, height]); var pdf = new jsPDF('l', 'mm', [width, height]);
$(".tag").map(function(x, y) { $(".tag").map(function(x, y) {
if (x != 0){ if (x != 0){
pdf.addPage(); pdf.addPage();
console.log(x)
}; };
var space = line + border;
if ($("#qrCheck").prop('checked')) {
space += img_side;
}
var tag = $(y).text(); var tag = $(y).text();
last_tag_code = tag; last_tag_code = tag;
if ($("#qrCheck").prop('checked')) {
var imgData = $('#'+tag+' img').attr("src"); var imgData = $('#'+tag+' img').attr("src");
pdf.addImage(imgData, 'PNG', border, border, img_side, img_side); pdf.addImage(imgData, 'PNG', border, border, img_side, img_side);
};
if ($("#dhidCheck").prop('checked')) {
if ($("#qrCheck").prop('checked')) {
pdf.setFontSize(15);
pdf.text(tag, max_tag_side, min_tag_side); pdf.text(tag, max_tag_side, min_tag_side);
} else {
pdf.setFontSize(15);
pdf.text(tag, border, space);
space += line;
}
};
if ($("#serialNumberCheck").prop('checked')) {
var sn = $(y).data('serial-number');
pdf.setFontSize(12);
pdf.text(sn, border, space);
space += line;
};
if ($("#manufacturerCheck").prop('checked')) {
var sn = $(y).data('manufacturer');
pdf.setFontSize(12);
pdf.text(sn, border, space);
space += line;
};
if ($("#modelCheck").prop('checked')) {
var sn = $(y).data('model');
pdf.setFontSize(8);
pdf.text(sn, border, space);
space += line;
};
}); });
pdf.save('Tag_'+last_tag_code+'.pdf'); pdf.save('Tag_'+last_tag_code+'.pdf');

View File

@ -24,16 +24,39 @@
<div class="row"> <div class="row">
<div class="col-lg-3 col-md-4"> <div class="col-lg-3 col-md-4">
{% for tag in tags %} {% for dev in devices %}
<div style="width:256px; height:148px; border: solid 1px; padding: 10px;"> <div style="width:256px; min-height:148px; border: solid 1px; padding: 10px;">
<div id="print"> <div>
<div class="row"> <div class="row">
<div class="col"> <div class="col qr">
<div id="{{ tag.id }}"></div> <div id="{{ dev.devicehub_id }}"></div>
</div> </div>
<div class="col"> <div class="col dhid">
<div style="padding-top: 55px"> <div style="padding-top: 55px">
<b class="tag">{{ tag.id }}</b> <b class="tag" data-serial-number="{{ dev.serial_number or '' }}"
data-manufacturer="{{ dev.manufacturer or '' }}"
data-model="{{ dev.model or '' }}">{{ dev.devicehub_id }}</b>
</div>
</div>
</div>
<div class="row serial_number" style="display: none">
<div class="col">
<div>
<b>{{ dev.serial_number or '' }}</b>
</div>
</div>
</div>
<div class="row manufacturer" style="display: none">
<div class="col">
<div>
<b>{{ dev.manufacturer or '' }}</b>
</div>
</div>
</div>
<div class="row model" style="display: none">
<div class="col">
<div>
<span style="font-size: 12px;">{{ dev.model or '' }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -71,20 +94,41 @@
<span class="input-group-text">mm</span> <span class="input-group-text">mm</span>
</div> </div>
</div> </div>
<div class="col-sm-10">
<div class="form-switch">
<input class="form-check-input" name="qr" type="checkbox" id="qrCheck" checked="">
<label class="form-check-label" for="qrCheck">QR</label>
</div>
<div class="form-switch">
<input class="form-check-input" name="dhid" type="checkbox" id="dhidCheck" checked="">
<label class="form-check-label" for="dhidCheck">Dhid</label>
</div>
<div class="form-switch">
<input class="form-check-input" name="serial_number" type="checkbox" id="serialNumberCheck">
<label class="form-check-label" for="serialNumberCheck">Serial number</label>
</div>
<div class="form-switch">
<input class="form-check-input" name="manufacturer" type="checkbox" id="manufacturerCheck">
<label class="form-check-label" for="manufacturerCheck">Manufacturer</label>
</div>
<div class="form-switch">
<input class="form-check-input" name="model" type="checkbox" id="modelCheck">
<label class="form-check-label" for="modelCheck">Model</label>
</div> </div>
</div> </div>
<div class="row mt-5"> <div class="row mt-5">
<div class="col-lg-3 col-md-4"> <div class="col-lg-3 col-md-4">
<a href="javascript:printpdf()" class="btn btn-success">Print</a> <a href="javascript:printpdf()" class="btn btn-success">Print labels</a>
</div> </div>
<div class="col-lg-3 col-md-4"> <div class="col-lg-3 col-md-4">
<a href="javascript:save_size()" class="btn btn-primary">Save</a> <a href="javascript:save_settings()" class="btn btn-primary">Save settings</a>
</div> </div>
<div class="col-lg-3 col-md-4"> <div class="col-lg-3 col-md-4">
<a href="javascript:reset_size()" class="btn btn-danger">Reset</a> <a href="javascript:reset_settings()" class="btn btn-danger">Reset settings</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -96,8 +140,8 @@
<script src="{{ url_for('static', filename='js/jspdf.min.js') }}"></script> <script src="{{ url_for('static', filename='js/jspdf.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/print.pdf.js') }}"></script> <script src="{{ url_for('static', filename='js/print.pdf.js') }}"></script>
<script type="text/javascript"> <script type="text/javascript">
{% for tag in tags %} {% for dev in devices %}
qr_draw("{{ url_for('inventory.device_details', id=tag.device.devicehub_id, _external=True) }}", "#{{ tag.id }}") qr_draw("{{ url_for('inventory.device_details', id=dev.devicehub_id, _external=True) }}", "#{{ dev.devicehub_id }}")
{% endfor %} {% endfor %}
</script> </script>
{% endblock main %} {% endblock main %}