Mercurial > hg > orthanc-stone
diff 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 |
line wrap: on
line diff
--- a/Applications/StoneWebViewer/WebApplication/index.html Fri Nov 27 13:57:28 2020 +0100 +++ b/Applications/StoneWebViewer/WebApplication/index.html Fri Nov 27 16:36:43 2020 +0100 @@ -187,57 +187,93 @@ <div class="wvStudyIsland__main"> <ul class="wvSerieslist"> - <li class="wvSerieslist__seriesItem" - v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" - v-on:dragstart="SeriesDragStart($event, seriesIndex)" - v-on:click="ClickSeries(seriesIndex)" - v-for="seriesIndex in study.series"> - <div class="wvSerieslist__picture" style="z-index:0" - draggable="true" - v-if="series[seriesIndex].type != stone.ThumbnailType.UNKNOWN" - > - <div v-if="series[seriesIndex].type == stone.ThumbnailType.LOADING"> - <img src="img/loading.gif" - style="vertical-align:baseline" - width="65px" height="65px" - /> + + <!-- Series without multiple multiframe instances --> + <span v-for="seriesIndex in study.series"> + <li class="wvSerieslist__seriesItem" + v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" + v-on:dragstart="SeriesDragStart($event, seriesIndex)" + v-on:click="ClickSeries(seriesIndex)" + v-if="series[seriesIndex].multiframeInstances === null"> + <div class="wvSerieslist__picture" style="z-index:0" + draggable="true" + v-if="series[seriesIndex].type != stone.ThumbnailType.UNKNOWN" + > + <div v-if="series[seriesIndex].type == stone.ThumbnailType.LOADING"> + <img src="img/loading.gif" + style="vertical-align:baseline" + width="65px" height="65px" + /> + </div> + + <i v-if="series[seriesIndex].type == stone.ThumbnailType.PDF" + class="wvSerieslist__placeholderIcon fa fa-file-pdf"></i> + + <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO" + class="wvSerieslist__placeholderIcon fa fa-video-video"></i> + + <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)" + class="wvSerieslist__placeholderIcon" + v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']"> + <i v-if="series[seriesIndex].type == stone.ThumbnailType.NO_PREVIEW" + class="fa fa-eye-slash"></i> + + <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE" + v-bind:src="series[seriesIndex].thumbnail" + style="vertical-align:baseline" + width="65px" height="65px" + v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']" + /> + + <div v-bind:class="'wvSerieslist__badge--' + study.color" + v-if="series[seriesIndex].numberOfFrames != 0">{{ series[seriesIndex].numberOfFrames }}</div> + </div> </div> - <i v-if="series[seriesIndex].type == stone.ThumbnailType.PDF" - class="wvSerieslist__placeholderIcon fa fa-file-pdf"></i> - - <i v-if="series[seriesIndex].type == stone.ThumbnailType.VIDEO" - class="wvSerieslist__placeholderIcon fa fa-video-video"></i> + <div v-if="leftMode == 'full'" class="wvSerieslist__information" + draggable="true" + v-on:dragstart="SeriesDragStart($event, seriesIndex)" + v-on:click="ClickSeries(seriesIndex)"> + <p class="wvSerieslist__label"> + [{{ series[seriesIndex].tags['0008,0060'] }}] + {{ series[seriesIndex].tags['0008,103e'] }} + </p> + </div> + </li> - - <div v-if="[stone.ThumbnailType.IMAGE, stone.ThumbnailType.NO_PREVIEW].includes(series[seriesIndex].type)" - class="wvSerieslist__placeholderIcon" - v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']"> - <i v-if="series[seriesIndex].type == stone.ThumbnailType.NO_PREVIEW" - class="fa fa-eye-slash"></i> + <!-- Series with multiple multiframe instances (CINE) --> + <li class="wvSerieslist__seriesItem" + v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" + v-on:dragstart="SeriesDragStart($event, seriesIndex)" + v-on:click="ClickSeries(seriesIndex)" + v-for="(numberOfFrames, sopInstanceUid) in series[seriesIndex].multiframeInstances"> + <div class="wvSerieslist__picture" style="z-index:0" + draggable="true"> <img v-if="series[seriesIndex].type == stone.ThumbnailType.IMAGE" - v-bind:src="series[seriesIndex].thumbnail" + v-bind:src="sopInstanceUid in multiframeInstanceThumbnails ? multiframeInstanceThumbnails[sopInstanceUid] : series[seriesIndex].thumbnail" style="vertical-align:baseline" width="65px" height="65px" v-bind:title="leftMode == 'full' ? null : '[' + series[seriesIndex].tags['0008,0060'] + '] ' + series[seriesIndex].tags['0008,103e']" /> - <div v-bind:class="'wvSerieslist__badge--' + study.color" - v-if="series[seriesIndex].numberOfFrames != 0">{{ series[seriesIndex].numberOfFrames }}</div> + <div v-bind:class="'wvSerieslist__badge--' + study.color"> + {{ numberOfFrames }} + </div> </div> - </div> - <div v-if="leftMode == 'full'" class="wvSerieslist__information" - draggable="true" - v-on:dragstart="SeriesDragStart($event, seriesIndex)" - v-on:click="ClickSeries(seriesIndex)"> - <p class="wvSerieslist__label"> - [{{ series[seriesIndex].tags['0008,0060'] }}] - {{ series[seriesIndex].tags['0008,103e'] }} - </p> - </div> - </li> + <div v-if="leftMode == 'full'" class="wvSerieslist__information" + draggable="true" + v-on:dragstart="SeriesDragStart($event, seriesIndex)" + v-on:click="ClickSeries(seriesIndex)"> + <p class="wvSerieslist__label"> + [{{ series[seriesIndex].tags['0008,0060'] }}] + {{ series[seriesIndex].tags['0008,103e'] }} + </p> + </div> + </li> + + </span> </ul> </div> </div> @@ -550,8 +586,8 @@ 'wvSplitpane__cellBorder--yellow' : series.color == 'yellow', 'wvSplitpane__cellBorder--violet' : series.color == 'violet' }" - v-on:dragover="SeriesDragAccept($event)" - v-on:drop="SeriesDragDrop($event)" + ondragover="event.preventDefault()" + v-on:drop="DragDrop($event)" style="width:100%;height:100%"> <div class="wvSplitpane__cell" v-on:click="MakeActive()">