Mercurial > hg > orthanc

view OrthancExplorer/explorer.html @ 3103:81b58b549845

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
back to using 'var' instead of 'let' since let is not supported by many old browsers. All variables declaration have been moved to the top of the function to better show that their scope is the function
author Alain Mazy <alain@mazy.be>
date Thu, 10 Jan 2019 10:51:36 +0100
parents 9b18c8d4d459
children 6aa8d90aeee5
line wrap: on
line source

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Orthanc Explorer</title>

  <link rel="stylesheet" href="libs/jquery.mobile.min.css" />
  <link rel="stylesheet" href="libs/jqtree.css" />
  <link rel="stylesheet" href="libs/jquery.mobile.simpledialog.min.css" />
  <link rel="stylesheet" href="libs/jquery-file-upload/css/style.css" />
  <link rel="stylesheet" href="libs/jquery-file-upload/css/jquery.fileupload-ui.css" />
  <link rel="stylesheet" href="libs/slimbox2/slimbox2.css" />

  <script src="libs/jquery.min.js"></script>
  <script src="libs/jquery.mobile.min.js"></script>
  <script src="libs/jqm.page.params.js"></script>
  <script src="libs/tree.jquery.js"></script>
  <script src="libs/date.js"></script>
  <script src="libs/jquery.mobile.simpledialog2.js"></script>
  <script src="libs/slimbox2.js"></script>
  <script src="libs/jquery.blockui.js"></script>

  <!-- https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin -->
  <script src="libs/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
  <script src="libs/jquery-file-upload/js/jquery.iframe-transport.js"></script>
  <script src="libs/jquery-file-upload/js/jquery.fileupload.js"></script>

  <link rel="stylesheet" href="explorer.css" />
  <script src="file-upload.js"></script>
  <script src="explorer.js"></script>
  <script src="query-retrieve.js"></script>
  <script src="../plugins/explorer.js"></script>
</head>

<body>
  <div data-role="page" id="lookup">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>Lookup studies</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#upload" data-icon="gear" data-role="button">Upload</a>
        <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <form data-ajax="false" id="lookup-form">
        <div data-role="fieldcontain">
          <label for="lookup-patient-id">Patient ID:</label>
          <input type="text" name="lookup-patient-id" id="lookup-patient-id" value="" />
        </div>

        <div data-role="fieldcontain">
          <label for="lookup-patient-name">Patient Name:</label>
          <input type="text" name="lookup-patient-name" id="lookup-patient-name" value="" />
        </div>

        <div data-role="fieldcontain">
          <label for="lookup-accession-number">Accession Number:</label>
          <input type="text" name="lookup-accession-number" id="lookup-accession-number" value="" />
        </div>

        <div data-role="fieldcontain">
          <label for="lookup-study-description">Study Description:</label>
          <input type="text" name="lookup-study-description" id="lookup-study-description" value="" />
        </div>

        <div data-role="fieldcontain">
          <label for="lookup-study-date">Study Date:</label>
          <select name="lookup-study-date" id="lookup-study-date">
          </select>
        </div>

        <fieldset class="ui-grid-b">
          <div class="ui-block-a">
            <a href="#find-patients" data-role="button" data-theme="b" data-direction="reverse">All patients</a>
          </div>
          <div class="ui-block-b">
            <a href="#find-studies" data-role="button" data-theme="b" data-direction="reverse">All studies</a>
          </div>
          <div class="ui-block-c">
            <button id="lookup-submit" type="submit" data-theme="e">Do lookup</button>
          </div>
        </fieldset>
        <div>&nbsp;</div>
      </form>
      <div id="lookup-result">
        <div id="lookup-alert">
          <div class="ui-bar ui-bar-e">
            <h3>Warning:</h3> Your lookup led to many results!
            Showing only <span id="lookup-count">?</span> studies to
            avoid performance issue. Please make your query more
            specific, then relaunch the lookup.
          </div>
          <div>&nbsp;</div>
        </div>
        <ul data-role="listview" data-inset="true" data-filter="true">
        </ul>
      </div>
    </div>
  </div>

  <div data-role="page" id="find-patients">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>All patients</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#upload" data-icon="gear" data-role="button">Upload</a>
        <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <div id="alert-patients">
        <div class="ui-bar ui-bar-e">
          <h3>Warning:</h3> This is a large Orthanc server. Showing
          only <span id="count-patients">?</span> patients to avoid
          performance issue. Make sure to use lookup if targeting
          specific patients!
        </div>
        <div>&nbsp;</div>
      </div>
      <ul id="all-patients" data-role="listview" data-inset="true" data-filter="true">
      </ul>
    </div>
  </div>

  <div data-role="page" id="find-studies">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>All studies</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#upload" data-icon="gear" data-role="button">Upload</a>
        <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <div id="alert-studies">
        <div class="ui-bar ui-bar-e">
          <h3>Warning:</h3> This is a large Orthanc server. Showing
          only <span id="count-studies">?</span> studies to avoid
          performance issue. Make sure to use lookup if targeting
          specific studies!
        </div>
        <div>&nbsp;</div>
      </div>
      <ul id="all-studies" data-role="listview" data-inset="true" data-filter="true">
      </ul>
    </div>
  </div>

  <div data-role="page" id="upload">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>Upload DICOM files</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
    </div>
    <div data-role="content">
      <div>
        <!-- It's very difficult to style a "file" input so we actually hide it and create a "proxy" button that is forwarding its click to the "file" input -->
        <input id="fileupload" type="file" name="files[]" data-url="../instances/" style="display:none" multiple>
        <ul data-role="listview" data-inset="true">
          <li id="fileupload-proxy" onclick="$('#fileupload').click()" data-icon="arrow-r" data-theme="d"><a href="#">Select
              files to upload ...</a></li>
        </ul>
      </div>
      <p>
        <ul data-role="listview" data-inset="true">
          <li data-icon="arrow-r" data-theme="e"><a href="#" id="upload-button">Start the upload</a></li>
          <!--li data-icon="gear" data-theme="e"><a href="#" id="upload-abort" class="ui-disabled">Abort the current upload</a></li-->
          <li data-icon="delete" data-theme="e"><a href="#" id="upload-clear">Clear the pending uploads</a></li>
        </ul>
        <div id="progress" class="ui-corner-all">
          <span class="bar ui-corner-all"></span>
          <div class="label"></div>
        </div>
      </p>
      <ul id="upload-list" data-role="listview" data-inset="true">
        <li data-role="list-divider">Drag and drop DICOM files here</li>
      </ul>
      <div class="ui-bar ui-bar-e" id="issue-21-warning">
        <h3>Warning:</h3> Orthanc issue #21: On Firefox, especially on Linux & OSX systems, files might be missing when
        using drag-and-drop. Use the "Select files to upload" button instead !
      </div>
    </div>
  </div>

  <div data-role="page" id="patient">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>Patient</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#upload" data-icon="gear" data-role="button">Upload</a>
        <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <div class="ui-grid-a">
        <div class="ui-block-a" style="width:30%">
          <div style="padding-right:10px">
            <ul data-role="listview" data-inset="true" data-theme="a" id="patient-info">
            </ul>
            <p>
              <div class="switch-container">
                <select name="protection" id="protection" data-role="slider">
                  <option value="off">Unprotected</option>
                  <option value="on">Protected</option>
                </select>
              </div>
            </p>
            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Interact</li>
              <li data-icon="delete"><a href="#" id="patient-delete">Delete this patient</a></li>
              <li data-icon="forward"><a href="#" id="patient-store">Send to remote modality</a></li>
              <li data-icon="star"><a href="#" id="patient-anonymize">Anonymize</a></li>
            </ul>

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Access</li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="patient-anonymized-from">Before anonymization</a>
              </li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="patient-modified-from">Before modification</a>
              </li>
              <li data-icon="gear"><a href="#" id="patient-archive">Download ZIP</a></li>
              <li data-icon="gear"><a href="#" id="patient-media">Download DICOMDIR</a></li>
            </ul>
          </div>
        </div>
        <div class="ui-block-b" style="width:70%">
          <div style="padding:10px">
            <ul id="list-studies" data-role="listview" data-inset="true" data-filter="true">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div data-role="page" id="study">
    <div data-role="header">
      <h1>
        <span class="orthanc-name"></span>
        <a href="#" class="patient-link">Patient</a> &raquo;
        Study
      </h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#upload" data-icon="gear" data-role="button">Upload</a>
        <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <div class="ui-grid-a">
        <div class="ui-block-a" style="width:30%">
          <div style="padding-right:10px">
            <ul data-role="listview" data-inset="true" data-theme="a" id="study-info">
            </ul>

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Interact</li>
              <li data-icon="delete"><a href="#" id="study-delete">Delete this study</a></li>
              <li data-icon="forward"><a href="#" id="study-store">Send to DICOM modality</a></li>
              <li data-icon="star"><a href="#" id="study-anonymize">Anonymize</a></li>
            </ul>

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Access</li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="study-anonymized-from">Before anonymization</a>
              </li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="study-modified-from">Before modification</a>
              </li>
              <li data-icon="gear"><a href="#" id="study-archive">Download ZIP</a></li>
              <li data-icon="gear"><a href="#" id="study-media">Download DICOMDIR</a></li>
            </ul>
          </div>
        </div>
        <div class="ui-block-b" style="width:70%">
          <div style="padding:10px">
            <ul id="list-series" data-role="listview" data-inset="true" data-filter="true">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div data-role="page" id="series">
    <div data-role="header">
      <h1>
        <span class="orthanc-name"></span>
        <a href="#" class="patient-link">Patient</a> &raquo;
        <a href="#" class="study-link">Study</a> &raquo;
        Series
      </h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#upload" data-icon="gear" data-role="button">Upload</a>
        <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <div class="ui-grid-a">
        <div class="ui-block-a" style="width:30%">
          <div style="padding-right:10px">
            <ul data-role="listview" data-inset="true" data-theme="a" id="series-info">
            </ul>

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Interact</li>
              <li data-icon="delete"><a href="#" id="series-delete">Delete this series</a></li>
              <li data-icon="forward"><a href="#" id="series-store">Send to DICOM modality</a></li>
              <li data-icon="star"><a href="#" id="series-anonymize">Anonymize</a></li>
            </ul>

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Access</li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="series-anonymized-from">Before anonymization</a>
              </li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="series-modified-from">Before modification</a>
              </li>
              <li data-icon="search"><a href="#" id="series-preview">Preview this series</a></li>
              <li data-icon="gear"><a href="#" id="series-archive">Download ZIP</a></li>
              <li data-icon="gear"><a href="#" id="series-media">Download DICOMDIR</a></li>
            </ul>
          </div>
        </div>
        <div class="ui-block-b" style="width:70%">
          <div style="padding:10px">
            <ul id="list-instances" data-role="listview" data-inset="true" data-filter="true">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div data-role="page" id="instance">
    <div data-role="header">
      <h1>
        <span class="orthanc-name"></span>
        <a href="#" class="patient-link">Patient</a> &raquo;
        <a href="#" class="study-link">Study</a> &raquo;
        <a href="#" class="series-link">Series</a> &raquo;
        Instance
      </h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#upload" data-icon="gear" data-role="button">Upload</a>
        <a href="#query-retrieve" data-icon="search" data-role="button">Query/Retrieve</a>
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <div class="ui-grid-a">
        <div class="ui-block-a" style="width:30%">
          <div style="padding-right:10px">
            <ul data-role="listview" data-inset="true" data-theme="a" id="instance-info">
            </ul>

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Interact</li>
              <li data-icon="delete"><a href="#" id="instance-delete">Delete this instance</a></li>
              <li data-icon="forward"><a href="#" id="instance-store">Send to DICOM modality</a></li>
            </ul>

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="c">
              <li data-role="list-divider">Access</li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="instance-anonymized-from">Before anonymization</a>
              </li>
              <li data-icon="info" data-theme="e" style="display:none">
                <a href="#" id="instance-modified-from">Before modification</a>
              </li>
              <li data-icon="arrow-d"><a href="#" id="instance-download-dicom">Download the DICOM file</a></li>
              <li data-icon="arrow-d"><a href="#" id="instance-download-json">Download the JSON file</a></li>
              <li data-icon="search"><a href="#" id="instance-preview">Preview the instance</a></li>
            </ul>
          </div>
        </div>
        <div class="ui-block-b" style="width:70%">
          <div style="padding:10px">
            <div class="ui-body ui-body-b">
              <h1>DICOM Tags</h1>
              <p align="right">
                <input type="checkbox" id="show-tag-name" checked="checked" class="custom" data-mini="true" />
                <label for="show-tag-name">Show tag description</label>
              </p>
              <div id="dicom-tree"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div data-role="page" id="plugins">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>Plugins</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
    </div>
    <div data-role="content">
      <ul id="all-plugins" data-role="listview" data-inset="true" data-filter="true">
      </ul>
    </div>
  </div>

  <div data-role="page" id="query-retrieve">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (1/4)</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
    </div>
    <div data-role="content">
      <form data-ajax="false">
        <div data-role="fieldcontain">
          <label for="qr-server">DICOM server:</label>
          <select name="qr-server" id="qr-server">
          </select>
        </div>

        <div data-role="fieldcontain" id="qr-fields">
          <fieldset data-role="controlgroup">
            <legend>Field of interest:</legend>
            <input type="radio" name="qr-field" id="qr-patient-id" value="PatientID" checked="checked" />
            <label for="qr-patient-id">Patient ID</label>
            <input type="radio" name="qr-field" id="qr-patient-name" value="PatientName" />
            <label for="qr-patient-name">Patient Name</label>
            <input type="radio" name="qr-field" id="qr-accession-number" value="AccessionNumber" />
            <label for="qr-accession-number">Accession Number</label>
            <input type="radio" name="qr-field" id="qr-study-description" value="StudyDescription" />
            <label for="qr-study-description">Study Description</label>
          </fieldset>
        </div>

        <div data-role="fieldcontain">
          <label for="qr-value">Value for this field:</label>
          <input type="text" name="qr-value" id="qr-value" value="*" />
        </div>

        <div data-role="fieldcontain">
          <label for="qr-date">Study date:</label>
          <select name="qr-date" id="qr-date">
          </select>
        </div>

        <div data-role="fieldcontain" id="qr-modalities">
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
              <legend>Modalities:</legend>
              <input type="checkbox" name="CR" id="qr-cr" class="custom" /> <label for="qr-cr">CR</label>
              <input type="checkbox" name="CT" id="qr-ct" class="custom" /> <label for="qr-ct">CT</label>
              <input type="checkbox" name="MR" id="qr-mr" class="custom" /> <label for="qr-mr">MR</label>
              <input type="checkbox" name="NM" id="qr-nm" class="custom" /> <label for="qr-nm">NM</label>
              <input type="checkbox" name="PT" id="qr-pt" class="custom" /> <label for="qr-pt">PT</label>
              <input type="checkbox" name="US" id="qr-us" class="custom" /> <label for="qr-us">US</label>
              <input type="checkbox" name="XA" id="qr-xa" class="custom" /> <label for="qr-xa">XA</label>
              <input type="checkbox" name="DR" id="qr-dr" class="custom" /> <label for="qr-dr">DR</label>
              <input type="checkbox" name="DX" id="qr-dx" class="custom" /> <label for="qr-dx">DX</label>
            </fieldset>
          </div>
        </div>

        <fieldset class="ui-grid-a">
          <div class="ui-block-a">
            <button id="qr-echo" data-theme="a">Test Echo</button>
          </div>
          <div class="ui-block-b">
            <button id="qr-submit" type="submit" data-theme="b">Search studies</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>


  <div data-role="page" id="query-retrieve-2">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (2/4)</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true" data-filter="true" data-split-icon="arrow-d" data-split-theme="b">
      </ul>
    </div>
  </div>


  <div data-role="page" id="query-retrieve-3">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (3/4)</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true" data-filter="true">
      </ul>
    </div>
  </div>


  <div data-role="page" id="query-retrieve-4">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>DICOM Query/Retrieve (4/4)</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <a href="#query-retrieve" data-icon="search" class="ui-btn-right" data-direction="reverse">Query/Retrieve</a>
    </div>

    <div data-role="content">
      <form data-ajax="false" id="retrieve-form">
        <div data-role="fieldcontain">
          <label for="retrieve-target">Target AET:</label>
          <input type="text" name="retrieve-target" id="retrieve-target"></input>
        </div>

        <fieldset class="ui-grid-b">
          <div class="ui-block-a"></div>
          <div class="ui-block-b">
            <button id="retrieve-submit" type="submit" data-theme="b">Retrieve</button>
          </div>
          <div class="ui-block-c"></div>
        </fieldset>
      </form>
    </div>
  </div>


  <div data-role="page" id="jobs">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>Jobs</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
    </div>
    <div data-role="content">
      <ul id="all-jobs" data-role="listview" data-inset="true" data-filter="true">
      </ul>
    </div>
  </div>

  <div data-role="page" id="job">
    <div data-role="header">
      <h1><span class="orthanc-name"></span>Job</h1>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-left">
        <a href="#lookup" data-icon="arrow-r" data-role="button" data-direction="reverse">Lookup</a>
        <a href="#plugins" data-icon="grid" data-role="button" data-direction="reverse">Plugins</a>
      </div>
      <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
        <a href="#jobs" data-icon="refresh" data-role="button" data-direction="reverse">Jobs</a>
      </div>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true" data-filter="true" id="job-info">
      </ul>

      <fieldset class="ui-grid-b">
        <div class="ui-block-a"></div>
        <div class="ui-block-b">
          <button id="job-cancel" data-theme="b">Cancel job</button>
          <button id="job-resubmit" data-theme="b">Resubmit job</button>
          <button id="job-pause" data-theme="b">Pause job</button>
          <button id="job-resume" data-theme="b">Resume job</button>
        </div>
        <div class="ui-block-c"></div>
      </fieldset>
    </div>
  </div>

  <div id="peer-store" style="display:none;" class="ui-body-c">
    <p align="center"><b>Sending to Orthanc peer...</b></p>
    <p><img src="libs/images/ajax-loader.gif" alt="" /></p>
  </div>

  <div id="dicom-store" style="display:none;" class="ui-body-c">
    <p align="center"><b>Sending to DICOM modality...</b></p>
    <p><img src="libs/images/ajax-loader.gif" alt="" /></p>
  </div>

  <div id="info-retrieve" style="display:none;" class="ui-body-c">
    <p align="center"><b>Retrieving images from DICOM modality...</b></p>
    <p><img src="libs/images/ajax-loader.gif" alt="" /></p>
  </div>

  <div id="dialog" style="display:none">
  </div>
</body>

</html>