components/printer-control.js

class PrinterControl extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .printer-card {
          background: white;
          border-radius: 0.5rem;
          padding: 1.5rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
          margin-bottom: 1rem;
        }
        .printer-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .printer-status {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .status-indicator {
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 50%;
        }
        .status-online { background: #10B981; }
        .status-offline { background: #EF4444; }
        .status-printing { background: #3B82F6; }
        .printer-controls {
          display: flex;
          gap: 0.5rem;
        }
        .printer-view {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
        }
        .camera-feed {
          background: #F3F4F6;
          border-radius: 0.5rem;
          aspect-ratio: 16/9;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }
        .printer-info {
          display: grid;
          gap: 0.75rem;
        }
        .info-row {
          display: flex;
          justify-content: space-between;
        }
        .progress-bar {
          height: 0.5rem;
          background: #E5E7EB;
          border-radius: 0.25rem;
          overflow: hidden;
        }
        .progress-fill {
          height: 100%;
          background: #3B82F6;
        }
        button {
          padding: 0.5rem 1rem;
          border-radius: 0.25rem;
          font-weight: 500;
          cursor: pointer;
        }
        .btn-primary {
          background: #3B82F6;
          color: white;
          border: none;
        }
        .btn-secondary {
          background: white;
          color: #3B82F6;
          border: 1px solid #3B82F6;
        }
        .btn-danger {
          background: #EF4444;
          color: white;
          border: none;
        }
      </style>
      <div class="printer-card">
        <div class="printer-header">
          <h3>Vixelab Aquilla 3D Printer</h3>
          <div class="printer-status">
            <div class="status-indicator status-online"></div>
            <span>Online</span>
          </div>
        </div>
        
        <div class="printer-view">
          <div class="camera-feed">
            <img src="http://static.photos/technology/640x360/3dprinter" alt="Printer Camera Feed">
          </div>
          
          <div class="printer-info">
            <div class="info-row">
              <span>Current Job:</span>
              <span>Widget_Prototype.gcode</span>
            </div>
            <div class="info-row">
              <span>Progress:</span>
              <span>42%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 42%"></div>
            </div>
            <div class="info-row">
              <span>Time Remaining:</span>
              <span>2h 15m</span>
            </div>
            <div class="info-row">
              <span>Nozzle Temp:</span>
              <span>210°C</span>
            </div>
            <div class="info-row">
              <span>Bed Temp:</span>
              <span>60°C</span>
            </div>
          </div>
        </div>
        
        <div class="printer-controls">
          <button class="btn-primary">Start Print</button>
          <button class="btn-secondary">Pause</button>
          <button class="btn-danger">Stop</button>
          <button class="btn-secondary">Upload File</button>
        </div>
      </div>
    `;
  }
}
customElements.define('printer-control', PrinterControl);