brother_ql_web/views/labeldesigner.jinja2

{% 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">
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                Label Size</a>
              </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
              <label for="labelSize" style="display: none">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>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                Font Settings</a>
              </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse in">
              <label for="fontFamily">Font Family:</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" class="form-control" type="number" min="1" value="70" max="150" onChange="preview()">
              <label for="fontAlign" class="control-label input-group">Font Alignment:</label>
              <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default">
                      <input type="radio" name="fontAlign" onchange="preview()" value="left" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                  </label>
                  <label class="btn btn-default active">
                      <input type="radio" name="fontAlign" onchange="preview()" value="center" aria-label="Center Align" checked=""><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                  </label>
                  <label class="btn btn-default">
                      <input type="radio" name="fontAlign" onchange="preview()" value="right" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                  </label>
              </div>

            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                Detailed Settings</a>
              </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
              <div class="panel-body">Some more settings will show here, once implemented.</div>
            </div>
          </div>
        </div>
      </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();
  align =       $('input[name=fontAlign]:checked').val();
  if (text == '') text = '%20';
  return text + '?font_family=' + font_family + '&font_size=' + font_size + '&label_size=' + label_size + '&align=' + align;
}

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 %}