Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/index.html @ 1709:2931f5e15320
download study from Stone Web viewer
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Mon, 30 Nov 2020 15:36:40 +0100 |
parents | 3d62634d442f |
children | 673c163e1b3e |
comparison
equal
deleted
inserted
replaced
1708:eb59fbee071e | 1709:2931f5e15320 |
---|---|
140 <ul class="dropdown-menu checkbox-menu allow-focus"> | 140 <ul class="dropdown-menu checkbox-menu allow-focus"> |
141 <li v-for="study in studies" | 141 <li v-for="study in studies" |
142 v-bind:class="{ active: study.selected }" | 142 v-bind:class="{ active: study.selected }" |
143 @click="study.selected = !study.selected"> | 143 @click="study.selected = !study.selected"> |
144 <a> | 144 <a> |
145 {{ study.tags['0008,1030'] }} | 145 {{ study.tags[STUDY_DESCRIPTION] }} |
146 <small v-if="study.tags['0008,0020'].length > 0"> | 146 <small v-if="study.tags[STUDY_DATE].length > 0"> |
147 [{{ FormatDate(study.tags['0008,0020']) }}] | 147 [{{ FormatDate(study.tags[STUDY_DATE]) }}] |
148 </small> | 148 </small> |
149 <span v-if="study.selected"> <i class="fa fa-check"></i></span> | 149 <span v-if="study.selected"> <i class="fa fa-check"></i></span> |
150 </a> | 150 </a> |
151 </li> | 151 </li> |
152 </ul> | 152 </ul> |
171 <div v-bind:class="'wvStudyIsland--' + study.color"> | 171 <div v-bind:class="'wvStudyIsland--' + study.color"> |
172 <div v-bind:class="'wvStudyIsland__header--' + study.color"> | 172 <div v-bind:class="'wvStudyIsland__header--' + study.color"> |
173 <!-- Actions --> | 173 <!-- Actions --> |
174 <div class="wvStudyIsland__actions" | 174 <div class="wvStudyIsland__actions" |
175 v-bind:class="{ 'wvStudyIsland__actions--oneCol': leftMode == 'small' }"> | 175 v-bind:class="{ 'wvStudyIsland__actions--oneCol': leftMode == 'small' }"> |
176 <a class="wvButton"> | 176 <a class="wvButton" |
177 v-show="globalConfiguration.DownloadStudyEnabled && 'OrthancApiRoot' in globalConfiguration"> | |
177 <!-- download --> | 178 <!-- download --> |
178 <i class="fa fa-download"></i> | 179 <i class="fa fa-download" v-show="!creatingArchive" |
180 data-toggle="tooltip" data-title="Download the study" | |
181 @click="DownloadStudy(study.tags[STUDY_INSTANCE_UID])"></i> | |
182 <i class="fas fa-sync fa-spin" v-show="creatingArchive" | |
183 data-toggle="tooltip" data-title="A ZIP archive is being created by Orthanc..."></i> | |
179 </a> | 184 </a> |
180 </div> | 185 </div> |
181 | 186 |
182 <!-- Title --> | 187 <!-- Title --> |
183 {{ study.tags['0008,1030'] }} | 188 {{ study.tags[STUDY_DESCRIPTION] }} |
184 <br/> | 189 <br/> |
185 <small>{{ FormatDate(study.tags['0008,0020']) }}</small> | 190 <small>{{ FormatDate(study.tags[STUDY_DATE]) }}</small> |
186 </div> | 191 </div> |
187 | 192 |
188 <div class="wvStudyIsland__main"> | 193 <div class="wvStudyIsland__main"> |
189 <ul class="wvSerieslist"> | 194 <ul class="wvSerieslist"> |
190 | 195 |
191 <!-- Series without multiple multiframe instances --> | 196 <!-- Series without multiple multiframe instances --> |
192 <span v-for="seriesIndex in study.series"> | 197 <span v-for="seriesIndex in study.series"> |
193 <li class="wvSerieslist__seriesItem" | 198 <li class="wvSerieslist__seriesItem" |
194 v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" | 199 v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags[SERIES_INSTANCE_UID]), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" |
195 v-on:dragstart="SeriesDragStart($event, seriesIndex)" | 200 v-on:dragstart="SeriesDragStart($event, seriesIndex)" |
196 v-on:click="ClickSeries(seriesIndex)" | 201 v-on:click="ClickSeries(seriesIndex)" |
197 v-if="series[seriesIndex].multiframeInstances === null"> | 202 v-if="series[seriesIndex].multiframeInstances === null"> |
198 <div class="wvSerieslist__picture" style="z-index:0" | 203 <div class="wvSerieslist__picture" style="z-index:0" |
199 draggable="true" | 204 draggable="true" |
212 <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO" | 217 <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO" |
213 class="wvSerieslist__placeholderIcon fa fa-video-video"></i> | 218 class="wvSerieslist__placeholderIcon fa fa-video-video"></i> |
214 | 219 |
215 <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)" | 220 <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)" |
216 class="wvSerieslist__placeholderIcon" | 221 class="wvSerieslist__placeholderIcon" |
217 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']"> | 222 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags[MODALITY] + '] ' + series[seriesIndex].tags[SERIES_DESCRIPTION]"> |
218 <i v-if="series[seriesIndex].type == stone.ThumbnailType.NO_PREVIEW" | 223 <i v-if="series[seriesIndex].type == stone.ThumbnailType.NO_PREVIEW" |
219 class="fa fa-eye-slash"></i> | 224 class="fa fa-eye-slash"></i> |
220 | 225 |
221 <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE" | 226 <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE" |
222 v-bind:src="series[seriesIndex].thumbnail" | 227 v-bind:src="series[seriesIndex].thumbnail" |
223 style="vertical-align:baseline" | 228 style="vertical-align:baseline" |
224 width="65px" height="65px" | 229 width="65px" height="65px" |
225 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']" | 230 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags[MODALITY] + '] ' + series[seriesIndex].tags[SERIES_DESCRIPTION]" |
226 /> | 231 /> |
227 | 232 |
228 <div v-bind:class="'wvSerieslist__badge--' + study.color" | 233 <div v-bind:class="'wvSerieslist__badge--' + study.color" |
229 v-if="series[seriesIndex].numberOfFrames != 0">{{ series[seriesIndex].numberOfFrames }}</div> | 234 v-if="series[seriesIndex].numberOfFrames != 0">{{ series[seriesIndex].numberOfFrames }}</div> |
230 </div> | 235 </div> |
233 <div v-if="leftMode == 'full'" class="wvSerieslist__information" | 238 <div v-if="leftMode == 'full'" class="wvSerieslist__information" |
234 draggable="true" | 239 draggable="true" |
235 v-on:dragstart="SeriesDragStart($event, seriesIndex)" | 240 v-on:dragstart="SeriesDragStart($event, seriesIndex)" |
236 v-on:click="ClickSeries(seriesIndex)"> | 241 v-on:click="ClickSeries(seriesIndex)"> |
237 <p class="wvSerieslist__label"> | 242 <p class="wvSerieslist__label"> |
238 [{{ series[seriesIndex].tags['0008,0060'] }}] | 243 [{{ series[seriesIndex].tags[MODALITY] }}] |
239 {{ series[seriesIndex].tags['0008,103e'] }} | 244 {{ series[seriesIndex].tags[SERIES_DESCRIPTION] }} |
240 </p> | 245 </p> |
241 </div> | 246 </div> |
242 </li> | 247 </li> |
243 | 248 |
244 | 249 |
252 draggable="true"> | 257 draggable="true"> |
253 <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE" | 258 <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE" |
254 v-bind:src="sopInstanceUid in multiframeInstanceThumbnails ? multiframeInstanceThumbnails[sopInstanceUid] : series[seriesIndex].thumbnail" | 259 v-bind:src="sopInstanceUid in multiframeInstanceThumbnails ? multiframeInstanceThumbnails[sopInstanceUid] : series[seriesIndex].thumbnail" |
255 style="vertical-align:baseline" | 260 style="vertical-align:baseline" |
256 width="65px" height="65px" | 261 width="65px" height="65px" |
257 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']" | 262 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags[MODALITY] + '] ' + series[seriesIndex].tags[SERIES_DESCRIPTION]" |
258 /> | 263 /> |
259 | 264 |
260 <div v-bind:class="'wvSerieslist__badge--' + study.color"> | 265 <div v-bind:class="'wvSerieslist__badge--' + study.color"> |
261 {{ numberOfFrames }} | 266 {{ numberOfFrames }} |
262 </div> | 267 </div> |
265 <div v-if="leftMode == 'full'" class="wvSerieslist__information" | 270 <div v-if="leftMode == 'full'" class="wvSerieslist__information" |
266 draggable="true" | 271 draggable="true" |
267 v-on:dragstart="MultiframeInstanceDragStart($event, seriesIndex, sopInstanceUid)" | 272 v-on:dragstart="MultiframeInstanceDragStart($event, seriesIndex, sopInstanceUid)" |
268 v-on:click="MultiframeInstanceDragStart($event, seriesIndex, sopInstanceUid)"> | 273 v-on:click="MultiframeInstanceDragStart($event, seriesIndex, sopInstanceUid)"> |
269 <p class="wvSerieslist__label"> | 274 <p class="wvSerieslist__label"> |
270 [{{ series[seriesIndex].tags['0008,0060'] }}] | 275 [{{ series[seriesIndex].tags[MODALITY] }}] |
271 {{ series[seriesIndex].tags['0008,103e'] }} | 276 {{ series[seriesIndex].tags[SERIES_DESCRIPTION] }} |
272 </p> | 277 </p> |
273 </div> | 278 </div> |
274 </li> | 279 </li> |
275 | 280 |
276 </span> | 281 </span> |
599 oncontextmenu="return false"></canvas> | 604 oncontextmenu="return false"></canvas> |
600 | 605 |
601 <div v-show="showInfo"> | 606 <div v-show="showInfo"> |
602 <div class="wv-overlay"> | 607 <div class="wv-overlay"> |
603 <div v-if="'tags' in content.series" class="wv-overlay-topleft"> | 608 <div v-if="'tags' in content.series" class="wv-overlay-topleft"> |
604 {{ content.series.tags['0010,0010'] }}<br/> | 609 {{ content.series.tags[PATIENT_NAME] }}<br/> |
605 {{ content.series.tags['0010,0020'] }} | 610 {{ content.series.tags[PATIENT_ID] }} |
606 </div> | 611 </div> |
607 <div v-if="'tags' in content.series" class="wv-overlay-topright"> | 612 <div v-if="'tags' in content.series" class="wv-overlay-topright"> |
608 {{ content.series.tags['0008,1030'] }}<br/> | 613 {{ content.series.tags[STUDY_DESCRIPTION] }}<br/> |
609 {{ app.FormatDate(content.series.tags['0008,0020']) }}<br/> | 614 {{ app.FormatDate(content.series.tags[STUDY_DATE]) }}<br/> |
610 {{ content.series.tags['0020,0011'] }} | {{ content.series.tags['0008,103e'] }} | 615 {{ content.series.tags[SERIES_NUMBER] }} | {{ content.series.tags[SERIES_DESCRIPTION] }} |
611 </div> | 616 </div> |
612 <div class="wv-overlay-timeline-wrapper wvPrintExclude"> | 617 <div class="wv-overlay-timeline-wrapper wvPrintExclude"> |
613 <div style="text-align:left; padding:5px" v-show="numberOfFrames != 0"> | 618 <div style="text-align:left; padding:5px" v-show="numberOfFrames != 0"> |
614 <div style="width: 12em; padding: 1em;" v-show="cineControls"> | 619 <div style="width: 12em; padding: 1em;" v-show="cineControls"> |
615 <label> | 620 <label> |