# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1561060569 -7200
# Node ID bae597dc9837d9b73e1cc2c80bd514281bddbb13
# Parent  86e5357039e93c7050296b3a3ee331a32d2209e6
driving WADO-RS client from Web interface

diff -r 86e5357039e9 -r bae597dc9837 WebApplication/app.js
--- a/WebApplication/app.js	Thu Jun 20 21:16:12 2019 +0200
+++ b/WebApplication/app.js	Thu Jun 20 21:56:09 2019 +0200
@@ -43,6 +43,10 @@
     lookup: { },
     studies: [ ],
     currentStudy: null,
+    jobId: '',
+    jobLevel: '',
+    jobUri: '',
+    jobDetails: '',
     studiesFields: [
       {
         key: DICOM_TAG_PATIENT_ID + '.Value',
@@ -149,6 +153,16 @@
     ShowErrorModal: function() {
       app.$refs['modal-error'].show();
     },
+    RefreshJobDetails: function() {
+      axios
+        .get(app.jobUri)
+        .then(response => {
+          app.jobDetails = response.data;
+        })
+        .catch(response => {
+          app.jobDetails = 'Job details are not available';
+        })
+    },
 
     
     /**
@@ -232,6 +246,19 @@
       
       app.$refs['study-details'].show();
     },
+    RetrieveStudy: function(study) {
+      axios
+        .post('../../servers/' + app.activeServer + '/wado', {
+          'Uri' : '/studies/' + study[DICOM_TAG_STUDY_INSTANCE_UID].Value
+        })
+        .then(response => {
+          app.jobLevel = 'study';
+          app.jobId = response.data.ID;
+          app.jobUri = app.orthancExplorerUri + '/' + response.data.Path;
+          app.$refs['retrieve-job'].show();
+          app.RefreshJobDetails();
+        });
+    },
     ConfirmDeleteStudy: function(study) {
       app.studyToDelete = study;
       app.$bvModal.show('study-delete-confirm');
@@ -282,6 +309,20 @@
       
       app.$refs['series-details'].show();
     },
+    RetrieveSeries: function(series) {
+      axios
+        .post('../../servers/' + app.activeServer + '/wado', {
+          'Uri' : ('/studies/' + app.currentStudy + 
+                   '/series/' + series[DICOM_TAG_SERIES_INSTANCE_UID].Value)
+        })
+        .then(response => {
+          app.jobLevel = 'series';
+          app.jobId = response.data.ID;
+          app.jobUri = app.orthancExplorerUri + '/' + response.data.Path;
+          app.$refs['retrieve-job'].show();
+          app.RefreshJobDetails();
+        });
+    },
     OpenSeriesPreview: function(series) {
       axios
         .post('../../servers/' + app.activeServer + '/get', {
diff -r 86e5357039e9 -r bae597dc9837 WebApplication/index.html
--- a/WebApplication/index.html	Thu Jun 20 21:16:12 2019 +0200
+++ b/WebApplication/index.html	Thu Jun 20 21:56:09 2019 +0200
@@ -66,7 +66,7 @@
         </template>
         <div class="d-block">
           <p>
-            There was an error connecting to "{{ app.activeServer }}" server.
+            There was an error connecting to "{{ activeServer }}" server.
           </p>
         </div>
       </b-modal>
@@ -106,7 +106,7 @@
 
       <!-- STUDIES -->
 
-      <hr  v-show="showStudies" ref="studies-top" />
+      <hr v-show="showStudies" ref="studies-top" />
       <div class="row" v-show="showStudies">
         <h1>Studies</h1>
       </div>
@@ -120,11 +120,17 @@
         <b-table striped hover :current-page="currentPage" :per-page="perPage"
                  :items="studies" :fields="studiesFields" :fixed="false">
           <template slot="operations" slot-scope="data">
-            <b-button @click="OpenSeries(data.item)" title="Open series"><i class="fa fa-folder-open"></i></b-button>
-            <b-button @click="OpenStudyDetails(data.item)" title="Open tags"><i class="fa fa-address-card"></i></b-button>
-            <b-button title="Retrieve study using WADO-RS"><i class="fa fa-cloud-download"></i></b-button>
+            <b-button @click="OpenSeries(data.item)" title="Open series">
+              <i class="fa fa-folder-open"></i>
+            </b-button>
+            <b-button @click="OpenStudyDetails(data.item)" title="Open tags">
+              <i class="fa fa-address-card"></i>
+            </b-button>
+            <b-button @click="RetrieveStudy(data.item)" title="Retrieve study using WADO-RS">
+              <i class="fa fa-cloud-download"></i>
+            </b-button>
             <b-button @click="ConfirmDeleteStudy(data.item)"
-                      v-if="serversInfo[lookup.server].HasDelete" title="Delete remote study">
+                      v-if="serversInfo[activeServer].HasDelete" title="Delete remote study">
               <i class="fa fa-trash"></i>
             </b-button>
           </template>
@@ -167,11 +173,17 @@
         <b-table striped hover :current-page="currentPage" :per-page="perPage"
                  :items="series" :fields="seriesFields" :fixed="false">
           <template slot="operations" slot-scope="data">
-            <b-button @click="OpenSeriesPreview(data.item)" title="Preview"><i class="fa fa-eye"></i></b-button>
-            <b-button @click="OpenSeriesDetails(data.item)" title="Open tags"><i class="fa fa-address-card"></i></b-button>
-            <b-button title="Retrieve series using WADO-RS"><i class="fa fa-cloud-download"></i></b-button>
+            <b-button @click="OpenSeriesPreview(data.item)" title="Preview">
+              <i class="fa fa-eye"></i>
+            </b-button>
+            <b-button @click="OpenSeriesDetails(data.item)" title="Open tags">
+              <i class="fa fa-address-card"></i>
+            </b-button>
+            <b-button @click="RetrieveSeries(data.item)" title="Retrieve series using WADO-RS">
+              <i class="fa fa-cloud-download"></i>
+            </b-button>
             <b-button @click="ConfirmDeleteSeries(data.item)"
-                      v-if="serversInfo[lookup.server].HasDelete" title="Delete remote series">
+                      v-if="serversInfo[activeServer].HasDelete" title="Delete remote series">
               <i class="fa fa-trash"></i>
             </b-button>
           </template>
@@ -214,6 +226,31 @@
         </b-modal>
       </div>
 
+
+      <b-modal ref="retrieve-job" size="xl" ok-only="true">
+        <template slot="modal-title">
+          Retrieving {{ jobLevel }}
+        </template>
+        <div class="d-block">
+          <p>
+            Orthanc is now running a background job to retrieve the
+            {{ jobLevel }} from remote server "{{ activeServer }}" using
+            WADO-RS.
+          </p>
+          <p>
+            Job ID: <tt>{{ jobId }}</tt>
+          </p>
+          <p>
+            Job details:
+          </p>
+          <pre>{{ jobDetails }}</pre>
+          <p>
+            <b-button variant="success" @click="RefreshJobDetails()">Refresh job details</b-button>
+          </p>
+        </div>
+      </b-modal>
+
+
       <p style="height:5em"></p>
     </div>