label_printer/templates/text.html

<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
{% extends "base.html" %}

{% block head %}
    <title>LabelPrinter Label generator</title>

{% endblock %}

{% block content %}
    <form method="POST" action="/text-template">
        <label for="template">Template:</label>
        <select name="template">
            <option value="DNH">Do not hack</option>
            <option value="Food">Food</option>
	   <option value="Remove by">Remove by</option>
        </select>
        <input type="submit" value="Apply">
    </form>


    <form method="POST" action="/text-form", id="text_form">
        <div id="input"> </div>


        <h2>Font</h2>
        <label for="font">Font:</label>
        <select name="font">
          {% for font in fonts %}
          <option value="{{ font }}"{% if fonts[font].selected %} selected{% endif %}>{{ fonts[font].name }}</option>
          {% endfor %}
        </select>

        <br />
        <input type="submit" value="Generate preview">
    </form>

    {% if info %}
    <p class="info" style="color: {{info_color}}">{{info}}</p>
    {% endif %}

    {% if filename %}
    <img src="user_data/{{filename}}" alt="Generated Image" style="height: 150px; width: auto;">

    <form method="POST" action="/text-print">
        {% if cut %}
            <input type="checkbox" name="cut" value="cut" checked>
        {%else %}
            <input type="checkbox" name="cut" value="cut">
        {%endif%}
        <label for="cut"> Cut paper after printing </label><br>

        <input type="submit" value="Print" style="font-size: 2em; padding: 20px 40px;">
    </form>
    {% endif %}

    <script>
        const line_form = `<h2>[title]</h2>
        Text:<br>
        <textarea name="[text]">(text)</textarea><br>
        Size:  <input type="number" value="(size)" name="[size]" min="0" required
        style="width: 40px"><br>
        Y position:  <input type="number" value="(y_pos)" name="[y_pos]" required
        style="width: 40px"><br>`

        const min_button = `<button type="button" onClick="remove_line()">-</button>`
        const plus_button = `<button type="button" onClick="add_line()">+</button>`

        function get_persistent(name, initial_value) {
            if (localStorage.getItem(name) == null) {
                localStorage.setItem(name, initial_value)
            }
            return localStorage.getItem(name)
        }

        function init_field(local_name, initial_value, i, html) {
            html = html.replace("[" + local_name + "]", local_name + i);
            html = html.replace("(" + local_name + ")", get_persistent(local_name + i, initial_value));

            return html;
        }


        function generate_fields() {
            let html = ""

            let lineCnt = get_persistent("lineCount", 2);
            for (let i = 0; i < lineCnt; i++) {
                let modified_line_form = line_form;
                modified_line_form

                modified_line_form = modified_line_form.replace("[title]", "Line " + i);
                modified_line_form = init_field("text", "Text", i, modified_line_form);
                modified_line_form = init_field("size", 130, i, modified_line_form);
                modified_line_form = init_field("y_pos", i*130, i, modified_line_form);
                html += modified_line_form;
                console.log(i);
            }
            if (lineCnt == 1) {
                html += plus_button;
            } else {
                html += min_button + plus_button;
            }

            document.getElementById("input").innerHTML = html;
        }
        generate_fields()

        const text_form = document.getElementById("text_form")
        text_form.addEventListener('submit', function(e) {
            e.preventDefault();

            for (const element of text_form.elements) {
                localStorage.setItem(element.name, element.value);
            }

            const lineCount = document.createElement('input');
            lineCount.type = 'hidden';
            lineCount.name = 'lineCount';
            lineCount.value = localStorage.getItem("lineCount");
            text_form.appendChild(lineCount);

            text_form.submit();
        });

        function add_line() {
            localStorage.setItem("lineCount", Number(localStorage.getItem("lineCount")) + 1);
            generate_fields();
        }
        function remove_line() {
            localStorage.setItem("lineCount", Number(localStorage.getItem("lineCount")) - 1);
            generate_fields();
        }

    </script>

{% endblock %}