Merge pull request #238 from eReuse/feature/#3262-customize-labels
Feature/#3262 customize labels
This commit is contained in:
GitHub
commit
c176659cbe
|
|
@ -64,10 +64,7 @@ class PrintLabelsForm(FlaskForm):
|
|||
.all()
|
||||
)
|
||||
|
||||
# print only tags that are DHID
|
||||
dhids = [x.devicehub_id for x in self._devices]
|
||||
self._tags = (
|
||||
Tag.query.filter(Tag.owner_id == g.user.id).filter(Tag.id.in_(dhids)).all()
|
||||
)
|
||||
if not self._devices:
|
||||
return False
|
||||
|
||||
return is_valid
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ class PrintLabelsView(View):
|
|||
form = PrintLabelsForm()
|
||||
if form.validate_on_submit():
|
||||
context['form'] = form
|
||||
context['tags'] = form._tags
|
||||
context['devices'] = form._devices
|
||||
return flask.render_template(self.template_name, **context)
|
||||
else:
|
||||
messages.error('Error you need select one or more devices')
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
$(document).ready(function() {
|
||||
STORAGE_KEY = 'tag-spec-key';
|
||||
$("#printerType").on("change", change_size);
|
||||
$(".form-check-input").on("change", change_check);
|
||||
change_size();
|
||||
load_size();
|
||||
load_settings();
|
||||
change_check();
|
||||
})
|
||||
|
||||
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 width = $("#width-tag").val();
|
||||
var sizePreset = $("#printerType").val();
|
||||
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));
|
||||
}
|
||||
|
||||
function load_size() {
|
||||
function load_settings() {
|
||||
var data = JSON.parse(localStorage.getItem(STORAGE_KEY));
|
||||
if (data){
|
||||
$("#height-tag").val(data.height);
|
||||
$("#width-tag").val(data.width);
|
||||
$("#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);
|
||||
$("#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_check();
|
||||
}
|
||||
|
||||
function change_size() {
|
||||
|
|
@ -50,29 +68,101 @@ 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() {
|
||||
var border = 2;
|
||||
var line = 5;
|
||||
var height = parseInt($("#height-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;
|
||||
if (max_tag_side < img_side) {
|
||||
max_tag_side = img_side+ 2*border;
|
||||
max_tag_side = img_side + 2*border;
|
||||
};
|
||||
min_tag_side = (Math.min(height, width)/2) + border;
|
||||
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]);
|
||||
$(".tag").map(function(x, y) {
|
||||
if (x != 0){
|
||||
pdf.addPage();
|
||||
console.log(x)
|
||||
};
|
||||
var space = line + border;
|
||||
if ($("#qrCheck").prop('checked')) {
|
||||
space += img_side;
|
||||
}
|
||||
var tag = $(y).text();
|
||||
last_tag_code = tag;
|
||||
var imgData = $('#'+tag+' img').attr("src");
|
||||
pdf.addImage(imgData, 'PNG', border, border, img_side, img_side);
|
||||
pdf.text(tag, max_tag_side, min_tag_side);
|
||||
if ($("#qrCheck").prop('checked')) {
|
||||
var imgData = $('#'+tag+' img').attr("src");
|
||||
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);
|
||||
} 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');
|
||||
|
|
|
|||
|
|
@ -43,16 +43,49 @@
|
|||
<h5 class="card-title">Print Label</h5>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<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 class="row">
|
||||
<div class="col">
|
||||
<div class="col qr">
|
||||
<div id="{{ tag.id }}"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="padding-top: 55px"><b class="tag">{{ tag.id }}</b></div>
|
||||
<div class="col dhid">
|
||||
<div style="padding-top: 55px">
|
||||
{% if tag.device %}
|
||||
<b class="tag" data-serial-number="{{ tag.device.serial_number or '' }}"
|
||||
data-manufacturer="{{ tag.device.manufacturer or '' }}"
|
||||
data-model="{{ tag.device.model or '' }}">{{ tag.id }}</b>
|
||||
{% else %}
|
||||
<b class="tag" data-serial-number=""
|
||||
data-manufacturer=""
|
||||
data-model="">{{ tag.id }}</b>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if tag.device %}
|
||||
<div class="row serial_number" style="display: none">
|
||||
<div class="col">
|
||||
<div>
|
||||
<b>{{ tag.device.serial_number or '' }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row manufacturer" style="display: none">
|
||||
<div class="col">
|
||||
<div>
|
||||
<b>{{ tag.device.manufacturer or '' }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row model" style="display: none">
|
||||
<div class="col">
|
||||
<div>
|
||||
<span style="font-size: 12px;">{{ tag.device.model or '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,20 +117,43 @@
|
|||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if tag.device %}
|
||||
<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">Unique Identifier</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>
|
||||
{% endif %}
|
||||
<div class="row mt-5">
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:printpdf()" class="btn btn-success">Print labels</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:save_settings()" class="btn btn-primary">Save settings</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:reset_settings()" class="btn btn-danger">Reset settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:printpdf()" class="btn btn-success">Print</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:save_size()" class="btn btn-primary">Save</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:reset_size()" class="btn btn-danger">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,16 +24,39 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4">
|
||||
{% for tag in tags %}
|
||||
<div style="width:256px; height:148px; border: solid 1px; padding: 10px;">
|
||||
<div id="print">
|
||||
{% for dev in devices %}
|
||||
<div style="width:256px; min-height:148px; border: solid 1px; padding: 10px;">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="{{ tag.id }}"></div>
|
||||
<div class="col qr">
|
||||
<div id="{{ dev.devicehub_id }}"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col dhid">
|
||||
<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>
|
||||
|
|
@ -71,20 +94,41 @@
|
|||
<span class="input-group-text">mm</span>
|
||||
</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 class="row mt-5">
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:printpdf()" class="btn btn-success">Print labels</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:save_settings()" class="btn btn-primary">Save settings</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:reset_settings()" class="btn btn-danger">Reset settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:printpdf()" class="btn btn-success">Print</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:save_size()" class="btn btn-primary">Save</a>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<a href="javascript:reset_size()" class="btn btn-danger">Reset</a>
|
||||
</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/print.pdf.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
{% for tag in tags %}
|
||||
qr_draw("{{ url_for('inventory.device_details', id=tag.device.devicehub_id, _external=True) }}", "#{{ tag.id }}")
|
||||
{% for dev in devices %}
|
||||
qr_draw("{{ url_for('inventory.device_details', id=dev.devicehub_id, _external=True) }}", "#{{ dev.devicehub_id }}")
|
||||
{% endfor %}
|
||||
</script>
|
||||
{% endblock main %}
|
||||
|
|
|
|||
Reference in New Issue