Preflight Only

Demonstrates running preflight checks without triggering the print workflow.
Live Demo

Source Code

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TopBridge SDK — Preflight Example</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; }
    h1 { color: #333; }
    .section { margin: 20px 0; padding: 16px; border: 1px solid #ddd; border-radius: 8px; }
    button { padding: 8px 16px; margin: 4px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
    button:hover { background: #f0f0f0; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    #log { background: #1a1a1a; color: #0f0; padding: 16px; border-radius: 8px; font-family: monospace;
           font-size: 13px; max-height: 500px; overflow-y: auto; white-space: pre-wrap; }
    .result { background: #f9f9f9; padding: 12px; border-radius: 6px; margin-top: 8px; }
    .result h3 { margin: 0 0 8px; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; }
    th { background: #f0f0f0; }
  </style>
</head>
<body>
  <h1>Preflight Example</h1>
  <p>Runs preflight only, without triggering the print workflow. Demonstrates detailed output from health checks, benefit validation, and printer discovery.</p>

  <div class="section">
    <h2>Run Preflight</h2>
    <button id="btn-preflight" onclick="runPreflight()">Run Full Preflight</button>
    <button onclick="runHealthOnly()">Health Check Only</button>
    <div id="results"></div>
  </div>

  <div class="section">
    <h2>Log</h2>
    <div id="log"></div>
  </div>

  <script type="module">
    const { TopBridgeClient } = await import('https://esm.sh/@appzgatenz/label-print-topbridge-js')

    const client = new TopBridgeClient({ debug: true })

    function log(msg) {
      const el = document.getElementById('log')
      const time = new Date().toLocaleTimeString()
      el.textContent += `[${time}] ${msg}\n`
      el.scrollTop = el.scrollHeight
    }

    window.runPreflight = async () => {
      const btn = document.getElementById('btn-preflight')
      btn.disabled = true
      log('--- Running full preflight ---')

      try {
        const result = await client.preflight.run({
          onStepChange: (step) => log(`  → ${step}...`)
        })

        log('✓ Preflight passed')

        let html = ''

        // Health
        html += '<div class="result"><h3>Health Check</h3><table>'
        html += `<tr><td>Status</td><td>${result.health.isRunning ? '✓ Running' : '✗ Not running'}</td></tr>`
        html += `<tr><td>Login</td><td>${result.health.data?.isLoggedIn ? '✓ Logged in' : '✗ Not logged in'}</td></tr>`
        if (result.health.data?.version) html += `<tr><td>Version</td><td>${result.health.data.version}</td></tr>`
        if (result.health.data?.networkStatus) html += `<tr><td>Network</td><td>${result.health.data.networkStatus}</td></tr>`
        html += '</table></div>'

        // Benefits
        html += '<div class="result"><h3>Benefits</h3><table>'
        html += `<tr><td>Valid</td><td>${result.benefits.data?.isValid ? '✓' : '✗'}</td></tr>`
        html += `<tr><td>Remaining Quota</td><td>${result.benefits.data?.remainingPrints ?? 'N/A'}</td></tr>`
        if (result.benefits.data?.expiresAt) html += `<tr><td>Expires At</td><td>${result.benefits.data.expiresAt}</td></tr>`
        html += `<tr><td>Print Benefit</td><td>${result.benefits.data?.hasPrintBenefit ? '✓' : '✗'}</td></tr>`
        html += '</table></div>'

        // Printers
        html += '<div class="result"><h3>Printers</h3><table>'
        html += `<tr><td>Count</td><td>${result.printers.data?.count ?? 0}</td></tr>`
        html += `<tr><td>Default Printer</td><td>${result.printers.data?.defaultPrinter ?? 'None'}</td></tr>`
        html += '</table>'
        if (result.printers.data?.printers?.length) {
          html += '<table><tr><th>Name</th><th>Default</th><th>Protocol</th></tr>'
          for (const p of result.printers.data.printers) {
            html += `<tr><td>${p.name}</td><td>${p.isDefault ? '✓' : ''}</td><td>${p.protocol || '-'}</td></tr>`
          }
          html += '</table>'
        }
        html += '</div>'

        document.getElementById('results').innerHTML = html
      } catch (err) {
        log(`✗ Preflight failed: ${err.constructor.name}: ${err.message}`)
        document.getElementById('results').innerHTML = `<div class="result"><p style="color:red">${err.constructor.name}: ${err.message}</p></div>`
      } finally {
        btn.disabled = false
      }
    }

    window.runHealthOnly = async () => {
      log('--- Health check only ---')
      try {
        const health = await client.health.check()
        log(`✓ Tray App ${health.isRunning ? 'running' : 'not running'}`)
        if (health.data?.isLoggedIn !== undefined) {
          log(`  Logged in: ${health.data.isLoggedIn ? 'Yes' : 'No'}`)
        }
        if (health.data?.version) log(`  Version: ${health.data.version}`)
      } catch (err) {
        log(`✗ Health check failed: ${err.message}`)
      }
    }

    // --- iframe height auto-resize ---
    function reportHeight() {
      const height = document.documentElement.scrollHeight
      window.parent.postMessage({ type: 'resize-iframe', height }, '*')
    }
    window.addEventListener('load', reportHeight)
    window.addEventListener('resize', reportHeight)
    const observer = new MutationObserver(reportHeight)
    observer.observe(document.body, { childList: true, subtree: true })
  </script>
</body>
</html>
Preflight Only ​

Live Demo ​

Source Code ​

Preflight Only

Live Demo

Source Code
