Label size controls, per-label preview with its mm size

app/templates/admin/labels/tape.html

@@ -15,13 +15,40 @@
 <form method="POST" action="{{ url_for('tape.index') }}" id="tapeForm">
 <input type="hidden" name="ids" value="{{ ids }}">
 {# Always submitted, so an unticked checkbox can be told apart from a page
-   opened with no options at all. Without it, "Rotate for tape feed" could
+   opened with no options at all. Without it, a default-on checkbox could
    never be turned off. #}
 <input type="hidden" name="_opts" value="1">
 
 <div class="row g-2 mt-0">
     <!-- Options -->
     <div class="col-lg-4">
+        <div class="bl-panel">
+            <div class="bl-panel-head"><span>Label size</span></div>
+            <div class="bl-panel-body">
+                <label class="fld">Size</label>
+                <select name="size_mode" class="w-100 mb-2" id="sizeSelect">
+                    {% for key, text in size_modes %}
+                    <option value="{{ key }}" {% if key == options.size_mode %}selected{% endif %}>{{ text }}</option>
+                    {% endfor %}
+                </select>
+                {% if options.is_fixed %}
+                <div class="k mb-2" style="text-transform:none;">
+                    Labels are {{ label_width_mm|int }}mm wide and lie across the tape, so each one
+                    only uses its height in tape length.
+                </div>
+                <label class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;">
+                    <input type="checkbox" name="group_drawers" value="1"
+                           {% if options.group_drawers %}checked{% endif %}>
+                    Combine parts that share a drawer
+                </label>
+                <div class="k mb-2" style="text-transform:none;">
+                    Two part types in one drawer become a single 40 &times; 20mm label.
+                    Matched on the drawer / location field.
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
         <div class="bl-panel">
             <div class="bl-panel-head"><span>Tape &amp; layout</span></div>
             <div class="bl-panel-body">
@@ -54,12 +81,14 @@
                         <input type="number" name="padding_mm" step="0.1" min="0" max="10"
                                class="w-100" value="{{ options.padding_mm }}">
                     </div>
+                    {% if not options.is_fixed %}
                     <div class="col-6">
                         <label class="fld">Fixed length (mm)</label>
                         <input type="number" name="fixed_length_mm" step="1" min="12" max="430"
                                class="w-100" value="{{ options.fixed_length_mm or '' }}"
                                placeholder="auto">
                     </div>
+                    {% endif %}
                     <div class="col-6">
                         <label class="fld">Align</label>
                         <select name="align" class="w-100">
@@ -70,6 +99,7 @@
                 </div>
 
                 <hr class="my-2">
+                {% if not options.is_fixed %}
                 <label class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;">
                     <input type="checkbox" name="rotate" value="1" {% if options.rotate %}checked{% endif %}>
                     Rotate for tape feed
@@ -78,6 +108,11 @@
                     If your print comes out sideways, untick this. To make the change
                     permanent, set it in <a href="{{ url_for('labels.settings') }}">Settings</a>.
                 </div>
+                {% else %}
+                {# Fixed sizes always lie across the tape, so there is nothing to
+                   choose - carry the value through so the form round-trips. #}
+                <input type="hidden" name="rotate" value="{{ '1' if options.rotate else '' }}">
+                {% endif %}
                 <label class="d-flex align-items-center gap-2" style="font-size:12px;">
                     <input type="checkbox" name="outline" value="1" {% if options.outline %}checked{% endif %}>
                     Outline each label
@@ -119,7 +154,7 @@
                     </button>
                     <button type="submit" formaction="{{ url_for('tape.print_tape') }}"
                             class="bl-btn bl-btn-go">
-                        <i class="bi bi-printer"></i> Print {{ labels|length }} label{{ '' if labels|length == 1 else 's' }} to tape
+                        <i class="bi bi-printer"></i> Print {{ plan|length }} label{{ '' if plan|length == 1 else 's' }} to tape
                     </button>
                     <button type="submit" formaction="{{ url_for('tape.download_pdf') }}"
                             class="bl-btn">
@@ -142,7 +177,8 @@
 
         <div class="bl-panel">
             <div class="bl-panel-head">
-                <span>Preview &mdash; {{ labels|length }} label{{ '' if labels|length == 1 else 's' }} at actual proportions</span>
+                <span>Preview &mdash; {{ plan|length }} label{{ '' if plan|length == 1 else 's' }}
+                    from {{ labels|length }} part{{ '' if labels|length == 1 else 's' }}</span>
                 <button type="submit" class="bl-btn bl-btn-sm">Refresh preview</button>
             </div>
             <div class="bl-panel-body">
@@ -151,28 +187,56 @@
                     Every field is unticked, so the labels will print blank.
                     Tick something under <em>Show on label</em>.</div>
                 {% endif %}
+
+                {% if options.is_fixed and not tape_fits %}
+                <div class="mb-2"><span class="bl-tag err">Tape too narrow</span>
+                    A {{ label_width_mm|int }}mm label needs 50mm tape.
+                    {{ tape.name }} is {{ tape.printable_mm }}mm printable, so labels
+                    will be scaled down. Load 50mm tape, or pick a different size.</div>
+                {% endif %}
+
                 <div class="bl-tape-preview">
-                    {% for label in labels[:12] %}
+                    {% for item in plan[:12] %}
-                    <img class="mb-2" alt="{{ label.display_title }}"
+                    <div class="mb-2">
-                         src="{{ url_for('tape.preview', id=label.id, tape=options.tape, _opts='1',
+                        <img alt="{{ item.labels | map(attribute='display_title') | join(' + ') }}"
-                                         font_scale=options.font_scale,
+                             src="{{ url_for('tape.preview',
-                                         image_percent=options.image_percent,
+                                             ids=item.labels | map(attribute='id') | join(','),
-                                         padding_mm=options.padding_mm,
+                                             tape=options.tape, _opts='1',
-                                         align=options.align,
+                                             size_mode=options.size_mode,
-                                         outline='1' if options.outline else '',
+                                             group_drawers='1' if options.group_drawers else '',
-                                         fixed_length_mm=options.fixed_length_mm or '',
+                                             font_scale=options.font_scale,
-                                         fields=options.fields) }}">
+                                             image_percent=options.image_percent,
+                                             padding_mm=options.padding_mm,
+                                             align=options.align,
+                                             outline='1' if options.outline else '',
+                                             fixed_length_mm=options.fixed_length_mm or '',
+                                             fields=options.fields) }}">
+                        {% if item.width_mm %}
+                        <div class="k" style="text-transform:none;margin-top:2px;">
+                            {{ item.width_mm|int }} &times; {{ item.height_mm|int }}mm
+                            {%- if item.labels|length > 1 %} &middot;
+                                {{ item.labels|length }} parts in {{ item.drawer or 'one drawer' }}
+                            {%- elif item.drawer %} &middot; {{ item.drawer }}{% endif %}
+                        </div>
+                        {% endif %}
+                    </div>
                     {% endfor %}
                 </div>
-                {% if labels|length > 12 %}
+
+                {% if plan|length > 12 %}
                 <div class="k mt-2" style="text-transform:none;">
-                    Showing the first 12 of {{ labels|length }}. All of them print.
+                    Showing the first 12 of {{ plan|length }}. All of them print.
                 </div>
                 {% endif %}
                 <div class="k mt-2" style="text-transform:none;">
-                    Rendered at 313 dpi on {{ tape.tape_mm }}mm tape
+                    313 dpi on {{ tape.tape_mm }}mm tape ({{ tape.printable_mm }}mm printable).
-                    ({{ tape.printable_mm }}mm printable). Preview is shown flat;
+                    {% if options.is_fixed %}
-                    the job is rotated if "Rotate for tape feed" is ticked.
+                        Labels lie across the tape, so this run uses about
+                        <strong>{{ (tape_used_mm / 10)|round(1) }}cm</strong> of tape
+                        ({{ options.copies }} cop{{ 'y' if options.copies == 1 else 'ies' }} each).
+                    {% else %}
+                        Preview shown flat; the job is rotated if "Rotate for tape feed" is ticked.
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -214,8 +278,8 @@ document.getElementById('testBtn')?.addEventListener('click', function () {
         .catch(e => { out.innerHTML = '<span class="bl-tag err">Failed</span> ' + e; });
 });
 
-// Changing the tape re-renders the preview.
+// Changing the tape or the label size re-renders the preview.
-['tapeSelect'].forEach(id => {
+['tapeSelect', 'sizeSelect'].forEach(id => {
     document.getElementById(id)?.addEventListener('change',
         () => document.getElementById('tapeForm').submit());
 });