Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/index.html @ 1703:76c590a62755
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%;"> |