ImpTune/imptune/templates/printers_new.html

{% extends "base.html" %}
{% import "partials/icons.html" as ico %}

{% block head_title %}Add printer · ImpTune{% endblock %}
{% block crumb %}
<span class="crumb" x-data>
  <a href="/printers">{{ ico.i('back', 12) }}<span x-text="$store.i18n.t('back_to_printer_library')">Printers</span></a>
</span>
{% endblock %}
{% block page_title %}<span x-data x-text="$store.i18n.t('add_printer_title')">Add printer</span>{% endblock %}

{% block content %}
<div class="split" x-data="{ ip: '', port: '', portEdited: false }">
  <section class="card">
    <div class="card-body">
      <form action="/printers" method="post">

        <fieldset class="form-section">
          <legend x-text="$store.i18n.t('section_identity')">Identity</legend>
          <label>
            <span class="label-text" x-text="$store.i18n.t('printer_name')">Printer name</span>
            <input type="text" name="name" placeholder="HP LaserJet 4050 — Accounting" required>
            <span class="hint" x-text="$store.i18n.t('hint_name')">The name the user sees on their workstation.</span>
          </label>
          <label>
            <span class="label-text" x-text="$store.i18n.t('client')">Client</span>
            <select name="client_id">
              <option value="" x-text="$store.i18n.t('unassigned_option')">Unassigned</option>
              {% for c in clients %}
              <option value="{{ c.id }}">{{ c.name }}</option>
              {% endfor %}
            </select>
          </label>
        </fieldset>

        <fieldset class="form-section">
          <legend x-text="$store.i18n.t('section_connection')">Network connection</legend>
          <div class="form-row">
            <label>
              <span class="label-text" x-text="$store.i18n.t('ip_address')">IP address</span>
              <input type="text" name="ip_address" class="mono"
                     x-model="ip"
                     @input="if (!portEdited) port = 'IP_' + ip.replaceAll('.', '_')"
                     placeholder="192.168.1.100"
                     inputmode="decimal"
                     required>
              <span class="hint" x-text="$store.i18n.t('hint_ip')">The printer IPv4 address on the client network.</span>
            </label>
            <label>
              <span class="label-text" x-text="$store.i18n.t('port_name')">Port name</span>
              <input type="text" name="port_name" class="mono"
                     x-model="port"
                     @change="portEdited = true"
                     @keydown="portEdited = true"
                     placeholder="IP_192_168_1_100">
              <span class="hint" x-text="$store.i18n.t('hint_port')">Derived from the IP address. Edit it if your naming differs.</span>
            </label>
          </div>
        </fieldset>

        <fieldset class="form-section">
          <legend x-text="$store.i18n.t('section_driver')">Driver</legend>
          <label>
            <select name="driver_id" id="printer-form-driver-select">
              <option value="" x-text="$store.i18n.t('no_driver_option')">No driver</option>
              {% for item in driver_data %}
              <option value="{{ item.driver.id }}">
                {{ item.driver.label }}{% if item.names %} — {{ item.names | join(', ') }}{% endif %}
              </option>
              {% endfor %}
            </select>
            <span class="hint" x-text="$store.i18n.t('hint_driver')">Without a driver the printer is saved, but export stays locked.</span>
          </label>
        </fieldset>

        <fieldset class="form-section">
          <legend x-text="$store.i18n.t('section_defaults')">Print defaults</legend>
          <div class="form-row">
            <label>
              <span class="label-text" x-text="$store.i18n.t('duplex_mode')">Duplex mode</span>
              <select name="duplex_mode">
                <option value="OneSided" selected x-text="$store.i18n.t('one_sided')">One-sided</option>
                <option value="LongEdge" x-text="$store.i18n.t('long_edge')">Long edge</option>
                <option value="ShortEdge" x-text="$store.i18n.t('short_edge')">Short edge</option>
              </select>
            </label>
            <label>
              <span class="label-text" x-text="$store.i18n.t('paper_size')">Paper size</span>
              <select name="paper_size">
                <option value="A4" selected>A4</option>
                <option value="Letter">Letter</option>
                <option value="Legal">Legal</option>
              </select>
            </label>
          </div>
          <div class="check-row">
            <label>
              <input type="checkbox" name="color_mode" value="on" checked>
              <span x-text="$store.i18n.t('color_mode')">Color</span>
            </label>
            <label>
              <input type="checkbox" name="collate" value="on" checked>
              <span x-text="$store.i18n.t('collate')">Collate</span>
            </label>
          </div>
        </fieldset>

        <div class="form-foot">
          <button type="submit" class="btn" x-text="$store.i18n.t('save_printer')">Save printer</button>
          <a href="/printers" class="btn ghost" x-text="$store.i18n.t('cancel')">Cancel</a>
        </div>
      </form>
    </div>
  </section>

  {#
    Separate form on purpose: HTML forbids nesting, and the upload answers a
    question the technician has *while* filling the form ("my driver isn't in
    the list"). The response OOB-swaps the select above, new driver selected.
  #}
  <section class="card form-aside">
    <div class="card-head">
      <div>
        <h2 x-data x-text="$store.i18n.t('upload_new_driver')">Add a new driver</h2>
        <p class="sub" x-data x-text="$store.i18n.t('hint_driver_zip')">The ZIP must contain the .inf file and every file it references.</p>
      </div>
    </div>
    <div class="card-body">
      <form hx-post="/drivers/upload"
            hx-target="#driver-list"
            hx-encoding="multipart/form-data"
            hx-swap="outerHTML"
            hx-indicator="#form-upload-spinner">
        <input type="hidden" name="caller" value="printer_form">
        <div class="uploader">
          <input type="file" name="file" accept=".zip" required
                 x-data :aria-label="$store.i18n.t('driver_package_label')">
          <div class="btn-row">
            <button type="submit" class="btn ghost" x-data>
              {{ ico.i('upload', 14) }}<span x-text="$store.i18n.t('upload_btn')">Upload</span>
            </button>
            <span id="form-upload-spinner" class="htmx-indicator" aria-busy="true"
                  x-data x-text="$store.i18n.t('uploading')">Uploading…</span>
          </div>
        </div>
      </form>
      <div id="driver-list"></div>
    </div>
  </section>
</div>
{% endblock %}