384 lines
No EOL
11 KiB
Vue
384 lines
No EOL
11 KiB
Vue
<template>
|
|
<div
|
|
v-observe-visibility="visibilityChanged"
|
|
class="galleryDisplay uk-padding uk-padding-remove-top">
|
|
<!-- Gallery nav bar -->
|
|
<nav
|
|
class="gallery-navbar uk-navbar-container uk-navbar-transparent"
|
|
uk-navbar="mode: click"
|
|
>
|
|
<!-- Right side buttons -->
|
|
<div class="uk-navbar-right">
|
|
<div class="uk-grid">
|
|
<div>
|
|
<button
|
|
class="uk-button uk-button-default uk-width-1-1"
|
|
style="margin-top:5px;margin-bottom: 2px"
|
|
type="button"
|
|
@click="deleteAllScans()"
|
|
>
|
|
Delete All Scans
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
class="uk-button uk-button-default uk-width-1-1"
|
|
style="margin-top:5px;margin-bottom: 2px"
|
|
type="button"
|
|
@click="updateScans()"
|
|
>
|
|
Refresh Scans
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Modal for scan display -->
|
|
<div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body " v-if="selectedScan" style="padding: 10px; width: 95%; height: 95%;">
|
|
<h2 class="uk-modal-title">
|
|
{{ selectedScan.name }}
|
|
<button class="uk-modal-close uk-float-right" type="button"><span class="material-symbols-outlined">close</span></button>
|
|
<button class="uk-float-right" type="button" @click="goFullscreen">
|
|
<span class="material-symbols-outlined">fullscreen</span>
|
|
</button>
|
|
</h2>
|
|
<div v-if="selectedScanDZIAvailable" id="viewer_container" style="height: 80%;">
|
|
<OpenSeadragonViewer
|
|
id="openseadragon"
|
|
ref="openseadragon"
|
|
:src="selectedScanDZI"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gallery -->
|
|
<div
|
|
v-if="$store.getters.ready"
|
|
class="uk-padding-remove-top"
|
|
uk-lightbox="toggle: .lightbox-link"
|
|
>
|
|
<!-- Gallery capture cards -->
|
|
<div class="gallery-grid uk-grid-match" uk-grid>
|
|
<div v-if="scansEmpty">
|
|
<h2>No scans available</h2>
|
|
<p>
|
|
There are no scans available to show.
|
|
</p>
|
|
</div>
|
|
<div v-for="item in scans" :key="item.id">
|
|
<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(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">
|
|
<action-button
|
|
thing="smart_scan"
|
|
action="download_zip"
|
|
submit-label="Download ZIP"
|
|
:can-terminate="false"
|
|
:submit-data="{ scan_name: item.name }"
|
|
:button-primary="true"
|
|
@response="downloadZipFile"
|
|
@error="modalError"
|
|
/>
|
|
<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.dzi"
|
|
:can-terminate="false"
|
|
: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>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import UIkit from "uikit";
|
|
import actionButton from "../labThingsComponents/actionButton.vue";
|
|
import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
|
|
|
|
// Export main app
|
|
export default {
|
|
name: "ScanListContent",
|
|
components: { actionButton, OpenSeadragonViewer },
|
|
|
|
data: function() {
|
|
return {
|
|
scans: [],
|
|
selectedScan: null,
|
|
osdViewer: null
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
scansUri() {
|
|
return this.$store.getters["wot/thingPropertyUrl"](
|
|
"smart_scan",
|
|
"scans",
|
|
"readproperty",
|
|
true
|
|
);
|
|
},
|
|
scansEmpty() {
|
|
return this.scans.length == 0;
|
|
},
|
|
selectedScanDZI() {
|
|
if (this.selectedScan && this.dzi!="") {
|
|
return `${this.$store.getters.baseUri}/scans/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
selectedScanDZIAvailable() {
|
|
return this.selectedScan && this.selectedScan.dzi;
|
|
}
|
|
},
|
|
|
|
async mounted() {
|
|
// Update on mount (does nothing if not connected)
|
|
await this.updateScans();
|
|
// A global signal listener to perform a gallery refresh
|
|
this.$root.$on("globalUpdateScans", () => {
|
|
this.updateScans();
|
|
});
|
|
},
|
|
|
|
created: function() {
|
|
// Watch for host 'ready', then update status
|
|
this.unwatchStoreFunction = this.$store.watch(
|
|
(state, getters) => {
|
|
return getters.ready;
|
|
},
|
|
ready => {
|
|
if (ready) {
|
|
// If the connection is now ready, update capture list
|
|
this.updateScans();
|
|
} else {
|
|
// If the connection is now disconnected, empty capture list
|
|
this.captures = {};
|
|
}
|
|
}
|
|
);
|
|
},
|
|
|
|
beforeDestroy() {
|
|
// Remove global signal listener to perform a gallery refresh
|
|
this.$root.$off("globalUpdateScans");
|
|
// Then we call that function here to unwatch
|
|
if (this.unwatchStoreFunction) {
|
|
this.unwatchStoreFunction();
|
|
this.unwatchStoreFunction = null;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
thumbnailPath(scan_name) {
|
|
return (
|
|
`${this.$store.getters.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=` +
|
|
scan_name
|
|
);
|
|
},
|
|
visibilityChanged(isVisible) {
|
|
if (isVisible) {
|
|
this.updateScans();
|
|
}
|
|
},
|
|
goFullscreen() {
|
|
this.$refs.openseadragon.openFullscreen();
|
|
},
|
|
async updateScans() {
|
|
try {
|
|
let scans = await this.readThingProperty("smart_scan", "scans");
|
|
if (!scans | (scans.length == 0)) {
|
|
this.scans = scans;
|
|
}
|
|
scans.forEach(scan => {
|
|
scan.can_stitch = !scan.stitch_available && scan.number_of_images > 3;
|
|
});
|
|
scans.sort((a, b) => {
|
|
return b.modified - a.modified;
|
|
});
|
|
this.scans = scans;
|
|
} catch (err) {
|
|
console.error("Failed to refresh scans");
|
|
console.error(err);
|
|
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() {
|
|
try {
|
|
await this.modalConfirm(
|
|
"Are you sure you want to delete all scans from the microscope? " +
|
|
"This is <b>irreversible</b>!"
|
|
);
|
|
await axios.delete(`${this.scansUri}`);
|
|
await this.updateScans();
|
|
this.modalNotify("Deleted all scans.");
|
|
} 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();
|
|
},
|
|
showScan(scan) {
|
|
if (scan.dzi){
|
|
this.selectedScan = scan;
|
|
UIkit.modal(this.$refs.scanModal).show();
|
|
}
|
|
else {
|
|
this.modalError(`Scan not stitched for viewing in webapp, please download or stitch`)
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.gallery-navbar {
|
|
border-width: 0 0 1px 0;
|
|
border-style: solid;
|
|
border-color: rgba(180, 180, 180, 0.25);
|
|
}
|
|
|
|
.gallery-navbar,
|
|
.gallery-folder-heading {
|
|
margin-bottom: 30px;
|
|
}
|
|
/*
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 320px);
|
|
justify-content: center;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.gallery-grid > div {
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#openseadragon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#info-panel {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
padding: 5px;
|
|
border-radius: 1px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/deep/ .capture-card {
|
|
width: 300px;
|
|
height: 100%; // Used to have all cards in a row match their heights
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}*/
|
|
|
|
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> |