electrical-chart/views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= appName %></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>

  <!-- Top App Header -->
  <header class="app-header">
    <div class="brand">
      <i class="fa-solid fa-bolt brand-icon"></i>
      <span><%= appName %></span>
      <span class="badge bg-secondary ms-2" style="font-size: 0.72rem; font-weight: 500;">Interactive Load Center</span>
    </div>

    <!-- Progress Tracker -->
    <div class="progress-container">
      <div class="progress-bar-wrap">
        <div id="progress-fill" class="progress-fill"></div>
      </div>
      <span id="progress-text" class="progress-text">Loading...</span>
    </div>

    <!-- Header Actions -->
    <div class="header-actions">
      <button id="btn-orientation" class="btn-tool active" title="Switch orientation">
        <i class="fa-solid fa-file-lines"></i> View: Field Doc (Landscape)
      </button>

      <div class="dropdown d-inline-block">
        <button class="btn-tool dropdown-toggle" type="button" data-bs-toggle="dropdown">
          <i class="fa-solid fa-download"></i> Export
        </button>
        <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
          <li><a class="dropdown-item" href="#" id="btn-export-drawio"><i class="fa-solid fa-diagram-project me-2"></i>Export Draw.io (.drawio)</a></li>
          <li><a class="dropdown-item" href="#" id="btn-export-csv"><i class="fa-solid fa-table me-2"></i>Export Schedule CSV</a></li>
          <li><a class="dropdown-item" href="#" id="btn-export-json"><i class="fa-solid fa-code me-2"></i>Export Full State JSON</a></li>
        </ul>
      </div>

      <button id="btn-reset" class="btn-tool btn-danger" title="Reset all mappings to seed">
        <i class="fa-solid fa-rotate-left"></i> Reset
      </button>
    </div>
  </header>

  <!-- App Body -->
  <div class="app-body">

    <!-- Left Canvas Area (Interactive Blueprint) -->
    <div id="canvas-container" class="canvas-panel">

      <!-- Canvas Toolbar Overlay -->
      <div class="canvas-toolbar">
        <div class="btn-group me-2" role="group">
          <button id="btn-zoom-in" class="btn-tool" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
          <button id="btn-zoom-out" class="btn-tool" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
          <button id="btn-zoom-fit" class="btn-tool" title="Fit to Screen"><i class="fa-solid fa-arrows-to-eye"></i> Fit</button>
        </div>

        <div class="btn-group me-2" role="group">
          <button id="toggle-lights" class="btn-tool active" title="Toggle Lights"><i class="fa-solid fa-lightbulb"></i> Lights</button>
          <button id="toggle-outlets" class="btn-tool active" title="Toggle Outlets"><i class="fa-solid fa-plug"></i> Outlets</button>
          <button id="toggle-switches" class="btn-tool active" title="Toggle Switches"><i class="fa-solid fa-toggle-on"></i> Switches</button>
          <button id="toggle-lines" class="btn-tool active" title="Toggle Circuit Lines"><i class="fa-solid fa-bezier-curve"></i> Lines</button>
          <button id="toggle-halos" class="btn-tool active" title="Toggle Unmapped Warning Halos"><i class="fa-solid fa-triangle-exclamation"></i> Unmapped</button>
        </div>

        <!-- Painter Mode Active Badge -->
        <div id="active-painter-badge" class="active-painter-badge">
          <i class="fa-solid fa-paint-roller"></i>
          <span id="painter-label">Painter: [6A]</span>
          <button id="btn-exit-painter" class="btn-close btn-close-white" style="font-size: 0.65rem;" title="Exit Painter Mode"></button>
        </div>
      </div>

      <!-- SVG Viewport -->
      <svg id="map-svg" class="svg-viewport" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="glow-filter" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="8" result="blur" />
            <feComposite in="SourceGraphic" in2="blur" operator="over" />
          </filter>
        </defs>
        <g id="viewport-g"></g>
      </svg>

      <!-- Hover Tooltip -->
      <div id="device-tooltip" class="device-tooltip"></div>
    </div>

    <!-- Right Sidebar (Panel Schedule & Inspector) -->
    <div class="sidebar">

      <!-- Sidebar Tabs -->
      <div class="sidebar-tabs">
        <button class="sidebar-tab active" data-panel="subpanel">
          <i class="fa-solid fa-table-cells"></i> GE Subpanel (12-Slot)
        </button>
        <button class="sidebar-tab" data-panel="main">
          <i class="fa-solid fa-bolt-lightning"></i> Main Service Panel
        </button>
      </div>

      <!-- Sidebar Content -->
      <div class="sidebar-content">

        <!-- Panel Info Banner -->
        <div class="panel-info-card">
          <div id="panel-card-title" class="panel-title">GE PowerMark Gold Load Center (Subpanel)</div>
          <div id="panel-card-subtitle" class="panel-subtitle">125A 120/240V • Half-inch THQP Slim Tandem Compatible</div>
          <div style="font-size: 0.72rem; color: #64748b; margin-top: 6px;">
            💡 <em>Click any breaker card below to enter Painter Mode, then click devices on the map to assign them instantly!</em>
          </div>
        </div>

        <!-- Breakers List -->
        <div id="breakers-container"></div>
      </div>

      <!-- Device Inspector Drawer (Bottom of Sidebar) -->
      <div id="device-inspector" class="device-inspector-panel" style="display: none;">
        <div class="inspector-title">
          <span><i class="fa-solid fa-circle-info me-1"></i> Device Inspector</span>
          <button class="btn-close btn-close-white" style="font-size: 0.65rem;" onclick="document.getElementById('device-inspector').style.display='none'"></button>
        </div>

        <div style="display: flex; gap: 10px; margin-bottom: 8px;">
          <div style="font-size: 0.8rem;">ID: <strong id="insp-dev-id">dev-89</strong></div>
          <div style="font-size: 0.8rem;">Type: <strong id="insp-dev-type">OUTLET</strong></div>
          <div style="font-size: 0.8rem;">Room: <strong id="insp-dev-room">Central South</strong></div>
        </div>

        <div class="inspector-field">
          <label>Assigned Breaker / Circuit:</label>
          <select id="insp-breaker-select" class="form-select" onchange="onInspectorBreakerChange()"></select>
        </div>

        <div class="inspector-field">
          <label>Device Notes / Location:</label>
          <input type="text" id="insp-dev-notes" class="form-input" placeholder="e.g. North wall near door" onblur="saveDeviceNotes()">
        </div>

        <div style="display: flex; gap: 8px; margin-top: 10px;">
          <button id="insp-room-btn" class="btn-tool btn-primary flex-grow-1" onclick="assignAllInCurrentRoom()">
            Assign all in this room
          </button>
          <button class="btn-tool btn-danger" onclick="unassignDevice(state.selectedDeviceId)">
            Unassign
          </button>
        </div>
      </div>

    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
  <script src="/static/js/app.js"></script>
</body>
</html>