51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
<template>
|
|
<a-select style="width:100%" :value="value" v-on:change="$emit('input', $event)">
|
|
<a-select-option value="-:-1"><a-badge status="default" text="Blank" /></a-select-option>
|
|
<a-select-opt-group>
|
|
<span slot="label"><a-icon type="video-camera"/> Feed</span>
|
|
<a-select-option :value="'feed:' + source.id" v-for="source in feeds" :key="source.id" :title="feedTitle(source)">
|
|
<a-badge :status="mapState(source.state)" :text="source.name"/>
|
|
</a-select-option>
|
|
</a-select-opt-group>
|
|
<a-select-opt-group>
|
|
<span slot="label"><a-icon type="picture"/> Image</span>
|
|
<a-select-option :value="'image:' + image.id" v-for="image in images" :key="image.id" :title="imageTitle(image)">
|
|
{{ imageName(image) }}
|
|
</a-select-option>
|
|
</a-select-opt-group>
|
|
<a-select-opt-group>
|
|
<span slot="label">Others</span>
|
|
</a-select-opt-group>
|
|
</a-select>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SourceSelector',
|
|
props: ['value'],
|
|
computed: {
|
|
feeds () { return this.$store.state.feeds },
|
|
images () { return this.$store.state.images }
|
|
},
|
|
methods: {
|
|
mapState (state) {
|
|
var map = {
|
|
'STALLED': 'error',
|
|
'PENDING': 'warning',
|
|
'RUNNING': 'success'
|
|
}
|
|
return map[state] || 'error'
|
|
},
|
|
feedTitle (feed) {
|
|
return `[${feed.state}] ${feed.name} (${feed.width}x${feed.height})`
|
|
},
|
|
imageName (image) {
|
|
return image.name || image.source
|
|
},
|
|
imageTitle (image) {
|
|
return `${image.name} (${image.source}) ${image.width}x${image.height}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|