Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/WebApplication/index.html @ 1703:76c590a62755

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start work on series with multiple multiframe instances
author Sebastien Jodogne <s.jodogne@gmail.com>
date Fri, 27 Nov 2020 16:36:43 +0100
parents b5a8bf32d969
children 902d13889ae4
comparison
equal deleted inserted replaced
1702:bc40b6450261 1703:76c590a62755
185 <small>{{ FormatDate(study.tags['0008,0020']) }}</small> 185 <small>{{ FormatDate(study.tags['0008,0020']) }}</small>
186 </div> 186 </div>
187 187
188 <div class="wvStudyIsland__main"> 188 <div class="wvStudyIsland__main">
189 <ul class="wvSerieslist"> 189 <ul class="wvSerieslist">
190 <li class="wvSerieslist__seriesItem" 190
191 v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" 191 <!-- Series without multiple multiframe instances -->
192 v-on:dragstart="SeriesDragStart($event, seriesIndex)" 192 <span v-for="seriesIndex in study.series">
193 v-on:click="ClickSeries(seriesIndex)" 193 <li class="wvSerieslist__seriesItem"
194 v-for="seriesIndex in study.series"> 194 v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }"
195 <div class="wvSerieslist__picture" style="z-index:0" 195 v-on:dragstart="SeriesDragStart($event, seriesIndex)"
196 draggable="true" 196 v-on:click="ClickSeries(seriesIndex)"
197 v-if="series[seriesIndex].type != stone.ThumbnailType.UNKNOWN" 197 v-if="series[seriesIndex].multiframeInstances === null">
198 > 198 <div class="wvSerieslist__picture" style="z-index:0"
199 <div v-if="series[seriesIndex].type == stone.ThumbnailType.LOADING"> 199 draggable="true"
200 <img src="img/loading.gif" 200 v-if="series[seriesIndex].type != stone.ThumbnailType.UNKNOWN"
201 style="vertical-align:baseline" 201 >
202 width="65px" height="65px" 202 <div v-if="series[seriesIndex].type == stone.ThumbnailType.LOADING">
203 /> 203 <img src="img/loading.gif"
204 style="vertical-align:baseline"
205 width="65px" height="65px"
206 />
207 </div>
208
209 <i v-if="series[seriesIndex].type == stone.ThumbnailType.PDF"
210 class="wvSerieslist__placeholderIcon fa fa-file-pdf"></i>
211
212 <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO"
213 class="wvSerieslist__placeholderIcon fa fa-video-video"></i>
214
215 <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)"
216 class="wvSerieslist__placeholderIcon"
217 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']">
218 <i v-if="series[seriesIndex].type == stone.ThumbnailType.NO_PREVIEW"
219 class="fa fa-eye-slash"></i>
220
221 <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE"
222 v-bind:src="series[seriesIndex].thumbnail"
223 style="vertical-align:baseline"
224 width="65px" height="65px"
225 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']"
226 />
227
228 <div v-bind:class="'wvSerieslist__badge--' + study.color"
229 v-if="series[seriesIndex].numberOfFrames != 0">{{ series[seriesIndex].numberOfFrames }}</div>
230 </div>
204 </div> 231 </div>
205 232
206 <i v-if="series[seriesIndex].type == stone.ThumbnailType.PDF" 233 <div v-if="leftMode == 'full'" class="wvSerieslist__information"
207 class="wvSerieslist__placeholderIcon fa fa-file-pdf"></i> 234 draggable="true"
208 235 v-on:dragstart="SeriesDragStart($event, seriesIndex)"
209 <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO" 236 v-on:click="ClickSeries(seriesIndex)">
210 class="wvSerieslist__placeholderIcon fa fa-video-video"></i> 237 <p class="wvSerieslist__label">
211 238 [{{ series[seriesIndex].tags['0008,0060'] }}]
212 239 {{ series[seriesIndex].tags['0008,103e'] }}
213 <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)" 240 </p>
214 class="wvSerieslist__placeholderIcon" 241 </div>
215 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']"> 242 </li>
216 <i v-if="series[seriesIndex].type == stone.ThumbnailType.NO_PREVIEW" 243
217 class="fa fa-eye-slash"></i> 244
218 245 <!-- Series with multiple multiframe instances (CINE) -->
246 <li class="wvSerieslist__seriesItem"
247 v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }"
248 v-on:dragstart="SeriesDragStart($event, seriesIndex)"
249 v-on:click="ClickSeries(seriesIndex)"
250 v-for="(numberOfFrames, sopInstanceUid) in series[seriesIndex].multiframeInstances">
251 <div class="wvSerieslist__picture" style="z-index:0"
252 draggable="true">
219 <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE" 253 <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE"
220 v-bind:src="series[seriesIndex].thumbnail" 254 v-bind:src="sopInstanceUid in multiframeInstanceThumbnails ? multiframeInstanceThumbnails[sopInstanceUid] : series[seriesIndex].thumbnail"
221 style="vertical-align:baseline" 255 style="vertical-align:baseline"
222 width="65px" height="65px" 256 width="65px" height="65px"
223 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']" 257 v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']"
224 /> 258 />
225 259
226 <div v-bind:class="'wvSerieslist__badge--' + study.color" 260 <div v-bind:class="'wvSerieslist__badge--' + study.color">
227 v-if="series[seriesIndex].numberOfFrames != 0">{{ series[seriesIndex].numberOfFrames }}</div> 261 {{ numberOfFrames }}
262 </div>
228 </div> 263 </div>
229 </div> 264
230 265 <div v-if="leftMode == 'full'" class="wvSerieslist__information"
231 <div v-if="leftMode == 'full'" class="wvSerieslist__information" 266 draggable="true"
232 draggable="true" 267 v-on:dragstart="SeriesDragStart($event, seriesIndex)"
233 v-on:dragstart="SeriesDragStart($event, seriesIndex)" 268 v-on:click="ClickSeries(seriesIndex)">
234 v-on:click="ClickSeries(seriesIndex)"> 269 <p class="wvSerieslist__label">
235 <p class="wvSerieslist__label"> 270 [{{ series[seriesIndex].tags['0008,0060'] }}]
236 [{{ series[seriesIndex].tags['0008,0060'] }}] 271 {{ series[seriesIndex].tags['0008,103e'] }}
237 {{ series[seriesIndex].tags['0008,103e'] }} 272 </p>
238 </p> 273 </div>
239 </div> 274 </li>
240 </li> 275
276 </span>
241 </ul> 277 </ul>
242 </div> 278 </div>
243 </div> 279 </div>
244 </div> 280 </div>
245 </div> 281 </div>
548 'wvSplitpane__cellBorder--red' : series.color == 'red', 584 'wvSplitpane__cellBorder--red' : series.color == 'red',
549 'wvSplitpane__cellBorder--green' : series.color == 'green', 585 'wvSplitpane__cellBorder--green' : series.color == 'green',
550 'wvSplitpane__cellBorder--yellow' : series.color == 'yellow', 586 'wvSplitpane__cellBorder--yellow' : series.color == 'yellow',
551 'wvSplitpane__cellBorder--violet' : series.color == 'violet' 587 'wvSplitpane__cellBorder--violet' : series.color == 'violet'
552 }" 588 }"
553 v-on:dragover="SeriesDragAccept($event)" 589 ondragover="event.preventDefault()"
554 v-on:drop="SeriesDragDrop($event)" 590 v-on:drop="DragDrop($event)"
555 style="width:100%;height:100%"> 591 style="width:100%;height:100%">
556 <div class="wvSplitpane__cell" 592 <div class="wvSplitpane__cell"
557 v-on:click="MakeActive()"> 593 v-on:click="MakeActive()">
558 <div v-show="status == 'ready'" 594 <div v-show="status == 'ready'"
559 style="position:absolute; left:0; top:0; width:100%; height:100%;"> 595 style="position:absolute; left:0; top:0; width:100%; height:100%;">