93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
<template>
|
|
<div class="captureCard uk-card uk-card-primary uk-card-hover uk-padding-remove uk-width-medium uk-margin-right">
|
|
|
|
<div class="uk-card-media-top">
|
|
|
|
<a href="#" >
|
|
<img class="uk-width-1-1" v-bind:data-src="thumbnail" v-bind:alt="metadata.scan_id" width="300" height="225" v-on:click="$root.$emit('globalUpdateCaptureFolder', metadata.custom.scan_id)" uk-img>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="uk-card-body uk-padding-small">
|
|
<div class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right" uk-grid>
|
|
<div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>Scan:</b> {{ metadata.custom.basename }}</div>
|
|
</div>
|
|
|
|
<div class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-expand"><time>{{ betterTimestring }}</time></div>
|
|
<div class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-auto">
|
|
<a v-bind:href="metadataModalTarget" uk-toggle>More...</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="uk-card-footer uk-padding-small">
|
|
<span v-for="tag in metadata.tags" :key="tag" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
|
|
</div>
|
|
|
|
<div v-bind:id="metadataModalID" uk-modal>
|
|
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<h2 class="uk-modal-title">{{ metadata.basename }}</h2>
|
|
<p><b>Time: </b>{{ betterTimestring }}</p>
|
|
<p><b>Scan ID: </b>{{ metadata.custom.scan_id }}</p>
|
|
|
|
<div v-for="(value, key) in metadata.custom" :key="key" >
|
|
<p><b>{{ key }}: </b>{{ value }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
// Export main app
|
|
export default {
|
|
name: 'captureCard',
|
|
|
|
props: {
|
|
metadata: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
thumbnail: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
makeModalName: function(prefix) {
|
|
return prefix + this.metadata.id
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
tagModalID: function () {
|
|
return this.makeModalName("tag-modal-")
|
|
},
|
|
tagModalTarget: function () {
|
|
return "#" + this.tagModalID
|
|
},
|
|
metadataModalID: function () {
|
|
return this.makeModalName("metadata-modal-")
|
|
},
|
|
metadataModalTarget: function () {
|
|
return "#" + this.metadataModalID
|
|
},
|
|
betterTimestring: function () {
|
|
var dtSplit = this.metadata.custom.time.split("_");
|
|
var date = dtSplit[0]
|
|
var time = dtSplit[1].replace(/-/g, ":")
|
|
return date + " " + time
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|