More interactivity!

src/components/Frame.vue

@@ -1,9 +1,9 @@
 <template>
 <a-card :title="frameName">
-  <a-switch slot="extra" v-model="frame.active" />
+  <a-switch slot="extra" v-model="frame.active" @change="setFrameActive([scene.id, frame.id, $event])" />
   <a-row type="flex" justify="center" align="top" style="height: 200px">
     <div style="float:left;height: 100%;">
-      <a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.front.alpha"/>
+      <a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.front.alpha" @change="setFrameAlpha([scene.id, frame.id, 'front', $event])" />
     </div>
     <div style="float:left;height: 100%;flex-grow:1">
       <a-radio-group defaultValue="a" size="small">
@@ -12,17 +12,19 @@
       </a-radio-group>
     </div>
     <div style="float:left;height: 100%;">
-      <a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.back.alpha" />
+      <a-slider vertical :min="0" :max="1.0" :step="0.01" v-model="frame.back.alpha" @change="setFrameAlpha([scene.id, frame.id, 'back', $event])" />
     </div>
   </a-row>
   <a-tabs defaultActiveKey="1" size="small" :tabBarGutter="1" slot="actions">
     <a-tab-pane tab="Source" key="1">
       <a-row :gutter=4>
         <a-col :span=12>
-          <SourceSelector v-model="frame.front.source"/>
+          <SourceSelector v-model="frame.front.source"
+            @input="setFrameSource([scene.id, frame.id, 'front', $event])" />
         </a-col>
         <a-col :span=12>
-          <SourceSelector v-model="frame.back.source" />
+          <SourceSelector v-model="frame.back.source"
+            @input="setFrameSource([scene.id, frame.id, 'back', $event])" />
         </a-col>
       </a-row>
     </a-tab-pane>
@@ -31,11 +33,13 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+
 import SourceSelector from './SourceSelector.vue'
 
 export default {
   name: 'Frame',
-  props: ['frame', 'sources'],
+  props: ['frame', 'scene', 'sources'],
   components: {
     SourceSelector
   },
@@ -48,6 +52,13 @@ export default {
     frameName () {
       return this.frame.name || ('Frame ' + this.frame.id)
     }
+  },
+  methods: {
+    ...mapActions([
+      'setFrameActive',
+      'setFrameAlpha',
+      'setFrameSource'
+      ])
   }
 }
 </script>

src/components/SceneView.vue

@@ -37,7 +37,7 @@ export default {
 }
 </script>
 <style scoped>
-.ant-row >>> div {
+.ant-row > div {
   max-width:300px;
 }
 

src/components/SourceSelector.vue

@@ -3,14 +3,14 @@
     <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">
-        <a-badge :status="mapState(source.state)" :text="source.name" />
+      <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">
-        {{ image.source }}
+      <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>
@@ -35,6 +35,15 @@ export default {
         '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}`
     }
   }
 }

src/store.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import axios from 'axios'
 
 import io from 'socket.io-client'
 
@@ -8,11 +7,6 @@ Vue.use(Vuex)
 
 const API_HOST = '10.8.0.95'
 
-const api = axios.create({
-  baseURL: 'http://' + API_HOST + ':5000/api/1',
-  timeout: 1000
-})
-
 export default new Vuex.Store({
   state: {
     feeds: {},
@@ -66,31 +60,27 @@ export default new Vuex.Store({
     setFrameAlpha ({ commit }, [sceneId, frameId, side, alpha]) {
       console.info('Setting alpha for', frameId, alpha)
       this.state.scenes[sceneId].frames[frameId][side].alpha = alpha
-      return api.patch('/scenes/' + sceneId + '/' + frameId, {
-        [side]: {
-          'alpha': alpha
-        }
+      this.socket.emit('frame_mod', {
+        'scene_id': sceneId, 'frame_id': frameId, [side]: {'alpha': alpha}
       })
     },
     setFrameSource ({ commit }, [sceneId, frameId, side, source]) {
-      return api.patch('/scenes/' + sceneId + '/' + frameId, {
-        [side]: {
-          'source': source
-        }
+      this.state.scenes[sceneId].frames[frameId][side]['source'] = source
+      this.socket.emit('frame_mod', {
+        'scene_id': sceneId, 'frame_id': frameId, [side]: {'source': source}
       })
     },
     setFrameActive ({ commit }, [sceneId, frameId, active]) {
-      return api.patch('/scenes/' + sceneId + '/' + frameId, {
-        'active': active
+      this.state.scenes[sceneId].frames[frameId]['active'] = active
+      this.socket.emit('frame_mod', {
+        'scene_id': sceneId, 'frame_id': frameId, 'active': active
       })
     },
     sceneFade ({ commit }, scene) {
       this.socket.emit('scene_fade', { id: scene.id })
-      console.info('Fading', scene)
     },
     sceneCut ({ commit }, scene) {
       this.socket.emit('scene_cut', { id: scene.id })
-      console.info('Cutting', scene)
     }
   }
 })