Mercurial > hg > orthanc
changeset 3102:9b18c8d4d459
'fix' for Orthanc issue #21: added a select file button + a warning specific for Firefox users
| author | Alain Mazy <alain@mazy.be> |
|---|---|
| date | Thu, 10 Jan 2019 10:10:26 +0100 |
| parents | 3db9697a0a58 |
| children | 81b58b549845 |
| files | .hgignore OrthancExplorer/explorer.html OrthancExplorer/file-upload.js |
| diffstat | 3 files changed, 588 insertions(+), 565 deletions(-) [+] |
line wrap: on
line diff
--- a/.hgignore Sat Dec 29 14:21:43 2018 +0100 +++ b/.hgignore Thu Jan 10 10:10:26 2019 +0100 @@ -3,3 +3,4 @@ CMakeLists.txt.user *.cpp.orig *.h.orig +.vs/
--- a/OrthancExplorer/explorer.html Sat Dec 29 14:21:43 2018 +0100 +++ b/OrthancExplorer/explorer.html Thu Jan 10 10:10:26 2019 +0100 @@ -1,627 +1,639 @@ <!DOCTYPE html> <html> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>Orthanc Explorer</title> + +<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> + <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" /> - <!-- 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> + <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> + <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-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> </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> </div> - </div> - <ul data-role="listview" data-inset="true" data-filter="true"> - </ul> - </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="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 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-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 data-role="fieldcontain"> + <label for="lookup-study-date">Study Date:</label> + <select name="lookup-study-date" id="lookup-study-date"> + </select> </div> - </div> - <div data-role="content"> - <div id="alert-patients"> + + <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> </div> + </form> + <div id="lookup-result"> + <div id="lookup-alert"> <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! + <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> </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> </div> - </div> - <ul id="all-studies" data-role="listview" data-inset="true" data-filter="true"> + <ul data-role="listview" data-inset="true" data-filter="true"> </ul> </div> </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 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-role="content"> - <div style="display:none"> - <input id="fileupload" type="file" name="files[]" data-url="../instances/" multiple> + <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> - <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> </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> </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 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-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> + <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> + <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 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 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> » - 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 data-role="page" id="study"> + <div data-role="header"> + <h1> + <span class="orthanc-name"></span> + <a href="#" class="patient-link">Patient</a> » + 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 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 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 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> + </div> + </div> - <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> + <div data-role="page" id="series"> + <div data-role="header"> + <h1> + <span class="orthanc-name"></span> + <a href="#" class="patient-link">Patient</a> » + <a href="#" class="study-link">Study</a> » + 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="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> + <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 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 data-role="page" id="instance"> + <div data-role="header"> + <h1> + <span class="orthanc-name"></span> + <a href="#" class="patient-link">Patient</a> » + <a href="#" class="study-link">Study</a> » + <a href="#" class="series-link">Series</a> » + 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 data-role="page" id="series"> - <div data-role="header"> - <h1> - <span class="orthanc-name"></span> - <a href="#" class="patient-link">Patient</a> » - <a href="#" class="study-link">Study</a> » - 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> + </div> - <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> + <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> - <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 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="page" id="instance"> - <div data-role="header"> - <h1> - <span class="orthanc-name"></span> - <a href="#" class="patient-link">Patient</a> » - <a href="#" class="study-link">Study</a> » - <a href="#" class="series-link">Series</a> » - 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 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-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> + <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> - <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 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> - </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="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 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> - <div data-role="content"> - <ul id="all-plugins" data-role="listview" data-inset="true" data-filter="true"> - </ul> + <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="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 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> - <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 class="ui-block-b"> + <button id="retrieve-submit" type="submit" data-theme="b">Retrieve</button> </div> <div class="ui-block-c"></div> - </fieldset> + </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> - <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> + <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="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="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="dialog" style="display:none" > - </div> - </body> -</html> + <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> \ No newline at end of file
--- a/OrthancExplorer/file-upload.js Sat Dec 29 14:21:43 2018 +0100 +++ b/OrthancExplorer/file-upload.js Thu Jan 10 10:10:26 2019 +0100 @@ -27,11 +27,7 @@ $('#progress .label').text('Failure'); }) .bind('fileuploaddrop', function (e, data) { - let target = $('#upload-list'); - $.each(data.files, function (index, file) { - target.append('<li class="pending-file">' + file.name + '</li>'); - }); - target.listview('refresh'); + appendFilesToUploadList(data.files); }) .bind('fileuploadsend', function (e, data) { // Update the progress bar. Note: for some weird reason, the @@ -45,14 +41,28 @@ }); }); +function appendFilesToUploadList(files) { + let target = $('#upload-list'); + $.each(files, function (index, file) { + target.append('<li class="pending-file">' + file.name + '</li>'); + }); + target.listview('refresh'); +} +$('#fileupload').live('change', function (e) { + appendFilesToUploadList(e.target.files); +}) $('#upload').live('pageshow', function() { - alert('WARNING - This page is currently affected by Orthanc issue #21: ' + - '"DICOM files might be missing after uploading with Mozilla Firefox." ' + - 'Do not use this upload feature for clinical uses, or carefully ' + - 'check that all instances have been properly received by Orthanc. ' + - 'Please use the command-line "ImportDicomFiles.py" script to circumvent this issue.'); + if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { + $("#issue-21-warning").css('display', 'none'); + } + + // alert('WARNING - This page is currently affected by Orthanc issue #21: ' + + // '"DICOM files might be missing after uploading with Mozilla Firefox." ' + + // 'Do not use this upload feature for clinical uses, or carefully ' + + // 'check that all instances have been properly received by Orthanc. ' + + // 'Please use the command-line "ImportDicomFiles.py" script to circumvent this issue.'); $('#fileupload').fileupload('enable'); });