297 lines
No EOL
8 KiB
Vue
297 lines
No EOL
8 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>
|
|
|
|
<!-- 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';"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h3 class="uk-card-title">{{ item.name }}</h3>
|
|
<action-button
|
|
thing="smart_scan"
|
|
action="create_zip_of_scan"
|
|
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"
|
|
:can-terminate="false"
|
|
:submit-data="{ scan_name: item.name }"
|
|
:button-primary="false"
|
|
:modal-progress="true"
|
|
@error="modalError"
|
|
/>
|
|
<ul>
|
|
<li>{{ item.number_of_images }} images</li>
|
|
<li>created {{ formatDate(item.created) }}</li>
|
|
<li>modified {{ formatDate(item.modified) }}</li>
|
|
</ul>
|
|
|
|
<div
|
|
class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-expand"
|
|
>
|
|
<time>{{ item.created }}</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import actionButton from "../labThingsComponents/actionButton.vue";
|
|
|
|
// Export main app
|
|
export default {
|
|
name: "ScanListContent",
|
|
components: { actionButton },
|
|
|
|
data: function() {
|
|
return {
|
|
scans: []
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
scansUri() {
|
|
return this.$store.getters["wot/thingPropertyUrl"](
|
|
"smart_scan",
|
|
"scans",
|
|
"readproperty",
|
|
true
|
|
);
|
|
},
|
|
scansEmpty() {
|
|
return this.scans.length == 0;
|
|
}
|
|
},
|
|
|
|
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();
|
|
}
|
|
},
|
|
async updateScans() {
|
|
try {
|
|
let scans = await this.readThingProperty("smart_scan", "scans");
|
|
if (!scans | (scans.length == 0)) {
|
|
this.scans = scans;
|
|
}
|
|
scans.forEach(scan => {
|
|
scan.modified = Date.parse(scan.modified);
|
|
scan.created = Date.parse(scan.created);
|
|
});
|
|
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) {
|
|
let d = new Date(timestamp);
|
|
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();
|
|
}
|
|
}
|
|
};
|
|
</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: auto;
|
|
}
|
|
|
|
.gallery-grid > div {
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/deep/ .capture-card {
|
|
width: 300px;
|
|
height: 100%; // Used to have all cards in a row match their heights
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}*/
|
|
</style> |