mirror of
https://github.com/pklaus/brother_ql_web.git
synced 2024-05-25 11:56:53 +03:00
93 lines
2.9 KiB
Django/Jinja
93 lines
2.9 KiB
Django/Jinja
{% extends "base.jinja2" %}
|
|
|
|
{% block page_title %}{{ title }}{% endblock %}
|
|
|
|
{% block jumbotron %}
|
|
<h1>{{page_headline}}</h1>
|
|
<p>Design your label and print it...</p>
|
|
<!--<p><a class="btn btn-primary btn-lg" href="#" role="button">History of printed labels</a></p>-->
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<fieldset class="form-group">
|
|
<label for="labelSize">Label Size:</label>
|
|
<select class="form-control" id="labelSize" onChange="preview()">
|
|
{% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %}
|
|
</select>
|
|
<label for="fontFamily">Font Selection:</label>
|
|
<select class="form-control" id="fontFamily" onChange="preview()">
|
|
{% for font in fonts %}<option>{{font}}</option> {% endfor %}
|
|
</select>
|
|
<label for="fontSize">Font Size:</label>
|
|
<input id="fontSize" type="text" name="quant[2]" class="form-control input-number" value="70" min="1" max="120" onChange="preview()">
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<fieldset class="form-group">
|
|
<label for="labelText">Label Text:</label>
|
|
<textarea rows="7" id="labelText" class="form-control" onChange="preview()" onInput="preview()"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<fieldset class="form-group">
|
|
<label for="previewImg">Label Preview:</label>
|
|
<img id="previewImg" src="/api/preview/text/%20" style="border: 1px solid #444; width: 90%; margin: 5%;"/>
|
|
<button type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">Print</button>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascript %}
|
|
var text = $('#labelText');
|
|
|
|
//text.oninput = function(){
|
|
//var callcount = 0;
|
|
// var action = function(){
|
|
// alert('changed');
|
|
// }
|
|
// var delayAction = function(action, time){
|
|
// var expectcallcount = callcount;
|
|
// var delay = function(){
|
|
// if(callcount == expectcallcount){
|
|
// action();
|
|
// }
|
|
// }
|
|
// setTimeout(delay, time);
|
|
// }
|
|
// return function(eventtrigger){
|
|
// ++callcount;
|
|
// delayAction(action, 1200);
|
|
// }
|
|
//}();
|
|
|
|
function last_url_part() {
|
|
text = $('#labelText').val().replace(/\n/g, "%0A");
|
|
font_family = $('#fontFamily option:selected').text();
|
|
font_size = $('#fontSize').val();
|
|
label_size = $('#labelSize option:selected').val();
|
|
if (text == '') text = '%20';
|
|
return text + '?font_family=' + font_family + '&font_size=' + font_size + '&label_size=' + label_size;
|
|
}
|
|
|
|
function preview() {
|
|
$('#previewImg').attr('src', '/api/preview/text/' + last_url_part() );
|
|
}
|
|
|
|
function print() {
|
|
$.ajax({
|
|
dataType: "json",
|
|
url: '/api/print/text/' + last_url_part(),
|
|
success: function( data ) {
|
|
console.log(data['success']);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|