label_printer/templates/text.html

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

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

{% endblock %}
<!-- TODO: Make fields outside the form also update based on localStorage, instead of serverside, add dropshadows to white text, and make size and y-position boxes smaller, also, text alignment -->

{% block content %}
    <form id="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", class="tiles"> </div>
        <div id="plus minus buttons"> </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 = `<div><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>
        Bold: <input type="checkbox" name="[bold]" value="bold" (bold)></div>`

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

        const templates = new Map ([
            ["DNH", [{
                text: "Do Not Hack",
                size: 130,
                y_pos: 0,
                bold: true
            }, {
                text: "bottom text",
                size: 50,
                y_pos: 130,
                bold: false
            }]],
            ["Food", [{
                text: "Nickname",
                size: 130,
                y_pos: 0,
                bold: true
            }, {
                text: new Date().toISOString().slice(0, 10),
                size: 50,
                y_pos: 130,
                bold: false
            }]],
            ["Remove by", [{
                text: "Remove by",
                size: 130,
                y_pos: 0,
                bold: true
            }, {
                text: new Date(Date.now() + 3 * 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10),
                size: 50,
                y_pos: 130,
                bold: false
            }]],
        ]);


        function generate_and_populate_fields() {
            let html = ""

            if (localStorage.getItem("text0") == null) {
                template = templates.get("DNH");
                populate_local_storage_from_template(template);
            }

            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", 130 * i, i, modified_line_form);
                modified_line_form = init_field("bold", false ? "checked" : "", i, modified_line_form);
                html += modified_line_form;
            }

            let buttons = ""
            if (lineCnt == 1) {
                buttons = plus_button;
            } else {
                buttons += min_button + plus_button;
            }

            document.getElementById("input").innerHTML = html;
            document.getElementById("plus minus buttons").innerHTML = buttons;
        }
        generate_and_populate_fields()

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

            for (const element of text_form.elements) {
                if (element.type == 'checkbox') {
                    localStorage.setItem(element.name, element.checked ? "checked" : "");
                } else {
                    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_and_populate_fields();
        }
        function remove_line() {
            localStorage.setItem("lineCount", Number(localStorage.getItem("lineCount")) - 1);
            generate_and_populate_fields();
        }

        function populate_local_storage_from_template(template) {
            for (let i = 0; i < template.length; i++) {
                localStorage.setItem("text" + i, template[i].text);
                localStorage.setItem("size" + i, template[i].size);
                localStorage.setItem("y_pos" + i, template[i].y_pos);
                localStorage.setItem("bold" + i, template[i].bold ? "checked" : "");
            }
            localStorage.setItem("lineCount", template.length);
        }

        const template_selector = document.getElementById("template")
        template_selector.addEventListener('submit', function(e) {
            e.preventDefault();
            template = templates.get(template_selector.elements.template.value);

            populate_local_storage_from_template(template);

            generate_and_populate_fields();


        });

    </script>

{% endblock %}