<commit_before>{% extends 'base.twig' %}

{% block head %}
<style type="text/css">
    #demo-input {
        font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
        font-size: 0.8em;
    }
    #demo-send {
        margin-top: 20px;
    }
</style>
{% endblock %}

{% block content %}

<h1>HUB-3 Barcode API</h1>

<h3>Request</h3>

<div class="row">
    <div class="col-md-9">
        <textarea id="demo-input" class="form-control language-json" rows="30"></textarea>
    </div>
    <div class="col-md-3">
        <h4>Presets</h4>
        <button class="btn btn-primary btn-sm btn-block preset-button" data-preset="image">Image</button>
        <button class="btn btn-primary btn-sm btn-block preset-button" data-preset="svg">SVG</button>
        <button class="btn btn-primary btn-sm btn-block preset-button" data-preset="json">JSON</button>
    </div>
</div>


<button id="demo-send" class="btn btn-primary">Send</button>

<section id="demo-response">
  <h3>Response</h3>

  <div id="demo-output">
  </div>
</section>

{% endblock %}


{% block tail %}
<script type="text/javascript">

var presets = {
    "image": {"renderer":"image","options":{"format":"png","scale":3,"ratio":3,"color":"#2c3e50","bgColor":"#eee","padding":20},"data":{"amount":100000,"sender":{"name":"<NAME>","street":"Savska cesta 13","place":"10000 Zagreb"},"receiver":{"name":"Big Fish Software d.o.o.","street":"Savska cesta 13","place":"10000 Zagreb","iban":"HR6623400091110651272","model":"00","reference":"123-456-789"},"purpose":"ANTS","description":"Developing a HUB-3 API"}},
    "svg" : {"renderer":"svg","options":{"scale":3,"ratio":3,"color":"#2c3e50"},"data":{"amount":100000,"sender":{"name":"<NAME>","street":"Savska cesta 13","place":"10000 Zagreb"},"receiver":{"name":"Big Fish Software d.o.o.","street":"Savska cesta 13","place":"10000 Zagreb","iban":"HR6623400091110651272","model":"00","reference":"123-456-789"},"purpose":"ANTS","description":"Developing a HUB-3 API"}},
    "json": {"renderer":"json","options":{},"data":{"amount":100000,"sender":{"name":"<NAME>","street":"Savska cesta 13","place":"10000 Zagreb"},"receiver":{"name":"Big Fish Software d.o.o.","street":"Savska cesta 13","place":"10000 Zagreb","iban":"HR6623400091110651272","model":"00","reference":"123-456-789"},"purpose":"ANTS","description":"Developing a HUB-3 API"}}
};

// Converts an arraybuffer to string
function to_string(buffer) {
    var string = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        string += String.fromCharCode(bytes[i]);
    }
    return string;
}

function show_status(request) {
    var contentType = request.getResponseHeader('Content-Type');
    var status = request.status + ' ' + request.statusText;

    $("#demo-output").append('<p>Status: <b>' + status +  '</b></p>');
    $("#demo-output").append('<p>Content type: <b>' + contentType +  '</b></p>');
}

function show_error(request) {
    var string = to_string(request.response);
    var json = $.parseJSON(string);

    if (json.message) {
        $("#demo-output").append('<p>Message: ' + json.message + '</p>');
    }

    if (json.errors) {
        var errors = '<ul>';
        $.each(json.errors, function (key, value) {
            errors += '<li>' + value + '</li>';
        });
        errors += '</ul>';
        $("#demo-output").append('<p>Errors:</p>' + errors);
    }
}

function show_barcode(request) {
    var string = to_string(request.response);

    var contentType = request.getResponseHeader('Content-Type');

    if (contentType.indexOf('image/') === 0) {
        var base64 = btoa(string);
        var src = 'data:' + contentType + ';base64,' + base64;
        $("#demo-output").append($('<img>').attr('src', src));
    } else {
        $("#demo-output").append($('<pre><code>' + string + '</code></pre>'));
    }
}

function apply_preset(preset)
{
    var json = presets[preset];
    var string = JSON.stringify(json, null, '    ');
    $('#demo-input').val(string);
}

$(document).ready(function () {

    // Initially populate with Image preset
    apply_preset('image');

    // Populate textarea with preset request when the button is clicked
    $('.preset-button').on('click', function () {
        var preset = $(this).data('preset');
        apply_preset(preset);
    });

    // Execute the request when Send is clicked and display the generated
    // barcode, or the error
    $("#demo-send").on("click", function() {
        // Clear any existing output
        $("#demo-output").empty();

        // Read data from textarea
        var data = $("#demo-input").val();
        var url =  '{{ path('barcode') }}';

        // Post the request
        var request = new XMLHttpRequest();
        request.open("POST", url, true);
        request.responseType = "arraybuffer";
        request.setRequestHeader('Content-Type', 'application\/json');

        request.onload = function (oEvent) {
          var status = request.status;

          show_status(request);

          if (status == 200) {
              show_barcode(request);
          } else {
              show_error(request);
          }
        };
<commit_msg>Added time taken to demo, minor tweaks<commit_after>{% extends 'base.twig' %}

{% block head %}
<style type="text/css">
    #demo-input {
        font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
        font-size: 0.8em;
    }
    #demo-send {
        margin-top: 20px;
    }
    #demo-response {
        display: none;
    }
</style>
{% endblock %}

{% block content %}

<h1>HUB-3 Barcode API</h1>

<h3>Request</h3>

<div class="row">
    <div class="col-md-9">
        <textarea id="demo-input" class="form-control language-json" rows="30"></textarea>
    </div>
    <div class="col-md-3">
        <h4>Presets</h4>
        <button class="btn btn-primary btn-sm btn-block preset-button" data-preset="image">Image</button>
        <button class="btn btn-primary btn-sm btn-block preset-button" data-preset="svg">SVG</button>
        <button class="btn btn-primary btn-sm btn-block preset-button" data-preset="json">JSON</button>
    </div>
</div>

<button id="demo-send" class="btn btn-primary">Send</button>

<section id="demo-response">
    <h3>Response</h3>
    <div id="demo-output">
    </div>
</section>
{% endblock %}


{% block tail %}
<script type="text/javascript">

var presets = {
    "image": {"renderer":"image","options":{"format":"png","scale":3,"ratio":3,"color":"#2c3e50","bgColor":"#eee","padding":20},"data":{"amount":100000,"sender":{"name":"<NAME>","street":"Savska cesta 13","place":"10000 Zagreb"},"receiver":{"name":"Big Fish Software d.o.o.","street":"Savska cesta 13","place":"10000 Zagreb","iban":"HR6623400091110651272","model":"00","reference":"123-456-789"},"purpose":"ANTS","description":"Developing a HUB-3 API"}},
    "svg" : {"renderer":"svg","options":{"scale":3,"ratio":3,"color":"#2c3e50"},"data":{"amount":100000,"sender":{"name":"<NAME>","street":"Savska cesta 13","place":"10000 Zagreb"},"receiver":{"name":"Big Fish Software d.o.o.","street":"Savska cesta 13","place":"10000 Zagreb","iban":"HR6623400091110651272","model":"00","reference":"123-456-789"},"purpose":"ANTS","description":"Developing a HUB-3 API"}},
    "json": {"renderer":"json","options":{},"data":{"amount":100000,"sender":{"name":"<NAME>","street":"Savska cesta 13","place":"10000 Zagreb"},"receiver":{"name":"Big Fish Software d.o.o.","street":"Savska cesta 13","place":"10000 Zagreb","iban":"HR6623400091110651272","model":"00","reference":"123-456-789"},"purpose":"ANTS","description":"Developing a HUB-3 API"}}
};

// Converts an arraybuffer to string
function to_string(buffer) {
    var string = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        string += String.fromCharCode(bytes[i]);
    }
    return string;
}

function show_status(request, duration) {
    var contentType = request.getResponseHeader('Content-Type');
    var status = request.status + ' ' + request.statusText;

    $("#demo-output").append('<p>Time taken: <b>' + duration +  ' ms</b></p>');
    $("#demo-output").append('<p>Status: <b>' + status +  '</b></p>');
    $("#demo-output").append('<p>Content type: <b>' + contentType +  '</b></p>');
}

function show_error(request) {
    var string = to_string(request.response);
    var json = $.parseJSON(string);

    if (json.message) {
        $("#demo-output").append('<p>Message: ' + json.message + '</p>');
    }

    if (json.errors) {
        var errors = '<ul>';
        $.each(json.errors, function (key, value) {
            errors += '<li>' + value + '</li>';
        });
        errors += '</ul>';
        $("#demo-output").append('<p>Errors:</p>' + errors);
    }
}

function show_barcode(request) {
    var string = to_string(request.response);

    var contentType = request.getResponseHeader('Content-Type');

    if (contentType.indexOf('image/') === 0) {
        var base64 = btoa(string);
        var src = 'data:' + contentType + ';base64,' + base64;
        $("#demo-output").append($('<img>').attr('src', src));
    } else {
        $("#demo-output").append('<pre><code>' + string + '</code></pre>');
    }
}

function apply_preset(preset) {
    var json = presets[preset];
    var string = JSON.stringify(json, null, '    ');
    $('#demo-input').val(string);
}

$(document).ready(function () {

    // Initially populate with Image preset
    apply_preset('image');

    // Populate textarea with preset request when the button is clicked
    $('.preset-button').on('click', function () {
        var preset = $(this).data('preset');
        apply_preset(preset);
    });

    // Execute the request when Send is clicked and display the generated
    // barcode, or the error
    $("#demo-send").on("click", function() {
        $("#demo-response").hide();
        $("#demo-output").empty();

        var data = $("#demo-input").val();
        var url =  '{{ path('barcode') }}';
        var start = (new Date()).getTime();

        // Post the request
        var request = new XMLHttpRequest();
        request.open("POST", url, true);
        request.responseType = "arraybuffer";
        request.setRequestHeader('Content-Type', 'application\/json');

        request.onload = function (event) {
            var end = (new Date()).getTime();
            var duration = end - start;

            show_status(request, duration);

            if (request.status == 200) {
                show_barcode(request);
            } else {
                show_error(request);
            }

            $("#demo-response").show();
        };

{'fraction_non_alphanumeric': 0.21450009379103357, 'fraction_numerical': 0.03676608516225849, 'mean_word_length': 3.470859538784067, 'pattern_counts': {'":': 124, '<': 119, '<?xml version=': 0, '>': 117, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3712211', 'n_tokens_mistral': 3710, 'n_tokens_neox': 3369, 'n_words': 645}