ecw-charge-validation/tests/fixtures/progress_note_delayed.html

<!doctype html>
<!--
  A claim screen's Prog. Notes button whose note arrives LATE — the shape of
  the 3 misses in ~115 note reads behind review item D8 (2026-10-01): the
  viewer had opened, but the note document inside it had not loaded yet, so
  a fixed 3 s sleep and one probe reported "nothing" and the claim went out
  Clean with telehealth never checked.

  Same split as progress_note_host.html: the note is a whole document in an
  IFRAME inside the viewer modal, and Close (eCW's own "Viwer" typo) lives on
  the parent page. The note itself is progress_note.html, made-up data.

  The mode is chosen by query string:
    ?mode=slow&delay=3500  viewer opens at once on an empty frame; the note
                           document is loaded into it `delay` ms later
                           (3.5 s by default — longer than the old 3 s sleep)
    ?mode=never            viewer opens on a frame that never gets a note
    ?mode=reclick          the first click does nothing at all; the second
                           opens the viewer with the note
    ?mode=growing          the note keeps gaining sections every 200 ms and
                           never settles
    ?mode=empty            the note's header (#mainThead) arrives and nothing
                           under it ever does: a note marker, 0 sections
    ?mode=stalled&delay=1500
                           the note document is streamed: its header and two
                           sections are parsed, then the "server" stalls for
                           `delay` ms (readyState stays "loading") before the
                           Procedure Codes and the end of the document arrive
    ?mode=reused&delay=1500
                           a viewer from an EARLIER claim is already in the
                           DOM, hidden (Close only hides it), its iframe still
                           holding that claim's note (procedure A1111). The
                           click shows that same viewer again and its iframe
                           gets this claim's note (H0023) `delay` ms later
    ?mode=tab&delay=2000   the click opens a new tab at once on about:blank;
                           the note is loaded into it `delay` ms later (past
                           the halfway point of a 3 s wait) and there is no
                           in-page viewer at all
-->
<html>
<head><title>Prog. Notes, delayed</title></head>
<body>

<button type="button" ng-click="viewProgNote()">Prog. Notes</button>

<script>
  var params = new URLSearchParams(location.search);
  var mode = params.get('mode') || 'slow';
  var delay = parseInt(params.get('delay') || '3500', 10);
  window.progNoteClicks = 0;

  function openViewer() {
    var m = document.createElement('div');
    m.className = 'modal in';
    m.id = 'progressNoteViewerDiv6666666666666';
    m.style.display = 'block';
    m.innerHTML =
      '<div class="modal-dialog"><div class="modal-content">'
      + '<div class="modal-body">'
      + '<iframe id="progressNoteFrame" src="about:blank" '
      + 'style="width:900px;height:400px;border:0"></iframe>'
      + '</div>'
      + '<div class="modal-footer">'
      + '<button type="button" ng-click="closeProgressNoteViwer()">Close</button>'
      + '</div>'
      + '</div></div>';
    document.body.appendChild(m);
    m.querySelector('[ng-click="closeProgressNoteViwer()"]')
     .addEventListener('click', function () { m.remove(); });
    return m.querySelector('iframe');
  }

  // A note that never stops growing: a header (the note marker) and one more
  // prisma-section every 200 ms.
  var GROWING =
    '<html><body><table><thead id="mainThead"><tr><td>Header</td></tr></thead>'
    + '<tbody id="b"></tbody></table><script>'
    + 'var n = 0; setInterval(function () {'
    + ' var tr = document.createElement("tr");'
    + ' tr.setAttribute("prisma-section", "Section " + (++n));'
    + ' tr.innerHTML = "<td>line " + n + "</td>";'
    + ' document.getElementById("b").appendChild(tr);'
    + '}, 200);</' + 'script></body></html>';

  // The header alone: the note marker is there, not one section ever is.
  var EMPTY =
    '<html><body><table><thead id="mainThead"><tr><td>Header</td></tr>'
    + '</thead><tbody></tbody></table></body></html>';

  // A small whole note with one procedure code — made-up data.
  function noteDoc(code) {
    return '<html><body><table><thead id="mainThead"><tr><td>Header</td>'
      + '</tr></thead><tbody>'
      + '<tr prisma-section="Assessments"><td>1. Illness - R69</td></tr>'
      + '<tr prisma-section="Procedure Codes"><td><ul><li>' + code
      + ' Made-up procedure. Modifiers: GT</li></ul></td></tr>'
      + '</tbody></table></body></html>';
  }

  // 'reused': the earlier claim's viewer, hidden by its Close, still in the
  // DOM with that claim's note in its iframe.
  var leftover = null;
  if (mode === 'reused') {
    leftover = openViewer();
    leftover.srcdoc = noteDoc('A1111');
    var lm = leftover.closest('.modal');
    lm.style.display = 'none';
    var lc = lm.querySelector('[ng-click="closeProgressNoteViwer()"]');
    var hide = lc.cloneNode(true);       // drop openViewer's remove() handler
    lc.replaceWith(hide);
    hide.addEventListener('click', function () { lm.style.display = 'none'; });
  }

  document.querySelector('[ng-click="viewProgNote()"]')
    .addEventListener('click', function () {
      window.progNoteClicks++;
      if (mode === 'reclick' && window.progNoteClicks === 1) return;
      if (mode === 'reused') {
        leftover.closest('.modal').style.display = 'block';
        setTimeout(function () { leftover.srcdoc = noteDoc('H0023'); }, delay);
        return;
      }
      if (mode === 'tab') {
        var w = window.open('about:blank', '_blank');
        setTimeout(function () {
          w.location.href = new URL('progress_note.html', location.href).href;
        }, delay);
        return;
      }
      var frame = openViewer();
      if (mode === 'stalled') {
        // document.open() without close(): readyState stays "loading"
        // until the rest of the document is written — a streamed response.
        var d = frame.contentDocument;
        d.open();
        d.write('<html><body><table><thead id="mainThead"><tr><td>Header'
          + '</td></tr></thead><tbody>'
          + '<tr prisma-section="History of Present Illness"><td>hpi</td></tr>'
          + '<tr prisma-section="Assessments"><td>1. Illness - R69</td></tr>');
        setTimeout(function () {
          d.write('<tr prisma-section="Procedure Codes"><td><ul><li>H0023 '
            + 'Behavioral Health Outreach Service (TH). Modifiers: GT</li>'
            + '</ul></td></tr></tbody></table></body></html>');
          d.close();
        }, delay);
        return;
      }
      if (mode === 'slow') {
        setTimeout(function () { frame.src = 'progress_note.html'; }, delay);
      } else if (mode === 'reclick') {
        frame.src = 'progress_note.html';
      } else if (mode === 'growing') {
        frame.srcdoc = GROWING;
      } else if (mode === 'empty') {
        frame.srcdoc = EMPTY;
      }
      // 'never': the frame stays about:blank.
    });
</script>

</body>
</html>