nebuleair_pro_4g/html/selftest-modal.html

<!-- Self Test Modal -->
<div class="modal fade" id="selfTestModal" tabindex="-1" aria-labelledby="selfTestModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="selfTestModalLabel">Modem Self Test</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="selfTestCloseBtn" disabled></button>
      </div>
      <div class="modal-body">
        <div id="selftest_status" class="mb-3">
          <div class="d-flex align-items-center text-muted">
            <div class="spinner-border spinner-border-sm me-2" role="status"></div>
            <span>Preparing test...</span>
          </div>
        </div>

        <div class="list-group" id="selftest_results">
          <!-- Dynamic sensor test entries will be added here -->
          <div id="sensor_tests_container"></div>

          <!-- Separator for communication tests -->
          <div id="comm_tests_separator" class="list-group-item bg-light text-center py-1" style="display:none;">
            <small class="text-muted fw-bold">COMMUNICATION</small>
          </div>

          <!-- Info: WiFi Status -->
          <div class="list-group-item d-flex justify-content-between align-items-center" id="test_wifi">
            <div>
              <strong>WiFi / Network</strong>
              <div class="small text-muted" id="test_wifi_detail">Waiting...</div>
            </div>
            <span id="test_wifi_status" class="badge bg-secondary">Pending</span>
          </div>

          <!-- Test: Modem Connection -->
          <div class="list-group-item d-flex justify-content-between align-items-center" id="test_modem">
            <div>
              <strong>Modem Connection</strong>
              <div class="small text-muted" id="test_modem_detail">Waiting...</div>
            </div>
            <span id="test_modem_status" class="badge bg-secondary">Pending</span>
          </div>

          <!-- Test: SIM Card -->
          <div class="list-group-item d-flex justify-content-between align-items-center" id="test_sim">
            <div>
              <strong>SIM Card</strong>
              <div class="small text-muted" id="test_sim_detail">Waiting...</div>
            </div>
            <span id="test_sim_status" class="badge bg-secondary">Pending</span>
          </div>

          <!-- Test: Signal Strength -->
          <div class="list-group-item d-flex justify-content-between align-items-center" id="test_signal">
            <div>
              <strong>Signal Strength</strong>
              <div class="small text-muted" id="test_signal_detail">Waiting...</div>
            </div>
            <span id="test_signal_status" class="badge bg-secondary">Pending</span>
          </div>

          <!-- Test: Network Connection -->
          <div class="list-group-item d-flex justify-content-between align-items-center" id="test_network">
            <div>
              <strong>Network Connection</strong>
              <div class="small text-muted" id="test_network_detail">Waiting...</div>
            </div>
            <span id="test_network_status" class="badge bg-secondary">Pending</span>
          </div>
        </div>

        <!-- Logs section -->
        <div class="mt-3">
          <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#selftest_logs_collapse">
            Show detailed logs
          </button>
          <div class="collapse mt-2" id="selftest_logs_collapse">
            <div class="card card-body bg-dark text-light" style="max-height: 250px; overflow-y: auto; font-family: monospace; font-size: 0.75rem;">
              <pre id="selftest_logs" style="margin: 0; white-space: pre-wrap; word-wrap: break-word;"></pre>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div id="selftest_summary" class="me-auto"></div>
        <button type="button" class="btn btn-primary" id="selfTestCopyBtn" onclick="openShareReportModal()" disabled>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share me-1" viewBox="0 0 16 16">
            <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
          </svg>
          Share Report
        </button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="selfTestDoneBtn" disabled>Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Share Report Modal -->
<div class="modal fade" id="shareReportModal" tabindex="-1" aria-labelledby="shareReportModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="shareReportModalLabel">Share Diagnostic Report</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info">
          <strong>Need help?</strong> You can send this diagnostic report to our support team at
          <a href="mailto:contact@aircarto.fr?subject=NebuleAir%20Diagnostic%20Report" class="alert-link">contact@aircarto.fr</a>
          <br><small>Select all the text below (Ctrl+A) and copy it (Ctrl+C), or use the Download button.</small>
        </div>
        <div class="mb-3">
          <textarea id="shareReportText" class="form-control font-monospace" rows="15" readonly style="font-size: 0.75rem; background-color: #1e1e1e; color: #d4d4d4;"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" onclick="downloadReport()">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download me-1" viewBox="0 0 16 16">
            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
          </svg>
          Download (.txt)
        </button>
        <button type="button" class="btn btn-outline-primary" onclick="selectAllReportText()">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cursor-text me-1" viewBox="0 0 16 16">
            <path d="M5 2a.5.5 0 0 1 .5-.5c.862 0 1.573.287 2.06.566.174.099.321.198.44.286.119-.088.266-.187.44-.286A4.165 4.165 0 0 1 10.5 1.5a.5.5 0 0 1 0 1c-.638 0-1.177.213-1.564.434a3.49 3.49 0 0 0-.436.294V7.5H9a.5.5 0 0 1 0 1h-.5v4.272c.1.08.248.187.436.294.387.221.926.434 1.564.434a.5.5 0 0 1 0 1 4.165 4.165 0 0 1-2.06-.566A4.561 4.561 0 0 1 8 13.65a4.561 4.561 0 0 1-.44.285 4.165 4.165 0 0 1-2.06.566.5.5 0 0 1 0-1c.638 0 1.177-.213 1.564-.434.188-.107.335-.214.436-.294V8.5H7a.5.5 0 0 1 0-1h.5V3.228a3.49 3.49 0 0 0-.436-.294A3.166 3.166 0 0 0 5.5 2.5.5.5 0 0 1 5 2z"/>
          </svg>
          Select All
        </button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>