From 24782f5d4573921103ba6d214d9e49d77a5e0bd7 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sun, 29 Oct 2017 09:12:57 +0100
Subject: [PATCH] [htdocs] List outputs in web interface and support device
 verification

---
 htdocs/admin.html         | 32 ++++++++++++++++++++++++++++++++
 htdocs/js/forked-daapd.js | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/htdocs/admin.html b/htdocs/admin.html
index 75403f52..8693068b 100644
--- a/htdocs/admin.html
+++ b/htdocs/admin.html
@@ -122,6 +122,38 @@
       </div>
     </div>
 
+    <!-- Outputs -->
+    <div class="columns is-centered fd-section-content">
+      <div class="column is-3">
+        <h2 class="title is-5">
+          <span class="icon"><i class="fa fa-volume-up"></i></span>
+           Outputs
+         </h2>
+      </div>
+
+      <div class="column is-7 content">
+        <div v-for="output in outputs">
+          <div class="field">
+            <div class="control">
+              <label class="checkbox">
+                <input type="checkbox" v-model="output.selected" v-on:change="selectOutputs"> {{ output.name }}
+              </label>
+            </div>
+          </div>
+          <form v-on:submit.prevent="kickoffVerification" style="margin-bottom:24px;" v-show="output.needs_auth_key">
+            <div class="field has-addons">
+              <div class="control">
+                <input class="input" type="text" placeholder="Enter verification code" v-model="verification_req.pin">
+              </div>
+              <div class="control">
+                <button class="button is-primary" type="submit">Send</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
   </div>
 </section>
 
diff --git a/htdocs/js/forked-daapd.js b/htdocs/js/forked-daapd.js
index e472664d..3003ea00 100644
--- a/htdocs/js/forked-daapd.js
+++ b/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();
+              }
           };
       };
     }