managment save and load logo in template
This commit is contained in:
parent
c3fbc8a0c0
commit
3431bed49e
|
@ -5,6 +5,9 @@ $(document).ready(function() {
|
||||||
change_size();
|
change_size();
|
||||||
load_settings();
|
load_settings();
|
||||||
change_check();
|
change_check();
|
||||||
|
$("#imgInp").change(function(){
|
||||||
|
readURL(this);
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
function qr_draw(url, id) {
|
function qr_draw(url, id) {
|
||||||
|
@ -18,11 +21,36 @@ function qr_draw(url, id) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function previewLogo(logo) {
|
||||||
|
const img = "<img style='max-width: 150px' src='"+logo+"' />";
|
||||||
|
$("#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() {
|
function save_settings() {
|
||||||
|
var logo = $('#logo-preview img').attr('src');
|
||||||
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, 'logoImg': ''};
|
||||||
|
if (logo) {
|
||||||
|
data['logoImg'] = logo;
|
||||||
|
};
|
||||||
|
data['logo'] = $("#logoCheck").prop('checked');
|
||||||
data['dhid'] = $("#dhidCheck").prop('checked');
|
data['dhid'] = $("#dhidCheck").prop('checked');
|
||||||
data['sid'] = $("#sidCheck").prop('checked');
|
data['sid'] = $("#sidCheck").prop('checked');
|
||||||
data['qr'] = $("#qrCheck").prop('checked');
|
data['qr'] = $("#qrCheck").prop('checked');
|
||||||
|
@ -44,6 +72,13 @@ function load_settings() {
|
||||||
$("#serialNumberCheck").prop('checked', data.serial_number);
|
$("#serialNumberCheck").prop('checked', data.serial_number);
|
||||||
$("#manufacturerCheck").prop('checked', data.manufacturer);
|
$("#manufacturerCheck").prop('checked', data.manufacturer);
|
||||||
$("#modelCheck").prop('checked', data.model);
|
$("#modelCheck").prop('checked', data.model);
|
||||||
|
if (data.logo) {
|
||||||
|
$("#logoCheck").prop('checked', data.sid);
|
||||||
|
previewLogo(data.logoImg);
|
||||||
|
} else {
|
||||||
|
$("#logoCheck").prop('checked', false);
|
||||||
|
$("#logoCheck").prop('disabled', 'disabled');
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,8 +89,10 @@ function reset_settings() {
|
||||||
$("#dhidCheck").prop('checked', true);
|
$("#dhidCheck").prop('checked', true);
|
||||||
$("#sidCheck").prop('checked', true);
|
$("#sidCheck").prop('checked', true);
|
||||||
$("#serialNumberCheck").prop('checked', false);
|
$("#serialNumberCheck").prop('checked', false);
|
||||||
|
$("#logoCheck").prop('checked', false);
|
||||||
$("#manufacturerCheck").prop('checked', false);
|
$("#manufacturerCheck").prop('checked', false);
|
||||||
$("#modelCheck").prop('checked', false);
|
$("#modelCheck").prop('checked', false);
|
||||||
|
$('#logo-preview').html('');
|
||||||
change_size();
|
change_size();
|
||||||
change_check();
|
change_check();
|
||||||
}
|
}
|
||||||
|
@ -72,36 +109,54 @@ function change_size() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function change_check() {
|
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')) {
|
if ($("#dhidCheck").prop('checked')) {
|
||||||
$(".dhid").show();
|
$(".dhid").show();
|
||||||
} else {
|
} else {
|
||||||
$(".dhid").hide();
|
$(".dhid").hide();
|
||||||
}
|
};
|
||||||
|
|
||||||
if ($("#sidCheck").prop('checked')) {
|
if ($("#sidCheck").prop('checked')) {
|
||||||
$(".sid").show();
|
$(".sid").show();
|
||||||
} else {
|
} else {
|
||||||
$(".sid").hide();
|
$(".sid").hide();
|
||||||
}
|
};
|
||||||
|
|
||||||
if ($("#serialNumberCheck").prop('checked')) {
|
if ($("#serialNumberCheck").prop('checked')) {
|
||||||
$(".serial_number").show();
|
$(".serial_number").show();
|
||||||
} else {
|
} else {
|
||||||
$(".serial_number").hide();
|
$(".serial_number").hide();
|
||||||
}
|
};
|
||||||
|
|
||||||
if ($("#manufacturerCheck").prop('checked')) {
|
if ($("#manufacturerCheck").prop('checked')) {
|
||||||
$(".manufacturer").show();
|
$(".manufacturer").show();
|
||||||
} else {
|
} else {
|
||||||
$(".manufacturer").hide();
|
$(".manufacturer").hide();
|
||||||
}
|
};
|
||||||
|
|
||||||
if ($("#modelCheck").prop('checked')) {
|
if ($("#modelCheck").prop('checked')) {
|
||||||
$(".model").show();
|
$(".model").show();
|
||||||
} else {
|
} else {
|
||||||
$(".model").hide();
|
$(".model").hide();
|
||||||
}
|
};
|
||||||
|
|
||||||
if ($("#qrCheck").prop('checked')) {
|
if ($("#qrCheck").prop('checked')) {
|
||||||
$(".qr").show();
|
$(".qr").show();
|
||||||
} else {
|
} else {
|
||||||
$(".qr").hide();
|
$(".qr").hide();
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function printpdf() {
|
function printpdf() {
|
||||||
|
|
|
@ -27,6 +27,9 @@
|
||||||
{% for dev in devices %}
|
{% for dev in devices %}
|
||||||
<div style="width:256px; min-height:148px; border: solid 1px; padding: 10px;">
|
<div style="width:256px; min-height:148px; border: solid 1px; padding: 10px;">
|
||||||
<div>
|
<div>
|
||||||
|
<div class="row label-logo" style="display: none">
|
||||||
|
<div class="col label-logo-dev"></div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col qr">
|
<div class="col qr">
|
||||||
<div id="{{ dev.devicehub_id }}"></div>
|
<div id="{{ dev.devicehub_id }}"></div>
|
||||||
|
@ -74,9 +77,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col label">
|
<div class="col label">
|
||||||
<label class="col-form-label col-sm-2">Logo</label>
|
<label class="col-form-label col-sm-2">Logo</label>
|
||||||
|
|
||||||
<div class="col-sm-10">
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group mb-3" id="logo-preview">
|
||||||
|
</div>
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
<input class="form-control" id="width-tag" name='width-tag' type="file" value="62" min="52" max="300" />
|
<input class="form-control" type='file' id="imgInp" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<label class="col-form-label col-sm-2">Size</label>
|
<label class="col-form-label col-sm-2">Size</label>
|
||||||
|
@ -107,6 +113,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-10">
|
<div class="col-sm-10">
|
||||||
|
<div class="form-switch">
|
||||||
|
<input class="form-check-input" name="logoCheck" type="checkbox" id="logoCheck">
|
||||||
|
<label class="form-check-label" for="logoCheck">Logo</label>
|
||||||
|
</div>
|
||||||
<div class="form-switch">
|
<div class="form-switch">
|
||||||
<input class="form-check-input" name="qr" type="checkbox" id="qrCheck" checked="">
|
<input class="form-check-input" name="qr" type="checkbox" id="qrCheck" checked="">
|
||||||
<label class="form-check-label" for="qrCheck">QR</label>
|
<label class="form-check-label" for="qrCheck">QR</label>
|
||||||
|
|
Reference in New Issue