diff --git a/ereuse_devicehub/static/js/print.pdf.js b/ereuse_devicehub/static/js/print.pdf.js index 019b6510..b17f70ee 100644 --- a/ereuse_devicehub/static/js/print.pdf.js +++ b/ereuse_devicehub/static/js/print.pdf.js @@ -5,6 +5,9 @@ $(document).ready(function() { change_size(); load_settings(); change_check(); + $("#imgInp").change(function(){ + readURL(this); + }); }) function qr_draw(url, id) { @@ -18,11 +21,36 @@ function qr_draw(url, id) { }); } +function previewLogo(logo) { + const img = ""; + $("#logo-preview").html(img); + $(".label-logo-dev").html(img); +} + +function readURL(input) { + if (input.files && input.files[0]) { + var reader = new FileReader(); + + reader.onload = function (e) { + previewLogo(e.target.result); + $("#logoCheck").prop('disabled', ''); + } + + reader.readAsDataURL(input.files[0]); + } +} + + function save_settings() { + var logo = $('#logo-preview img').attr('src'); var height = $("#height-tag").val(); var width = $("#width-tag").val(); var sizePreset = $("#printerType").val(); - var data = {"height": height, "width": width, "sizePreset": sizePreset}; + var data = {"height": height, "width": width, "sizePreset": sizePreset, 'logoImg': ''}; + if (logo) { + data['logoImg'] = logo; + }; + data['logo'] = $("#logoCheck").prop('checked'); data['dhid'] = $("#dhidCheck").prop('checked'); data['sid'] = $("#sidCheck").prop('checked'); data['qr'] = $("#qrCheck").prop('checked'); @@ -44,6 +72,14 @@ function load_settings() { $("#serialNumberCheck").prop('checked', data.serial_number); $("#manufacturerCheck").prop('checked', data.manufacturer); $("#modelCheck").prop('checked', data.model); + if (data.logo) { + $("#logoCheck").prop('checked', data.sid); + previewLogo(data.logoImg); + $("#logoCheck").prop('checked', data.logo); + } else { + $("#logoCheck").prop('checked', false); + $("#logoCheck").prop('disabled', 'disabled'); + } }; } @@ -54,8 +90,10 @@ function reset_settings() { $("#dhidCheck").prop('checked', true); $("#sidCheck").prop('checked', true); $("#serialNumberCheck").prop('checked', false); + $("#logoCheck").prop('checked', false); $("#manufacturerCheck").prop('checked', false); $("#modelCheck").prop('checked', false); + $('#logo-preview').html(''); change_size(); change_check(); } @@ -72,36 +110,54 @@ function change_size() { } function change_check() { + if ($('#logo-preview img').attr('src')) { + $("#logoCheck").prop('disabled', ''); + } else { + $("#logoCheck").prop('checked', false); + $("#logoCheck").prop('disabled', 'disabled'); + }; + + if ($("#logoCheck").prop('checked') && $('#logo-preview img').attr('src')) { + $(".label-logo").show(); + } else { + $(".label-logo").hide(); + }; + if ($("#dhidCheck").prop('checked')) { $(".dhid").show(); } else { $(".dhid").hide(); - } + }; + if ($("#sidCheck").prop('checked')) { $(".sid").show(); } else { $(".sid").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() { @@ -109,76 +165,106 @@ function printpdf() { var line = 5; var height = parseInt($("#height-tag").val()); var width = parseInt($("#width-tag").val()); - var img_side = Math.min(height, width) - 2*border; - max_tag_side = (Math.max(height, width)/2) + border; - if (max_tag_side < img_side) { - max_tag_side = img_side + 2*border; - }; - min_tag_side = (Math.min(height, width)/2) + border; + var logo = ''; + var _rel = 1; + if ($('#logoCheck').prop('checked')) { + logo = $("#logo-preview img").attr("src"); + if (logo) { + var _img = new Image(); + _img.src = logo; + _rel = parseInt(_img.height)/parseInt(_img.width); + } + } + var img_side = (width/2) - 2*border; var last_tag_code = ''; + var height_need = border*2; + if (logo) { + height_need += width*_rel + border; + }; + if ($("#qrCheck").prop('checked')) { + height_need += img_side; + } else if ($("#dhidCheck").prop('checked')) { + height_need += line; + }; if ($("#sidCheck").prop('checked')) { - height += line; + height_need += line; }; if ($("#serialNumberCheck").prop('checked')) { - height += line; + height_need += line; }; if ($("#manufacturerCheck").prop('checked')) { - height += line; + height_need += line; }; if ($("#modelCheck").prop('checked')) { - height += line; + height_need += line; + }; + height = Math.max(height, height_need); + + if (width > height) { + var pdf = new jsPDF('l', 'mm', [width, height]); + } else { + var pdf = new jsPDF('p', 'mm', [height, width]); }; - var pdf = new jsPDF('l', 'mm', [width, height]); + var hlogo = 0; $(".tag").map(function(x, y) { if (x != 0){ pdf.addPage(); }; - var space = line + border; - if ($("#qrCheck").prop('checked')) { - space += img_side; - } + var hspace = border; var tag = $(y).text(); last_tag_code = tag; + if (logo) { + var wlogo = (width - border*2); + hlogo = wlogo*_rel; + pdf.addImage(logo, 'PNG', border, hspace, wlogo, hlogo); + hspace += hlogo + border; + }; if ($("#qrCheck").prop('checked')) { var imgData = $('#'+tag+' img').attr("src"); - pdf.addImage(imgData, 'PNG', border, border, img_side, img_side); + pdf.addImage(imgData, 'PNG', border, hspace, img_side, img_side); + hspace += img_side; + } else { + hspace += line; }; if ($("#dhidCheck").prop('checked')) { - if ($("#qrCheck").prop('checked')) { - pdf.setFontSize(15); - pdf.text(tag, max_tag_side, min_tag_side); - } else { - pdf.setFontSize(15); - pdf.text(tag, border, space); - space += line; - } + pdf.setFontSize(15); + if ($("#qrCheck").prop('checked')) { + var h = hspace + border - img_side/2; + var w = border*2 + img_side; + pdf.text(tag, w, h); + } else { + pdf.text(tag, border, hspace); + } + hspace += line; }; if ($("#sidCheck").prop('checked')) { var sn = $(y).data('sid'); - pdf.setFontSize(15); - pdf.text(sn, border, space); - space += line; + pdf.setFontSize(12); + if (sn) { + pdf.text(sn, border, hspace); + hspace += line; + } }; if ($("#serialNumberCheck").prop('checked')) { var sn = $(y).data('serial-number'); pdf.setFontSize(12); - pdf.text(sn, border, space); - space += line; + pdf.text(sn, border, hspace); + hspace += line; }; if ($("#manufacturerCheck").prop('checked')) { var sn = $(y).data('manufacturer'); pdf.setFontSize(12); - pdf.text(sn, border, space); - space += line; + pdf.text(sn, border, hspace); + hspace += line; }; if ($("#modelCheck").prop('checked')) { var sn = $(y).data('model'); pdf.setFontSize(8); - pdf.text(sn, border, space); - space += line; + pdf.text(sn, border, hspace); + hspace += line; }; }); diff --git a/ereuse_devicehub/templates/labels/print_labels.html b/ereuse_devicehub/templates/labels/print_labels.html index e0693c98..252ef18d 100644 --- a/ereuse_devicehub/templates/labels/print_labels.html +++ b/ereuse_devicehub/templates/labels/print_labels.html @@ -27,6 +27,9 @@ {% for dev in devices %}
+
@@ -73,6 +76,15 @@
+ + +
+
+
+
+ +
+
@@ -101,6 +113,10 @@
+
+ + +