Printer Adjustments

public/js/admin.js

@@ -702,9 +702,9 @@ async function loadSites() {
           <dt>Printer</dt>
           <dd>${
             s.printer.enabled && s.printer.host
-              ? `${esc(s.printer.model)} at ${esc(s.printer.host)}:${s.printer.port}${
-                  s.printer.rotate ? `, rotated ${s.printer.rotate}°` : ''
-                }${
+              ? `${esc(s.printer.model)} at ${esc(s.printer.host)}:${s.printer.port}, ${
+                  s.printer.label === '62red' ? 'black and red roll' : 'black roll'
+                }${s.printer.rotate ? `, rotated ${s.printer.rotate}°` : ''}${
                   s.printerStatus
                     ? s.printerStatus.ok
                       ? ` <span class="pill">last print ok, ${stamp(s.printerStatus.at)}</span>`
@@ -799,14 +799,21 @@ function openSiteModal(site) {
      <p class="hint" id="badge-warning" hidden></p>
      <label class="inline"><input type="checkbox" name="showPhoto" id="badge-photo" ${site.badge.showPhoto ? 'checked' : ''}> Include the visitor's photo</label>
      <label class="inline"><input type="checkbox" name="accent" id="badge-accent" ${site.badge.accent ? 'checked' : ''}> Print the heading and the no-check warning in red</label>
-     <p class="hint">Red needs a two-colour roll such as the Brother DK-22251. On any other
-     roll it prints as grey. Two-colour printing is also much slower than black alone.</p>
+     <p class="hint" id="accent-note"></p>
+     <p class="hint">Two-colour printing is much slower than black alone.</p>
      <h4 class="modal-section">Printer</h4>
      <label class="inline"><input type="checkbox" name="printerEnabled" ${site.printer.enabled ? 'checked' : ''}> Print from the server, straight to a network printer</label>
      <div class="modal-row">
        ${field('Printer IP address', 'printerHost', site.printer.host, 'text')}
        ${field('Port', 'printerPort', site.printer.port, 'number')}
      </div>
+     <label class="modal-field"><span>Roll loaded in the printer</span>
+       <select name="printerLabel">
+         <option value="62" ${site.printer.label !== '62red' ? 'selected' : ''}>62 mm continuous, black only</option>
+         <option value="62red" ${site.printer.label === '62red' ? 'selected' : ''}>62 mm continuous, black and red (DK-22251)</option>
+       </select></label>
+     <p class="hint">This must match the roll actually in the machine. Send a two-colour job to a
+     plain roll and the printer answers <em>Wrong Roll Type</em> and prints nothing.</p>
      <div class="modal-row">
        ${field('Model', 'printerModel', site.printer.model)}
        <label class="modal-field"><span>Rotation</span>
@@ -883,6 +890,7 @@ function openSiteModal(site) {
               port: Number(data.printerPort) || 9100,
               model: data.printerModel,
               rotate: Number(data.printerRotate) || 0,
+              label: data.printerLabel,
             },
             branding: {
               brand: data.brand || null,
@@ -992,6 +1000,35 @@ function wireBannerEditor() {
   [pageInput, textInput].forEach((el) => el.addEventListener('input', showContrast));
   showContrast();
 
+  // Red is only possible on the two-colour roll, so say so as the two settings change.
+  const accentBox = $('#badge-accent');
+  const rollSelect = $('#modal-form [name="printerLabel"]');
+  const accentNote = $('#accent-note');
+
+  const showAccentNote = () => {
+    if (!accentNote) return;
+    if (!accentBox?.checked) {
+      accentNote.hidden = false;
+      accentNote.className = 'hint';
+      accentNote.textContent = 'Everything prints black.';
+      return;
+    }
+    if (rollSelect?.value === '62red') {
+      accentNote.hidden = false;
+      accentNote.className = 'hint';
+      accentNote.textContent = 'The heading and the no-check warning will print red.';
+    } else {
+      accentNote.hidden = false;
+      accentNote.className = 'hint warn';
+      accentNote.textContent =
+        'The roll selected below cannot print red, so these will come out black. Load a DK-22251 and change the roll setting to use colour.';
+    }
+  };
+
+  accentBox?.addEventListener('change', showAccentNote);
+  rollSelect?.addEventListener('change', showAccentNote);
+  showAccentNote();
+
   $('#banner-file').addEventListener('change', (event) => {
     const file = event.target.files[0];
     if (!file) return;