Split scan cards and scan list components
This commit is contained in:
Julian Stirling
parent
24e5749f50
commit
2fd3a8f696
2 changed files with 190 additions and 154 deletions
|
|
@ -0,0 +1,173 @@
|
||||||
|
<template>
|
||||||
|
<div class="uk-card">
|
||||||
|
<div class="uk-card-body">
|
||||||
|
<div class="uk-card-media-top">
|
||||||
|
<div
|
||||||
|
class="view-image uk-padding-remove uk-height-1-1"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
id="thumbnail-stitched-image"
|
||||||
|
class="thumbnail-fit"
|
||||||
|
:src="thumbnailPath(scanData.name)"
|
||||||
|
onerror="this.src='/titleiconpink.svg';"
|
||||||
|
@click="requestViewer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 class="uk-card-title" style="text-align: center;">{{ scanData.name }}</h3>
|
||||||
|
<div class="button-container">
|
||||||
|
<div class="uk-button-group" style="width:100%">
|
||||||
|
<action-button
|
||||||
|
class="uk-width-1-2"
|
||||||
|
thing="smart_scan"
|
||||||
|
action="download_zip"
|
||||||
|
submit-label="Download All"
|
||||||
|
:can-terminate="false"
|
||||||
|
:submit-data="{ scan_name: scanData.name }"
|
||||||
|
:button-primary="true"
|
||||||
|
@response="downloadZipFile"
|
||||||
|
@error="modalError"
|
||||||
|
/>
|
||||||
|
<EndpointButton
|
||||||
|
class="uk-width-1-2"
|
||||||
|
:buttonPrimary=true
|
||||||
|
:isDisabled=!scanData.stitch_available
|
||||||
|
:URL="downloadStitchFile( scanData.name )"
|
||||||
|
buttonLabel="Download JPEG"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-default uk-width-1-1"
|
||||||
|
@click="deleteScan(scanData.name)"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
<action-button
|
||||||
|
submit-label="Stitch Images"
|
||||||
|
thing="smart_scan"
|
||||||
|
action="stitch_scan"
|
||||||
|
v-if="scanData.can_stitch | (scanData.stitch_available & !scanData.dzi)"
|
||||||
|
:can-terminate="true"
|
||||||
|
:submit-data="{ scan_name: scanData.name }"
|
||||||
|
:button-primary="false"
|
||||||
|
:modal-progress="true"
|
||||||
|
@error="modalError"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
v-if="scanData.dzi" class="uk-button uk-button-default uk-width-1-1"
|
||||||
|
@click="requestViewer"
|
||||||
|
>
|
||||||
|
Show Stitched Scan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li>{{ scanData.number_of_images }} images</li>
|
||||||
|
<li>created: {{ formatDate(scanData.created) }}</li>
|
||||||
|
<li>modified: {{ formatDate(scanData.modified) }}</li>
|
||||||
|
</ul>
|
||||||
|
<li v-if="scanData.number_of_images<3" class="warning-msg">Not enough images to stitch</li>
|
||||||
|
<li v-else-if="!scanData.dzi & scanData.stitch_available" class="alert-msg">Interactive preview not available</li>
|
||||||
|
<li v-else-if=!scanData.stitch_available class="alert-msg">High quality stitch not available</li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
import actionButton from "../../labThingsComponents/actionButton.vue";
|
||||||
|
import EndpointButton from "../../labThingsComponents/endpointButton.vue";
|
||||||
|
|
||||||
|
// Export main app
|
||||||
|
export default {
|
||||||
|
name: "ScanCard",
|
||||||
|
components: { actionButton, EndpointButton },
|
||||||
|
|
||||||
|
props: {
|
||||||
|
scanData: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
scansUri: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
downloadStitchFile: function(name) {
|
||||||
|
return `${this.$store.getters.baseUri}/smart_scan/get_stitch/${name}`;
|
||||||
|
},
|
||||||
|
thumbnailPath(scan_name) {
|
||||||
|
return (
|
||||||
|
`${this.$store.getters.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=` +
|
||||||
|
scan_name
|
||||||
|
);
|
||||||
|
},
|
||||||
|
formatDate(timestamp) {
|
||||||
|
// Multiply by 1000 as JS uses ms not s
|
||||||
|
let d = new Date(timestamp*1000);
|
||||||
|
// Convert to a string in a very javascript way!
|
||||||
|
let yyyy = d.getFullYear();
|
||||||
|
let mm = d.getMonth() + 1;
|
||||||
|
let dd = d.getDate();
|
||||||
|
let HH = d
|
||||||
|
.getHours()
|
||||||
|
.toString()
|
||||||
|
.padStart(2, "0");
|
||||||
|
let MM = d
|
||||||
|
.getMinutes()
|
||||||
|
.toString()
|
||||||
|
.padStart(2, "0");
|
||||||
|
return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
|
||||||
|
},
|
||||||
|
requestViewer() {
|
||||||
|
// Notify parent that thumbnail was clicked
|
||||||
|
this.$emit('viewer-requested', this.scanData);
|
||||||
|
},
|
||||||
|
async deleteScan(name) {
|
||||||
|
try {
|
||||||
|
await this.modalConfirm(`Are you sure you want to delete ${name}?`);
|
||||||
|
await axios.delete(`${this.scansUri}/${name}`);
|
||||||
|
this.$emit('update-requested');
|
||||||
|
this.modalNotify(`Deleted ${name}`);
|
||||||
|
} catch (e) {
|
||||||
|
// if the confirmation was cancelled, it's rejected with null error
|
||||||
|
if (e) this.modalError(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async downloadZipFile(response) {
|
||||||
|
const scan_name = response.input.scan_name;
|
||||||
|
const filename = `${scan_name}_images.zip`;
|
||||||
|
const url = response.output.href;
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute("download", filename);
|
||||||
|
console.log(link);
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
ul {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
list-style-type:none;
|
||||||
|
margin: 5px 0px 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-msg {
|
||||||
|
color: red;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-msg{
|
||||||
|
color: orange;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -60,12 +60,12 @@
|
||||||
<span class="material-symbols-outlined">fullscreen</span>
|
<span class="material-symbols-outlined">fullscreen</span>
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div v-if="selectedScanDZIAvailable" id="viewer_container" style="height: 80%;">
|
<div v-if="selectedScanDZI" id="viewer_container" style="height: 80%;">
|
||||||
<OpenSeadragonViewer
|
<OpenSeadragonViewer
|
||||||
id="openseadragon"
|
id="openseadragon"
|
||||||
ref="openseadragon"
|
ref="openseadragon"
|
||||||
:src="selectedScanDZI"
|
:src="selectedScanDZI"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,97 +84,30 @@
|
||||||
There are no scans available to show.
|
There are no scans available to show.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div v-for="item in scans" :key="item.id">
|
<div v-for="scanData in scans" :key="scanData.id">
|
||||||
<div class="uk-card">
|
<scan-card
|
||||||
<div class="uk-card-body">
|
:scan-data="scanData"
|
||||||
<div class="uk-card-media-top">
|
:scans-uri="scansUri"
|
||||||
<div
|
@viewer-requested="showScan"
|
||||||
class="view-image uk-padding-remove uk-height-1-1"
|
@update-requested="updateScans"
|
||||||
>
|
/>
|
||||||
<img
|
|
||||||
id="thumbnail-stitched-image"
|
|
||||||
class="thumbnail-fit"
|
|
||||||
:src="thumbnailPath(item.name)"
|
|
||||||
onerror="this.src='/titleiconpink.svg';"
|
|
||||||
@click="showScan(item)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3 class="uk-card-title" style="text-align: center;">{{ item.name }}</h3>
|
|
||||||
<div class="button-container">
|
|
||||||
<div class="uk-button-group" style="width:100%">
|
|
||||||
<action-button
|
|
||||||
class="uk-width-1-2"
|
|
||||||
thing="smart_scan"
|
|
||||||
action="download_zip"
|
|
||||||
submit-label="Download All"
|
|
||||||
:can-terminate="false"
|
|
||||||
:submit-data="{ scan_name: item.name }"
|
|
||||||
:button-primary="true"
|
|
||||||
@response="downloadZipFile"
|
|
||||||
@error="modalError"
|
|
||||||
/>
|
|
||||||
<EndpointButton
|
|
||||||
class="uk-width-1-2"
|
|
||||||
:buttonPrimary=true
|
|
||||||
:isDisabled=!item.stitch_available
|
|
||||||
:URL="downloadStitchFile( item.name )"
|
|
||||||
buttonLabel="Download JPEG"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="uk-button uk-button-default uk-width-1-1"
|
|
||||||
@click="deleteScan(item.name)"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<action-button
|
|
||||||
submit-label="Stitch Images"
|
|
||||||
thing="smart_scan"
|
|
||||||
action="stitch_scan"
|
|
||||||
v-if="item.can_stitch | (item.stitch_available & !item.dzi)"
|
|
||||||
:can-terminate="true"
|
|
||||||
:submit-data="{ scan_name: item.name }"
|
|
||||||
:button-primary="false"
|
|
||||||
:modal-progress="true"
|
|
||||||
@error="modalError"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
v-if="item.dzi" class="uk-button uk-button-default uk-width-1-1"
|
|
||||||
@click="showScan(item)"
|
|
||||||
>
|
|
||||||
Show Stitched Scan
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ul>
|
|
||||||
<li>{{ item.number_of_images }} images</li>
|
|
||||||
<li>created: {{ formatDate(item.created) }}</li>
|
|
||||||
<li>modified: {{ formatDate(item.modified) }}</li>
|
|
||||||
</ul>
|
|
||||||
<li v-if="item.number_of_images<3" class="warning-msg">Not enough images to stitch</li>
|
|
||||||
<li v-else-if="!item.dzi & item.stitch_available" class="alert-msg">Interactive preview not available</li>
|
|
||||||
<li v-else-if=!item.stitch_available class="alert-msg">High quality stitch not available</li>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import UIkit from "uikit";
|
import UIkit from "uikit";
|
||||||
import actionButton from "../labThingsComponents/actionButton.vue";
|
import actionButton from "../labThingsComponents/actionButton.vue";
|
||||||
|
import scanCard from "./scanListComponents/scanCard.vue";
|
||||||
import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
|
import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
|
||||||
import EndpointButton from "../labThingsComponents/endpointButton.vue";
|
|
||||||
|
|
||||||
// Export main app
|
// Export main app
|
||||||
export default {
|
export default {
|
||||||
name: "ScanListContent",
|
name: "ScanListContent",
|
||||||
components: { actionButton, OpenSeadragonViewer, EndpointButton },
|
components: { actionButton, OpenSeadragonViewer, scanCard },
|
||||||
|
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -197,14 +130,11 @@ export default {
|
||||||
return this.scans.length == 0;
|
return this.scans.length == 0;
|
||||||
},
|
},
|
||||||
selectedScanDZI() {
|
selectedScanDZI() {
|
||||||
if (this.selectedScan && this.dzi!="") {
|
if (this.selectedScan && this.selectedScan.dzi!="") {
|
||||||
return `${this.$store.getters.baseUri}/scans/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
|
return `${this.$store.getters.baseUri}/scans/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
},
|
|
||||||
selectedScanDZIAvailable() {
|
|
||||||
return this.selectedScan && this.selectedScan.dzi;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -251,15 +181,6 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
downloadStitchFile: function(name) {
|
|
||||||
return `${this.$store.getters.baseUri}/smart_scan/get_stitch/${name}`;
|
|
||||||
},
|
|
||||||
thumbnailPath(scan_name) {
|
|
||||||
return (
|
|
||||||
`${this.$store.getters.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=` +
|
|
||||||
scan_name
|
|
||||||
);
|
|
||||||
},
|
|
||||||
visibilityChanged(isVisible) {
|
visibilityChanged(isVisible) {
|
||||||
if (isVisible) {
|
if (isVisible) {
|
||||||
this.updateScans();
|
this.updateScans();
|
||||||
|
|
@ -287,34 +208,6 @@ export default {
|
||||||
this.scans = [];
|
this.scans = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
formatDate(timestamp) {
|
|
||||||
// Multiply by 1000 as JS uses ms not s
|
|
||||||
let d = new Date(timestamp*1000);
|
|
||||||
// Convert to a string in a very javascript way!
|
|
||||||
let yyyy = d.getFullYear();
|
|
||||||
let mm = d.getMonth() + 1;
|
|
||||||
let dd = d.getDate();
|
|
||||||
let HH = d
|
|
||||||
.getHours()
|
|
||||||
.toString()
|
|
||||||
.padStart(2, "0");
|
|
||||||
let MM = d
|
|
||||||
.getMinutes()
|
|
||||||
.toString()
|
|
||||||
.padStart(2, "0");
|
|
||||||
return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
|
|
||||||
},
|
|
||||||
async deleteScan(name) {
|
|
||||||
try {
|
|
||||||
await this.modalConfirm(`Are you sure you want to delete ${name}?`);
|
|
||||||
await axios.delete(`${this.scansUri}/${name}`);
|
|
||||||
await this.updateScans();
|
|
||||||
this.modalNotify(`Deleted ${name}`);
|
|
||||||
} catch (e) {
|
|
||||||
// if the confirmation was cancelled, it's rejected with null error
|
|
||||||
if (e) this.modalError(e);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async deleteAllScans() {
|
async deleteAllScans() {
|
||||||
try {
|
try {
|
||||||
await this.modalConfirm(
|
await this.modalConfirm(
|
||||||
|
|
@ -329,17 +222,6 @@ export default {
|
||||||
if (e) this.modalError(e);
|
if (e) this.modalError(e);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async downloadZipFile(response) {
|
|
||||||
const scan_name = response.input.scan_name;
|
|
||||||
const filename = `${scan_name}_images.zip`;
|
|
||||||
const url = response.output.href;
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = url;
|
|
||||||
link.setAttribute("download", filename);
|
|
||||||
console.log(link);
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
},
|
|
||||||
showScan(scan) {
|
showScan(scan) {
|
||||||
if (scan.dzi){
|
if (scan.dzi){
|
||||||
this.selectedScan = scan;
|
this.selectedScan = scan;
|
||||||
|
|
@ -348,7 +230,7 @@ export default {
|
||||||
else {
|
else {
|
||||||
this.modalError(`Scan not stitched for viewing in webapp, please download or stitch`)
|
this.modalError(`Scan not stitched for viewing in webapp, please download or stitch`)
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -365,23 +247,4 @@ export default {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
list-style-type:none;
|
|
||||||
margin: 5px 0px 10px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning-msg {
|
|
||||||
color: red;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-msg{
|
|
||||||
color: orange;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue