[htdocs] List outputs in web interface and support device verification

htdocs/js/forked-daapd.js

@@ -5,6 +5,8 @@ var app = new Vue({
   data: {
     config: {},
     library: {},
+    outputs: [],
+    verification_req: { pin: '' },
     spotify: {},
     pairing: {},
     pairing_req: { pin: '' },
@@ -16,6 +18,7 @@ var app = new Vue({
   created: function () {
     this.loadConfig();
     this.loadLibrary();
+    this.loadOutputs();
     this.loadSpotify();
     this.loadPairing();
     this.loadLastfm();
@@ -32,6 +35,10 @@ var app = new Vue({
       axios.get('/api/library').then(response => this.library = response.data);
     },
 
+    loadOutputs: function() {
+      axios.get('/api/outputs').then(response => this.outputs = response.data.outputs);
+    },
+
     loadSpotify: function() {
       axios.get('/api/spotify').then(response => this.spotify = response.data);
     },
@@ -58,6 +65,28 @@ var app = new Vue({
       });
     },
 
+    kickoffVerification: function() {
+      axios.post('/api/verification', this.verification_req).then(response => {
+        console.log('Kicked off verification');
+        this.verification_req.pin = '';
+      });
+    },
+
+    selectOutputs: function() {
+      var selected_outputs = [];
+      for (var i = 0; i < this.outputs.length; i++) {
+        if (this.outputs[i].selected) {
+          selected_outputs.push(this.outputs[i].id);
+        }
+      }
+
+      axios.post('/api/select-outputs', { outputs: selected_outputs }).then(response => {
+        if (!this.config.websocket_port) {
+          this.loadOutputs();
+        }
+      });
+    },
+
     loginLibspotify: function() {
       axios.post('/api/spotify-login', this.libspotify).then(response => {
         this.libspotify.user = '';
@@ -104,7 +133,7 @@ var app = new Vue({
       var socket = new WebSocket('ws://' + document.domain + ':' + this.config.websocket_port, 'notify');
       const vm = this;
       socket.onopen = function() {
-          socket.send(JSON.stringify({ notify: ['update', 'pairing', 'spotify', 'lastfm']}));
+          socket.send(JSON.stringify({ notify: ['update', 'pairing', 'spotify', 'lastfm', 'outputs']}));
           socket.onmessage = function(response) {
               console.log(response.data); // upon message
               var data = JSON.parse(response.data);
@@ -120,6 +149,9 @@ var app = new Vue({
               if (data.notify.includes('lastfm')) {
                 vm.loadLastfm();
               }
+              if (data.notify.includes('outputs')) {
+                vm.loadOutputs();
+              }
           };
       };
     }